Плагин кнопок wordpress


Здравствуйте, уважаемые читатели XoZbloga! Сегодня я познакомлю Вас с плагином для WordPress — MaxButtons. Это плагин, который позволяет создавать пользовательские кнопки на CSS3 практически без знания CSS. Вы создаете кнопки с помощью конструктора и используете короткий код (shortcode) для вставки кнопок, где угодно. Это отличная новость для тех кто не разбираете в CSS, но хочет использовать уникальные и красивые кнопки на своем блоге. Поэтому в этом небольшом уроке я покажу Вам, как с помощью MaxButtons создаются кнопки для WordPress блога.

Шаг 1: Установка

Таким образом, обо всем по порядку. Скачиваем бесплатную версию плагина , или сделать поиск в разделе Установить плагины — Поиск. Далее переходим в раздел Установить плагины — Загрузить, где выбираем архив, который только что скачали, жмем кнопку установить. После чего активизируем плагин.

Установка плагина MaxButtons - Установка

На панели появилась новая вкладка — MaxButtons, переходим в нее для создания кнопки.


Установка плагина MaxButtons - Переходим в раздел MaxButtons

Шаг 2: Создание кнопки

Теперь можно преступить к созданию кнопки. Для этого кликаем по Add new.

Установка плагина MaxButtons - Создание кнопки

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

Установка плагина MaxButtons - Основные настройки

Основными являются:


  • Name — Это имя кнопки в системе, также кнопке придается уникальный идентификатор (автоматически);
  • Description — это описание отображается под именем в списке всех созданных кнопок;
  • URL — ссылка;
  • Text — текст самой кнопки;
  • Open in new windiw — ставим галочку и ссылка откроется в новом окне (target=»_blank»).

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

Перейдем к настройке текста.

Установка плагина MaxButtons - Настройка текста

Настройка текста осуществляется путем изменения шрифта, размера текста и стиля. Можно настроить тень (shadow), а если быть точнее, то размеры и положение тени, а также отступы до текста внутри кнопки (сверху, снизу и по бокам).

Следующим этапом является настройка границы кнопки.

Установка плагина MaxButtons - Настройка границы

А именно: выбрать для каждого угла закругление, стиль границы (сплошная линия, двойная, прерывистая и точками) и установить размеры тени.

Теперь настроим цветовую схему.


Установка плагина MaxButtons - Настройка цвета

Первая колонка — отвечает за цветовую настройку кнопки в обычном состоянии, а правая при наведении.

  • Text — цвет текста;
  • Text Shadow — цвет тени текста;
  • Gradient Start — начало градиента (верх);
  • Gradient End — конец градиента (низ);
  • Border — цвет границы;
  • Box Shadow — цвет внешней тени.

Gradient Stop — это что-то на подобии границы между одним цветом градиента и другим. Чем ближе к 99, тем больше верхнего цвета и наоборот.

Последнее, это настройка позиционирования кнопки на странице. отступы от остальных элементов и выравнивание (как встроенный элемент — inline-block, слева — left и справа — right), а также можно задать ширину кнопку.

Шаг 3: Использование

После того как кнопка настроена, ее необходимо сохранить. Сохраняется посредством нажатии на кнопку Save. Также вы сразу можете заметить короткий код ([maxbutton id=»1″]), который можно вставить в текст статьи и в том месте появится созданная кнопка.


Установка плагина MaxButtons - Список кнопок

