Хотите, чтобы ваши значки социальных сетей прикрепились к Divi?
С помощью встроенных «липких» опций Divi вы можете легко создать липкий модуль «Отслеживание социальных сетей», который будет держать эти значки социальных сетей впереди и по центру, когда пользователь прокручивает страницу вниз.
Кроме того, добавляя настраиваемый стиль к модулю в липком состоянии, мы можем создавать уникальные переходы дизайна при переключении в липкое состояние во время прокрутки.
Итак, если вы ищете полный контроль над дизайном кнопок социальных сетей, этот урок для вас!
обследование
Вот краткий обзор результата, который мы получим в этом уроке.
Создайте новую страницу с помощью «Divi Builder»
В панели управления WordPress перейдите к «Страницы > Добавить новую»
Дайте ему название, которое имеет смысл для вас, затем нажмите «Используйте DiviBuilder»
Для этого урока мы собираемся использовать предопределенный макет. Для этого нажмите на «Просмотреть макеты»
Найдите и выберите макет «Модельер»
Выберите макет «Посадка» затем нажмите «Использовать этот макет»
Дизайн модуля «Подписка в социальных сетях» в Divi
Создание раздела
Добавьте в макет новый обычный раздел.
Затем переместите новый раздел в верхнюю часть страницы (или туда, где вы хотите добавить свои ссылки для перехода в социальных сетях).
Откройте настройки раздела и обновите цвет фона в соответствии с макетом следующим образом:
- Цвет фона: #fff9f2
Под вкладкой Проект, разверните параметр «Интервал» и измените следующие параметры:
- Отступы (сверху и снизу): 10 пикселей
Создание линии
Внутри раздела добавьте строку в столбец.
Откройте настройки линии, вытащите параметр «Интервал» и измените настройки следующим образом:
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 100%
Продолжить, прокрутив вниз вариант Расстояние
- Отступы (сверху и снизу): 0 пикселей
Создание липкого модуля «Подписка в социальных сетях»
Как только раздел и линия будут на месте, добавьте новый модуль «Подписка в социальных сетях» на линии.
Обновление настроек модуля
Откройте настройки модуля «Подписка в социальных сетях».
Первое, что нам нужно сделать, это добавить липкую позицию к модулю.
Под вкладкой Фильтр, вытащите опцию Эффекты прокрутки и обновите следующее:
- Липкая позиция: придерживайтесь верха
Как только позиция находится в липком состоянии, вы сможете выбрать стиль модуля в липком состоянии (так же, как вы можете сделать это для состояния наведения). Это можно сделать, наведя курсор на параметр и щелкнув значок булавки.
Под вкладкой Проект, обновите следующее:
- Модуль выравнивания: Центр
- Цвет значка: #000000 (рабочий стол), #ffffff (при наведении курсора), #ffffff (закрепить)
- Ширина: 100%
- Максимальная ширина: 100%
- Отступы: 20 пикселей (сверху), 12 пикселей (снизу), 10 пикселей (слева и справа)
Настройки социальных сетей
После того, как настройки модуля готовы, мы можем теперь обратить внимание на стиль отдельных значков социальных сетей.
Для этого сначала настроим иконку социальной сети. Затем мы продублируем социальную сеть, чтобы создать остальные.
На вкладке у вас уже должны быть две социальные сети. содержание по умолчанию. Удалите один и нажмите, чтобы отредактировать оставшийся.
В настройках социальной сети выберите социальную сеть и обновите цвета фона для рабочего стола, состояния наведения и прилипания.
- Социальная сеть : TikTok (или что хотите)
- Фон: прозрачный (рабочий стол), #fe2c55 (при наведении), #000000 (липкий)
ОБМАНЫВАТЬ : Цвет фона автоматически изменится в соответствии с брендом социальной сети. Вы можете скопировать этот цвет и добавить его в качестве цвета фона состояния наведения для значка. Это будет отображать цвет фона социальной сети по умолчанию, когда вы наводите курсор на значок.
Теперь вы можете переключаться между вкладками, чтобы увидеть цвет фона для всех трех состояний (рабочий стол, наведение и закрепление).
Далее, давайте придадим иконке красивую овальную форму и рамку, чтобы лучше соответствовать макету. Под вкладкой Проект, обновите следующее:
- Закругленные углы: 50%
- Ширина границы: 1px
- Цвет границы: #000000 (рабочий стол), прозрачный (при наведении)
В настоящее время значок имеет форму круга. Чтобы получить более овальную форму, мы изменим параметры интервала следующим образом:
- Поле (слева и справа): 15 пикселей (рабочий стол), 0 пикселей (липкое), 0 пикселей (телефон)
- Отступы (слева и справа): 16 пикселей (рабочий стол), 14 пикселей (планшет), 0 пикселей (телефон).
Дубликат социальной сети
Теперь, когда мы закончили разработку первой социальной сети, мы можем продублировать значок, чтобы создать другие.
Для этого откройте настройки модуля СМИ и щелкните значок дубликата. Для этого примера создадим еще 4.
Теперь все, что нам нужно сделать, это обновить каждую из новых социальных сетей. Поскольку это изменит цвет фона, вам также потребуется обновить цвет фона для каждого из них.
Для этого откройте настройки второй социальной сети и обновите следующее:
- Социальная сеть: Facebook
- Фон: прозрачный (рабочий стол), #3b5998 (при наведении)
Продолжайте тот же процесс, чтобы обновить остальные социальные сети.
Конечный результат
Теперь давайте посмотрим на результат, полученный на разных размерах экрана.
Скачайте DIVI прямо сейчас!!!
Скачайте DIVI прямо сейчас!!!
Заключение
Кнопки социальных сетей почти всегда являются ключевым элементом сайта. Веб-сайт. Они являются одним из основных способов подключения каналов социальных сетей к Веб-сайт. Именно поэтому модуль «Подписка в социальных сетях» of Divi содержит все сетевые значки и варианты дизайна, необходимые для создания идеального решения для вашего сайта.
Мы надеемся, что этот урок будет полезен вам в ваших следующих проектах Divi. Если вы хотите узнать больше о Divi, не стесняйтесь посетить наш каталог Учебники Диви. Вы также можете проконсультироваться Как создать страницу блога с помощью модуля Divi Blog
Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
А между тем, поделитесь этой статьей в разных социальных сетях.
...
