Как добавить кнопку в любой пост или страницу
Что бы вы предпочли: обычную ссылку или кнопку?
Оба они переносят вас в одно и то же место, но кнопка выглядит лучше и удобнее. Замена простых ссылок кнопками может вызвать больше кликов и улучшить внешний вид вашей страницы.
В этом посте вы узнаете, как добавлять кнопки любого цвета и стиля к любой записи или странице на вашем сайте WordPress.
Обновление: попробуйте Elementor
Есть еще один отличный способ добавить кнопки в WordPress!
Бесплатный плагин Elementor – это полное решение для создания страниц с перетаскиванием, но он также может легко справляться с простыми задачами, такими как добавление кнопок к вашим сообщениям.
Вот как…
Редактировать с Elementor
Установив плагин Elementor, вы найдете новую кнопку «Редактировать с помощью Elementor», добавленную ко всем вашим сообщениям и страницам.
Нажмите эту кнопку, и вы попадете в редактор Elementor, который очень похож на собственный Customizer в WordPress.
В левой части находится панель управления, где вы можете найти все доступные элементы. Элемент кнопки легко доступен в разделе "Основные элементы".
Нажмите и перетащите элемент кнопки в любое место сообщения, и вы увидите, что он автоматически добавляется к вашему сообщению. После добавления вы увидите обновление левой панели с настройками для изменения кнопки.
По умолчанию кнопка зеленая, но это можно легко изменить.
Как видите, легко редактировать текст кнопки и URL-адрес, а также некоторые другие параметры, такие как выравнивание текста и возможность добавления значка.
На вкладках «Стиль» и «Дополнительно» панели настроек доступно еще множество параметров.
Как видите, с помощью Elementor вы можете создать любую кнопку, какую только можете себе представить .
Этот плагин может быть немного излишним, если просто включить кнопку в один пост, но я думаю, что вы можете быть в восторге от всех других возможностей, которые поставляются с этим плагином.
Если вы хотите узнать больше о том, как использовать Elementor на своем сайте, ознакомьтесь с нашим полным руководством по созданию страниц Elementor.
Добавить кнопки в содержание сообщения
Поскольку Elementor является конструктором страниц и имеет свою собственную систему элементов, вы сразу заметите, что вы не можете добавлять кнопки в контент публикации – только до или после.
Простой обходной путь – скопировать и вставить часть сообщения в элемент текстового редактора, а затем вы можете включить любые элементы Elementor до / после него, например кнопку.
Вот оригинальный метод, рекомендованный в этом посте для добавления кнопок к вашим постам и страницам.
Как использовать Shortcodes Ultimate
Самый простой способ добавить стильные кнопки к вашим сообщениям и страницам – это плагин Shortcodes Ultimate.
Этот плагин потрясающий.
Вы найдете множество других применений для Shortcodes Ultimate, но, что наиболее важно, он упрощает создание кнопок. Вот скриншот из плагина с некоторыми примерами различных стилей кнопок.
Вы можете комбинировать цвета, размеры, стили фона – любое свойство, которое может иметь кнопка.
Не знаете, как использовать шорткоды? Взгляните на это руководство по шорткодам.
Вероятно, вам уже не терпится начать работу, поэтому вот пошаговое руководство по использованию этого плагина кнопки на своем сайте.
Установить и активировать
Найдите «Shortcodes Ultimate» в меню плагинов и установите его, как любой другой плагин WordPress.
Активация плагина добавит новое меню верхнего уровня на вашу панель инструментов.
Используйте кнопку вставки шорткода
Shortcodes Ultimate также добавляет в редактор новую кнопку «Вставить шорткод».
Нажатие на эту кнопку откроет огромный массив типов контента, доступных в Shortcodes Ultimate, включая нужную нам кнопку.
После выбора шорткода кнопки вы попадете прямо на экран конфигурации кнопки.
Shortcodes Ultimate также имеет надстройки премиум-класса, которые добавляют еще больше типов и стилей шорткодов .
Настроить кнопку
Существует огромное количество настроек, которые вы можете использовать для настройки каждой кнопки, которую вы делаете, в том числе:
- Фоновый цвет
- Текст кнопки
- Цвет текста
- Ссылка на кнопку
- Иконки
Я сделал скриншот всего раздела стилей, но он слишком большой, чтобы включать его в пост. Вы можете щелкнуть здесь, чтобы просмотреть полную страницу настроек стиля.
Просмотрите и вставьте кнопку
При изменении стиля вы можете использовать кнопку Live Preview внизу, чтобы быстро посмотреть, как будет выглядеть ваша кнопка.
Когда вы закончите, вы можете сохранить свою кнопку в качестве предустановки, чтобы вы могли повторно использовать тот же стиль в другом месте на своем сайте.
Наконец, нажмите кнопку «Вставить шорткод», и шорткод будет добавлен для кнопки.
Хотя в редакторе вы увидите только шорткод, он будет отображаться как кнопка точно так же, как вы просматривали при просмотре публикации.
Добавление кнопок в WordPress
Вам не нужно быть мастером CSS, чтобы начать добавлять привлекательные кнопки на свой сайт WordPress.
Shortcodes Ultimate делает создание кнопок простым и невероятно гибким. И вы, вероятно, найдете дюжину других применений для него после того, как установите его на свой сайт.
Есть вопросы по добавлению кнопок к вашим сообщениям и страницам? Оставьте комментарий ниже.