Адаптивный сайт под мобильные устройства

Разработка адаптивных сайтов под мобильные устройства возможна с помощью конструктора сайта Elementor так же просто как 1-2-3. Вам не нужно знать коды, медиазапросы, стили css, а достаточно просто для каждого «типа мобильного устройства» отредактировать параметры виджета, элементов или секций. Давайте рассмотрим простой пример.

В качестве примера возьмем обычный блок услуг, стандартного сайта визитки. Мы видим, что это стандартное расположение блоков для обычных устройств т.е компьютеров.

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

После нажатия перед нами откроются пункты меню для перехода в другой режим просмотра.

Для примера выберем самый минимальный размер это Телефон (хотя вы можете выбрать и Планшет). и мы увидим как наш сайт будет выглядеть на мобильном устройстве (рис справа).  Возможно вас не устроит отображение текста или блока и поэтому вы можете изменить параметры именно для мобильного устройства.

Как изменить свойства для другого устройства

Например нас не устраивает отображение заголовка. Кликаем на него и смотрим на панель свойств и настроек. Рядом с нужным параметром или свойством есть иконка мобильности, которая отображает  текущий режим настроек. Если ее нет, то это значит, что данный параметр не возможно изменить под мобильные устройства и при изменении его, его настройки распространятся на все режимы просмотра сайта.

Таким образом если у параметра или свойства есть иконка адаптивности, то мы можем изменить свойсва напрямую выбрав нужный параметр. В примере мы можем выбрать выравнивание по центру для телефонов, а для компьютера, выравнить слева.

Кликая на нужную иконку рядом с параметром, мы быстро можем подсмотреть, какой параметр указан для другого устройства отображения.

Скрытие элементов и реверс

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

Бывают случаи и довольно часто, когда в адаптивном сайте нам необходимо сделать реверс колонок. Например мы создаем сайт как в примере, слева изображение, а справа текст. А ниже тоже самое, но наоборот, слева текст, а справа изображение. И когда мы посмотрим на сайт с мобильного устройства, мы увидим что колонки встали в порядке очереди слева направа.. т.е сверху вниз.  Т.е мы получили вид Изображение-Текст-Текст-Изображение что не очень удобно. И для этого есть возможность для секций сделать реверс колонок, что в итоге даст результат Изображение-Текст-Изображение-Текст.

Для того, чтобы сделать реверс колонок, нам необходимо перейти в свойства секции и так же в группе настроек Адаптивность на вкладке Расширенные, выбрать переключатель «Реверс колонок».

Теперь вы знаете, что создать адаптивный сайт с конструктором сайтов очень легко и не требует больших усилий.  Главное помнить, меняйте только те свойства, у которых есть знак адаптивности, иначе вы «все испортите» 🙂

 

 

Вам также может понравиться

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *