Отзывчивый дизайн WordPress: убедитесь, что сайты хорошо выглядят на мобильных и компьютерных устройствах

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

Что такое отзывчивый дизайн?

В двух словах.Отзывчивый дизайн означает, что одна и та же веб-страница автоматически подстраивает свой макет под размер экрана устройства.：

• На компьютере (большой экран) содержимое может отображаться рядом (например, три колонки изображений);
• На плоском (среднем) экране он автоматически становится двухколоночным;
• На мобильных телефонах (маленькие экраны) он автоматически складывается в одну колонку, чтобы избежать слишком мелкого текста или переполнения контента.

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

Шаг 1: Знакомство с отзывчивой моделью редактирования Elementor

Когда вы входите в интерфейс редактирования Elementor, в правой части верхней панели инструментов есть три иконки, соответствующие трем видам устройств:

• 🖥️ вид рабочего стола(отображается по умолчанию)
• 📱 планшетный вид(ширина 768px слева/справа)
• 📱 Мобильный вид(ширина 375px слева/справа)

метод работы: Нажмите на соответствующий значок, чтобы перейти в режим предварительного просмотра для этого устройства. Все изменения стиля (например, размер шрифта, интервал, расположение) могут быть установлены индивидуально для одного устройства, не влияя друг на друга.

Шаг 2: Основные настройки отзывчивого дизайна (требуется 3)

1. Размер текста: избегайте слишком мелкого или слишком крупного текста на мобильных телефонах.

Текст, который выглядит правильно на компьютере, может быть нечитабельным на мобильном телефоне (слишком мелкий) или разрывы строк могут быть неправильными (слишком большими) и нуждаться в индивидуальной настройке:

1. Выберите текстовый модуль (заголовки, абзацы и т. д.) и перейдите на панель "Стили" справа.
2. Найдите параметр "Размер шрифта" и нажмите на значок "Отзывчивый" (маленький компьютерный значок, при нажатии на который отображаются три поля ввода, соответствующие настольному/планшетному/мобильному ПК) рядом с этим значением.
3. Переключитесь на "Мобильный вид" и введите соответствующий размер (например, для заголовков на мобильных телефонах устанавливается размер 24-32px, для абзацев - 14-16px).

Напоминание: Размер текста соответствует принципу "чем меньше экран, тем крупнее, но четче должен быть текст", чтобы его можно было прочитать без увеличения на мобильном телефоне.

2. Ширина изображений и модулей: не выходите за пределы экрана

Изображения, установленные на компьютерах на "ширину 80%", на мобильных телефонах могут выглядеть слишком широкими или иметь слишком много белого пространства с обеих сторон:

1. Выберите изображение/модуль и перейдите на правую панель "Стили" (изображения находятся в разделе "Стили" → "Ширина", другие модули могут находиться в разделе "Дополнительно" → "Ширина").
2. Щелкните значок Responsive рядом со значением Width, чтобы переключиться в режим Mobile View.
3. Установите ширину "100%" (чтобы изображение/модуль заполняло всю ширину экрана телефона и не оставляло белого пространства по бокам) или настройте ее по своему усмотрению (например, 90%, чтобы оставить небольшой запас).

принимать к сведению: Если размер самого изображения слишком мал, установка значения 100% приведет к его размытию, поэтому рекомендуется заранее подготовить изображения высокого разрешения (не менее 1000px по ширине).

3. интервалы и поля: избегайте нагромождения контента друг на друга

Пространство экрана мобильного телефона ограничено, расстояние между модулями слишком большое, чтобы тратить место впустую, слишком маленькое будет выглядеть переполненным:

1. Выберите любой модуль (например, кнопку, абзац) и перейдите на панель "Дополнительно" справа.
2. Найдите значение 'Outer Margin' (расстояние между модулем и другими элементами) или 'Inner Margin' (расстояние между содержимым внутри модуля и границей) и нажмите на значок 'Responsive Icon' рядом с этим значением.
3. Переключитесь на "Мобильный вид" и уменьшите значения (например, измените верхнее внешнее поле с 50px на 20px, чтобы сделать модуль более компактным).

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

Шаг 3: Настройка макета (оптимизация расположения колонок для мобильных телефонов)

