Как оптимизировать боковую панель на мобильном устройстве с помощью конструктора тем Divi

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

В этом уроке мы рассмотрим способы использования Divi Theme Builder для оптимизации боковой панели на мобильном дисплее. Вот некоторые вещи, о которых мы расскажем в этой статье:

• Как создать шаблон с боковой панелью
• Создание содержимого боковой панели с использованием модулей Divi и виджетов WordPress
• Использование нескольких областей виджетов для скрытия / отображения определенных виджетов на мобильном устройстве
• Управление расстоянием между содержимым боковой панели на мобильном устройстве
• Полное скрытие содержимого боковой панели на мобильном устройстве
• Скрытие некоторого содержимого боковой панели на мобильном устройстве
• Скрытие элементов в модулях для минимизации контента на мобильных устройствах
• Сделать контент боковой панели адаптивным путем настройки размера текста и интервала
• Как изменить порядок размещения боковой панели на мобильном устройстве

Давайте начнем.

Sneak Peek

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

Загрузите БЕСПЛАТНЫЙ шаблон с оптимизированной боковой панелью на мобильном устройстве

Чтобы получить шаблон из этого руководства, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете лишены подписки или получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Подпишитесь на наш канал Youtube

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к учебнику, ладно?

Что вам нужно для начала

Для начала вам необходимо установить и активировать тему Divi. Убедитесь, что у вас установлена ​​последняя версия Divi.

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

После этого все готово.

Как оптимизировать боковую панель шаблона Divi на мобильном устройстве

Прежде чем мы начнем оптимизировать нашу боковую панель на мобильных устройствах, нам нужно сначала запустить и запустить рабочую модель. Мы собираемся создать нашу боковую панель на шаблоне страницы с помощью Divi Theme Builder. Это поможет нам лучше понять, что задействовано в создании боковой панели в Divi, чтобы мы могли лучше понять, как оптимизировать ее на мобильных устройствах.

Создание шаблона с боковой панелью

Импорт пакета Divi Theme Builder №3

Для начала мы воспользуемся пакетом Divi Theme Builder Pack # 3, чтобы ускорить разработку дизайна нашего сайта. Затем мы собираемся использовать один из шаблонов, чтобы добавить боковую панель, которую мы оптимизируем для мобильных устройств.

После загрузки пакета распакуйте папку.

На панели управления WordPress перейдите в Divi> Theme Builder. Затем щелкните значок переносимости в правом верхнем меню на странице. В модальном окне переносимости выберите вкладку импорта и выберите файл divi-theme-builder-pack-3-all.json из папки, которую вы скачали ранее. Затем нажмите кнопку импорта.

Важно: используйте тестовый сайт с новой установкой Divi, чтобы не переопределить текущий контент на своем веб-сайте и не сломать что-либо.

Вы увидите, что все шаблоны были импортированы в конструктор тем.

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

Найдите шаблон «Все страницы категорий» и щелкните, чтобы изменить настраиваемый макет основного текста.

Текущий макет страницы использует строку из одного столбца для области основного содержимого страницы. Нам нужно будет изменить это на структуру макета боковой панели. Для этого щелкните значок «Выбрать макет» в меню строки второй строки и выберите структуру макета столбца две трети одна треть столбца.

Теперь у вас будет область справа для боковой панели.

ВНИМАНИЕ: я не использую специальный раздел для этого макета боковой панели. Специальные разделы не требуются при создании макета боковой панели для вашей страницы, однако, если вы хотите сохранить функциональность отдельных строк для основной области содержимого, вам нужно будет использовать специальный раздел.

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

Тем не менее, нам нужно добавить цвет фона и отступ к столбцу боковой панели.

Настройки столбца боковой панели

Откройте настройки столбца, предназначенного для боковой панели, и обновите следующее:

• Цвет фона: # f2f5f9
• Отступ: 25 пикселей сверху, 25 пикселей снизу, 25 пикселей слева, 25 пикселей справа

Создание содержимого боковой панели с помощью модулей Divi и виджетов WordPress

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

• Информация об авторе (имя, фото, биография)
• Кнопки подписки в социальных сетях
• Подписка на рассылку по электронной почте
• Ссылки на продукты и / или услуги
• Объявления
• Категории
• Последние / Популярные сообщения

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

1. Модуль поиска - это будет форма поиска.
2. Модуль подписки по электронной почте - это будет форма подписки по электронной почте.
3. Текстовый модуль - это будет заголовок кнопок подписки в социальных сетях.
4. Модуль подписки в социальных сетях - демонстрирует кнопки подписки в социальных сетях.
5. Текстовый модуль (с изображением bg) - это будет пример объявления для боковой панели.
6. Модуль Blurb (с содержанием автора) - он будет служить областью информации об авторе на боковой панели.
7. Текстовый модуль - это будет заголовком для модуля блога под ним.
8. Модуль блога - он будет служить контентом недавних / избранных сообщений на боковой панели.

Добавление виджетов WordPress с помощью модуля боковой панели

Если вы еще не знакомы, Divi имеет модуль боковой панели, который позволяет вам переносить содержимое области виджетов (или виджеты) в область боковой панели Divi. Фактически, этот шаблон уже использует виджет боковой панели в строке непосредственно под тем, над которым мы работаем.

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

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

Использование нескольких областей виджетов

Прямо сейчас в области виджетов «Боковая панель» отображается несколько виджетов, потому что в области виджетов боковой панели находится несколько виджетов. Но на самом деле вы можете получить больший контроль над дизайном боковой панели Divi, используя несколько областей виджетов, которые содержат один виджет. Использование нескольких областей виджетов даст вам больше контроля над дизайном ваших виджетов, а также над видимостью виджетов на мобильном устройстве.

