Web5X - Готовые сайты

Блог о создании сайта, конструкторе сайтов и Elementor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

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

  1. У меня в предпросмотре телефона в элементоре — одно (выстраивание колонок в правильную таблицу) , а при просмотре на самом смартфоне (по вкладке «цены») — другое (все в одну колонку). Хотя для телефона все адаптировала как надо. Не пойму, почему не получается

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

  2. Из виджетов только текстовые редакторы в ячейках таблицы. Название сайта я ввожу в этой контактной форме в поле Сайт, в меню смотрите Цены.
    Может быть виновата в этом Тема?

    1. Странно то, что у вас именно в предпросмотре элементора показывает неправильно. На сайте у вас все четко срабатывает, а именно при ширине экрана сайта 767 пикселей, ячейки встают в столбик.

      По таблице. Использовать ее для прайса как вы используете это неправильно. Для таблиц как у вас необходимо использовать или специальные виджеты таблиц или плагины таблиц и вставить через шоткод. Так же можно просто воспользоваться штатным виджетом «Список с иконками» в режиме макета друг за другом. Тогда будет то что вам необходимо.

      1. Спасибо. Я только знакомлюсь с Elementor. Не во всем еще разобралась. Потому делаю, как понимаю. Мне он нравится. И у меня все получилось моим способом. Просто уменьшила размеры букв, расчитала в процентах расположение колонок и все уместилось в телефоне. Но билась долго. Попробую предложенным вами способом.

  3. Здравствуйте. В секции из 2-х колонок слева размещаю фото или видео с помощью виджетов фото или видео, а в правой колонке — описание в текстовом редакторе. При предпросмотре в редакторе все хорошо — 2-я колонка смещается вниз сразу за 1-ой. Но если я смотрю на ту же страницу со своего смартфона (андроид), то на нем порядок расположения колонок в секции не меняется, т.е. по-прежнему есть правая и левая колонки и на экране смартфона видна левая колонка (с фото или видео), а чтобы увидеть правую колонку с описанием текста надо сместить экран вправо пальцем, что не удобно. Более того, в некоторых случаях происходит (на моем андроиде) смещение фото на текстовое описание, т.е. фото смещается вправо. Подскажите, в чем проблема? Дело в моем телефоне или, может, не правильном размещении виджетов, или нужно поменять значение брейкпоинта в настройках Elementor?

    1. Здравствуйте. У вас наверно телефон старый или браузер старый. Такое бывает на старых браузерах. Попробуйте например установить браузер хром и проверить.

  4. Статья помогла! Нашла через яндекс. За 2 минуты поняла свою проблему. Иногда некогда пересматривать видео! Автору спасибо!

  5. А можно ли уменьшить логотип в мобильной версии? или подменить другим логотипом, специально суженным?
    Элементорский Виджет «Branding».

    1. На вкладке Стиль есть возможность изменить ширину и высоту в зависимости от типа устройства.

      1. Здравствуйте, подскажите пж , как адаптировать что бы и под большие экраны было нормально и контент растягивался больше? А то на после 16 дюймов и выше большие отступы по бокам , а контент по центру… Как быть с широкими экранами?

        1. Здравствуйте. Делайте сайт во всю ширину. Есть настройка в свойствах секции, а так же в настройках конструктора.

  6. Ставлю тумблер в положение скрывать элемент при просмотре с планшета.
    Но не срабатывает в предпросмотре — элемент остается видимым в режиме планшета.
    Нет планшета, чтобы проверить реальную картину и понять, скрывается элемент или нет. Подскажите в чем может быть проблема и как исправить.

    1. Смотреть нужно конкретно, что за элемент, какие возможно стили установлены на нем, что есть есть вокруг. По умолчанию все работает отлично.

  7. Здравствуйте)
    Помогите, пожалуйста, решить проблему.
    После проделанных всех рекомендованных в видео и статьях по работе с Elementor действий для адаптации сайта под мобильную версию — сайт при просмотре с мобильного устройства съезжает влево.
    Хотелось бы понять причину этого нюанса, а главное — как его устранить.
    Заранее благодарю!

    1. Здравствуйте. Я не вижу проблем на сайте указанном в комментарии. Причина может быть банальна, например неправильно выставленный шрифт или отступ.

      1. Вы смотрели его с мобильного? При редактировании в Elementor вижу, что все норм с шириной. Но при просмотре с мобильного, если проводить пальцем влево, то весь контент съезжает влево.
        Шрифт и отступы отредактировала, но это не помогло решить проблему.
        Возможно, я неправильно выставляю «ширину макета» в каждом блоке? Что нужно указывать в «ширине макета»?

        1. Увидел. Не подскажу. Явных ошибок нет. Но вижу тему астра. Вижу всплывающие окна итд. Все это может влиять, вносить ошибки итд. Пробуйте от обратного. Удалить обратный звонок, потом еще какой либо плагин итд. Если ошибка в теме астра, то писать в поддержку астры для исправления.

  8. Добрый день. Помогите, пожалуйста:редактирую хэдер и футер для мобильного и планшета в элементор. Футер в том виде, в котором отредактировала, остается на мобильном и планшете, все ок. А вот вместо хэдера — просто строка с фоновой картинкой, если проверять с самих устройств. При этом в предпросмотре в элементоре все хорошо и как мне нужно. Почему тогда хэдер не отображается при проверке с устройств? И для компьютера кстати нет таких проблем с хэдером — как в элементоре настроила, так и выглядит. Может где-то не ту какую-то галочку нажала.

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

  9. тема — Astra. Может быть есть какие-то настройки в ней, отвечающие за этот косяк?

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

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

Блог о создании сайта, конструкторе сайтов и Elementor.
Авторские права © 2018 . Все права защищены.
Готовые сайты на web5x.ru
Политика конфиденциальности