Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

divi builder

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

следуйте за нами в социальных сетях.png

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

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

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

добавить кнопки отслеживания на странице контактов divi wordpress.jpg

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

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

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

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

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

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

добавьте соответствующий color.jpg

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

дубликаты социальных сетей divi.jpg

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

социальная сеть display.png

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

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

Контент для Divi следуйте за нами в социальных сетях module.png

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

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

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

Ссылка

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

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

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

изменить внешний вид divi.png

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

Цвет текста

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

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

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

расширенные настройки divi.png

CSS-идентификатор

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

Класс CSS

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

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

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

видимость

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

Индивидуальные варианты содержания в социальных сетях

optin content divi.png

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

URL аккаунта

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

Индивидуальные варианты дизайна в социальных сетях

индивидуальный стиль option.png

Цвет значка

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

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

модуль дополнительных опций следуйте за нами divi.png

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

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

Другие учебные пособия Divi

Эта статья содержит комментарии 0

Оставить комментарий

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

Вверх