Разработка адаптивных сайтов под мобильные устройства возможна с помощью конструктора сайта Elementor так же просто как 1-2-3. Вам не нужно знать коды, медиазапросы, стили css, а достаточно просто для каждого "типа мобильного устройства" отредактировать параметры виджета, элементов или секций. Давайте рассмотрим простой пример.
В качестве примера возьмем обычный блок услуг, стандартного сайта визитки. Мы видим, что это стандартное расположение блоков для обычных устройств т.е компьютеров.
Когда мы закончили создания сайта или какого либо графического блока сайта, мы можем перейти к просмотру его в другом виде т.е на мобильных устройствах. Для этого в нижней части панели необходимо нажать на кнопку предпросмотра в других разрешениях.
После нажатия перед нами откроются пункты меню для перехода в другой режим просмотра.
Для примера выберем самый минимальный размер это 
Телефон (хотя вы можете выбрать и Планшет). и мы увидим как наш сайт будет выглядеть на мобильном устройстве (рис справа). Возможно вас не устроит отображение текста или блока и поэтому вы можете изменить параметры именно для мобильного устройства.
Как изменить свойства для другого устройства
Например нас не устраивает отображение заголовка. Кликаем на него и смотрим на панель свойств и настроек. Рядом с нужным параметром или свойством есть иконка мобильности, которая отображает текущий режим настроек. Если ее нет, то это значит, что данный параметр не возможно изменить под мобильные устройства и при изменении его, его настройки распространятся на все режимы просмотра сайта.
Таким образом если у параметра или свойства есть иконка адаптивности, то мы можем изменить свойсва напрямую выбрав нужный параметр. В примере мы можем выбрать выравнивание по центру для телефонов, а для компьютера, выравнить слева.
Кликая на нужную иконку рядом с параметром, мы быстро можем подсмотреть, какой параметр указан для другого устройства отображения.
Скрытие элементов и реверс
Дополнительно есть возможность скрытия виджетов или секции на отдельных устройствах. Для этого необходимо перейти на вкладку расширенных свойств виджета и в группе настроек Адаптивность, выбрать на каких устройствах скрывать данный виджет.
Бывают случаи и довольно часто, когда в адаптивном сайте нам необходимо сделать реверс колонок. Например мы создаем сайт как в примере, слева изображение, а справа текст. А ниже тоже самое, но наоборот, слева текст, а справа изображение. И когда мы посмотрим на сайт с мобильного устройства, мы увидим что колонки встали в порядке очереди слева направа.. т.е сверху вниз. Т.е мы получили вид Изображение-Текст-Текст-Изображение что не очень удобно. И для этого есть возможность для секций сделать реверс колонок, что в итоге даст результат Изображение-Текст-Изображение-Текст.
Для того, чтобы сделать реверс колонок, нам необходимо перейти в свойства секции и так же в группе настроек Адаптивность на вкладке Расширенные, выбрать переключатель "Реверс колонок".
Теперь вы знаете, что создать адаптивный сайт с конструктором сайтов очень легко и не требует больших усилий. Главное помнить, меняйте только те свойства, у которых есть знак адаптивности, иначе вы "все испортите" 🙂
Не тянется блок
Добрый день! У меня такая проблема, что при уменьшении масштаба страницы (допустим со 100% на 80-90%) появляются «уши» (белые полосы по краям) вдоль всего сайта, при этом секции дальше не растягиваются, ширина выставлена, в настройках контейнера стоит content with — full with и 100%. Также при переключении на просмотр на планшете секции тоже не растягиваются на весь экран, а прижимаются к левому краю, а справа вдоль всего сайта тоже длинная белая полоса
Делала сама страничку, без шаблонов
Скрины — https://disk.yandex.ru/d/ISRzuE_zMXi0rw
Админ
День добрый. По сути, сам контейнер ничем не ограничен, поэтому скорей всего есть ограничения в вашей теме. Часто бывает что в настройках темы, установлено ограничение ширины контейнера. Поэтому для начала проверьте свою тему.
Эдуард
Добрый день!
У меня в Элементоре стиль сайдбара не редактируется (размер превью, шрифты и отступы). В css эти стили одинаково прописаны для десктопной и мобильной версии.
Подскажите, как можно изменить стиль только для мобильной версии через админку > «Редактор темы» для левой колонки главной страницы?
Нажал на красивый бaннeр )
Админ
День добрый. Тут все просто 🙂 Главное знать к какому классу нужно применить изменения и для какого размера. Как пример для название рецепта
@media (max-width: 767px) {.widget-latest .item-title { font-size: 12px !important; }
}
Почитайте про медиазапросы в css , станет более понятно.
Ольга
В галерее на сайте в мобильной версии изображения перескакивают вверх. Как исправить? Вот сайт http://dom-v-shalashe.ru/
Админ
Не увидел перескока.
Владислав
Создаю сайт делаю мобильную версию.
В элементоре все выглядет правильно и коасиво но при сохранении изменения в мобильной версии телефона не внеслись. Кэш почистил браузер последняя версия.
Админ
Проверяйте с другого телефона или браузера. Проблем не вижу.
Олег
Добрый вечер! Такая проблема: сайт с главным меню на десктопе и андроиде идеально. на айфоне при просмотре в шапке страницы пропадает главное меню….при скролле чуть ниже появляется и скролле ло конца опять пропадает, что это может быть?
Админ
День добрый. Меню у вас откуда? Из темы или виджет?
В любом случаи ответов несколько. Если из темы, то нужно обратится в поддержку темы. Если виджет, то в поддержку Elementor PRO
Денис
Подскажите кто нибудь, скрытые элементы через адаптивность грузятся на устройствах для которые они скрыты? Например я скрыл контейнер с изображениями для телефона. Внимание вопрос! Будет ли прогружаться этот контейнер на телефоне? Я понимаю что он не будет отображаться, но не понимаю повлияет ли в большом количестве такой фокус на производительность моей страницы..
Админ
Да, элементы грузятся. Для оптимизации, вы можете включить загрузку изображений с помощью Lazyload . После этого при скрытии блока изображение не должно подгружаться.
олег
Из темы…
Мария
Добрый день!
После адаптации под мобильные устройства анимация текста и картинок на мобильных работает отлично, но на планшетах совсем не отображается, хотя в режиме редактирования всё видно.
В чем может быть проблема? Как Сделать, чтобы анимация была видна на планшетах тоже?
Админ
День добрый. Скорей всего у вас старый браузер на планшете. Попробуйте использовать другой браузер.
Сергей
Добрый день!
Подскажите пожалуйста, как отключить адаптацию под мобильные устройства! Очень надо!
Админ
День добрый. Попробуйте в Элементор в Настройках сайта поменять брикпоинты устройств https://yadi.sk/i/42SK_OYO4_Zcyg
Алексей
Добрый день. Подскажите пожалуйста как убрать белый экран справа на мобильной версии? Размер 320px, формат сделана через коды js, html+css, но в css указан размер тоже 320px. Подскажите как можно убрать эту прокрутку вправо?
Админ
День добрый. У меня нет ответа на ваш вопрос.
Анна
тема — Astra. Может быть есть какие-то настройки в ней, отвечающие за этот косяк?
Анна
Добрый день. Помогите, пожалуйста:редактирую хэдер и футер для мобильного и планшета в элементор. Футер в том виде, в котором отредактировала, остается на мобильном и планшете, все ок. А вот вместо хэдера — просто строка с фоновой картинкой, если проверять с самих устройств. При этом в предпросмотре в элементоре все хорошо и как мне нужно. Почему тогда хэдер не отображается при проверке с устройств? И для компьютера кстати нет таких проблем с хэдером — как в элементоре настроила, так и выглядит. Может где-то не ту какую-то галочку нажала.
Админ
День добрый. Возможно у вас установлена тема, которая именно при заходе с физ.моб. устройств, меняет отображение.
Наталия
Попробую.
Спасибо Вам огромное!
Наталия
Здравствуйте)
Помогите, пожалуйста, решить проблему.
После проделанных всех рекомендованных в видео и статьях по работе с Elementor действий для адаптации сайта под мобильную версию — сайт при просмотре с мобильного устройства съезжает влево.
Хотелось бы понять причину этого нюанса, а главное — как его устранить.
Заранее благодарю!
Админ
Здравствуйте. Я не вижу проблем на сайте указанном в комментарии. Причина может быть банальна, например неправильно выставленный шрифт или отступ.
Наталия
Вы смотрели его с мобильного? При редактировании в Elementor вижу, что все норм с шириной. Но при просмотре с мобильного, если проводить пальцем влево, то весь контент съезжает влево.
Шрифт и отступы отредактировала, но это не помогло решить проблему.
Возможно, я неправильно выставляю «ширину макета» в каждом блоке? Что нужно указывать в «ширине макета»?
Админ
Увидел. Не подскажу. Явных ошибок нет. Но вижу тему астра. Вижу всплывающие окна итд. Все это может влиять, вносить ошибки итд. Пробуйте от обратного. Удалить обратный звонок, потом еще какой либо плагин итд. Если ошибка в теме астра, то писать в поддержку астры для исправления.
Иван
Ставлю тумблер в положение скрывать элемент при просмотре с планшета.
Но не срабатывает в предпросмотре — элемент остается видимым в режиме планшета.
Нет планшета, чтобы проверить реальную картину и понять, скрывается элемент или нет. Подскажите в чем может быть проблема и как исправить.
Админ
Смотреть нужно конкретно, что за элемент, какие возможно стили установлены на нем, что есть есть вокруг. По умолчанию все работает отлично.
Igor
А можно ли уменьшить логотип в мобильной версии? или подменить другим логотипом, специально суженным?
Элементорский Виджет «Branding».
Админ
На вкладке Стиль есть возможность изменить ширину и высоту в зависимости от типа устройства.
Виталий
Здравствуйте, подскажите пж , как адаптировать что бы и под большие экраны было нормально и контент растягивался больше? А то на после 16 дюймов и выше большие отступы по бокам , а контент по центру… Как быть с широкими экранами?
Админ
Здравствуйте. Делайте сайт во всю ширину. Есть настройка в свойствах секции, а так же в настройках конструктора.
Евгения
Статья помогла! Нашла через яндекс. За 2 минуты поняла свою проблему. Иногда некогда пересматривать видео! Автору спасибо!
Анна
Здравствуйте. В секции из 2-х колонок слева размещаю фото или видео с помощью виджетов фото или видео, а в правой колонке — описание в текстовом редакторе. При предпросмотре в редакторе все хорошо — 2-я колонка смещается вниз сразу за 1-ой. Но если я смотрю на ту же страницу со своего смартфона (андроид), то на нем порядок расположения колонок в секции не меняется, т.е. по-прежнему есть правая и левая колонки и на экране смартфона видна левая колонка (с фото или видео), а чтобы увидеть правую колонку с описанием текста надо сместить экран вправо пальцем, что не удобно. Более того, в некоторых случаях происходит (на моем андроиде) смещение фото на текстовое описание, т.е. фото смещается вправо. Подскажите, в чем проблема? Дело в моем телефоне или, может, не правильном размещении виджетов, или нужно поменять значение брейкпоинта в настройках Elementor?
Админ
Здравствуйте. У вас наверно телефон старый или браузер старый. Такое бывает на старых браузерах. Попробуйте например установить браузер хром и проверить.
Галина
Из виджетов только текстовые редакторы в ячейках таблицы. Название сайта я ввожу в этой контактной форме в поле Сайт, в меню смотрите Цены.
Может быть виновата в этом Тема?
Админ
Странно то, что у вас именно в предпросмотре элементора показывает неправильно. На сайте у вас все четко срабатывает, а именно при ширине экрана сайта 767 пикселей, ячейки встают в столбик.
По таблице. Использовать ее для прайса как вы используете это неправильно. Для таблиц как у вас необходимо использовать или специальные виджеты таблиц или плагины таблиц и вставить через шоткод. Так же можно просто воспользоваться штатным виджетом «Список с иконками» в режиме макета друг за другом. Тогда будет то что вам необходимо.
Галина
Спасибо. Я только знакомлюсь с Elementor. Не во всем еще разобралась. Потому делаю, как понимаю. Мне он нравится. И у меня все получилось моим способом. Просто уменьшила размеры букв, расчитала в процентах расположение колонок и все уместилось в телефоне. Но билась долго. Попробую предложенным вами способом.
Галина
У меня в предпросмотре телефона в элементоре — одно (выстраивание колонок в правильную таблицу) , а при просмотре на самом смартфоне (по вкладке «цены») — другое (все в одну колонку). Хотя для телефона все адаптировала как надо. Не пойму, почему не получается
Админ
Предпросмотр сделан на определенный минимальный размер экрана, а таблица скорей всего на другой размер, чуть больше. Для более точного ответа, нужно видеть сайт и какие виджеты использованы в вашей таблице.