Как добавить кнопки в WordPress: улучшите свои кнопки WordPress с помощью PostX

Опубликовано: 2023-05-17

Блок кнопок WordPress — это мощный блок для WordPress, который выводит настройку кнопок на совершенно новый уровень. Благодаря широкому спектру опций и функций он позволяет создавать привлекательные и интерактивные кнопки, которые привлекают посетителей вашего сайта. Итак, как добавить кнопки в WordPress?

Используйте следующие шаги, чтобы использовать кнопки в WordPress

  • Установить PostX
  • Добавить блок кнопок PostX
  • Добавить ссылки в кнопку WordPress
  • Настройте блок кнопок

Сегодня мы рассмотрим основные моменты блока кнопок PostX, как добавить кнопки в WordPress с помощью PostX. Без дальнейших церемоний, давайте начнем.

Посмотреть демо прямо сейчас!
Содержимое скрыть
1 Как добавить кнопки в WordPress
2 Видеоурок
2.1 Шаг 1: Установите PostX
2.2 Шаг 2: Добавьте блок кнопок PostX
2.3 Шаг 3: Добавьте ссылки в кнопки WordPress
2.4 Шаг 4: Настройте блок кнопок
2.4.1 Индивидуальные настройки для одной кнопки
2.4.2 Стиль
2.4.3 Размер кнопки
2.4.4 Текст
2.4.5 Предыстория
2.4.6 Значок
2.4.7 Индивидуальные настройки для группы кнопок (несколько кнопок)
2.4.8 Зазор между кнопками
2.4.9 Горизонтальное и вертикальное выравнивание
2.4.10 Маржа
2.4.11 Анимация кнопок
3 Заключение

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

Теперь мы объясним, как добавлять кнопки на сайты WordPress. Следуйте этому пошаговому руководству, и вы сможете добавить идеальную кнопку WordPress на свой веб-сайт.

Видеоурок

Вот видеоурок по добавлению кнопки WordPress на ваш сайт.

Шаг 1: Установите PostX

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

Чтобы установить и активировать плагин PostX Gutenberg Blocks:

Installing PostX
Установка PostX
  1. Перейдите в «Плагины» → «Добавить новый».
  2. Найдите «PostX».
  3. Нажмите «Установить», а затем «Активировать».

Получить PostXPro чтобы разблокировать все интересные функции и создавать потрясающие веб-сайты !

Теперь вы готовы улучшить свой сайт с помощью кнопок WordPress.

Шаг 2: Добавьте блок кнопок PostX

Мы завершили установку PostX. И кнопки теперь доступны для использования вместе с расширенной настройкой. Итак, без лишних слов, давайте покажем вам, как добавлять кнопки в WordPress.

Adding Button Block
Добавление блока кнопок

Во-первых, вам нужно перейти на страницу. Вы можете перейти к опции страницы WordPress и нажать «Добавить новую», чтобы создать новую страницу. Затем найдите «Группу кнопок», чтобы выбрать этот блок. И это добавит кнопку WordPress на страницу.

Шаг 3: Добавьте ссылки в кнопки WordPress

Сделать гиперссылку на кнопку или, проще говоря, добавить ссылки в кнопки WordPress очень просто.

Adding Links to Buttons
Добавление ссылок к кнопкам

Сначала вам нужно выбрать кнопку и выбрать тексты, на которые вы хотите сделать гиперссылку. Теперь вы увидите всплывающую подсказку WordPress по умолчанию. Во всплывающей подсказке вы увидите опцию «Ссылка» со значком гиперссылки. Просто щелкните его, чтобы открыть поле URL-адреса, и добавьте туда нужную ссылку, чтобы добавить ссылки в кнопку.

Шаг 4: Настройте блок кнопок

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

Button Settings
Настройки кнопки

Для этого блока есть два типа настроек. Поскольку вы можете добавить несколько кнопок, этот блок имеет отдельные настройки для «Кнопки» и «Группы кнопок».

Мы покажем вам все варианты настройки и способы их использования.

Параметры настройки для одной кнопки

Чтобы выбрать и открыть настройки кнопки, нужно нажать на кнопку.

Стиль

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

Button Style
Стиль кнопки

Размер кнопки

Следующая опция, которую вы получите, — это изменение размера кнопки. По умолчанию вы получите «Маленький», «Средний», «Большой», «Очень большой» и «Пользовательский». Вы получите предустановленный размер кнопки, если выберете параметр «Маленький», «Средний», «Большой» или «Очень большой».

