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

В режиме редактирования Записи или Страницы добавьте новый блок:

добавьте новый блок

В строке поиска напишите запрос «Кнопки»

поиск кнопок

После добавления блока на страницу напишите название кнопки которое будет отображаться, например, «Отправить сообщение», «Написать нам WhatsApp» и т.п.

добавляем название кнопки

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

выравнивание кнопки

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

 мы можем задать ширину нашей кнопки.

А вторая вкладка даёт нам намного больше возможностей оформления нашей кнопки, например, мы можем изменить её стиль и сделать обводку, теперь наша кнопка стала менее акцентированной.

Этот блок имеет множество настроек, с помощью которых мы можем придать уникальности (кастомизации) нашей кнопке

настройки блока

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

типографика

Как задать ссылку кнопке?

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

задаем ссылку

Как присвоить кнопке ID?

в момент выделения блока кнопки во вкладке настроек блока откройте раздел Дополнительно. Далее в поле HTML-якорь внесите какое-то название на латинице — оно то и будет служить в качестве идентификатора этого элемента.

присваиваем айдишник

А вот и результат нашей работы. Кнопка с заливкой по контуру с ссылкой на группу во ВК и с присвоенным идентификатором элементу:

вывод кнопки

Автор

Evgeni

Веб-разработчик, фрилансер и фанат WordPress с 2012 года. На этом сайте делюсь заметками для начинающих по разработке на WordPress. Надеюсь увидеть вас в числе своих подписчиков.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *