Как создать липкую панель нижнего колонтитула с помощью липких опций Divi

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон глобального нижнего колонтитула БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Создайте новый шаблон нижнего колонтитула

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

Начните с перехода к Divi Theme Builder в серверной части вашего веб-сайта WordPress. Там добавьте новый глобальный или настраиваемый нижний колонтитул.

Начать строительство с нуля

Начните создавать шаблон нижнего колонтитула с нуля.

2. Создайте дизайн нижнего колонтитула

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

Фоновый цвет

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

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

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

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

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

Фоновый цвет

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

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

Размеры

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

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

Интервал

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

• Верхнее заполнение: 5 пикселей (только для планшетов и телефонов)
• Нижний отступ: 5 пикселей (только для планшетов и телефонов)

Граница

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

• Все углы:
  • Рабочий стол: 30 пикселей
  • Планшет и телефон: 15 пикселей

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

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

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Видимость столбцов 1 и 3

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

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

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

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

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

Далее выберите значок.

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

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

• Цвет значка: # f5d72e
• Значок Круга: Да
• Цвет круга: # 000000
• Размещение изображения / значка: вверху
• Выравнивание изображения / значка: по центру
• Использовать размер шрифта значка: Да
• Размер шрифта значка: 32 пикс.

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

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

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

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

Также внесите некоторые изменения в настройки текста заголовка.

• Шрифт заголовка: Poppins
• Цвет текста заголовка: # 000000

Настройки основного текста

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

• Шрифт основного текста: Poppins
• Плотность основного шрифта: Ультра полужирный
• Размер основного текста: 20 пикселей

Размеры

Затем установите ширину содержимого на «100%» в настройках размера.

• Ширина содержимого: 100%

Интервал

Чтобы создать перекрытие, добавьте отрицательное верхнее поле в настройки интервала.

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

Анимация

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

• Анимация изображения / значка: без анимации

Клонировать модуль Blurb и поместить дубликат в столбец 3

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

Изменить содержимое и значок

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

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

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

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

Фоновый цвет

Затем добавьте цвет фона.

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

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

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

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

Размеры

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

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

Интервал

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

• Верхнее поле: -20 пикселей (только для планшетов и телефонов)
• Верхний отступ: 5 пикселей
• Нижний отступ: 0 пикселей

Граница

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

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

Анимация

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

• Анимация изображения / значка: без анимации

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

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

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

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

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

• Толщина шрифта текста: полужирный
• Размер текста: 18 пикселей
• Высота текстовой строки: 1,8 м
• Выравнивание текста: по центру

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

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

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

Размеры

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

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

Интервал

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

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

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

Загрузить изображение

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

Размеры

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

• Ширина: 59%
• Выравнивание модуля: слева

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

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

Затем добавьте текстовый модуль в столбец 2 с некоторым содержимым H3 по вашему выбору.

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

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

• Шрифт заголовка 3: Poppins
• Толщина шрифта заголовка 3: полужирный
• Цвет текста заголовка 3: # 6d6d6d

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

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

Изменить содержимое

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

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

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

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

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

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

• Шрифт текста: Поппинс
• Размер текста: 30 пикселей
• Высота текстовой строки: 1em
• Выравнивание текста: по левому краю
• Цвет текста: светлый

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

Также измените цвет текста ссылки.

• Цвет текста ссылки: #ffffff

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

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

Изменить содержимое

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

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

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

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

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

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

• Шрифт текста: Поппинс
• Размер текста: 22 пикс.
• Высота текстовой строки: 1em
• Выравнивание текста: по левому краю
• Цвет текста: светлый

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

Измените также цвет текста ссылки.

• Цвет текста ссылки: # ea6c01

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

Клонируйте этот модуль столько раз, сколько вам нужно.

Изменить содержимое

И, конечно же, при необходимости измените содержание и ссылки.

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

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

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

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

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

• Шрифт текста: Поппинс
• Размер текста: 16 пикселей
• Высота текстовой строки: 1,8 м
• Выравнивание текста: по левому краю
• Цвет текста: светлый

Добавить подписку из социальных сетей в столбец 4

Добавьте предпочтительные социальные сети

Затем добавьте в конец столбца модуль «Отслеживание в социальных сетях». Добавьте нужные социальные сети.

Удаление цвета фона каждой социальной сети по отдельности

Удалите цвет фона каждой социальной сети по отдельности.

Интервал

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

• Верхнее поле: -15 пикселей
• Левое поле: -8 пикселей

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

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

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

Размеры

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

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

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

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

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

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

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

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

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

Измените также цвет текста ссылки.

• Цвет текста ссылки: # 595959

Клонировать текстовый модуль дважды и размещать дубликаты в оставшихся столбцах

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

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

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

• Текстовый модуль в столбце 2:
  • Рабочий стол: по центру
  • Планшет и телефон: слева

• Текстовый модуль в столбце 3:
  • Рабочий стол: справа
  • Планшет и телефон: слева

Изменить содержимое

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

3. Примените липкие эффекты к панели нижнего колонтитула.

Откройте строку №1 и примените закрепленные настройки

Теперь, когда наша основа дизайна на месте, пришло время применить эффект липкости. Откройте первую строку в разделе, перейдите на вкладку «Дополнительно» и примените следующие закрепленные настройки:

• Липкое положение: придерживаться низа
• Смещение липкого дна:
  • Рабочий стол: 50 пикселей
  • Планшет и телефон: 20 пикселей

Строка закрепленных стилей

Фоновый цвет

Теперь, когда мы сделали нашу строку липкой, мы можем применить липкие стили к строке и всем ее дочерним элементам. Начните с добавления липкого цвета фона к строке №1.

• Цвет липкого фона: # 000000

Примените закрепленные стили к модулям Blurb в столбцах 1 и 3

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

Затем откройте модули Blurb в столбцах 1 и 3 и добавьте цвет липкого круга.

• Цвет липкого круга: # ea6c01

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

Также добавьте липкий цвет текста заголовка.

• Цвет текста липкого заголовка: # ea6c01

Применить закрепленные стили к модулю Blurb в столбце 2

Фоновый цвет

Затем откройте модуль Blurb в столбце 2 и примените липкий цвет фона.

• Цвет липкого фона: # ea6c01

4. Сохраните все изменения шаблона и построителя тем.

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

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

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

Рабочий стол

Мобильный

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

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

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