Button Size

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

Custom Button Size
Пользовательский размер кнопки

Вот визуальный вид различных стилей кнопок.

Стили кнопок

Текст

Затем вы получите настройки текста. Это позволит вам настроить текст кнопки в соответствии с вашими потребностями. Вы увидите настройки «Типографика текста», «Цвет текста» и «Цвет при наведении текста».

Button Text Setting
Настройка текста кнопки

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

Button Text Typography Control
Кнопка управления типографикой текста

Вот визуальный вид эффекта наведения.

Выбор цвета и эффект наведения

Фон

Этот параметр позволит вам настроить все фоны этого блока кнопок.

Button Background Settings
Настройки фона кнопки

Во-первых, вы можете установить полностью настраиваемую кнопку Margin, чтобы получить идеальное расположение по горизонтали и вертикали.

Button Margin Control
Кнопка управления полями

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

Button Color Setting
Настройка цвета кнопки

После этого вы можете настроить границу этой кнопки. Этот параметр включает стили границ (3 готовых стиля), ширину и цвет границы.

Button Border Setting
Настройка границы кнопки

А также отрегулируйте радиус границы выбранной кнопки.

Button Border Radius Adjustment
Регулировка радиуса границы кнопки

Кроме того, вы получите настройку Box Shadow. Его расширение позволит вам настроить «Смещение-X», «Смещение-Y», «Размытие» и «Распространение».

Button Border Shadow Control
Кнопка управления тенью границы

Кроме того, вы можете установить цвет тени. И вы получите переключатель «Вставка», если хотите, чтобы кнопка затенялась внутрь, а не наружу.

Икона

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

Button Icon Settings
Настройки значка кнопки

Есть кнопка для переключения значка с текста до текста на текст после.

Вы можете изменить размер значка и отрегулировать расстояние между значком и текстом.

Icon Size and Space Control
Размер значка и управление пространством

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

Button Icon Color Control
Управление цветом значка кнопки

Параметры настройки для группы кнопок (несколько кнопок)

Чтобы выбрать группу кнопок, вы увидите значок «Выбрать группу кнопок» во всплывающей подсказке WordPress по умолчанию.

Button Group Selection
Выбор группы кнопок

Разрыв кнопки

После выбора группы кнопок вы найдете настройку «Зазор между кнопками». Эта настройка помогает установить зазор между 2 и более кнопками.

Button Gap Management
Управление промежутками между кнопками

Горизонтальное и вертикальное выравнивание

Здесь вы можете настроить горизонтальное и вертикальное выравнивание нескольких кнопок.

Horizontal and Vertical Adjustment
Горизонтальная и вертикальная регулировка

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

Vertical Alignment Toggler
Переключатель вертикального выравнивания

Допуск

Вы также можете настроить поле всей группы кнопок с помощью этого параметра.

Анимация кнопки

Это одна из самых интересных настроек в блоке кнопок. В настоящее время вы получите 4 анимации, установленные в блоке кнопок WordPress. И каждый из них обеспечивает другой подход, когда вы наводите курсор на кнопку. Кроме того, вы можете настроить положение анимации с помощью ползунка «Преобразование кнопки».

Button Animation Selector
Селектор анимации кнопки

Вот визуальная анимация кнопок.

Анимация кнопки

И это все, что вы получите с блоком кнопок WordPress. Теперь вы знаете, как добавить кнопки WordPress с помощью PostX.

Получить PostXPro чтобы разблокировать все интересные функции и создавать потрясающие веб-сайты !

Заключение

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

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

Вы можете посмотреть видеоуроки WordPress на нашем канале YouTube. Кроме того, найдите нас на Facebook и Twitter для получения регулярных обновлений!

Нравится эта статья? Распространить слово
  • PostX User-Friendly Interface Update

    Представляем обновление удобного интерфейса PostX

  • Gutenberg Post Blocks - #1 Best Post Blocks Plugin 1

    Gutenberg Post Blocks — лучший плагин для создания почтовых блоков №1

  • How to Create WordPress Page Template in Twenty Twenty-two Theme

    Как создать шаблон страницы WordPress в теме Twenty Twenty-Two

  • Security Update: WPXPO Products

    Важное обновление безопасности для PostX и ProductX