Как добавить виджеты меню категории сообщений в глобальный нижний колонтитул Divi

Когда вы создаете собственный нижний колонтитул в Divi Theme Builder, есть несколько способов добавить элементы нижнего колонтитула. Вы можете выбрать нижний колонтитул на основе модулей, где вы добавляете элементы нижнего колонтитула внутри текстовых модулей с соответствующими ссылками, но вы также можете добавить в свой дизайн различные виджеты нижнего колонтитула, используя модуль боковой панели Divi, и стилизовать их с помощью встроенного в Divi параметры. В сегодняшнем уроке мы покажем вам, как использовать второй вариант. В частности, мы покажем вам, как добавить виджеты меню категорий сообщений в нижний колонтитул. Стиль дизайна, который мы используем, идеально подходит для набора макетов Food Recipes Layout Pack. Мы начнем с добавления различных категорий сообщений на наш веб-сайт. Затем мы создадим меню нижнего колонтитула внутри WordPress. Затем мы создадим наши виджеты и, наконец, что не менее важно, мы добавим виджеты в наш специально созданный нижний колонтитул Divi внутри Divi Theme Builder. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

Загрузите шаблон глобального нижнего колонтитула БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Настройте категории сообщений для своего веб-сайта.

Перейти к категориям сообщений

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

Настройте структуру категорий сообщений по вашему выбору

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

2. Создайте несколько категорий меню WordPress.

Перейти в меню

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

Создать меню первого нижнего колонтитула

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

• Название меню: Меню нижнего колонтитула №1

Добавить категории сообщений

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

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

Сделайте то же самое для двух других групп категорий сообщений.

• Название меню: Меню нижнего колонтитула №2

• Название меню: Меню нижнего колонтитула №3

3. Создайте виджеты нижнего колонтитула.

Перейти к виджетам

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

Добавить меню нижнего колонтитула №1 в область нижнего колонтитула №1

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

Добавить меню нижнего колонтитула №2 в область нижнего колонтитула №2

Поместите меню второй категории сообщений во вторую область нижнего колонтитула.

Добавить меню нижнего колонтитула №3 в область нижнего колонтитула №3

И третье нижнее меню в третьей области нижнего колонтитула.

Добавить недавние сообщения в область нижнего колонтитула №4

Последний виджет, который нам нужен, который мы добавим в четвертый нижний колонтитул, - это виджет последних сообщений. Этот виджет будет динамически отображать ваши 5 последних последних сообщений в виде ссылок.

3. Создайте глобальный нижний колонтитул внутри Divi Theme Builder.

Перейдите в свой конструктор тем Divi и начните создавать шаблон нижнего колонтитула

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

Настройки раздела

Фоновый цвет

Оказавшись внутри шаблона нижнего колонтитула, вы заметите раздел. Откройте этот раздел и добавьте к нему цвет фона. Стиль, который мы используем во всем этом дизайне, идеально соответствует пакету макетов Food Recipes Layout Pack, но этот подход будет работать с любым дизайном, который вы выберете.

• Цвет фона: # ff7864

Фоновая картинка

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

• Размер фонового изображения: По размеру

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить строку №1

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Градиентный фон

Еще не добавляя никаких модулей, откройте настройки строки и примените градиентный фон.

• Цвет 1: rgba (10,10,10,0,05)
• Цвет 2: rgba (10,10,10,0.18)

Размеры

Перейдите на вкладку дизайна строки и измените настройки размера следующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Максимальная ширина: 1680 пикселей

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Столбец 1 Настройки

Интервал

Затем откройте настройки столбца 1 и добавьте несколько пользовательских значений заполнения на вкладке дизайна.

• Верхняя набивка: 5%
• Нижняя обивка: 5%
• Левый отступ: 5%
• Правое заполнение: 5%

Граница

Мы также используем правую границу на рабочем столе.

• Ширина правой границы:
  • Рабочий стол: 2 пикселя
  • Планшет и телефон: 0 пикселей
• Цвет правой границы: # ff7864

Столбец 2 Настройки

Интервал

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

• Верхняя набивка: 5%
• Нижняя обивка: 5%
• Левый отступ: 5%
• Правое заполнение: 5%

