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

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

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

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

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

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

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

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

Весь список иконок социальных сетей
  • Amazon,
  • Bandcamp,
  • Behance,
  • BitBucket,
  • Buffer,
  • CodePen,
  • DeviantArt,
  • Dribbble,
  • Flickr,
  • FlipBoard,
  • Foursquare,
  • GitHub,
  • Goodreads,
  • Google,
  • Google+,
  • Houzz,
  • iTunes,
  • Last.fm,
  • Line,
  • Linkedin,
  • Medium,
  • Meetup,
  • MySpace,
  • Одноклассники,
  • Patreon,
  • Periscope,
  • Pinterest,
  • Quora,
  • Reddit,
  • ResearchGate,
  • RSS,
  • Skype,
  • Snapchat,
  • SoundCloud,
  • Spotify,
  • Steam,
  • Telegram,
  • TikTok,
  • TripAdvisor,
  • Tumblr,
  • Twitch,
  • Twitter,
  • Viber,
  • Vimeo,
  • VK,
  • Weibo,
  • WhatsApp,
  • XING,
  • Yelp,
  • Youtube.

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

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

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

    Иконки соцсетей 1

  5. 5.

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

    Иконки соцсетей 2

  6. 6.

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

    Иконки соцсетей 3

  7. 7.

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

    Иконки соцсетей 4

  8. 8.
    Сохраните изменения. Для этого нажмите на белую галочку в зелёном прямоугольнике.

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

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

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

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

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

  1. 1.

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

    Иконки соцсетей 5

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

Контент

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

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

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

Иконки соцсетей 6

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

Иконки соцсетей 7

Дизайн

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

В строке «Иконка» можно настроить цвет рисунка социальной сети.

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

Иконки соцсетей 9

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

Иконки соцсетей 10

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

Иконки соцсетей 11

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

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

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

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

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

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

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

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

    Иконки соцсетей 12

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

Контент

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

Дизайн

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

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

  1. 1.

    Справа от названия параметра наведите курсор на значок телефона и нажмите на него:

    Иконки соцсетей 16

  2. 2.

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

    Иконки соцсетей 15

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

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

Помогла ли вам статья?

Спасибо за оценку. Рады помочь 😊

 👍