Кнопки для wordpress – Лучшие плагины для кастомных кнопок на WordPress

Лучшие плагины для кастомных кнопок на WordPress

Администраторы сайтов на WordPress довольно редко сталкиваются с HTML и CSS кодом, и в этом основной секрет успеха и популярности данной платформы. Большинство предпочитает визуальный редактор и графический пользовательский интерфейс для настройки своей темы, страниц и плагинов.

Не смотря не это, можно, конечно, изменять свои страницы, создавать красивые кнопки и делать многое другое с помощью кода, но это не единственный способ. Один из вариантов создания красивых пользовательских кнопок, call-to-action и целевых страниц — использование плагинов.

Смотрите также:

На WordPress нет опции добавления пользовательских кнопок по умолчанию. Однако существует много платных и бесплатных решений для их создания. Что можно использовать на целевых страницах, а также в призывах к действию? Есть несколько плагинов на WordPress для выполнения почти всех задач. В этом посте вы узнаете, зачем нужны эти кнопки и плагины на WordPress, и как их получить.

Основные типы кнопок

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

• Ссылки: вы можете просто использовать их вместо ссылок. Но, конечно, не на всех ссылках они могут быть.
• Социальные кнопки: кнопки социальных сетей позволяют пользователям обмениваться ссылками на страницах в соцсетях.
• Call-to-Action (CTA, призыв к действию): это другой тип кнопки, который оптимизирован в психологическом отношении и используется для того чтобы управлять вниманием пользователя.

Зачем вам нужны эти кастомные кнопки?

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

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

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

Способы добавления кнопок на WordPress

Есть два способа добавления кнопок на WordPress:

• Код: вы можете использовать HTML и CSS для создания кнопок. Для этого знание указанных языков является обязательным.
• Плагины: просто устанавливайте плагин WordPress для добавления кнопок. Это, как обычно, самый простой способ.

На втором способе мы и остановимся в данном посте.

MaxButtons — это бесплатный WordPress плагин, который позволяет пользователям получить красивые и изящные кнопки. Он дает вам возможность создавать и добавлять красивые кнопки CSS3 в ваших постах и страницах. Также этот плагин имеет более 70,000 активных установок и является одним из самых настраиваемых на WordPress.

Основные свойства:

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

2. Buttons Shortcode and Widget

Buttons Shortcode and Widget — еще одно бесплатное решение для создания кнопок. Он имеет четкий и легкий в использовании интерфейс.

Основные свойства:

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

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

3. Button Maker Plugin

Button Maker Plugin — простой в использовании плагин для создания кнопок в WordPress. Он не имеет внушительную пользовательскую базу и более 1000 активных установок.

Основные свойства:

• Создавайте неограниченное количество кнопок и сохраняйте их для дальнейшего использования. Их цвет, размер шрифта, направление и прочее можно менять.
• Знает, что приносит конверсию: позволяет записывать просмотры и клики на каждую кнопку, так чтобы вы знали, что преобразовывается.
• Платная версия: для расширения возможностей этого плагина вы можете приобрести премиум-версию. Button Maker Pro даст вам несколько новых функций, таких как возможность добавления многострочного текста в кнопках.

4. Easy Social Share Buttons for WordPress

Easy Social Share Buttons for WordPress — лучший плагин для социальных кнопок на wordpress. Это комплексные и оптимальные решения для повышения социальной активности на вашем сайте. В отличие от большинства плагинов в этом списке, он не создан для построения кнопок общего пользования. Наоборот, плагин концентрируется только на кнопки с функцией «поделиться» в соц. сети.

Основные свойства:

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

5. Button Pro — CSS3 Buttons

Button Pro — CSS3 Buttons — еще один плагин из CodeCanyon в этом списке. Стоит всего $4 и имеет более 1100 продаж. Плагин включает в себя простой в использовании набор кнопок на основе CSS3 и комплект кнопок для обмена в соц. сетях. Но это не WordPress плагин, так что придется немного разобраться с кодом. Но если вы знаете немного CSS, можно начать работу довольно быстро.

