Как создать призыв к действию в WordPress Gutenberg?

3 min


Многие пользователи отказались от WordPress с открытым исходным кодом из-за унылого классического интерфейса редактора. Однако WordPress представил блочный редактор Gutenberg версии 5.0, который полностью изменил ландшафт WordPress. Раньше вам потребовались мощные плагины для построения страниц на основе JavaScript для создания элементов и макетов, необходимых для любого веб-сайта. С Gutenberg вы можете создавать красивые блоки без каких-либо дополнительных плагинов. В этой статье мы объясним, как создать призыв к действию в WordPress, используя блоки Гутенберга по умолчанию.

Что такое призыв к действию?

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

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

Способы показа CTA

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

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

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

Как создать призыв к действию в WordPress?

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

Элементы призыва к действию

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

  • Содержит три столбца
  • Первый столбец — изображение
  • Второй столбец — текстовое описание
  • Третий столбец — одна или две кнопки

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

Создайте призыв к действию в WordPress Gutenberg

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

Создание столбцов

Вставьте блок столбцов и выберите вариант трех столбцов равного размера (33/33/33).

Вставить столбцы в WordPress
Вставить столбцы в WordPress
  • В первом столбце вставьте блок изображения и загрузите изображение партнерского продукта / компании. При необходимости под изображением вы можете вставить несколько слов, используя блок абзацев.
  • Во втором столбце вставьте абзац и добавьте описание своего предложения.
  • В последний столбец вставьте одну или две кнопки и добавьте ссылки на партнерские ссылки с некоторыми цветами фона.

Это должно выглядеть так:

Изображение купона

14 дней профессионального трейла

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

  • Помните, что вместо блока из трех столбцов вы можете использовать столбец 70/30 (ширина 2/3 + 1/3) и использовать «Медиа + текст» в первом столбце и кнопки во втором столбце.
  • Кроме того, вы можете использовать прозрачное изображение, как в приведенном выше примере, чтобы смешаться с ярким цветом фона.
  • Используйте плоские цвета пользовательского интерфейса, если вы не уверены, какие цвета выбрать для кнопок, а затем и для фона.
  • Измените вертикальное выравнивание элементов столбца на «Выровнено по центру по вертикали», чтобы выровнять содержимое столбцов по центру.
Изменить вертикальное выравнивание
Изменить вертикальное выравнивание

Назначить цвет фона

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

Параметры цвета для блока столбцов
Параметры цвета для блока столбцов

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

Создание полной или широкой ширины

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

  • Используйте параметр широкой ширины, если на странице есть боковая панель.
  • Используйте полную ширину, только если страница имеет макет полной ширины без боковой панели.
  • если ты

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

Блок столбцов группы
Блок столбцов группы

Повторное использование блока CTA

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

Преобразование блока CTA в блок многократного использования
Преобразование блока CTA в блок многократного использования

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

<!-- wp:columns {"verticalAlignment":"center","backgroundColor":"vivid-purple","textColor":"white"} -->
<div class="wp-block-columns are-vertically-aligned-center has-white-color has-vivid-purple-background-color has-text-color has-background"><!-- wp:column {"verticalAlignment":"center","width":25} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:image {"align":"center","id":51115,"sizeSlug":"large","className":"is-style-default"} -->
<div class="wp-block-image is-style-default"><figure class="aligncenter size-large"><img src="https://img.webnots.com/2020/10/Coupon-Image.png" alt="Coupon Image" class="wp-image-51115"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size"><strong>14 Days Pro Trail</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":50} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:paragraph -->
<p>Here is the text for your call to action box. You can change the color, number of columns and customize as per your need.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":25} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":3,"backgroundColor":"white","textColor":"black","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background" style="border-radius:3px"><strong>Get Deal</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"borderRadius":3,"style":{"color":{"background":"#faf400"}},"textColor":"white","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-text-color has-background" style="border-radius:3px;background-color:#faf400" target="_blank" rel="noreferrer noopener"><strong>Read Review</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Варианты CTA Box с Гутенбергом

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


0 Comments

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