WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Как добавить кнопку в любой пост или страницу

457

Что бы вы предпочли: обычную ссылку или кнопку?

Нажми на меня   Нажми на меня

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

В этом посте вы узнаете, как добавлять кнопки любого цвета и стиля к любой записи или странице на вашем сайте 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 делает создание кнопок простым и невероятно гибким. И вы, вероятно, найдете дюжину других применений для него после того, как установите его на свой сайт.

Есть вопросы по добавлению кнопок к вашим сообщениям и страницам? Оставьте комментарий ниже.

Источник записи: www.competethemes.com

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