Учебник Divi: как использовать модуль Social Media

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

Как добавить модуль социальной сети на свою страницу

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

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

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

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

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

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

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

Параметры содержимого

Социальная сеть:
URL-адрес учетной записи Facebook: [введите URL-адрес своей учетной записи Facebook]

Варианты дизайна

Цвет значка: # d94b6a (разные цвета)

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

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

Параметры контента в социальных сетях

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

Добавить новый объект

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

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

Ссылка

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

URL открывается

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

Следующая кнопка

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

Значок администратора

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Варианты дизайна социальных медиа

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

Для этого модуля варианты дизайна состоят из одного элемента - Цвет текста.

Цвет текста

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

Расширенные возможности социальных сетей

На вкладке «Дополнительно» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю пользовательские классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.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

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" extended "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] СКАЧАТЬ ТЕМУ РАЗДЕЛА [/ vcex_button] [/ width_column] [»vc_column] [» vc_column »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" extended "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ЗАГРУЗИТЬ ХРАНИЛИЩЕ ЗАГРУЗИТЬ DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Учебник Divi: как использовать модуль Social Media

Как добавить модуль социальной сети на свою страницу