Чтобы создать несколько виджетов, откройте новую вкладку и перейдите в панель управления WordPress. Перейдите в Внешний вид> Виджеты.

Создайте новую область виджетов, введя имя и нажав кнопку «Создать». Поскольку в эту область виджетов мы добавим виджет «Категории», назовем эту область «Категории». Обновите страницу, чтобы увидеть область виджетов. Затем перетащите виджет «Категории» в область виджетов «Категории».

Повторите процесс, чтобы создать новую область виджетов с именем «Архивы». Затем перетащите виджет «Архивы» в область виджета «Архивы».

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

Дублируйте модуль боковой панели (чтобы сохранить дизайн)

Обновите дублированный модуль боковой панели, чтобы он отображался в области виджетов «Архивы».

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

В настоящее время строка, содержащая боковую панель, имеет значение ширины желоба, равное 2. Это означает, что между каждым модулем внутри боковой панели будет нижнее поле / интервал по умолчанию. Чтобы получить больший контроль над этим интервалом, мы можем удалить нижнее поле всего модуля в столбце боковой панели. Для этого откройте настройки модуля поиска и обновите следующее:

• Нижнее поле: 0 пикселей (рабочий стол), 15 пикселей (планшет)

Затем щелкните значок «Дополнительные параметры» (или щелкните меню правой кнопкой мыши) на поле поля. Затем выберите «Увеличить маржу».

В модуле «Расширить стили» обновите параметры, чтобы расширить поле до «Все модули» в «Этот столбец».

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

Оптимизация боковой панели на мобильных устройствах

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

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

Откройте настройки строки и откройте настройки столбца, предназначенного для боковой панели. Затем обновите видимость следующим образом:

• Отключить: планшет, телефон

Это скроет всю боковую панель на экране планшета и мобильного устройства.

Скрытие части содержимого боковой панели на мобильном устройстве

На рабочем столе у ​​вас может быть место для хранения большей части (или всего) содержимого боковой панели, не отвлекая его от содержимого. Но на мобильном телефоне пользователю нужно будет пролистать много контента боковой панели, который он или она может не заинтересовать. Итак, при создании боковой панели в Divi Theme Builder воспользуйтесь опциями видимости, чтобы отключить некоторые элементы боковой панели на мобильном дисплее. И, если вы используете виджеты WordPress для контента боковой панели, создайте несколько областей виджетов, чтобы помочь спроектировать и скрыть определенные виджеты на мобильных устройствах.

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

• Отключить: телефон, планшет

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

Предварительный просмотр результатов на странице блога

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

Убедитесь, что у вас выбрана страница сообщений в разделе Внешний вид> Чтение.

Полученные результаты

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

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

На рабочем столе вы можете обойтись без дублирования контента на боковой панели и нижнем колонтитуле. Фактически, это хороший способ увеличить конверсию. Например, на рабочем столе имеет смысл включить модуль подписки по электронной почте в верхней части боковой панели и внутри нижнего колонтитула, чтобы пользователи могли видеть подписку по электронной почте при чтении содержимого сообщения, а также в конце сообщения. Однако на мобильных устройствах нет макета боковой панели. Все отображается в одном столбце (а может и в двух). Правые боковые панели располагаются под содержимым публикации / страницы, а левые боковые панели - над содержимым публикации / страницы. Таким образом, если модуль подписки электронной почты на боковой панели складывается под содержимым публикации / страницы, пользователь может прокручивать более одного модуля подписки на электронную почту (один на боковой панели и один в нижнем колонтитуле). Кроме того, если есть подписка по электронной почте внизу правой боковой панели и одна вверху нижнего колонтитула, пользователь будет прокручивать две последовательные подписки на электронную почту на мобильном устройстве.

Скрытие элементов в модулях для минимизации контента на мобильных устройствах

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

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

Как сделать контент боковой панели адаптивным

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

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

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

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

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

Например, вы можете изменить верхнее и нижнее поле разделителя с 30 пикселей на 15 пикселей на планшете и телефоне.

Изменение порядка размещения боковой панели на мобильном устройстве

Порядок стекирования - распространенная проблема с боковыми панелями. Это особенно актуально для левых боковых панелей. Как я упоминал ранее, правые боковые панели располагаются под (или после) содержимым сообщения / страницы, а левые боковые панели располагаются поверх (или до) содержимого сообщения / страницы. Это означает, что когда вы просматриваете страницу с левой боковой панелью на мобильном устройстве, первое, что видит пользователь, - это содержимое боковой панели, а не основное содержимое публикации / страницы. Это плохо для UX. Чтобы исправить это, вы можете либо полностью скрыть боковую панель, либо изменить порядок наложения так, чтобы левая боковая панель располагалась ниже содержимого публикации / страницы на мобильном устройстве.

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

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Затем откройте настройки столбца столбца, обозначенного как боковая панель, и добавьте следующий настраиваемый CSS на экран основного элемента планшета:

order: 2;

Если вы не догадались, этот небольшой фрагмент изменяет порядок со значения по умолчанию («1») на значение «2», в результате чего весь столбец / боковая панель размещается под / после столбца, содержащего основное содержимое.

Последние мысли

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

Боковая панель, которая была создана для шаблона в этом руководстве, была разработана с использованием существующих элементов дизайна, найденных в пакете макетов конструктора тем №3. Если вам нравится дизайн этого шаблона с боковой панелью, не стесняйтесь загрузить его выше, чтобы изучить его поближе.

Для получения дополнительной информации ознакомьтесь с этим руководством по использованию боковых панелей с Divi Theme Builder.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!