Как добавить нижнюю панель с абсолютным позиционированием в раздел вашего героя с помощью Divi

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

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

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

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

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

Рабочий стол

Мобильный

Загрузите макет раздела героя абсолютной нижней панели БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Начнем воссоздавать!

Добавить новый раздел

Градиентный фон

Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки раздела и примените градиентный фон.

• Цвет 1: rgba (0,0,0,0.62)
• Цвет 2: rgba (0,0,0,0.97)
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Затем загрузите фоновое изображение по вашему выбору.

Интервал

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

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

Переполнения

Мы также скрываем переливы раздела.

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Добавить строку №1

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

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

Интервал

Еще не добавляя никаких модулей, откройте настройки строки и примените верхнее и нижнее поле.

• Максимальная маржа: 20%
• Нижняя маржа: 20%

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

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

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

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

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

• Шрифт заголовка: Work Sans
• Цвет текста заголовка: #ffffff
• Размер текста заголовка:
  • Рабочий стол: 80 пикселей
  • Таблетка: 50 пикселей
  • Телефон: 40 пикселей
• Интервал между буквами заголовка:
  • Рабочий стол: -4px
  • Планшет и телефон: -2 пикселя

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

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

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

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

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

• Шрифт текста: Open Sans
• Цвет текста: # a0a0a0

Размеры

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

• Ширина:
  • ПК: 68%
  • Планшет и телефон: 100%

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

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

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

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

Добавьте ссылку на кнопку.

• URL ссылки на кнопку: #

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

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

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

• Шрифт кнопки: Work Sans
• Показать значок кнопки: Да
• Расположение значка кнопки: слева

Добавить строку №2

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

Пришло время создать нижнюю панель раздела героя! Для этого мы добавим новую строку, используя следующую структуру столбцов:

Размеры

Еще не добавляя модули, откройте настройки строки и измените настройки размера.

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

Интервал

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

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

Коробка Тень

Включите также тень блока.

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

Позиция

Затем перейдите на вкладку «Дополнительно» и переместите всю строку на рабочем столе. Верните его к значениям по умолчанию на экранах меньшего размера. Настройки положения этой строки гарантируют, что строка прилипнет к нижней части контейнера раздела.

• Позиция:
  • Рабочий стол: Абсолютный
  • Планшет и телефон: по умолчанию
• Расположение: внизу по центру

Столбец 1 Настройки

Интервал

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

• Верхняя набивка: 3%
• Нижняя обивка: 3%
• Левый отступ: 3%
• Правое заполнение: 3%

Граница

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

• Верхняя граница:
  • Ширина верхней границы: 5 пикселей
  • Цвет верхней границы:
    • По умолчанию: rgba (255,255,255,0)
    • Наведите указатель мыши: #ffffff
• Нижняя граница:
  • Ширина нижней границы:
    • Рабочий стол и планшет: 0 пикселей
    • Телефон: 3px
  • Цвет нижней границы: rgba (255,255,255,0.11)
• Левая граница:
  • Ширина левой границы:
    • Рабочий стол: 0px
    • Таблетка: 3 пикселя
    • Телефон: 0px
  • Цвет левой границы: rgba (255,255,255,0.11)

Столбец 2 Настройки

Интервал

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

• Верхняя набивка: 3%
• Нижняя обивка: 3%
• Левый отступ: 3%
• Правое заполнение: 3%

Граница

И включите следующие адаптивные границы:

• Верхняя граница:
  • Ширина верхней границы: 5 пикселей
  • Цвет верхней границы:
    • По умолчанию: rgba (255,255,255,0)
    • Наведите указатель мыши: #ffffff
• Нижняя граница:
  • Ширина нижней границы:
    • Рабочий стол и планшет: 0 пикселей
    • Телефон: 3px
  • Цвет нижней границы: rgba (255,255,255,0.11)
• Левая граница:
  • Ширина левой границы:
    • Рабочий стол: 3 пикселя
    • Таблетка: 3 пикселя
    • Телефон: 0px
  • Цвет левой границы: rgba (255,255,255,0.11)

Столбец 3 Настройки

Интервал

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

• Верхняя набивка: 3%
• Нижняя обивка: 3%
• Левый отступ: 3%
• Правое заполнение: 3%

Граница

Наряду со следующими настройками границы:

• Верхняя граница:
  • Ширина верхней границы: 5 пикселей
  • Цвет верхней границы:
    • По умолчанию: rgba (255,255,255,0)
    • Наведите указатель мыши: #ffffff
• Левая граница:
  • Ширина левой границы:
    • Рабочий стол: 3 пикселя
    • Таблетка: 3 пикселя
    • Телефон: 0px
  • Цвет левой границы: rgba (255,255,255,0.11)

Столбец 4 Настройки

Фоновый цвет

Переходим к последней колонке. Добавьте белый цвет фона.

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

Интервал

Примените некоторые настраиваемые значения адаптивного заполнения.

• Верхняя обивка
  • ПК: 3%
  • Таблетка: 3%
  • Телефон: 10%
• Нижняя обивка:
  • ПК: 3%
  • Таблетка: 3%
  • Телефон: 10%
• Левый отступ:
  • ПК: 3%
  • Таблетка: 5%
  • Телефон: 10%
• Правый отступ:
  • ПК: 3%
  • Таблетка: 5%
  • Телефон: 10%

Позиция

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

• Позиция:
  • Рабочий стол: Абсолютный
  • Планшет и телефон: по умолчанию
• Расположение: внизу справа

Клонировать модуль кнопки в предыдущей строке и поместить дубликат в столбец 1 новой строки

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

Изменить выравнивание кнопок

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

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

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

Измените копию модуля и перейдите по ссылке.

Клонировать кнопку в столбце 1 дважды и разместить дубликаты в столбце 2 и 3

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

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

Измените копию и ссылки для каждого дубликата.

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

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

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

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

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

• Шрифт заголовка 2: Work Sans
• Цвет текста заголовка 2: # 000000
• Интервал между буквами заголовка 2: -2 пикселя

Интервал

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

• Нижняя маржа: 10%

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

Сделать поля полной ширины

Затем добавьте модуль контактной формы прямо под текстовым модулем. Откройте поля имени и адреса электронной почты по отдельности и включите параметр «Сделать полную ширину» для обоих.

• Сделать полную ширину: Да

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

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

• Цвет фона полей: #ffffff
• Цвет текста полей: # 000000
• Верхнее заполнение полей: 4%
• Заполнение нижних полей: 4%
• Шрифт полей: Work Sans
• Размер текста полей: 13 пикселей

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

Затем внесите некоторые изменения в настройки текста капчи.

• Шрифт Captcha: Work Sans
• Цвет текста Captcha: # 000000

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

Мы тоже стилизуем кнопку.

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

• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: -1px
• Шрифт кнопки: Work Sans

Граница

И последнее, но не менее важное: мы добавим ширину нижней границы. Вот и все!

• Ширина нижней границы входов: 1px
• Цвет нижней границы входов: #dddddd

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

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

Рабочий стол

Мобильный

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

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

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