Основные свойства:

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

Итоги

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

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Отправить рейтинг

Средний рейтинг: 4 / 5. Количество голосов: 15

Смотрите также:

hostenko.com

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

В WordPress любую задачу можно решить двумя способами: с помощь внедрения кода и для этого требуются знания программирования; либо плагинами. Второй вариант куда лучше и практичнее. Кнопки для WordPress можно также установить двумя методами. В этой статье я расскажу вам про самый лучший и удобный плагин, который решает эту задачу качественно и легко.

Описанный ниже плагин может делать кнопки, оформлять их и присваивать им ссылки и многое другое.

Это вам тоже может быть интересно:

Кнопки для WordPress с помощью Buttons Shortcode And Widgets

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

Установите плагин и активируйте его. После этого в консоли будет новый пункт «Buttons Shortcode And Widgets», и в нём нет ничего интересного. Поэтому сразу перейдите в пункт «Внешний вид» и подпункт «Виджеты». Здесь вы увидите новый виджет «OTW Shortcode Widget». Чтобы начать работать с ним, перетащите его в нужную область виджетов, и разверните для настройки.

В первую очередь нажмите кнопку «Add» рядом со списком «Select Shortcode».

Откроется окно для создания кнопки. Слева – настройки, а справа – её предварительный просмотр, который изменяется при каждом изменении настроек.

Все опции кнопки WordPress на английском языке, поэтому я пробегусь по пунктам и поясню значение настроек:

• Title. Сюда запишите текст надписи вашей кнопки.
• Link. В этом поле поместите ссылку, на которую должна направлять кнопка при клике по ней.
• Open in a new window. Опция позволяет назначать атрибут, который открывает ссылку кнопки для WordPress в новой вкладке.
• Size. Размер кнопки – четыре разных варианта.
• Icon type. Большой выбор всевозможных иконок, которые можно поставить на кнопке.
• Icon position. Положение иконки – справа или слева на кнопке.
• Shape. Три варианта формы кнопки – прямоугольная, закруглённая и округлая.
• Цвет кнопки.
• Background Color. Цвет фона кнопки.
• Border color. Цвет границы кнопки.
• Title color. Цвет текста на кнопке.
• Icon URL. Если среди готовых иконок не нашлось той, что вам нравится, здесь можно установить свою картинку.
• CSS Class. Можно задать свой класс стиля.

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

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

При клике на неё появится такое же окно опций, как и в виджете того плагина. И благодаря ему можно настроить кнопку и поместить её в запись или на страницу.

Статьи по теме:

wp-system.ru

WordPress Button Plugin MaxButtons — Плагин для WordPress

MaxButtons is a powerful WordPress button, share button and social icon plugin. Create great looking CSS3 WordPress buttons in a minute. Easy to understand. Our button editor with live preview makes it a snap to generate awesome responsive buttons in very little time. The social share buttons and social icon features allow you to add social options to your website in minutes.

MaxButtons WordPress button plugin has been going strong for over 6 years and was the first button plugin for WordPress. MaxButtons has earned over 700 5-star reviews and over 1.5 million downloads. Here are couple of our favorites:

“The best plugin of its kind” — by celito

“This plugin makes creating buttons sooooo easy.” — by ncrocker202

Why aren’t all plugins like this?!?
MaxButtons easily solved my problem with lots of options when creating the button and a live view of what it was going to look like. It would have done the job for me there and then but being able to adjust the text AND link with shortcodes on my page made modifications a breeze. — by discgosforth

“Easy, clear, and robust. I’m a programmer and can write CSS till the cows come home, but why? Just get it, install it and use it. Then, when you’re impressed, buy the pro version” — by jleahy

Max Foundry also makes the WordPress Gallery plugin MaxGalleria and WordPress Media Folders plugin for real WordPress Media Library folders and Welcome Mat Pro.

Requirements

• WordPress installed
• PHP 5.6

WordPress Buttons

MaxButtons

• No coding, the plugin takes care of everything
• Button shortcodes for ease of use
• Create unlimited number of buttons
• Live preview window instantly updates as you customize your buttons
• Color picker for unlimited color combinations
• Works with all modern browsers, degrades gracefully for others
• Fully CSS3 compliant with text shadowing, box shadowing, gradients, etc.
• Copy an existing button to use as starting point for others
• See your buttons on different color backgrounds
• Predefined defaults make getting started super easy
• SiteOrigin Page Builder integration through the SiteOrigin Widget Bundle
• Supports Shortcake plugin to see your buttons in your editor!

Share Buttons

MaxButtons has a share buttons addon that includes 7 beautifully designed share button sets for the following social networks:

• Facebook
• Twitter
• Pinterest
• Linkedin
• Google+
• Pinterest
• VKontakte
• StumbleUpon
• Reddit
• Whatsapp
• Buffer

Plus email and print icons.

Social Icons

In addition to promoting your content through MaxButtons share buttons you can also use share buttons to promote your social network profiles. Simply select a social icon or make a button, include the link to your profile and post the button shortcode on your page. Social icons are easy with MaxButtons!

MaxButtons Pro

Take your buttons to the next level with MaxButtons Pro!

Our premium WordPress plugin for buttons, share buttons and social icons brings you the best WordPress button plugin through continuous feature updating. Upgrading to the Pro version allows you to add icons and images to your custom WordPress buttons. The Pro features allow you to do so much more!

• Icon Support — Add icons and images to your buttons and customize placement and size.
• Multi-line text — Add a second line of text and stylize with font, size and placement.
• Google Fonts — We have included the entire set to help your buttons stand out with beautiful typography.
• Button Packs — Ready to use, value priced button sets that make any site good great.
• Google Analytics Event Tracking for WordPress Buttons. The best way to see you users’ interactions with buttons in Google Analytics. No coding needed.
• Import/Export — Useful for backing up and/or moving your buttons. Also, use any of the great free icons listed on our site.
• Include images in buttons.
• Button Search — for easier management of large button sets.
• Font Awesome 5 — Largest icon collection, fastest served
• Visual Composer — Integrated with Visual Composer
• Contact Form 7 Integration
• Beaver Builder Integration
• Easy Digital Downloads Purchase and Checkout Button Integration

WordPress Button Sets

In addition to the Basic Buttons and free button packs included with MaxButtons Pro you can also purchase additional professionally designed, production ready button packs from the largest WordPress button library in existence. The library features more than 6,000 buttons. It is the largest WordPress button library in the known universe.

WordPress button sets make designers and developers much more productive.

Free Icons

You can use free icons when you create your buttons with MaxButtons Pro so we’ve built one of the largest libraries to inspire you and make your buttons really stand out.

Button Shortcode

1. Click the MaxButtons page from the admin menu.
2. Click the Add New button.
3. Create and customize your button using the button editor.
4. Fill out and select the options needed to build your button.
5. Once you’re ready, click Save.
6. A button shortcode will be generated (ex: [maxbutton id=»17″] or [maxbutton name=»My Button Name»]).
7. Use the shortcode anywhere in your content and the button will appear.

You can also pass the button text and URL as parameters in the button shortcode, giving you even greater flexibility. For example, if you want to create a set of buttons that look exactly the same, except for the text and URL, you could do something like this:

[maxbutton id=»17″ text=»Search Google» url=»http://google.com»]

[maxbutton name=»MaxButtons Button Name» text=»Search Yahoo» url=»http://yahoo.com»]

Another parameter you can give the shortcode is window, which tells the button whether or not to open the URL in a new window (by default the button opens the URL in the current window). To do so you always give the window parameter the value «new», shown below. Anything else will open the button URL in the current window.

[maxbutton id=»17″ window=»new»]

You can also use the nofollow parameter, which will add a rel=»nofollow» attribute to the button when set to true, as shown below (the default is false):

[maxbutton id=»17″ nofollow=»true»]

NOTE: Passing parameters to the shortcode overrides those settings saved as part of the button.

Поддержка

We work hard to give timely support during the week. And we give support when we’re on during the weekend.

MaxButtons. Bringing the #buttonlove!

ru.wordpress.org

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

В большинстве своем пользователи не любят заморачиваться с программным кодом, в том числе HTML и CSS. Всегда проще использовать графические редакторы для работы с темами, плагинами и страницами сайта. В этом посте мы расскажем вам про плагины WordPress для создания кнопки — красивой, пользовательской кнопки, необходимой для выполнения различного рода функций.

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

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

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

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

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

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

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

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

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

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

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

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

WordPress Button Plugin MaxButtons

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

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

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

Buttons Shortcode and Widget

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

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

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

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

Button Maker Plugin

Button Maker Plugin — это очень легкий в использовании плагин 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 – CSS3 Buttons — цена плагина составляет всего $4. Он позволяет с легкостью создавать кнопки на базе CSS3. Плагин не относится к WP и требует базовое понимание CSS. Тем не менее мы решили о нем упомянуть.

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

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

Выводы

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

 

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

Навигация по записям

xn--j1aoaa.xn--p1ai

Как делать красивые кнопки для WordPress быстро и просто / webentrance.ru

Делать красивые кнопки для WordPress легко и просто с помощью специального плагина. Плагин способен делать кнопки, оформлять их соответствующим образом, вставлять ссылки и многое другое.

Заходим в Консоль — Плагины — Добавить новый и вводим в поиске — Forget About Shortcode. По названию видим, что он разрешает выводить кнопки в записи и страницы сайта.

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

Чтобы понять, как этот плагин работает, заходим в любую запись в административной панели сайта и можно заметить, что в редакторе появилась специальная кнопка со стрелкой, которая называется Insert Button.

Допустим, вы хотите создать успешный канал на YouTube. Очень хорошо, тогда советы и секреты  создания эффективного канала от такого специалиста, как Е. Попов, вам точно пригодятся.

Поэтому ставим курсор непосредственно в нужном месте записи и нажимаем в редакторе консоли на кнопку Insert Button.

Открывается действующая форма для создания кнопки Edit Button. В ней есть поля  для ввода адреса и текста.

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

Вставляем ссылку на страницу подписки и пишем текст, призывающий нажать на кнопку. Например, в данном случае, это подписка на промокурс «5 секретов успешного канала на YouTube»,

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

Обязательно ставим галочки Add Nofollow, чтобы не передавать свой вес вместе с кнопкой и Open link in new tab, чтобы после нажатия кнопки посетителем, открывалась новая вкладка.

Сначала кнопка может быть невзрачной. Это можно исправить, например, поменять цвет фона на красный или оранжевый, чтобы сделать кнопку более кликабельной.

Ниже слева располагается Text Color, а справа — Button Color, то есть цвет текста и цвет фона, соответственно.

Есть возможность выбрать размер кнопки и ее формат, например, Pop out Rounded, то есть с закругленными углами и с тенью.

Форма позволяет дополнительно выбрать к кнопке иконку. Иконок предлагается очень много, различного формата. Можно без труда выбрать по своему вкусу.

После всех установок нажимаем Update и сохраняем изменения.

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

ПОДПИСАТЬСЯ

Эту кнопку, как картинку можно переставить в любое место записи, экспериментировать с цветом и размерами, в соответствии с дизайном сайта и задачами самой кнопки.

Сохраняем изменения, проверяем, как будет выглядеть кнопка и публикуем страницу.

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

Конечно, некоторым может нравиться что-то другое. Существует немало ресурсов, которые помогают делать кнопки.

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

Другие записи по теме:

webentrance.ru

Кнопки для WordPress плагином Buttons Shortcode And Widgets

Несмотря на то, что WordPress является очень гибким инструментом для создания сайта, делать в ней кнопки с помощью встроенных в неё средств, сложно. Под кнопкой в данном случае понимается элемент, при нажатии на который происходит какое-то действие, например, переход на другую страницу. В этой статье вы узнаете, как сделать кнопки для WordPress.

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

Кнопки для WordPress с плагином Buttons Shortcode And Widgets

Уже из названия плагина становится понятно, что он создаёт кнопки с помощью шорткодов, а это значит, что их можно будет установить прямо в текст любой записи или страницы, а также кнопки можно вывести в виджете. То есть, данное решение позволяет поставить кнопки для WordPress почти в любом месте сайта.

Скачайте и установите на свой сайт плагин Buttons Shortcode And Widgets. После его активации никаких настроек в консоли не появится. Можно сразу переходить к редактору записей и там будет новая кнопка «Insert Shortcode».

Сначала нужно установить курсор в том месте записи или страницы, где будет кнопка для WordPress, а затем нажать в панели инструментов «Insert Shortcode». Откроется окно, в котором необходимо настроить ряд опций. Рассмотрим их:

• Вводим заголовок кнопки, текст, который будет на ней написан.
• Вводим ссылку, которая будет открываться при нажатии на эту кнопку.
• Open in a new window. Выбираем, нужно ли открывать ссылку в новом окне или в этом же.
• Их четырёх вариантов кнопки для WordPress выбираем размер. От самого маленького до огромного.
• Icon Type. Большой выбор иконок для кнопки. Вот, что самое полезное в этом плагине, и что отличает его от других.
• Icon Position. Выбираем позицию иконки на кнопке.
• Shape. Здесь выбираем форму для кнопки. Есть три варианта.
• Определяем цвет элемента. Есть список готовых.
• Custom Options. Это набор опций, в которых можно настроить цвет границы, фона текста, указать ссылку до собственной иконки кнопки, а также собственный CSS класс, если такой имеется.

После установки всех настроек нужно нажать на кнопку «Insert». Тогда в редакторе отобразится шорткод, который при публикации преобразуется в созданную кнопку.

Кроме того, плагин создаёт виджет, который называется OTW Shortcode Widget. У него есть такие же настройки, как и у кнопки в редакторе.

Возможно, вас заинтересует и другой плагин, который позволяет создавать кнопки для WordPress. О нём мы рассказали тут.

wpuroki.ru

Как создать кнопки на сайте WordPress: дизайн и рекомендации

Создание рекомендаций по дизайну кнопок может показаться излишним. В конце концов, вы уже знаете, как выглядят веб-кнопки, не так ли?

Как и обычные кнопки, не следует забывать, что они являются центральной частью веб-дизайна с важными функциями:

• Кнопки часто составляют основной призыв к действию.
• Кнопки «Купить» сильно влияют на доход.
• Кнопки регистрации электронной почты помогают создать свою клиентскую базу.
• Кнопки отправки формы важны для управления.
• Социальные кнопки помогают поделиться своим контентом.

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

1. Убедитесь, что кнопки хорошо сочетаются с вашим сайтом и брендингом

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

В то же время не бойтесь экспериментировать. Всплеск смелого цвета может быть именно тем, что увеличит конверсии.

2. Придерживайтесь установленных соглашений о дизайне

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

Установленные соглашения

Форма. Благодаря длительной эволюции компьютеров наиболее знакомой формой является прямоугольник (с закругленными углами или без них). Как пример, взгляните на WordPress.

Поскольку длительное время пользователи сталкиваются с этим стилем, они легко узнают его. Конечно, сейчас популярны и другие виды кнопки, например, с опцией вкл./выкл. Но они также привычны для пользователя.

Тени и блики. Тени со смещением становятся универсальным сигналом о том, что на это можно нажать. Поэтому не забудьте сделать ваши кнопки более выпуклыми.

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

Смотрите также:

Много интересной информации в разделе Уроки WordPress.

3. Используйте метки

Следующим пунктом нашего руководства по дизайну кнопок являются метки. Без подсказки о том, что делает кнопка, пользователи не смогут определить, нужно ли им кликать на кнопку.

Это необязательно должно быть текстом, иногда достаточно указать иконки. Вы можете видеть это в социальных клавишах обмена, которые стали вездесущими.

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

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

4. Размер и интервал кнопок

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

Важно создать кнопки таким образом, чтобы:

а) сделать их пригодными для использования,

b) предотвращать случайное использование пользователем неправильной информации.