Основные свойства кнопки можно менять сразу из короткого кода. Таким образом не нужно создавать много однотипных кнопок. Можно поменять текст, URL и свойство открытия в окне. Например [maxbutton id=»1″ text=»Поиск в Яндекс» url=»http://yandex.ru» window=»parent»].

На этом все. Если урок Вам понравился и пригодился сделайте tweet или like — поделитесь с друзьями ?

xozblog.ru

Какие основные типы кнопок существуют?

В сущности, основная роль кнопки — это перенаправление пользователя с одного места на другое. Выделяют следующие три типа кнопок:

  • Ссылка: кнопка выполняет роль обычной ссылки (гиперссылки) — классическое перенаправление.
  • Копка для социальных сетей: кнопка, позволяющая поделится ссылкой на статью в социальных сетях.
  • Кнопка «призыва к действию» (CTA — Cal to Action): кнопка, призывающая посетителя к определенному действию (например, регистрации или покупке).

Зачем нужна кнопка?

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

Кнопки являются важным элементом красивого оформления сайта с одной стороны и прекрасным помощником для поднятия конверсии сайта с другой. Если роль кнопок продумана, то посетители непременно ими воспользуются.

Итак, давайте перейдем к практической стороне вопроса.

Способы добавить кнопку в WordPress

Существует два основных способа добавить кнопку в WordPress:

  • С помощью кода: для создания кнопки, можно воспользоваться HTML и CSS, но здесь потребуются определенные знания.
  • С помощью плагина: намного проще и быстрее воспользоваться плагинами WordPress.

Плагины WordPress для создания кнопки

WordPress Button Plugin MaxButtons

maxbuttons-plugin

WordPress Button Plugin MaxButtons — это бесплатный плагин WordPress для создания красивых и элегантных кнопок. На момент написания статьи выполнено более 70,000 активных установок плагина.

Особенности:


  • Общие настройки: Вы можете создавать неограниченное количество кнопок и использовать их в своих постах и страницах в виде шоткодов. Цвет кнопки, размер текста, стиль и многое другое можно изменять по своему усмотрению.
  • Отзывчивый: Кнопки, созданные этим плагином выглядят одинаково хорошо как на экранах настольного компьютера, так и на мобильных устройствах.
  • Стилизация кнопок иконками: Вы можете добавить иконки к вашим кнопкам, изменяя их расположение и размер. В пакте содержится более 35,000 иконок.
  • Поддержка Google шрифтов: Одна из лучших возможностей данного плагина — это поддержка Google шрифтов.
  • Платная версия: полная версия плагина со всеми опциями стоит $19.

Buttons Shortcode and Widget

buttons-shortcode-and-widget

Buttons Shortcode and Widget — еще один плагин для создания кнопок.

Особенности:

  • Общие настройки: Доступны для редактирования текст кнопки, иконки, слои, цвета, размер и цвета обрамления. Доступен предварительный просмотр результата.

  • Без элементов кодирования: Этот плагин не требует знания CSS для создания потрясающих кнопок.
  • Повсеместное использование: Позволяет использовать кнопки в постах, на страницах, сайдбарах, и даже в файлах тем.
  • Пользовательские стили: Созданный стиль для кнопки может быть добавлен в коллекцию пользовательских стилей и использован в будущем.

Плагин имеет платную версию с расширенными возможностями.

Button Maker Plugin

button-maker-plugin

Button Maker Plugin — это очень легкий в использовании плагин WordPress для создания кнопок.

Особенности:

  • Базовые опции: Создание бесконечного множества кнопок и сохранение их для дальнейшего использования. Цвет, размер, шрифт и т.д., всё это можно настроить по своему усмотрению.
  • Знать что конвертирует: Позволяет вести записи о том, какие из кнопок больше всего используются и делать соответствующие выводы.
  • Платная версия: Для расширения возможностей можно приобрести платную версию плагина. К таким опциям относится, например, многострочная надпись на кнопке.


 

Easy Social Share Buttons for WordPress

easy-social-share-buttons-for-wordpress

Easy Social Share Buttons for WordPress — плагин, полностью ориентированный на создание кнопок для ссылок на социальные сети.

  • Достоинства: Плагин интегрирован с более чем 45 популярными социальными сетями, имеет более чем 48 уникальных шаблонов и более 27 вариантов позиционирования на экране.
  • Обмен контентом: Пользователи плагина имеют возможность отображать счетчики посетителей на социальных кнопках. Плагин предлагает 123 варианта для отображения данной информации.
  • Настройщик шаблонов: Такие настройки как цвет и размер кнопки доступны в настройщике шаблонов.
  • Совместим с: Плагин хорошо работает с BuddyPress, WooCommerce, bbPress и Easy Digital Downloads.
  • Стоимость: Стоимость плагина $19

Button Pro – CSS3 Buttons

button-pro

Button Pro – CSS3 Buttons — цена плагина составляет всего $4. Он позволяет с легкостью создавать кнопки на базе CSS3. Плагин не относится к WP и требует базовое понимание CSS. Тем не менее мы решили о нем упомянуть.

Особенности:


  • Общие настройки: Имеет 3 размера кнопок и 11 вариаций цвета. Вам остается только вставит код нужной кнопки в формате CSS.
  • Документация: С плагином распространяется детальная документация по его использованию.
  • Изменение состояния: Вы можете настроить визуальное изменение отображения кнопки при ее использовании.
  • Отзывчивый: Работает с большинством основных браузеров.

Выводы

Конечно, кнопки — это всего лишь маленькая деталь вашего сайта, но при этом она может сделать вашу страничку намного красивее, интереснее, а самое главное, она может привлечь ваших посетителей к определенным действиям.

 

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

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.