Как добавить кнопку в редактор WordPress [учебник]

Почему блок кнопок WordPress так важен?

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

По сути, у нас есть 2 варианта. Используйте стандартную ссылку или кнопку. Мнения о том, когда использовать первый и более поздний вариант, различны. Обычно на одной странице есть несколько возможных действий. Нам нужно убедиться, какой из них первичный, а какой вторичный. Мы рекомендуем вам использовать кнопку только для основного действия. Так вы добьетесь большей наглядности этого основного действия. Вы привлечете внимание посетителей к этому действию. Мы также можем назвать это кнопкой призыва к действию. Не создавайте слишком много кнопок на одной подстранице.

Каковы функции основных кнопок?

• Кнопки могут привлечь внимание посетителей — призыв к действию
• Они отделяют страницу или публикуют контент и делают его более читабельным.
• Помогите с ориентацией на странице. Многие посетители только визуально сканируют страницу глазами
• Направлять посетителей на другие страницы с помощью гиперссылок

Есть много параметров, которые определяют успех кнопки. Важным является, например, размер, размещение или цвет кнопки. Необходимо следовать стандартным принципам UI и UX. Зеленый цвет используется для кнопок с положительным действием, например, чтобы что-то купить. Красный цвет для отрицательного — например, чтобы отписаться от рассылки. Правильно оформленные кнопки напрямую влияют на действия посетителей.

Добавление кнопки на любую страницу или запись в WordPress

Ситуация до WordPress 5

Добавление кнопок было довольно сложным процессом до того, как был изобретен редактор блоков WordPress. Потому что этой функции естественно не было в WordPress. Вы можете использовать тему с Page Builder или сторонним плагином. В этом случае шорткоды создают кнопки.

В наших старых темах WordPress вы можете добавить кнопку, используя шорткоды в визуальном редакторе. После нажатия «Вставить шорткод» -> «Кнопка» вы можете установить различные настройки в модальном окне. Текст, цвет текста, цвет кнопки, URL-адрес, выравнивание и так далее. Благодаря этим расширенным настройкам вы можете легко и быстро добавить кнопку без какого-либо программирования.

Как использовать блок кнопок в редакторе WordPress?

Благодаря WordPress 5 есть второй путь. Намного легче. Визуальный редактор WordPress содержит множество полезных блоков. Чтобы создать кнопку на веб-сайте, теперь вы можете использовать блок кнопок WordPress в редакторе.

Пошаговое руководство, как добавить кнопку в редактор WordPress

1. Сначала вам нужно решить, куда вы хотите вставить кнопку
2. Блок кнопок можно добавить различными способами:
— нажав «+» в верхней панели или в любом месте редактора блоков, где вы выбираете блок кнопок

— вы также можете найти любой блок с помощью строки поиска, просто напишите «кнопка»

- набрав «/», что дает вам доступ ко всем доступным блокам

3. Созданный блок Button можно дополнительно настраивать

Добавить текст кнопки и URL-адрес

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

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

Изменение цвета кнопки

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

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

Найдите свой собственный стиль кнопки

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

Кнопка редактирования с пользовательским CSS

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

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

Дополнительный совет в конце

Не забывайте следить за блоком кнопок WordPress и успехом самой кнопки. Если вы используете Google Analytics, вы можете создать уникальный URL. Чтобы отслеживать клики посетителей, вы можете добавить UTM-параметр Google. URL-адрес можно создать с помощью конструктора URL-адресов. Добавление параметров позволяет определить источник посещения. Это очень полезно, если вы хотите знать, откуда посетители пришли на вашу страницу покупок.

Какая у вас самая большая проблема с блоком кнопок WordPress? Давайте обсудим в комментариях ниже. Поделитесь своим опытом использования кнопок на сайте.