Хотите создать собственный нижний колонтитул в DIVI?
Одной из наиболее важных частей конструктора тем Divi является возможность динамически добавлять глобальные нижние колонтитулы к вашим веб-страницам и сообщениям.
После того, как вы разработали нижний колонтитул, вы можете автоматически добавить его на любой тип страницы или публикации, используя конструктор тем Divi.
В этом руководстве мы шаг за шагом проведем вас через процесс создания и добавления глобального нижнего колонтитула в ваш Веб-сайт.
обследование
Прежде чем мы углубимся в руководство, давайте взглянем на нижний колонтитул, который мы собираемся разработать.
офис
Перейдите в конструктор тем Divi и добавьте глобальный нижний колонтитул.
- Перейдите в Divi > Theme Builder и нажмите « Добавить глобальный нижний колонтитул«
- Выбирать " Создайте глобальный нижний колонтитул«
Настроить раздел № 1
Фоновый цвет
Откройте раздел, который вы можете найти на странице, и измените цвет фона раздела.
- Фон: #000000
расстояние
Перейти на вкладку Стиль а затем измените параметры интервала для раздела.
- Поле (сверху, слева и справа): 6vw
- Внутреннее поле (слева и справа): 30 пикселей
Граница
Затем добавьте верхнюю границу слева и справа.
- Верхний левый прямоугольник со скругленными углами: 20px
- Верхний правый прямоугольник со скругленными углами: 20px
Shadow box
Также включите тень коробки в настройках раздела.
- Сила размытия теней лука: 135 пикселей
- Цвет шрифта субтитров: rgba(0,0,0,0.18)
Добавить новую строку в раздел
Структура колонны
Продолжите, добавив строку в свой раздел, используя следующую структуру столбцов:
Добавьте текстовый модуль в столбец
Добавьте заголовок размером H2 (Заголовок 2)
Вставьте текстовый модуль с содержание размера H2.
Настройки текста H2
Перейдите на вкладку Стиль модуля и соответствующим образом измените параметры текста H2:
- Шрифт заголовка: Poppins
- Приглушенный светлый заголовок: полужирный
- Выравнивание текста: по центру
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 31px (рабочий стол), 24px (планшет), 18px (телефон)
- Высота строки заголовка: 1,6 em
калибровка
Также добавьте максимальную ширину модуля.
- Максимальная ширина: 700 пикселей
Добавить модуль кнопки в столбец
Добавить текст к кнопке
Вставьте модуль «Кнопка» сразу под модулем «Текст» в свой столбец и введите текст по вашему выбору.
Alignement
Перейдите на вкладку Стиль модуля и измените выравнивание кнопки по центру.
- Выравнивание кнопок: по центру
Настройки кнопок
Продолжите, настроив кнопку.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 12px
- Цвет текста кнопки: #000000
- Фоновая кнопка: #FFFFFF
- Кнопка ширины границы: 0 пикселей
Читайте также: Как отобразить страницу блога в виде карусели в DIVI
- Радиус границы кнопки: 100 пикселей
- Расстояние между буквами кнопки: 1 пикселя
- Шрифт кнопки: Поппинс
- Кнопка мягкого света: полужирный
- Кнопка копирования стиля: TT
расстояние
Также добавьте пользовательские значения заполнения.
- Внутреннее поле (сверху и снизу): 14 пикселей
- Внутреннее поле: слева (40 пикселей); Вправо (58 пикселей)
Раздел #2
Добавьте второй «нормальный» раздел под предыдущим.
Фоновый цвет
Изменить цвет фона
- Фон: #ffffff
расстояние
Затем удалите все внутренние поля (сверху и снизу).
- Внутреннее поле (сверху и снизу): 0px
граница
Также добавьте радиус границы к разделу.
- Прямоугольник со скругленными углами (вверху слева): 20 пикселей
- Прямоугольник со скругленными углами (вверху справа): 20 пикселей
Shadow box
И завершите настройку раздела, добавив тонкую тень коробки.
- Сила размытия тени коробки: 135 пикселей
- Цвет шрифта субтитров: rgba(0,0,0,0.18)
Добавить новую строку в раздел
Структура колонны
После завершения настройки раздела добавьте новую строку, используя следующую структуру столбцов:
калибровка
Пока не добавляя никаких модулей, откройте настройки строки и измените их следующим образом:
- Использовать пользовательскую ширину желоба: Да
- Расстояние между столбцами: 1
- Гармонизация высоты столбцов: Да
- Максимальная ширина: 100%
- Максимальная ширина: 100%
расстояние
Затем удалите внутренние поля по умолчанию (верхнее и нижнее) из строки.
- Внутреннее поле (сверху и снизу): 0px
Расстояние между столбцами
Продолжите, открыв настройки столбца, чтобы добавить пользовательские значения заполнения.
- Внутреннее поле (сверху и снизу): 100 пикселей (для настольных компьютеров), 50 пикселей (для планшетов и телефонов).
- Внутреннее поле (слева и справа): 100 пикселей (для настольных компьютеров), 50 пикселей (для планшетов и телефонов).
Добавить модуль «Текст №1» в столбец
Добавить контент
Теперь мы можем добавлять к нему модули. Добавьте текстовый модуль в столбец и вставьте содержание де Votre Choix.
Настройки текста
Перейдите на вкладку Стиль модуля и соответствующим образом измените текстовые параметры:
- Шрифт текста: Poppins
- Вес шрифта текста: полужирный
- Цвет текста: #000000
- Размер текста: 17 пикселей
- Выравнивание текста: по центру
расстояние
Затем добавьте настраиваемые (сверху и снизу) поля.
- Верхнее поле: 10 пикселей
- Нижнее поле: 30 пикселей
Добавьте модуль Separator в столбец
Сразу под модулем Text добавьте модуль Separator.
видимость
Убедитесь, что опция " Показать разделитель Включен
- Показать разделитель: Да
Линия
Измените цвет линии на черный.
- Цвет этикетки: #000000
калибровка
Также измените настройки размера сплиттера.
- Максимальная ширина: 15%
- Выравнивание текста: по центру
Добавить модуль «Текст №2» в столбец
Добавить контент
Продолжите, добавив в столбец еще один текстовый модуль, а также содержание де Votre Choix.
Добавить ссылку
Вставьте ссылку на страницу, на которую должен ссылаться этот модуль.
Настройки текста
Затем перейдите на вкладку Стиль и измените настройки текста следующим образом:
- Шрифт текста: Поппинс
- Мягкий светлый текст: ясно
- Цвет текста Текст: #777777
- Текст Размер текста: 15 пикселей
- Выравнивание текста: по центру
расстояние
Также добавьте поля (сверху и снизу).
- Поле (сверху и снизу): 10 пикселей
Клонируйте текстовый модуль № 2 по мере необходимости.
После того, как вы закончите второй текстовый модуль, вы можете клонировать его столько раз, сколько вам нужно (в зависимости от того, сколько интерактивных элементов нижнего колонтитула вы хотите включить).
Редактировать контент и ссылки
Обязательно отредактируйте содержимое модуля и ссылки для каждого дубликата.
Клонировать всю колонку дважды
После того, как вы завершили колонку и ее модули, вы можете клонировать ее дважды.
Цвет фона столбца 2
Затем откройте настройки для столбца 2 и измените цвет фона.
- Фон: #f9f9f9
Редактировать контент и ссылки
Обязательно отредактируйте все содержимое и ссылки в каждом дублирующемся столбце.
Добавить новый столбец
Затем добавьте в строку четвертый столбец.
Фоновый цвет
Измените цвет фона нового столбца.
- Фон: #0fffc7
расстояние
Измените внутренние поля следующим образом:
- Внутреннее поле (сверху и снизу): 70 пикселей
- Внутреннее поле (слева и справа): 50 пикселей
Добавьте модуль «Подпишитесь на нас в социальных сетях» в столбец 4.
Добавить социальные сети
Продолжить, добавив модуль " Следите за нами в социальных сетях в столбце 4 и вставьте социальные сети по вашему выбору.
Сбросить стили значков социальных сетей
Нажмите ' Сбросить стили элементов ролей для каждой из социальных сетей.
Alignement
Затем перейдите на вкладку Стиль и изменить выравнивание модуля.
- Выравнивание текста: по центру
Настройки значка
Также измените цвет значков социальных сетей.
- Цвет значка: #000000
Добавьте модуль электронной почты Optin в столбец 4
Вставьте мод" Электронная почта "под модулем" Следите за нами в социальных сетях«
Очистить содержимое и заголовок модуля
Адрес электронной почты
Затем добавьте учетную запись электронной почты. Если вы не добавите учетную запись электронной почты, модуль не будет отображаться после выхода из конструктора тем.
Удалить цвет фона
- Использовать цвет фона: Нет
Настройки поля
Перейти на вкладку Стиль и измените настройки поля следующим образом:
- Поля цвета фона: rgba(0,0,0,0)
- Цветовые поля текста: #000000
- Шрифт Champs: Poppins
- Поля размера текста: 13px
- Поля ширины границы: 1 пиксель
Настройки кнопок
Также настройте кнопку вашего модуля.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 12 пикселей
- Цвет текста кнопки: #000000
- Фоновая кнопка: #FFFFFF
- Ширина границы: 0px
- Радиус границы кнопки: 100 пикселей
- Расстояние между буквами кнопки: 1 пикселя
- Шрифт кнопки: Поппинс
- Кнопка тусклого света: полужирный
- Кнопка копирования стиля: TT
Смотрите также: Как создать липкую контактную форму в DIVI
- Отступы кнопок (сверху и снизу): 15 пикселей
Добавить динамический текстовый модуль в столбец 4
Следующий и последний модуль, который нам нужен для завершения этого дизайна, — это текстовый модуль.
Активируйте опцию " Используйте динамический контент".
Затем выберите опцию текущая дата".
И измените настройки динамического содержимого следующим образом:
- Лицевая сторона: авторское право ©
- После: | Все права защищены
- Формат даты: таможня
- Пользовательский формат даты: 20 лет
Настройки текста
Затем перейдите на вкладку стиля и измените настройки текста:
- Шрифт текста: Поппинс
- Цвет текста Текст: #000000
- Текст Размер текста: 16 пикселей
расстояние
Заполните параметры модуля, добавив поля и вуаля!
- Верхнее поле: 50 пикселей
Сохранить глобальные параметры нижнего колонтитула и конструктора тем
Когда вы закончите, обязательно сохраните свою работу перед выходом из конструктора. Диви тема.
Как только вы выйдете из макета шаблона, сохраните все изменения конструктора тем, и все готово!
обследование
Теперь, когда мы прошли все шаги, давайте в последний раз взглянем на результат.
Скачайте DIVI прямо сейчас!!!
Заключение
В этом уроке мы показали вам, как легко создать красивый настраиваемый глобальный нижний колонтитул с помощью конструктора тем Divi.
Мы надеемся, что этот урок вдохновит вас на создание красивых глобальных нижних колонтитулов для ваших следующих проектов Divi.
Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
