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

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон страницы БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Обзор учебного пособия

• Настройте страницы на своем веб-сайте с помощью пакета макетов по вашему выбору
• После того, как стиль оформления вашей страницы настроен, вы можете повторно использовать его в контактной форме внизу страницы.
• Чтобы добавить контактную форму нижней страницы, вам сначала нужно создать новый шаблон, посвященный всем страницам.
• После создания шаблона вы можете приступить к созданию тела шаблона с помощью визуального конструктора Divi.
• Чтобы убедиться, что все уникальное содержимое страницы отображается на каждой странице, мы добавим модуль содержимого публикации
• Модуль содержания сообщения содержит весь динамический дизайн страницы.
• Под модулем содержания сообщения мы добавим еще один раздел для нашей контактной формы.
• Мы разработаем контактную форму и обязательно добавим уникальный CSS ID в раздел, мы будем использовать этот CSS ID для создания ссылки привязки.
• Бонус: мы добавим фиксированный значок в правом нижнем углу каждой из наших страниц и свяжем значок с разделом контактов этой конкретной страницы.

1. Настройте страницы веб-сайта с помощью пакета макетов по выбору.

Подход, который мы используем, работает на любом веб-сайте, который вы создаете. Но для этого конкретного урока мы используем стиль дизайна Magazine Layout Pack. Если вы используете этот подход на любом другом веб-сайте, не стесняйтесь настраивать дизайн под свои нужды.

2. Перейдите в Divi Theme Builder и добавьте новый шаблон страницы.

Перейдите в конструктор тем Divi и добавьте новый шаблон страницы

Перейдите в конструктор тем Divi на своем веб-сайте. Там добавьте новый шаблон.

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

• Использовать на: Все страницы

Начать создание тела шаблона

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

3. Добавить содержимое страницы в тело шаблона.

Настройки раздела

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

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

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

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

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

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

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

• Цвет 1: #ffffff
• Цвет 2: # ffc077
• Стартовая позиция: 50%
• Конечная позиция: 50%

CSS ID

Включите также идентификатор CSS.

• CSS ID: контакт

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

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

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

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

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

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

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

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

• Шрифт заголовка 2: Montserrat
• Толщина шрифта заголовка 2: полужирный
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 70 пикселей (рабочий стол), 48 пикселей (планшет), 36 пикселей (телефон)
• Высота строки заголовка 2: 1,2 м

Размеры

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

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

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

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

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

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

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

• Шрифт текста: Cardo
• Толщина шрифта текста: полужирный
• Цвет текста: rgba (0,0,0,0.03)
• Размер текста: 150 пикселей (рабочий стол), 100 пикселей (планшет), 60 пикселей (телефон)
• Высота текстовой строки: 1em

Интервал

И поиграйте с настройками интервалов на экранах разных размеров.

• Верхнее поле: -0.8em (рабочий стол), -100px (планшет), -80px (телефон)
• Левое поле: -0.8em (настольный компьютер и планшет), -60px (телефон)

Добавить контактную форму в столбец 2

Добавить все необходимые поля

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

Полная ширина полей имени поворота и адреса электронной почты

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

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

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

Вернитесь к общим настройкам контактной формы и измените цвет фона полей.

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

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

Затем измените настройки кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 14 пикселей
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000 (по умолчанию), # ff2a38 (при наведении)
• Ширина границы кнопки: 8 пикселей

• Цвет границы кнопки: rgba (0,0,0,0)
• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Толщина шрифта кнопок: Ультра полужирный
• Стиль шрифта кнопок: прописные
• Значок кнопки: найти в списке

Граница

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

• Все углы: 5 пикселей

Коробка Тень

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

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

Бонус: добавление фиксированного нижнего правого значка привязки в тело шаблона

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

Интервал

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

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

Индекс Z

Увеличьте также z-индекс раздела. Это гарантирует, что значок останется поверх всего содержимого страницы.

• Индекс Z: 99999

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

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

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

Размеры

Откройте настройки строки и позвольте строке занять всю ширину секции.

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

Интервал

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

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

Добавить модуль Blurb в столбец

Оставьте поле заголовок и содержимое пустым

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

Выбрать значок

Затем выберите нужный значок.

Ссылка

Свяжите значок с разделом контактов, добавив идентификатор к URL-адресу ссылки модуля.

• URL ссылки на модуль: #contact

Фоновый цвет

Также измените цвет фона модуля.

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

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

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

• Цвет значка: #ffffff
• Размещение изображения / значка: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 30 пикселей

Размеры

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

• Ширина: 100 пикселей
• Выравнивание модуля: справа

Интервал

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

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

Граница

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

• Все углы: 100 пикселей

Коробка Тень

Также добавьте тень от коробки.

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

Основной элемент CSS

Чтобы зафиксировать значок, мы применим три строки кода CSS к основному элементу модуля на вкладке «Дополнительно».

bottom: 20px;
right: 20px;
position: fixed;

Blurb Image CSS

И удалите также нижнее заполнение изображения модуля по умолчанию.

margin-bottom: 0px;

6. Сохраните все изменения в построителе тем и результаты предварительного просмотра.

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

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

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

Рабочий стол

Мобильный

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

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

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