Как встроить галереи Divi в переключатели, чтобы создать собственное меню ресторана

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

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

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

До и после

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

До

После

Начиная

Замена отображения галереи WordPress на отображение галереи Divi

Divi позволяет заменить отображение галереи WordPress по умолчанию на отображение галереи Divi. Поэтому всякий раз, когда вы создаете галерею WordPress и встраиваете ее на свою страницу, галерея будет отображаться как галерея с помощью модуля Divi Gallery. Это позволяет вам добавлять галереи изображений Divi в любой модуль Divi Builder (подробнее об этом позже). Чтобы реализовать это изменение, перейдите в Divi> Параметры темы. На вкладке «Общие» нажмите, чтобы включить опцию Divi Gallery.

Настройка цвета акцента вашей темы (необязательно)

Поскольку мы будем вставлять галерею Divi в модуль переключения, цвет значка, который отображается при наведении курсора на изображение в галерее, автоматически унаследует цвет акцента, который вы установили для темы Divi. Вы можете установить цвет акцента темы на панели инструментов WordPress, перейдя в Divi> Theme Customizer> General Settings> Layout Settings. В разделе «Параметры макета» обновите цвет доступа к теме до следующего:

Цвет акцента: # a06d51

Это цвет, который будет соответствовать макету меню пекарни, который мы будем использовать в этом уроке.

Обновление размера значка переключателя по умолчанию в настройщике модуля (необязательно)

Я подумал, что для этого дизайна было бы полезно отображать более крупный значок переключения при использовании модуля Divi Toggle. Вы можете изменить размер модуля Toggle по умолчанию, перейдя в Divi> Module Customizer. Затем выберите Toggle Module из списка и обновите размер значка следующим образом:

Размер значка переключения: 32

Настройка новой страницы с макетом страницы меню пекарни

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

Во всплывающем окне загрузки из библиотеки выберите Пакет макета пекарни, а затем щелкните, чтобы использовать макет страницы меню пекарни.

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

После этого вы готовы приступить к созданию меню!

Реализация пользовательского дизайна меню ресторана с помощью переключателей Divi и галерей изображений

Разработка переключателя пунктов меню

Включите Divi Builder в интерфейсе пользователя и добавьте модуль Toggle под текстовым модулем с подзаголовком «Sweet Tooth».

На данный момент вы можете оставить фиктивный контент по умолчанию, используемый для заголовка и основного содержимого. Но вам нужно будет добавить цену для пункта меню внутри основного содержимого вкладки. Щелкните вкладку «Текст» (вместо «Визуальный») и добавьте следующий HTML-код под текущим текстом по умолчанию.

<h5>$8.00</h5>

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

• Цвет значка: # a06d51
• Цвет текста открытого переключателя: # 333333
• Цвет текста закрытого переключателя: # 333333
• Цвет фона закрытого переключателя: #ffffff

• Шрифт заголовка: Patua One
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: TT
• Интервал между заглавными буквами: 1 пиксель
• Высота строки заголовка: 4em
• Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

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

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

• Ширина левой границы: 5 пикселей
• Цвет левой границы: # a06d51

Добавление галереи изображений в модуль Toggle

Как упоминалось ранее, когда вы включаете опцию Divi Gallery в параметрах темы Divi, встраиваемая галерея WordPress примет стиль галереи Divi. Это позволяет вам встроить галерею изображений в стиле Divi в любой модуль. В этом примере мы хотим добавить некоторые изображения внутри модуля переключения, чтобы отобразить некоторые изображения определенного пункта меню ресторана. Для этого откройте настройки переключателя и нажмите кнопку «Добавить мультимедиа» над полем содержимого.

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

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

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

Регулировка заполнения строк для смартфона

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

• Пользовательский отступ (телефон): 0 пикселей слева, 0 пикселей справа

Дублируйте тумблер по мере необходимости

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

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

Теперь давайте посмотрим на окончательный результат дизайна.

Изменение количества столбцов в галерее

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

Класс CSS: два столбца

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

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

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

Если вы хотите изменить цвет наложения при наведении курсора на элемент галереи без использования настраиваемого CSS, вы можете изменить настройки по умолчанию для модуля галереи в настройщике модулей. Для этого перейдите в Divi> Module Customizer. Затем щелкните модуль «Галерея» и измените цвет наложения при наведении на все, что захотите.

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

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

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

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