Перейти к основному контенту

Как добавить иконки социальных сетей на сайт в REG.Site

Иконки социальных сетей на сайте 1

Современные компании стремятся к мультиканальности при общении со своими клиентами. Организации создают не только сайты и корпоративные почты, но и аккаунты в ВК, Telegram, Instagram, а самые активные могут похвастаться Youtube и TikTok.

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

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

Чаще всего список социальных сетей находится в 3-х частях сайта:

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

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

Как добавить иконки социальных сетей через модуль REG.Site

С помощью модуля REG.Site можно добавить иконки:

  • Facebook,
  • Twitter,
  • Instagram,
  • Youtube,
  • Pinterest,
  • Skype,
  • Linkedin,
  • Google+,
  • Tumblr,
  • Flickr,
  • MySpace,
  • Dribbble,
  • Vimeo,
  • RSS.

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

  1. 1.
  2. 2.
    Выберите строку, где должна быть кнопка соцсети.
  3. 3.
    Добавьте модуль «Социальные сети». Для этого нажмите на серый плюс.
  4. 4.

    Выберите модуль Социальные сети:

    Иконки социальных сетей на сайте 2

  5. 5.

    Перед вами появится меню настройки модуля. Нажмите Добавить Социальная сеть:

    Иконки социальных сетей на сайте 3

  6. 6.

    Из списка выберите одну социальную сеть:

    Иконки социальных сетей на сайте 4

  7. 7.

    Вставьте ссылку на аккаунт вашей социальной сети:

    Иконки социальных сетей на сайте 5

  8. 8.
    Сохраните изменения.

Готово, вы добавили иконку социальной сети. Теперь можно добавить иконки других социальных сетей, как показано в примере:

Иконки социальных сетей на сайте 6

Если нужно, вы можете настроить дизайн иконки по инструкции ниже.

Как настроить дизайн иконки

Можно настроить как общий дизайн иконок, так и проработать их внешний вид по отдельности.

Как настроить общий вид иконок

Для начала рассмотрим общую настройку модуля. Каждое изменение будет менять внешний вид всех созданных иконок в модуле. Выше мы создали иконки Facebook, Twitter и Instagram. На их примере покажем, как работают общие настройки.

  1. 1.

    Перейдите в настройки модуля:

    Иконки социальных сетей на сайте 7

  2. 2.
    Настройте внешний вид иконок.

Контент

В блоке «Иконка» можно выбрать, как будет открываться окно социальной сети: в том же окне или в новой вкладке.

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

Также здесь можно добавить кнопку «Подписаться» для каждой иконки социальной сети. Для этого просто переведите переключатель в положение ВКЛ:

Иконки социальных сетей на сайте 8

В блоке «Фон» можно создать плашку для иконок. Фон может быть как однотонным, так и с градиентом.

Иконки социальных сетей на сайте 9

Дизайн

В блоке «Выравнивание» можно выбрать расположение иконок: слева, по центру или справа.

В строке «Иконка» можно настроить цвет рисунка социальной сети. Например, сделать рисунки чёрными, как в нашем примере.

Если включить Использовать пользовательский размер иконки, появится настройка размера иконок:

Иконки социальных сетей на сайте 10

Если на вкладке «Контент» вы включили кнопку подписки, во вкладке «Дизайн» в блоке «Текст» можно выбрать один из двух вариантов кнопки: светлую или темную, а также настроить тени текста:

Иконки социальных сетей на сайте 11

Если вам недостаточно стандартных кнопок подписки, в блоке «Кнопка подписки» переведите переключатель «Использовать пользовательские стили для элемента» в положение ДА. Теперь вы сможете настроить размер и форму кнопки, цвет текста и фона, шрифт, тень и толщину надписи, а также отступы:

Иконки социальных сетей на сайте 12

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

Дополнительно

На вкладке «Дополнительно» находятся настройки параметров для опытных веб-дизайнеров — атрибуты CSS и HTML.

Как сделать индивидуальные настройки иконок

Если вам нужно, чтобы некоторые параметры иконок были разными (например, их цвет), нужно настраивать каждое изображение отдельно.

Для индивидуальной настройки:

  1. 1.
    Перейдите в настройки модуля во вкладку Контент.
  2. 2.
    Выберите нужную иконку, которую вы добавили.
  3. 3.

    Нажмите на значок шестеренки:

    Иконки социальных сетей на сайте 13

  4. 4.
    Настройте внешний вид каждой иконки на вкладках «Контент», «Дизайн», «Дополнительно».

Контент

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

Дизайн

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

Совет. Многие элементы можно включить/выключить для мобильной версии сайта. Чтобы это сделать:

  1. 1.
    Наведите курсор на элемент, который хотите настроить. Например, уберем кнопку «Подписаться» на мобильной версии сайта.
  2. 2.

    Нажмите на значок телефона:

    Иконки социальных сетей на сайте 14

  3. 3.

    Выберите устройство, на котором хотите включить/отключить элемент. Переведите переключатель в нужное положение:

    Иконки социальных сетей на сайте 15

Дополнительно

Этот раздел предназначен для настройки CSS и различных видов анимаций.

Как добавить иконки «Одноклассники» и «ВК»

Среди российских пользователей распространены ещё две социальные сети ― «Одноклассники» и «ВК». Во встроенном модуле REG.Site их нет. Добавить их можно при помощи плагина Ultimate Social Media PLUS.

Чтобы добавить иконки «Одноклассники» и «ВК»:

  1. 1.
    Перейдите в админку WordPress.
  2. 2.
    Перейдите в раздел ПлагиныДобавить новый.
  3. 3.
    Введите в поисковую строку Ultimate Social Media PLUS.
  4. 4.

    Нажмите Установить:

    Иконки социальных сетей на сайте 16

  5. 5.

    Нажмите Активировать:

    Иконки социальных сетей на сайте 17

  6. 6.
    В левом меню выберите появившийся плагин Ultimate Social Media PLUS.
  7. 7.

    Нажмите на строку «Какие иконки вы хотите отобразить на своем сайте?»:

    Иконки социальных сетей на сайте 18

  8. 8.

    Перед вами появится список доступных социальных сетей. Выберите Одноклассники и VK. Плагин предлагает и другие социальные сети, но управлять модулями в REG.Site намного удобнее. Нажмите Save:

    Иконки социальных сетей на сайте 19

  9. 9.

    Ниже впишите ссылки, на которые должны вести иконки и настройте их внешний вид. Нажмите Save:

    Иконки социальных сетей на сайте 20

Готово, иконки «Одноклассники» и «ВК» на сайте.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 1