Landing Page - Мобильные виды
В этом видео мы поговорим с вами о том, как настраивать мобильные виды. Мобильные виды - очень важный элемент каждого лендинг пейджа. В нашем редакторе при выборе готового шаблона мобильные виды уже настроены. Сегодня я покажу вам, как самостоятельно настроить мобильные виды для лендинг пейджа, если вы создаете его с пустого экрана. Итак, чтобы добавить мобильный вид достаточно нажать соответствующую кнопку вверху вашего редактора и выбрать соответствующий вид. Мы сегодня рассмотрим версию для мобильных телефонов.
В этом случае лендинг пейдж будет открываться во всех браузерах на экранах шириной меньше 700 пикселей. Под эту ширину попадают большинство современных смартфонов. Помогают редактированию лендинг пейджей в мобильных видах секции. Для этого стоит добавлять необходимое количество секций на лендинг пейдж вместо того, чтобы удлинять одну и ту же секцию. Итак, начнем мы, например, с добавлением лого на наш лендинг пейдж. Оно будет находиться в первой секции.
Для того чтобы добавить лого мы выбираем виджет «Изображение», выбираем нужное нам изображение. В данном случае лого прозрачное, поэтому нам необходимо задать фон данной секции. И уменьшим секцию в соответствии с размерами лого. Далее добавляем следующую секцию на границе с уже существующей. При выборе секций у нас существует выбор количества колонн данной секции. Колонны показывают, как именно будет разделяться данная секция в мобильном виде. Итак, если вы выберите две колонны, соответственно одна из них будет под другой в мобильном виде.
Для примера я сейчас выберу секцию с тремя колоннами. Изменим размер секции. Итак, в первую колонку мы добавляем текст, во второй будет ячейка и в третьей - кнопка. После добавления этих элементов мы можем посмотреть, как будет выглядеть эта секция в мобильном виде. Итак, в данном случае будет необходимо редактирование. Напоминаю вам, что редактирование мобильных видов может происходить только в рамках одной секции. Не рекомендуется переносить элементы из одной секции в другую. В данном случае я изменю размер первой секции, оставив ее для лога, и здесь необходимо будет слегка отредактировать элементы вручную. Итак, при выборе секций и колонн мы можем увидеть, что в мобильном виде эти секции располагаются в вертикальном виде, тогда как в обычном виде для компьютера, они располагаются горизонтально.
Для того чтобы максимально облегчить себе редактирование в мобильном виде стоит создавать простые лендинг пейджи и сохранять порядок секций. Для того, чтобы скрыть какой-то элемент в мобильном виде, стоит обозначить это на главном виде, выбрав элемент. Мы выберем элемент «Ячейка», перейдем к его расширенным установкам. И здесь у нас есть кнопка видимость. В данном случае мы отключаем видимость в смартфоне. При редактировании основной версии лендинг пейджа изменения также сохраняются также и в версии для смартфона. Приведем пример. В данном случае у нас был бокс не виден - джет-ячейка в мобильном виде. Мы делаем его обратно видимым и изменим, например, его цвет. Переходим в мобильный вид и здесь мы можем увидеть, что цвет, действительно, изменился. Если мы вносим изменения в мобильную версию, то данные изменения не будут отображаться в версии для компьютера. Исключения составляют изменения, которые совершаются за пределами секций или за пределами колонн. Например, вы переносите элементы из одной колонны в другую или из одной секции в другую. Могу вам здесь показать, что при изменении цвета в основном виде, цвет не меняется. Такие изменения, например, удобно применять при изменении текста.
В случае если на основной версии текст достаточно длинный, здесь вы можете его сохранить, чтобы он корректно отображался в мобильной версии. Итак, для создания мобильной версии лендинг пейджа рекомендуем вам хорошо продумать схему расположения элементов на лендинг пейдже, для начала создать компьютерную версию и после этого перейти к редактированию мобильной версии.
