Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Кнопки Поделиться — виджет Elementor Pro

Обновлено: 27.02.2018
4 комментариев
блок поделиться для конструктора сайта - заставка

Социальные сети плотно вошли в нашу жизнь. Наверно почти каждый человек на планете зарегистрирован в одной из социальных сетей. Активность в таких сетях очень большая и многие просто жить не могут без сетей, так и хотят полайкать, почитать новости, посмотреть что посоветовал друг и так далее.  Поэтому сайты определенных типов и направленности должны иметь возможность "лайкнуть" их страницу.

Когда мы создаем сайт (блог, интернет магазин, витрина товара, информационный портал), на странице статьи или информации о товаре нам не будет лишним функционал, который позволит посетителю поделится страницей со своими друзьями. Обычно такой функционал должен быть быстрым и удобным, т.е такой к которому привыкли пользователи соц сетей, а именно "Нажал и готово".  Кнопки "Поделиться" как раз и отвечают всем требованиям посетителя который активен в социальных сетях.

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

блок поделиться для конструктора сайта

На изображении выше мы видим виджет по умолчанию (первый в списке), а остальные это различные вариации созданные с помощью изменения настроек виджета в конструкторе. Функционал по стилизации кнопок достаточно широк и интересен. Нам доступны изменение размера, вида кнопок, отключения текста и даже изменение целевой ссылки страницы сайта. Ниже рассмотрим свойства виджета которые предоставил нам конструктор.

 

Содержимое

- Кнопка поделиться

  • Элементы - элемент настроек, в нашем случаи это отдельная кнопка определенной социальной сети или сервиса. Доступно выбор социальной сети из списка и задание персонального названия, например вместо VK, можно написать "VKашка". На данный момент доступен следующий список сетей: Facebook, Twitter, Google+, LinkedIn, Pinterest, Reddit, VK, OK, Tumblr, Digg, Skype,XING, WhatsApp, Email, Print.
  • Вид - вид кнопки, а именно: с текстом, без текста и все месте.
  • Ярлык - тексты, т.е название соц сетей, которые расположены рядом с иконкой.
  • Количество - опция включает показ счетчика количества кликов по кнопка соц сетей. Т.е посетитель видеть сколько раз поделились в той или иной социальной сети. Для того, чтобы заработала настройка полностью, необходимо произвести интеграцию с сервисом  donReach в настройках Панель интеграций.
  • Стиль - стиль для кнопок. По умолчанию выбран стиль "Градиент". Доступен выбор следующих стилей: Минимализм,  Обрамление, Иконка в блоке, Плоский.  При выборе стиля "Минимальный" заметные изменения вы заметите только если у вас иконка с текстом.
  • Форма - формы кнопки социальной сети. Доступен выбор между: Квадрат, Скругленная, Округлая. Выбирайте то, что вам действительно подходит под дизайн вашего сайта.
  • Колонки - количество кнопок в одной колонки.  Сами кнопки растягиваются во всю ширину колонки секции. По умолчанию выбрано Auto, т.е минимальный размер без растягивания по ширине.
  • Выравнивание - выравнивание кнопок относительно виджета. Доступны следующие способы выравнивания: Лево, Центр, Право, По ширине. При выборе по ширине, кнопки равномерно распределятся по все ширине колонки секции вашего сайта.
  • Целевой URL - http адрес страницы которая будет передаваться социальной сети. По умолчанию передается текущая страница сайта, но можно выбрать и произвольную.

Стили

- Кнопки поделиться

  • Разрыв колонок - расстояние между кнопками соц сетей.
  • Разрыв рядов - отступ снизу кнопок. Особенно актуально когда кнопки расположены в несколько рядов.
  • Размер кнопки - размер кнопок соц сетей возможно изменить от маленького до очень большого.
  • Размер иконки - размер иконки кнопки. При увеличения размера кнопки, размер иконки не увеличивается, поэтому и нужна данная настройка.
  • Высота кнопки - изменение высоты кнопки при необходимости создать пропорции или подгонки под дизайн сайта. Высота ограничена 100 пикселями.

    Цвет - цвет кнопок, выбор между официальными цветами соц сетей и персональным общим цветом для всех кнопок.

  • Типографика - типографика для текста который находится в кнопках поделиться.

 

=======================================================================
Список всех виджетов Elementor вы можете посмотреть на странице Виджеты
=======================================================================

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

4 комментариев

  • Добрый день!
    А можем ли мы добавить свою иконку соц сети?
    Например у нас есть иконка facebook и мы хотим поставить свою кастомную

    • A

      День добрый. Нет, все иконки жестко прописаны в данном плагине. Тут или плагин редактировать или как описывал выше, через js просто меняем на нужное.

  • Добрый день!
    А как добавить, например, Viber

    • A

      День добрый. Пока без ручного изменения виджета не получится добавить вайбер. Можно конечно написать js скрипт который для нужной кнопки сменить иконку и сменит ссылку. Или же тем же скриптом, добавить кнопку в нужное место.. так даже проще наверно. Или же если не установлена версия PRO, то можно установить плагин с виджетами https://wphtmega.com
      Если есть PRO, то лучше не перегружать.

Добавить комментарий для Админ (Отменить ответ)