Когда дело касается размера, нужно учитывать, что средний человеческий кончик пальца составляет 16-20 мм. Это примерно 45 — 57 пикселей. Чтобы учесть это, Apple рекомендует использовать размер кнопки не менее 44 х 44 пикселя.

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

5. Внедрение обратной связи

Как только вы разработали свои кнопки так, чтобы пользователи могли четко их идентифицировать, работа не прекращается. Следующий вопрос: что происходит, когда пользователи используют кнопку? Как оказалось, эти элементы дизайна имеют более одного состояния:

• Обычный – ясно видно, что это кнопка приглашает к взаимодействию.
• Сфокусированный – как правило, эффекты наведения мыши подтверждают, что взаимодействие с элементом возможно.
• Нажато – вознаграждает пользователя за действие, подтверждает, что происходит какое-то действие.
• Занято – показывает активность, происходящую в фоновом режиме.
• Отключено – дает понять, что возможны другие действия, только не в настоящее время.

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

6. Позиция Кнопка видна

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

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

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

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

7. Контрастность

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

Общие инструменты для создания контраста:

• Цвет – используйте контрастные цвета, в том числе для метки кнопки.
• Размер – большие элементы выделяются лучше.
• Типографика – смелый текст или использование другого шрифта может привлечь внимание.
• Пробел – больше пустого места вокруг элемента означает больше внимания к нему.

