Как сделать модули Blurb пригодными для использования в качестве элементов нижнего колонтитула в Divi

Rifat Divi Учебники Jan 28, 2022

Модули Blurb — отличные варианты для нижних колонтитулов Divi . Они могут отображать фотографии или значки в различных макетах и иметь несколько параметров настройки. Кроме того, они очень полезны для объединения ссылок и значков для создания стильных снарядов. К счастью, с модулями рекламных объявлений Divi вы можете легко создавать такие типы ссылок. В этом уроке мы рассмотрим интеграцию модулей рекламных объявлений в ваши нижние колонтитулы Divi .

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

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

Загрузка шаблона

В сегодняшнем уроке мы будем использовать заголовок и нижний колонтитул Divi Artificial Intelligence Layout Pack . Сначала перейдите на панель инструментов и перейдите к Divi.

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

Модули рекламных объявлений в качестве нижнего колонтитула

Мы обновим ссылки в разделах « Что мы делаем » и « Ресурсы ». Это позволит получить нужные ссылки и отметить их значками. Я буду использовать первый заголовок и сведу количество ссылок к минимуму. Мы украсим первую, прежде чем клонировать ее, чтобы сделать остальные.

Удалите столбец Ресурсы .

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

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

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

Настройка модуля рекламы

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

Я изменил название ссылки и удалил основной текст. Затем в разделе «Изображение и значок» выберите «Использовать значок». Затем выберите значок из средства выбора значков. В разделе «Ссылка» введите URL-адрес в поле «URL-адрес ссылки заголовка». Остальные настройки ссылки следует оставить в покое. Это единственное, что мы будем делать с этой вкладкой.

  • Заголовок: имя вашей ссылки
  • Значок: Двойные гаечные ключи
  • URL ссылки в заголовке: ваша ссылка

На вкладке «Дизайн» установите цвет значка. Установите Image/Icon Placement слева.

  • Цвет значка: #db0eb7
  • Расположение изображения/значка: слева

Выберите «Телефон» в разделе «Ширина изображения/значка».

  • Ширина изображения/значка телефона: 15 пикселей

Установите ширину границы изображения/значка на 1 пиксель и цвет на #39c0ed.

  • Ширина границы изображения/значка: 1px
  • Цвет рамки изображения/значка: #39c0ed

Добавьте отступы со всех четырех сторон поля Image/Icon Padding.

  • Отступ изображения/значка: 10 пикселей (сверху, снизу, слева, справа)

Измените текст заголовка.

  • Шрифт заголовка: Архив
  • Цвет текста заголовка: #ffffff

Установите верхний текст в середине.

Прокрутите до раздела «Интервалы» модуля описания и добавьте немного левого отступа.

  • Набивка рабочего стола, слева: 17vh
  • Телефонная прокладка слева: 7vh

Продвинутая вкладка

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

  • Вкладка «Дополнительно» Custom CSS Blurb Title: padding-top:12px

Дублирующий модуль Blurb

Затем продублируйте модуль рекламного объявления три раза, нажав кнопку «Дублировать модуль» три раза. Это позволит нам использовать модули аннотаций вместо текстовых ссылок для элементов нижнего колонтитула.

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

Окончательный дизайн

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

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

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