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

Нижняя панель нижнего колонтитула Divi - это небольшая, но важная часть вашего веб-сайта. А с определенными макетами страниц может потребоваться добавить творческий последний штрих к этой нижней панели.

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

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

Краткий обзор

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

Настройка нижней панели нижнего колонтитула в настройщике тем

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

Перейдите в настройщик темы и перейдите в Нижний колонтитул> Нижняя панель. Затем измените цвет фона, чтобы он был полностью прозрачным.

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

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

Создание дизайна фона сечения для нижней панели

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

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

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

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

Пользовательское поле: 0 пикселей сверху, 0 пикселей снизу
Настраиваемый отступ (рабочий стол): 80 пикселей сверху, 80 пикселей снизу
Пользовательский отступ (планшет): 100 пикселей сверху, 100 пикселей снизу

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

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

Пользовательское поле (для настольных ПК): -55 пикселей снизу
Пользовательское поле (планшет): -94px снизу
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

Нижнее поле -55px втягивает нижнюю панель в область раздела, так что любой дизайн, который мы добавляем в наш раздел, будет находиться за нашей нижней полосой. Высота нижней панели по умолчанию составляет 54 пикселя на рабочем столе и около 94 пикселей на планшете, поэтому для планшета требуется большее отрицательное поле.

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

Добавляем нижний разделитель

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

Стиль нижнего разделителя: см. Снимок экрана
Цвет разделителя: # 121212
Высота разделителя: 120 пикселей (рабочий стол), 150 пикселей (планшет), 150 пикселей (смартфон)
Повторение по горизонтали делителя: 0,9x (настольный ПК), 0,5x (планшет), 0,5x (смартфон)
Divider Flip: вертикальный

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

На вкладке «Дополнительно» добавьте следующий пользовательский фрагмент CSS к основному элементу:

z-index: 0;

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

И он отлично подойдет для мобильных устройств.

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

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

Вот несколько примеров.

Использование верхнего разделителя с настраиваемым фоновым градиентом

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

Перейдите в настройки раздела и установите для стиля нижнего разделителя значение «Нет». Затем добавьте градиент фона в качестве фона раздела.

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

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

Комбинирование разделителей с фоновыми градиентами для создания разноцветной рамки

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

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

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

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

Цвет фонового градиента слева: # 29c4a9
Цвет фонового градиента слева: # 2b87da

Направление градиента: 90 градусов
Стартовая позиция: 50%
Конечное положение: 0%

Теперь добавьте верхний разделитель следующим образом:

Стиль верхнего делителя: см. Снимок экрана
Цвет разделителя: #ffffff
Высота разделителя: 120 пикселей (рабочий стол), 150 пикселей (планшет), 150 пикселей (смартфон)
Повторение по горизонтали делителя: 0,9x (настольный ПК), 0,5x (планшет), 0,5x (смартфон)
Divider Flip: вертикальный

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

Теперь перейдите к настройкам строки и добавьте фоновый градиент следующим образом:

Цвет фонового градиента слева: # df52ff
Цвет фонового градиента слева: # 2b87da

Направление градиента: 90 градусов
Стартовая позиция: 50%
Конечное положение: 0%

Чтобы выровнять ширину каждого цветового сегмента для фона, задайте ширину строки 50%.

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

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

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

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

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

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