INSTA PRO. Адаптация сайта под мобильные устройства.

Автор Nadezhda Belousova
INSTA PRO. Адаптация сайта под мобильные устройства.

а после того как мы подготовили наш одностраничный сайт Desktop версия давай пока версия.

Теперь нужно подготовить сайт в приема мобильного трафика и. Давайте таким образом. А у нас производится адаптации вообще в целом как будет отображаться наш посадочная страница на мобильных устройствах вот здесь.

Сверху над колонкой такое с виджетами.

У нас есть четыре кошки персональный компьютер ноутбук планшет и мобильные устройства кликнув на каждую из них мы будем понимать. Каким образом отображаться у нас наш мобильный, а точнее наш сайт на каждом устройстве для нас приоритет мобильном устройстве. Если вы кликните на иконку с мобильным, что наш сайт. Без адаптации будет. Ну в принципе достаточно корректно и ужасно отображаться на мобильных устройствах наших клиентов поэтому первоочередная задача сейчас заключается в чём адаптировать нашу посадку под мобильный трафик это. Чего стоит начать — это обратить внимание на в целом на минимум на строку с синим значит в данном случае использовалась строка сменил на сайте. Какие ранее говорил на сайт достаточно простое и в принципе здесь была бы наверное не совсем логично использует. Астру кустовую — это дополнительный гигабайт. Занимает место и в принципе у нас сайт не такой большой и широкий не обладает дополнительными страницами для того чтобы использовать навигацию для десктоп версии можем в целом оставить данные данные Block он там не помешает он не занимает много версия много места точнее. Но для мобильного нам даны блок он совсем не пригодится поэтому мы можем его просто скрыть сделать так чтобы он не мешался. Каким образом мы называем на блок настройка секция выбираем отображение на телефонах и открываем на мобильных телефонов ставим галочку на планшетах мы делаем абсолютно аналогичная настройки вот таким вот образом больше нам дано блок никаких. Да никак не мешает. Дальняя следующим шагом, что мы делаем нам нужно адаптировать данный блок. Под мобильные устройства сделать так чтобы всё отображался максимальная торрент потому, что мы сделаем здесь мы просто добавим новый блок вынесем его за основной блок. И начнём потихоньку адаптировать. Каким образом выделяем. Наш первый блок который состоит из текста заголовка и вот нажимаю на два квадратика нажимаешь кнопочку дублировать мы продублировали вкладку дали переносим данную вкладку которую данный блок в блок который создали ранее и вот у нас получилось такое расположение по центру, что мы здесь делаем. Здесь нам нужно сделать так чтобы текст отображался поэтому мы клики мы летим на гаечный ключик переходим в тексте отображение на мобильных устройствах оставляем галочку выровнять пакета апполо текст и мешаем размер шрифта на предположим до 70 далее мы берём второй блок с текстом и проделываем аналогичную аналогичное движение также внутрикомнатные переходим в секцию отображение телефону и здесь уменьшаем размер нашего текста он до того момента как посчитаете будет отображаться корректно и в принципе не портить общего бросать. Давай составим 60 нужно поставить 70 давайте сделаем что-то есть вот таким вот образом нас будет встречать первая фраза нашего сайта следующем отделом, что мы делаем мы копируем мы копируем в наш разделитель. В принципе неплохо вписался точнее моего дублируем он неплохо вписался в структуру нашего сайта поэтому. Давайте мы его тоже оставим до ли у нас идёт изображение его motostudy.ru им дублируем и приносим блок который. Мы создали ранее здесь мы можем сразу же произвести нужно корректировки и предположим изменить размер изображения давайте сделаем например 44 поставим 44% размера нашего изображения в принципе достаточно неплохо смотрится так следующему. Так у нас идёт идёт форма её. Нам тоже необходимо продублировать вот таким вот образом мы также дублированные передвигаем. Лид форму в нужное место здесь текст. Нам бы тоже не помешало изменить в размере чтобы он не смотрел слишком громкий за 70 формул оставляем в том же виде как она была и остальное текстом также уменьшаем до 70 в принципе уже отображается достаточно неплохо, но он остался один из последних элементов. Это счётчик ещё там тоже нужно привезти в нужный вид поэтому также дублирует передвигаем наверх туда мы заходим в настройки и кликаем размер счётчика маленький нам нужно чтобы счётчик отображался максимально максимальный максимальные мелком размере и для того чтобы он нам нужно вынести из группы и формы вот таким простым движением просто чуть-чуть его перетягиванию теперь давайте посмотрим. Каким образом у нас будет отображать данный блок данная секция после адаптации в принципе отображение достаточно неплохое для того чтобы сейчас нам не испортить картинку мы сделаем проще встречу блок который нам не нужен не нужен при отображении на мобильном устройстве переходим куда нажимаем на капельку приходим блок отображения на мобильных устройствах и третьим удалось скрывать на телефонах скрывать на планшетах данный. Блок Мы тоже немножко корректируем настройки и скрываемый на ноутбуках и также скрывал на широких экранах на персональных компьютерах здесь мы можем у меня он мне потребуется такой большой. Даня колонки здесь нас тоже что-то было скрыто давайте мы там до конца — это строим на мобильных устройствах тоже скрыто хорошо и данный блок доносятся. Нам тоже нужно привезти в нужный вид поэтому мы выделяем секцию по аналогичной схеме нажимаем переходим в отображении на телефонах и уменьшаем размер ношу текста. Ну например в принципе неплохо. Ну давайте сделаем ещё поменьше до 40% и здесь. Аналогично мы переходим отображение телефон.

0 комментариев
0

Читайте также