Web5X Блог

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

Web5X Блог

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

Поиск по блогу

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

Обновлено: 10.05.2018
41 комментарий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

41 комментарий

  • Не тянется блок

    Добрый день! У меня такая проблема, что при уменьшении масштаба страницы (допустим со 100% на 80-90%) появляются «уши» (белые полосы по краям) вдоль всего сайта, при этом секции дальше не растягиваются, ширина выставлена, в настройках контейнера стоит content with — full with и 100%. Также при переключении на просмотр на планшете секции тоже не растягиваются на весь экран, а прижимаются к левому краю, а справа вдоль всего сайта тоже длинная белая полоса
    Делала сама страничку, без шаблонов
    Скрины — https://disk.yandex.ru/d/ISRzuE_zMXi0rw

    • A

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

  • Добрый день!
    У меня в Элементоре стиль сайдбара не редактируется (размер превью, шрифты и отступы). В css эти стили одинаково прописаны для десктопной и мобильной версии.
    Подскажите, как можно изменить стиль только для мобильной версии через админку > «Редактор темы» для левой колонки главной страницы?
    Нажал на красивый бaннeр )

    • A

      День добрый. Тут все просто 🙂 Главное знать к какому классу нужно применить изменения и для какого размера. Как пример для название рецепта

      @media (max-width: 767px) {
      .widget-latest .item-title { font-size: 12px !important; }
      }

      Почитайте про медиазапросы в css , станет более понятно.

  • В галерее на сайте в мобильной версии изображения перескакивают вверх. Как исправить? Вот сайт http://dom-v-shalashe.ru/

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

  • Добрый вечер! Такая проблема: сайт с главным меню на десктопе и андроиде идеально. на айфоне при просмотре в шапке страницы пропадает главное меню….при скролле чуть ниже появляется и скролле ло конца опять пропадает, что это может быть?

    • A

      День добрый. Меню у вас откуда? Из темы или виджет?
      В любом случаи ответов несколько. Если из темы, то нужно обратится в поддержку темы. Если виджет, то в поддержку Elementor PRO

      • Подскажите кто нибудь, скрытые элементы через адаптивность грузятся на устройствах для которые они скрыты? Например я скрыл контейнер с изображениями для телефона. Внимание вопрос! Будет ли прогружаться этот контейнер на телефоне? Я понимаю что он не будет отображаться, но не понимаю повлияет ли в большом количестве такой фокус на производительность моей страницы..

        • A

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

      • Из темы…

  • Добрый день!

    После адаптации под мобильные устройства анимация текста и картинок на мобильных работает отлично, но на планшетах совсем не отображается, хотя в режиме редактирования всё видно.
    В чем может быть проблема? Как Сделать, чтобы анимация была видна на планшетах тоже?

    • A

      День добрый. Скорей всего у вас старый браузер на планшете. Попробуйте использовать другой браузер.

  • Добрый день!
    Подскажите пожалуйста, как отключить адаптацию под мобильные устройства! Очень надо!

  • Добрый день. Подскажите пожалуйста как убрать белый экран справа на мобильной версии? Размер 320px, формат сделана через коды js, html+css, но в css указан размер тоже 320px. Подскажите как можно убрать эту прокрутку вправо?

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

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

    • A

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

  • Попробую.
    Спасибо Вам огромное!

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

    • A

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

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

        • A

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

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

    • A

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

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

    • A

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

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

        • A

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

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

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

    • A

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

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

    • A

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

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

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

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

    • A

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

Добавить комментарий для Галина (Отменить ответ)