Социальные сети плотно вошли в нашу жизнь. Наверно почти каждый человек на планете зарегистрирован в одной из социальных сетей. Активность в таких сетях очень большая и многие просто жить не могут без сетей, так и хотят полайкать, почитать новости, посмотреть что посоветовал друг и так далее. Поэтому сайты определенных типов и направленности должны иметь возможность "лайкнуть" их страницу.
Когда мы создаем сайт (блог, интернет магазин, витрина товара, информационный портал), на странице статьи или информации о товаре нам не будет лишним функционал, который позволит посетителю поделится страницей со своими друзьями. Обычно такой функционал должен быть быстрым и удобным, т.е такой к которому привыкли пользователи соц сетей, а именно "Нажал и готово". Кнопки "Поделиться" как раз и отвечают всем требованиям посетителя который активен в социальных сетях.
В веб конструкторе сайта все подготовлено для того, чтобы не отставать от социальных сетей и поэтому есть специальный виджет который так и называется "Кнопки поделиться". По сути, это готовый блок "Поделиться" которых в сети очень много, но в виде скриптов или html кодов. В виджете все подготовлено, сбалансировано и проверено, поэтому вам нужно позаботится лишь о выборе списка сетей и адаптации внешнего вида под стиль вашего сайта.
На изображении выше мы видим виджет по умолчанию (первый в списке), а остальные это различные вариации созданные с помощью изменения настроек виджета в конструкторе. Функционал по стилизации кнопок достаточно широк и интересен. Нам доступны изменение размера, вида кнопок, отключения текста и даже изменение целевой ссылки страницы сайта. Ниже рассмотрим свойства виджета которые предоставил нам конструктор.
Содержимое
- Кнопка поделиться
- Элементы - элемент настроек, в нашем случаи это отдельная кнопка определенной социальной сети или сервиса. Доступно выбор социальной сети из списка и задание персонального названия, например вместо VK, можно написать "VKашка". На данный момент доступен следующий список сетей: Facebook, Twitter, Google+, LinkedIn, Pinterest, Reddit, VK, OK, Tumblr, Digg, Skype,XING, WhatsApp, Email, Print.
- Вид - вид кнопки, а именно: с текстом, без текста и все месте.
- Ярлык - тексты, т.е название соц сетей, которые расположены рядом с иконкой.
- Количество - опция включает показ счетчика количества кликов по кнопка соц сетей. Т.е посетитель видеть сколько раз поделились в той или иной социальной сети. Для того, чтобы заработала настройка полностью, необходимо произвести интеграцию с сервисом donReach в настройках Панель интеграций.
- Стиль - стиль для кнопок. По умолчанию выбран стиль "Градиент". Доступен выбор следующих стилей: Минимализм, Обрамление, Иконка в блоке, Плоский. При выборе стиля "Минимальный" заметные изменения вы заметите только если у вас иконка с текстом.
- Форма - формы кнопки социальной сети. Доступен выбор между: Квадрат, Скругленная, Округлая. Выбирайте то, что вам действительно подходит под дизайн вашего сайта.
- Колонки - количество кнопок в одной колонки. Сами кнопки растягиваются во всю ширину колонки секции. По умолчанию выбрано Auto, т.е минимальный размер без растягивания по ширине.
- Выравнивание - выравнивание кнопок относительно виджета. Доступны следующие способы выравнивания: Лево, Центр, Право, По ширине. При выборе по ширине, кнопки равномерно распределятся по все ширине колонки секции вашего сайта.
- Целевой URL - http адрес страницы которая будет передаваться социальной сети. По умолчанию передается текущая страница сайта, но можно выбрать и произвольную.
Стили
- Кнопки поделиться
- Разрыв колонок - расстояние между кнопками соц сетей.
- Разрыв рядов - отступ снизу кнопок. Особенно актуально когда кнопки расположены в несколько рядов.
- Размер кнопки - размер кнопок соц сетей возможно изменить от маленького до очень большого.
- Размер иконки - размер иконки кнопки. При увеличения размера кнопки, размер иконки не увеличивается, поэтому и нужна данная настройка.
- Высота кнопки - изменение высоты кнопки при необходимости создать пропорции или подгонки под дизайн сайта. Высота ограничена 100 пикселями.
Цвет - цвет кнопок, выбор между официальными цветами соц сетей и персональным общим цветом для всех кнопок.
- Типографика - типографика для текста который находится в кнопках поделиться.
=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================
Дмитрий
Добрый день!
А можем ли мы добавить свою иконку соц сети?
Например у нас есть иконка facebook и мы хотим поставить свою кастомную
Админ
День добрый. Нет, все иконки жестко прописаны в данном плагине. Тут или плагин редактировать или как описывал выше, через js просто меняем на нужное.
Олег
Добрый день!
А как добавить, например, Viber
Админ
День добрый. Пока без ручного изменения виджета не получится добавить вайбер. Можно конечно написать js скрипт который для нужной кнопки сменить иконку и сменит ссылку. Или же тем же скриптом, добавить кнопку в нужное место.. так даже проще наверно. Или же если не установлена версия PRO, то можно установить плагин с виджетами https://wphtmega.com
Если есть PRO, то лучше не перегружать.