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

До версии 5.8 WordPress использовал классический редактор без базовых функций. Вам нужно полагаться на сторонние плагины для создания простых элементов, таких как кнопки и таблицы. Тем не менее, последний редактор Gutenberg предлагает интерфейс на основе блоков, который включает в себя блок кнопок для простого и удобного создания кнопок на ваших страницах. Будь то призыв к действию (CTA) или кнопка на боковой панели, вы можете использовать блок кнопок в редакторе блоков Gutenberg, чтобы быстро создавать собственные кнопки и стилизовать их в соответствии с вашими предпочтениями в отношении бренда и дизайна.

Блок кнопок Гутенберга

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

• Чтобы открыть блок кнопок, нажмите на значок плюса, т.е. кнопку «Добавить блок (+)» и выберите «Кнопки».
• Нажмите «Переключить вставку блока» и выберите блок «Кнопка», доступный в группе «Дизайн».
• Вы можете просто ввести /кнопка и оттуда тоже.

Добавить кнопку в WordPress Gutenberg

Добавление текста кнопки и гиперссылок

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

Блок кнопок с параметрами верхней панели инструментов

Чтобы связать кнопку с определенным URL-адресом, щелкните значок цепочки на панели инструментов.

• Введите ключевое слово, и WordPress автоматически покажет соответствующие URL-адреса с вашего сайта. Выберите страницу, которую вы хотите связать, и включите опцию «Открыть в новой вкладке», чтобы открыть ссылку в новой вкладке браузера.
• Если вы хотите связать внешнюю страницу, просто вставьте URL-адрес страницы и нажмите кнопку «Отправить».
• Вы можете добавить атрибуты к ссылке кнопки в разделе «Дополнительные» настройки на боковой панели.

Добавить ссылку на кнопку

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

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

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

Добавить группу кнопок

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

Горизонтальная группа кнопок

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

Вертикальная группа кнопок

Настройка кнопок в WordPress

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

Настройки блока кнопок Гутенберга

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

Стили кнопок

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

Цвета текста и фона

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

Кнопки градиента в Гутенберге

• Граница – Параметр стиля границы предоставляет вам возможность настроить радиус границы, чтобы сделать кнопку более круглой. Таким образом, вы можете изменить стиль кнопки с полного прямоугольника на полностью круглую кнопку. Все, что вам нужно, это настроить размер радиуса границы в пикселях и найти радиус, который соответствует вашим предпочтениям стиля. Нажмите на пиксель, чтобы изменить единицу измерения с пикселей на %, EM, REM, VW или VH.

Другие настройки кнопок

• Ширина – По умолчанию ширина вашей кнопки будет определяться размером вашего контента плюс немного отступов с каждой стороны. Здесь вы можете изменить ширину кнопки на 25%, 50%, 75% или даже 100% ширины контейнера. Чтобы отменить настройку ширины, вместо того, чтобы щелкнуть другой параметр ширины, просто щелкните ту же ширину второй раз, и редактор отменит ее выбор и вернется к ширине по умолчанию.
• Типография – Вы также можете изменить размер текста кнопки на вкладке стилей типографики. Выберите один из готовых размеров шрифта или введите собственный размер шрифта в пикселях.
• Размеры – Измените отступ кнопки, введя определенное количество пикселей, которое соответствующим образом отрегулирует отступ кнопки. Вы можете ввести одно значение для всех четырех сторон или щелкнуть значок «Непохожие стороны» и указать отступы сверху и снизу.

Добавить атрибуты ссылки

• Передовой – И последнее, но не менее важное: у нас есть настройка «Дополнительно». Здесь вы можете включить дополнительные классы CSS и привязки HTML для дальнейшей настройки кнопки. Как упоминалось выше, при связывании текста кнопки вы можете добавить атрибуты «rel» в текстовое поле «Link rel». Например, вы можете добавить nofollow в поле, чтобы сделать ссылку на кнопку nofollow.

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

Шаблоны кнопок Гутенберга

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

• Щелкните значок +, отображаемый как «Переключить средство вставки блоков» в верхнем левом углу редактора Гутенберга.
• Перейдите в раздел «Шаблоны» и отфильтруйте «Кнопки» из выпадающего списка.
• Вы найдете список предопределенных шаблонов блоков кнопок.
• Нажмите на нужный блок и вставьте его в область содержимого.

Шаблоны кнопок в Гутенберге

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

Другие варианты создания кнопок в WordPress

Помимо использования блока кнопок Гутенберга, вы можете использовать разные варианты создания кнопок в WordPress:

• Коммерческие темы и плагины предлагают настраиваемый блок кнопок. Он либо имеет дополнительные параметры для блокировки по умолчанию, либо позволяет вам создать кнопку и использовать ее с шорткодом. Например, вы можете использовать плагин Shortcodes Ultimate для создания кнопок с эффектом 3D-нажатия.
• Вы можете использовать плагин блоков, например Ultimate Addon for Gutenberg или Kadence Blocks, для создания красивых кнопок.
• Скопируйте и вставьте код шаблонов кнопок из Каталог шаблонов блоков WordPress.
• Последний вариант — создать свои собственные настраиваемые кнопки с помощью CSS и вставить их в редактор Gutenberg с помощью пользовательского элемента HTML.

Заключительные слова

И, ну, это о создании кнопок на сайте WordPress. Стилизация и создание кнопок в редакторе кнопок Gutenberg — простой, но эффективный процесс. В основном это связано с наличием множества различных встроенных параметров стиля, предоставляемых блоком кнопок Gutenberg.