Если на вашей главной странице используется "многоколоночный макет" (например, 3 колонки с описанием услуг, 2 колонки с графическими комбинациями), он может быть тесноват для мобильных телефонов, и его необходимо изменить на одноколоночный:

1. Найдите раздел, содержащий несколько столбцов (нажмите на синюю пунктирную рамку за пределами модуля, чтобы выбрать весь раздел).
2. Перейдите на панель "Макет" справа и найдите настройку "Столбцы" (например, сейчас "3 столбца").
3. Щелкните значок Responsive рядом со значением Columns, чтобы переключиться в режим Mobile View.
4. Измените количество колонок на "1 колонка", в это время она будет автоматически складываться в одну колонку на мобильном телефоне, а содержимое станет более четким.

типичный примерПример: 3 колонки товаров на компьютерах, 2 колонки на планшетах и 1 колонка на мобильных телефонах, что позволяет использовать большое пространство экрана и обеспечивает читабельность на маленьких экранах.

Шаг 4: Скройте ненужные элементы (для маленьких экранов)

Некоторые элементы, которые обогащают страницу на компьютере, но будут лишними на мобильном телефоне (например, сложные декоративные иконки, большой пояснительный текст), могут быть скрыты на мобильном телефоне:

1. Выберите модуль, который вы хотите скрыть, и перейдите на панель "Дополнительно" справа.
2. Прокрутите вниз до настроек "Отзывчивый" и найдите опцию "Скрывать на мобильных устройствах" (или отметьте "Скрывать на настольных компьютерах" и "Скрывать на планшетах" соответственно).
3. Если поставить галочку "Скрывать на мобильных устройствах", модуль автоматически исчезнет в мобильном представлении и не будет влиять на отображение на компьютере и планшете.

Применимые сценарии: Декоративные боковые иконки, специфическая для компьютера контактная форма (которая может быть заменена на более чистую форму на мобильных устройствах).

Шаг 5: предварительный просмотр и тестирование (ключевой шаг)

После завершения настройки не забудьте протестировать его на реальном устройстве (или проверьте его критически с помощью функции предварительного просмотра Elementor):

1. Предварительный просмотр внутри Elementor: Поочередно нажимайте на значок "Настольный компьютер→планшет→мобильный компьютер" и прокручивайте страницы, чтобы проверить каждый модуль:
   • Отображается ли текст полностью (без усечений и наложений)?
   • Изображение четкое и заполняет весь экран (без растяжения и искажений)?
   • Достаточно ли крупные кнопки (не менее 44×44px на мобильных телефонах для удобства нажатия)?
2. Тестирование реального оборудованияОтсканируйте "QR-код" в верхней части Elementor с помощью мобильного телефона, откройте страницу на своем мобильном телефоне и реально управляйте кнопками и полями ввода, чтобы почувствовать плавность скольжения.
3. Устранение распространенных проблем：
   • Если разрывы строк текста сбивают с толку: уменьшите размер шрифта на мобильном телефоне или увеличьте ширину модуля.
   • Если изображение искажено: установите для параметра "Адаптация объекта" значение "Переопределить" на мобильном телефоне (Изображение→Стиль→Адаптация объекта).
   • Если кнопка слишком маленькая: увеличьте "внутреннее поле" кнопки на мобильных телефонах (не менее 15px для верхней и нижней части, 20px для левой и правой).

Принципы отзывчивого дизайна для начинающих

1. мобильность превыше всего: Разработан с учетом особенностей мобильного телефона, прежде чем распространить его на компьютер (чтобы избежать радикальных изменений на более позднем этапе).
2. Меньше - значит больше: Пространство экрана мобильного телефона ограничено, поэтому сохраняется только основной контент и удаляются лишние элементы.
3. консистенция: Цвета и стили шрифтов согласованы на разных устройствах, чтобы посетители не запутались.
4. регулярный осмотр: После добавления каждого нового модуля переключитесь в режим мобильного просмотра, чтобы убедиться, что все в порядке.

Благодаря этим шагам ваш сайт будет профессионально отображаться на компьютерах, планшетах и мобильных телефонах. Отзывчивый дизайн может показаться сложным, но после нескольких операций с Elementor вы поймете, что для решения проблемы отображения 90% нужно лишь точно настроить несколько ключевых параметров для разных устройств. Больше тренируйтесь, больше тестируйте, и вскоре вы овладеете этим!