Продажа на рожденских элементах

Наслаждайтесь 60% скидкой на новые покупки, обновление и обновления.

00 Дни
:
00 Часы
:
00 Минуты
:
00 Секунды

купить сейчас

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

Rifat Divi Учебники Apr 11, 2022

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

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

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

Процедура проектирования

Во-первых, войдите в свою панель управления WordPress. В параметрах темы Divi перейдите к конструктору тем.

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

Amazing Deals

Элементар 6 -й день рождения со скидкой до 60%

Начать сейчас

Раздел № 1

Цвет фона

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

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

Расстояние

Затем обновите расстояние между секциями в соответствии со следующими значениями.

  • Верхнее поле: 6vw
  • Левое поле: 6vw
  • Правое поле: 6vw
  • Отступ слева: 30px
  • Правый отступ: 30px

Граница

Следующим шагом будет добавление границы сверху, слева и справа.

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

Коробчатая тень

Box-shadow также должен быть включен в настройках раздела.

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

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

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

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

Затем добавьте текстовый модуль и добавьте копию к этому модулю.

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

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

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

Размер текстового модуля

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

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

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

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

Выравнивание кнопок

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

  • Выравнивание кнопок: по центру

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

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

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 12px
  • Цвет текста кнопки: #000000
  • Цвет фона кнопки: #FFFFFF
  • Ширина границы кнопки: 0px
  • Радиус границы кнопки: 100 пикселей
  • Расстояние между буквами кнопки: 1px
  • Шрифт кнопки: Поппинс
  • Вес шрифта кнопки: полужирный
  • Стиль шрифта кнопки: верхний регистр

Расстояние между кнопками

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

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

Раздел № 2

Фоновый цвет

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

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

Расстояние

Удалите всю амортизацию сверху и снизу.

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

Граница

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

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

Коробчатая тень

Теперь завершите редактирование раздела, добавив тень блока.

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

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

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

Размер строки

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

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

Расстояние между рядами

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

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

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

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

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

Текстовый модуль 1

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

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

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

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

Расстояние

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

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

Видимость модуля делителя

Модули-разделители можно добавить сразу под текстовым модулем, если установлен флажок «Показать разделитель».

  • Разделитель шоу: Да

Линия

Теперь измените цвет.

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

Размеры

Размер разделителя также может быть изменен.

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

Текстовый модуль 2

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

Связь

Включите URL-адрес страницы, на которую вы хотите указать этот модуль.

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

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

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

Расстояние

Также оставьте немного места вверху и внизу страницы.

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

Текстовый модуль 2 Клонирование

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

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

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

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

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

Колонка 2 Изменение цвета фона

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

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

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

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

Фоновый цвет

Раскрасьте фон новой колонки.

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

Расстояние

В дополнение к значениям заполнения в столбце.

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

Значок социальных сетей

Добавьте модуль «Отслеживание в социальных сетях» в столбец 4, чтобы заполнить таблицу.

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

На вкладке «Дизайн» отрегулируйте положение модуля.

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

Икона

Теперь измените цвет значка.

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

Модуль электронной почты

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

Кроме того, удалите BG из модуля электронной почты.

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

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

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

Кнопка

Теперь измените стиль кнопки.

  • Использовать пользовательские стили для кнопки: Да
  • Размер текста кнопки: 12px
  • Цвет текста кнопки: #000000
  • Цвет фона кнопки: #FFFFFF
  • Ширина границы кнопки: 0px
  • Радиус границы кнопки: 100 пикселей
  • Расстояние между буквами кнопки: 1px
  • Шрифт кнопки: Поппинс
  • Вес шрифта кнопки: полужирный
  • Стиль шрифта кнопки: верхний регистр
  • Верхнее заполнение: 15px
  • Нижний отступ: 15px

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

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

  • Динамический контент: Текущая дата
  • До: Copyright ©
  • После: | Все права защищены
  • Формат даты: Пользовательский
  • Пользовательский формат даты: 20 лет

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

На вкладке «Дизайн» измените следующие параметры.

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

Расстояние

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

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

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

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

Заключительные мысли

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