Добавить модуль изображения в столбец 1

Загрузить логотип

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

Добавить текстовый модуль в столбец 2

Добавить контент H2

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

Настройки текста H2

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста H2:

• Шрифт заголовка 2: Cormorant Garamond
• Толщина шрифта заголовка 2: средний
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2:
  • Рабочий стол и планшет: 40 пикселей
  • Телефон: 35px
• Высота строки заголовка 2: 1,3 м

Добавить строку №2

Структура столбца

Переходим к следующему ряду. В этом ряду мы разместим все наши виджеты. Выберите следующую структуру столбцов:

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и примените цвет фона.

• Цвет фона: rgba (10,10,10,0.05)

Размеры

Перейдите на вкладку дизайна и измените настройки размера следующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Максимальная ширина: 1680 пикселей

Интервал

Удалите также все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Все интервалы между столбцами

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

• Верхняя набивка: 5%
• Нижняя обивка: 5%
• Левый отступ: 5%
• Правое заполнение: 5%

Граница столбца 1

Далее мы добавим границу к столбцу 1.

• Ширина правой границы:
  • Рабочий стол и планшет: 2 пикселя
  • Телефон: 0px
• Цвет правой границы: # ff7864

Граница столбца 2

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

• Ширина правой границы:
  • Рабочий стол: 2 пикселя
  • Телефон и планшет: 0 пикселей
• Цвет правой границы: # ff7864

Граница столбца 3

И последнее, но не менее важное: мы также добавим правую границу к третьему столбцу.

• Ширина правой границы:
  • Рабочий стол и планшет: 2 пикселя
  • Телефон: 0px
• Цвет правой границы: # ff7864

Добавить модуль боковой панели в столбец 1

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

Выберите область нижнего колонтитула №1

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

• Область виджетов: область нижнего колонтитула №1

Макет

Перейдите на вкладку дизайна модуля и отключите разделитель границ.

• Показать разделитель границ: нет

Настройки основного текста

Измените также настройки основного текста.

• Шрифт: Montserrat
• Плотность шрифта: средний
• Цвет основного текста: #ffffff
• Размер основного текста: 13 пикселей

Интервал

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

• Верхняя набивка: 5%
• Нижняя обивка: 5%

Клонировать модуль боковой панели дважды и размещать дубликаты в столбцах 2 и 3

Завершив первый модуль боковой панели, вы можете дважды клонировать его и поместить дубликаты в столбцы 2 и 3.

Изменить области нижнего колонтитула

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

• Область виджетов: область нижнего колонтитула №2

• Область виджетов: область нижнего колонтитула №3

Добавить модуль боковой панели в столбец 4

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

Выберите область нижнего колонтитула №4

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

• Область виджетов: область нижнего колонтитула №4

Настройки текста заголовка

Перейдите на вкладку дизайна модуля и измените настройки текста заголовка следующим образом:

• Шрифт заголовка: Cormorant Garamond
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 30 пикселей

Настройки основного текста

Также внесите некоторые изменения в настройки основного текста.

• Шрифт: Montserrat
• Плотность шрифта: средний
• Цвет основного текста: #dddddd
• Размер основного текста: 13 пикселей

Интервал

И завершите настройки модуля и это руководство, добавив некоторые пользовательские верхние и нижние отступы в настройки интервала модуля. Вот и все! Убедитесь, что вы сохранили все изменения Divi Theme Builder, прежде чем просматривать результат на своем веб-сайте.

• Верхняя набивка: 5%
• Нижняя обивка: 5%

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

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

Рабочий стол

Мобильный

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

В этом руководстве мы показали вам, как объединить конструктор тем Divi с виджетами нижнего колонтитула WordPress и модулем боковой панели Divi. В частности, мы показали вам, как добавить виджеты меню категорий сообщений в глобальный нижний колонтитул, чтобы упростить навигацию ваших посетителей. Этот подход поможет вам стилизовать элементы нижнего колонтитула с использованием встроенных параметров Divi, сохраняя при этом меню и виджеты нижнего колонтитула внутри вашего бэкэнда WordPress. Вы также смогли бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.