Модуль Аккаунты в социальных сетях Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Аккаунты в социальных сетях.

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

Как добавить модуль Аккаунты в социальных сетях на свою страницу

Прежде чем вы сможете добавить модули со ссылкоами на социальные сети на свою страницу, вам сначала нужно перейти в Divi Builder. После установки темы Divi на ваш веб-сайт вы увидите кнопку «Использовать Divi Builder» над текстовым редактором страницы каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем выберите один из трёх вариантов, чтобы запустить редактор страницы в визуальном режиме. Вы также можете нажать кнопку «Включить Visual Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

После того, как вы вошли в Visual Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы создаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть несколько уроков о том, как использовать строки и разделы Divi .

Найдите модуль социальных сетей в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «социальные сети», а затем нажать клавишу ВВОД, чтобы автоматически найти и добавить модуль отзывов! После добавления модуля вы увидите список его параметров. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

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

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

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

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

Вкладка Контент

Социальная сеть: Facebook
URL ссылки на аккаунт: [добавьте ссылку на ваш facebook аккаунт]

Вкладка Дизайн

Цвет иконки: Facebook
Цвет иконки: #d94b6a

Затем продублируйте эту социальную сеть, чтобы добавить еще четыре сети (Twitter, Google+, LinkedIn и Instagram). Поскольку вы продублировали сеть, пользовательский цвет значка перенесен, поэтому все, что вам нужно сделать, это обновить каждую сеть и URL-адрес учетной записи.

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

Вкладка Контент модуля Аккаунты в социальных сетях

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

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

Здесь вы добавляете новые сети в свой модуль. Нажатие на «Добавить новый Социальная сеть» откроет новое окно с параметрами, для создания новой ссылки на социальую сеть (на вкладках «Контент», «Дизайн» и «Расширенный»). См. Ниже индивидуальные настройки Аккаунтов социальных сетей.

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

Прямоугольник с закругленными углами

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

Цель ссылки

Выберите, чтобы открыть URL-адрес вашей сети на новой вкладке или в том же окне.

Кнопка подписки

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

Метка администратора

Это изменит метку модуля в билдере для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Аккаунты в социальных сетях

На вкладке «Дизайн» вы найдете все параметры стиля модуля, такие как шрифты, цвета, размер и интервал. Это вкладка, которую вы будете использовать, чтобы изменить внешний вид вашего модуля. Каждый модуль Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить что угодно.

Цвет текста

Здесь вы можете выбрать, должен ли ваш текст быть светлым или темным. Если вы работаете с темным фоном, ваш текст должен быть светлым. Если ваш фон светлый, тогда ваш текст должен быть темным.

Вкладка Расширенный модуля Аккаунты в социальных сетях

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю собственные классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

ID и классы CSS

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

Класс CSS

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

Пользовательский CSS

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

Видимость

Здесь вы можете скрыть (или отключить) свой модуль вкладок на определенных устройствах. Вы можете отключить модуль на телефоне, планшете и / или компьютере.

Индивидуальные настройки модуля Аккаунты в социальных сетях — вкладка Контент

Социальная сеть

Здесь вы можете выбрать социальную сеть, которую хотите отображать.

URL ссылки на аккаут

Здесь вы вводите URL-адрес этой ссылки социальной сети. Если вы выбрали Facebook в качестве своей сети, здесь вы поместите URL-адрес своей страницы Facebook.

Индивидуальные настройки вкладок — вкладка Дизайн

Цвет иконки

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

Индивидуальные настройки вкладок модуля Аккаунты в социальных сетях — вкладка Расширенный

Пользовательский CSS

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