Хороший способ выяснить, достаточно ли контраста – использовать тест на прищуривание. Для этого просто отодвиньтесь от экрана, прищурьте глаза и посмотрите, выделяется все еще кнопка.

Звучит странно, но это проверенная и хорошо работающая техника среди веб-дизайнеров.

Как создавать кнопки в WordPress

Теперь, когда вы знаете, как должны выглядеть кнопки, возникает вопрос: как их создать на своем сайте? Новый редактор Gutenberg делает это очень просто.

1. Создайте блок-элемент

В Gutenberg есть возможность создать кнопку, как и любой другой блочный элемент. Просто нажмите на символ плюса слева. Когда откроется меню, прокрутите вниз до элементов макета, чтобы найти элемент Кнопка (Button).

Нажмите, чтобы добавить ее на свою страницу.

2. Настроить текст и назначение кнопки

После щелчка WordPress открывает это меню.

У вас есть следующие варианты:

• Изменить ориентацию – используйте символы вверху, чтобы выровнять кнопку влево, по центру или вправо относительно страницы.
• Текст кнопки «Редактировать» – нажмите кнопку, и тогда вы сможете ввести и редактировать текст: полужирным, курсивом или зачеркнутым шрифтом.
• Ввод ссылки – там, где редактор говорит Вставить URL-адрес или тип, вы указываете, куда будет перенаправлены посетители при нажатии кнопки.

3. Отредактируйте дизайн

Можно изменить цвет кнопки и текста всего за несколько кликов.

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

В разделе «Дополнительно» можно добавить к кнопке собственный стиль CSS. Таким образом, можно создать собственный дизайн с разметкой CSS, включая эффекты зависания и многое другое.

И это все — самый простой способ добавить кнопку в WordPress.

Источник: torquemag.io

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Отправить рейтинг

Средний рейтинг: 5 / 5. Количество голосов: 1

Смотрите также:

hostenko.com