Сделайте ваш сайт Elementor более мобильным и отзывчивым

Мобильный адаптивный веб-сайт является важной частью любого онлайн-бизнеса.

Google использует скорость загрузки страницы для мобильных устройств в качестве ключевого фактора поискового рейтинга любого веб-сайта. Это происходит главным образом потому, что более половины мирового веб-трафика приходится на мобильный трафик.

Таким образом, веб-сайт, адаптированный для мобильных устройств, необходим как для здоровья вашего сайта, так и для лучшего рейтинга в поисковой системе Google. В этой статье мы сосредоточимся на том, как создать мобильный веб-сайт с помощью конструктора страниц Elementor.

• Что такое адаптивный дизайн сайта Elementor
• Как настроить параметры Mobile, Desktop и Tab
• Отрегулируйте заголовок на вашем мобильном дисплее
• Отрегулируйте отступы или поля для мобильного
• Создайте каждый столбец по горизонтали, и он прекрасно подойдет для всех устройств.
• Изменить фоновое изображение в соответствии с мобильным / настольным представлением
• Изменить видимость любого раздела на рабочем столе или в мобильном представлении
• Изменить порядок столбцов
• Создать альтернативный раздел
• Отрегулируйте ширину столбца
• Вывод

Что такое адаптивный дизайн сайта Elementor

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

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

Чтобы преодолеть такие ситуации, мы разработали адаптивное решение для мобильных устройств, в котором вы можете создать дизайн своего веб-сайта с нуля, используя инструменты адаптивного макета страниц Elementor С помощью этих мобильных адаптивных инструментов вы можете настроить любой угол макета вашего веб-сайта, особенно типографику, отступы, а также выравнивание полей и мобильных устройств. Кроме того, вы сможете изменить настройки столбца и порядок на мобильном телефоне.

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

1. Проверьте, не выглядит ли заголовок на экране мобильного телефона слишком большим.
2. Проверьте заполнение содержимого или пробел по сторонам содержимого.
3. Проверьте выравнивание столбца страницы, как это выглядит идеально; по центру, справа или слева
4. Проверьте порядок столбцов, если они отображаются в правильном порядке или вам нужно изменить его.

Теперь давайте углубимся и выясним, как обстоят дела с конструктором Elementor Page.

Как настроить параметры Mobile, Desktop и Tab

Почти все редактируемые функции имеют возможность настраивать параметры Mobile, Desktop и Tab. если вы нажмете на адаптивный режим в нижней части меню

Отрегулируйте заголовок на вашем мобильном дисплее

Иногда мы хотим, чтобы на рабочем столе сайта был смелый и заметный заголовок, и он отлично смотрится на дисплее настольного компьютера, но когда вы включаете представление Mobile, заголовок занимает весь экран и не выглядит вписывающимся.

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

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

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

Отрегулируйте отступы или поля для мобильного

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

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

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

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

Создайте каждый столбец по горизонтали, и он прекрасно подойдет для всех устройств.

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

Изменить фоновое изображение в соответствии с мобильным / настольным представлением

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

Изменить видимость любого раздела на рабочем столе или в мобильном представлении

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

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

Перейдите в раздел> Настройки раздела> Дополнительно> Отзывчивый. Там вы увидите различные возможности или визуальные предпочтения; Вы можете скрыть раздел на рабочем столе, скрыть на вкладке или скрыть на мобильном в зависимости от ваших предпочтений.

Изменить порядок столбцов

Вы также можете изменить порядок столбцов в разделе настроек. Идти к; настройки раздела> Дополнительно> Адаптивный> Обратный столбец и нажмите «Да».

Создать альтернативный раздел

Создайте альтернативные разделы в мобильном и настольном представлении. Иногда раздел слайдера не выглядит таким полезным на мобильном телефоне, как на рабочем столе, поэтому вы можете использовать любой другой раздел вместо раздела слайдера. Вы можете сделать это, перейдя на вкладку «Дополнительно»> включить / выключить видимость раздела, который вы не хотите отображать, и добавить на него альтернативное изображение.

Отрегулируйте ширину столбца

Все секции столбцов получают ширину 100% при просмотре в мобильном представлении. Тем не менее, ширина может быть изменена в соответствии с шириной столбца на мобильном телефоне. Если у вас есть два столбца, вы можете установить максимальную ширину каждого раздела равной 50%.

Вывод

Elementor поставляется со всеми мощными функциями для управления адаптивным расположением столбцов для всех размеров экрана. Это позволяет вам перенастроить каждый раздел в соответствии с выбранным режимом просмотра. Сохранение веб-сайта, оптимизированного для мобильных устройств, неизбежно, потому что алгоритм Google больше всего учитывает рейтинг веб-сайтов, удобных для мобильных устройств. Адаптивные веб-сайты важны не только для улучшения SEO, но и для увеличения трафика, потому что более 80% трафика приходится на просмотры с мобильных устройств.

Теперь конструктор страниц Elementor обладает эксклюзивными функциями, которые позволяют его пользователям без особых усилий создавать удобный для мобильных устройств сайт. Надеюсь, вы найдете мою статью полезной и получите ответы на все вопросы о том, как создать адаптивный сайт с помощью Elementor.