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

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

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

Давайте приступим и приступим!

Sneak Peek

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

Загрузите шаблон страницы Pop Out Social Media Follow Buttons Bar БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и добавьте один из json-файлов в Divi Theme Builder, используя опцию «Переносимость Theme Builder».

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала вам необходимо установить и активировать тему Divi. Убедитесь, что у вас установлена ​​последняя версия Divi.

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

После этого все готово.

Создание всплывающей панели кнопок перехода в социальных сетях для шаблона страницы в Divi

Создание нового шаблона

На панели управления WordPress перейдите в Divi> Theme Builder. Затем щелкните поле «Добавить новый шаблон», чтобы создать новый шаблон.

Назначьте шаблон страницам, на которых должна отображаться промо-панель.

В новом шаблоне щелкните область «Добавить пользовательское тело», затем выберите «Создать пользовательское тело».

Затем выберите вариант «Построить с нуля».

Создание панели кнопок перехода в социальные сети

Создать новую строку

Для начала добавим в шаблон строку из одного столбца.

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

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

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

В социальных сетях, следуя настройкам, добавьте все социальные сети, которые вы хотите отобразить. Чтобы добавить новую сеть, щелкните серый значок плюса «Добавить новую социальную сеть» и выберите сеть из списка.

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

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

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

Содержание кнопки

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

• Текст кнопки: Follow
• URL ссылки на кнопку: #

Стили и расположение кнопок

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

• Размер текста кнопки: 16 пикселей
• Цвет текста кнопки:
• Ширина границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 1 пиксель
• Шрифт кнопки: Montserrat
• Толщина шрифта кнопки: полужирный
• Значок кнопки: стрелка вправо (см. Снимок экрана)
• Маржа: осталось 100%
• Отступ: 100 пикселей снизу

Затем добавьте следующий настраиваемый CSS к основному элементу:

position: absolute;

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

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

• Цвет фона: #ffffff
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 64 пикселя
• Отступ: 24 пикселя сверху, 16 пикселей снизу, 16 пикселей слева.

Row Box Shadow

• Box Shadow: см. Снимок экрана
• Сила размытия тени коробки: 0 пикселей
• Сила размытия тени коробки: 30 пикселей
• Цвет тени (рабочий стол): прозрачный
• Цвет тени (при наведении): rgba (0,0,0,0.2)

Расположение строк

Затем добавьте следующий настраиваемый CSS в строку Main Element:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

Это поместит строку в фиксированное положение на одну треть вниз от верхней части браузера.

Всплывающее окно при наведении курсора с настраиваемыми полями

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

• Маржа (рабочий стол): -64px слева
• Маржа (при наведении): 0 пикселей слева

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

Добавление модуля содержимого публикации в шаблон

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

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

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

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

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

Обновите следующее:

• Ширина: 100%
• Максимальная ширина: 100%
• Padding: 0px сверху, 0px снизу

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

• Padding: 0px сверху, 0px снизу

Это о нем. Теперь убедитесь и сохраните макет перед выходом из редактора. Затем сохраните изменения и для построителя тем.

Конечный результат

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

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!