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

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

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

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

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

Рабочий стол

Мобильный

Скачайте The Custom Global Footer БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

1. Перейдите в конструктор тем Divi.

Начните с перехода к построителю тем в настройках темы Divi.

2. Добавить и построить глобальный нижний колонтитул

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

Добавить раздел # 1

Фоновый цвет

Пора начинать творить! Откройте раздел, который вы можете найти на странице, и измените цвет фона раздела.

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

Интервал

Затем измените настройки интервала раздела.

• Верхняя маржа: 6vw
• Левое поле: 6vw
• Правое поле: 6vw
• Отступ слева: 30 пикселей
• Отступ справа: 30 пикселей

Граница

Затем добавьте верхнюю левую и правую границу.

• Вверху слева: 20 пикселей
• Вверху справа: 20 пикселей

Коробка Тень

Включите тень блока в настройках раздела.

• Box Shadow Blur Strength: rgba (0,0,0,0.18).
• Цвет тени: rgba (0,0,0,0.18)

Добавить новую строку в раздел

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

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

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

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

Добавьте текстовый модуль с содержимым H2.

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

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

• Шрифт заголовка 2: Poppins
• Толщина шрифта заголовка 2: полужирный
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2: 31 пикс. (Рабочий стол), 24 пикс. (Планшет), 18 пикс. (Телефон)
• Высота строки заголовка 2: 1.6em

Размеры

Также добавьте максимальную ширину к модулю.

• Максимальная ширина: 700 пикселей

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

Добавить копию

Добавьте модуль кнопок прямо под текстовым модулем в столбце и введите любую копию по вашему выбору.

Выравнивание

Перейдите на вкладку дизайна модуля и измените выравнивание кнопки по центру.

• Расположение кнопок: по центру

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 12 пикселей
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: #FFFFFF
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 100 пикселей
• Расстояние между буквами кнопки: 1 пиксель
• Шрифт кнопки: Поппинс
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

Также добавьте несколько пользовательских значений заполнения.

• Верхний отступ: 14 пикселей
• Нижний отступ: 14 пикселей
• Отступ слева: 40 пикселей
• Отступ справа: 58 пикселей

Добавить раздел # 2

Фоновый цвет

Переходим к следующему регулярному разделу! Выберите цвет фона белого раздела.

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

Интервал

Затем удалите всю верхнюю и нижнюю обивку.

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

Граница

Также добавьте некоторый радиус границы к разделу.

• Вверху слева: 20 пикселей
• Вверху справа: 20 пикселей

Коробка Тень

И завершите настройки раздела, добавив тонкую тень блока.

• Сила размытия тени коробки: 135 пикселей
• Цвет тени: rgba (0,0,0,0.18)

Добавить новую строку в раздел

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

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

Размеры

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

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

Интервал

Затем удалите верхнее и нижнее заполнение строки по умолчанию.

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

Расстояние между столбцами

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

• Верхний отступ: 100 пикселей (рабочий стол), 50 пикселей (планшет и телефон)
• Нижний отступ: 100 пикселей (рабочий стол), 50 пикселей (планшет и телефон)
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

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

Добавить содержимое

Пора начинать добавлять модули! Добавьте обычный текстовый модуль в столбец 1 и вставьте контент по вашему выбору.

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: полужирный
• Цвет текста: # 000000
• Размер текста: 17 пикселей
• Выравнивание текста: по центру

Интервал

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

• Верхнее поле: 10 пикселей
• Нижнее поле: 30 пикселей

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

Видимость

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

• Показать разделитель: Да

Линия

Измените цвет линии на черный.

• Цвет линии: # 000000

Размеры

Измените также настройки размера разделителя.

• Ширина: 15%
• Выравнивание модуля: по центру

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

Добавить содержимое

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

Добавить ссылку

Добавьте ссылку на страницу, на которую должен ссылаться этот модуль.

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: легкий
• Цвет текста: # 777777
• Размер текста: 15 пикселей
• Выравнивание текста: по центру

Интервал

Также добавьте немного верхнего и нижнего поля.

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

Клонировать текстовый модуль №2 столько, сколько необходимо

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

Изменить контент и ссылки

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

Клонировать весь столбец дважды

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

Цвет фона столбца 2

Затем откройте настройки столбца 2 и измените цвет фона.

• Цвет фона столбца 2: # f9f9f9

Изменить контент и ссылки

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

Добавить новую колонку

Затем добавьте в строку четвертый столбец.

Фоновый цвет

Измените цвет фона нового столбца.

• Цвет фона: # 0fffc7

Интервал

Наряду со значениями заполнения столбца.

• Верхний отступ: 70 пикселей
• Нижний отступ: 70 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

Добавить модуль "Социальные сети" в столбец 4

Добавить социальные сети

Продолжите, добавив модуль отслеживания социальных сетей в столбец 4.

Сбросить стили социальных сетей

Сбросьте стили элементов для каждой добавляемой социальной сети.

Выравнивание

Затем перейдите на вкладку дизайна и измените выравнивание модуля.

• Выравнивание модуля: по центру

Настройки значков

Измените также цвет значка.

• Цвет значка: # 000000

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

Удалить содержимое

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

Адрес электронной почты

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

Удалить цвет фона

Продолжите, удалив цвет фона модуля.

• Использовать цвет фона: нет

Настройки полей

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

• Цвет фона полей: rgba (0,0,0,0)
• Цвет текста полей: # 000000
• Шрифт полей: Poppins

• Размер текста полей: 13 пикселей
• Ширина границы поля: 1px
• Цвет границы полей: # 000000

Настройки кнопок

Также стилизуйте кнопку вашего модуля.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 12 пикселей
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: #FFFFFF
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 100 пикселей
• Расстояние между буквами кнопки: 1 пиксель
• Шрифт кнопки: Поппинс
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

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

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

Динамический контент

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

Затем выберите параметр «Текущая дата».

• Динамическое содержимое: текущая дата

И измените настройки динамического содержимого следующим образом:

• Раньше: Авторское право и копия;
• После: | Все права защищены
• Формат даты: Пользовательский
• Пользовательский формат даты: 20 лет

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

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

• Шрифт текста: Поппинс
• Цвет текста: # 000000
• Размер текста: 16 пикселей

Интервал

Завершите настройки модуля, добавив верхнее поле, и все готово!

• Верхнее поле: 50 пикселей

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

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

Рабочий стол

Мобильный

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

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

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