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

В этом посте мы познакомим вас с шорткодами Beaver Builder и покажем, как вставлять их в ваш контент. Мы также рассмотрим несколько примеров, которые могут улучшить дизайн вашего веб-сайта. Давайте прыгать!

Введение в шорткоды Beaver Builder

Если вы раньше работали с веб-сайтами WordPress, возможно, вы уже знакомы с шорткодами. Это небольшие фрагменты кода, которые добавляют функциональности вашему сайту.

Вместо того, чтобы писать все в HTML с помощью редактора кода, вы можете просто вставить шорткод на свою страницу. У него будет ярлык или идентификатор, соответствующий элементу Beaver Builder, например модулю, строке или столбцу. Вы также можете использовать шорткоды для постов, страниц или шаблонов макетов.

В этом примере мы добавляем сохраненную строку в модуль HTML:

Когда мы нажимаем « Сохранить », Beaver Builder автоматически преобразует шорткод в сохраненную строку, которой он соответствует:

Позже в этом посте мы покажем вам, как добавлять шорткоды в редакторе. А пока давайте обсудим преимущества использования шорткодов Beaver Builder.

Шорткоды могут быть удобны для добавления визуальных элементов в текстовые области. Например, вы можете создать модуль «Цены» и использовать короткий код для добавления фотографии продукта. Таким образом, вам не нужно будет работать с двумя отдельными модулями (Цены и Фото), поскольку они будут объединены:

Шорткоды также позволяют вставлять элементы Beaver Builder в ваш контент во время работы с редактором блоков WordPress. Это означает, что вам не нужно переключаться в редактор Beaver Builder, чтобы добавить модуль, строку или столбец.

Вы можете добавить шорткоды в любой модуль Beaver Builder с текстовым полем, в том числе:

• HTML
• Текст
• Заголовок
• Вызывать
• Значок
• Вкладки

Тем не менее, может быть неразумно добавлять слишком много шорткодов. Это может увеличить время загрузки, так как сервер должен запрашивать файлы CSS и Javascript для каждого шорткода. Мы рекомендуем использовать не более двух на странице.

5 примеров полезных шорткодов Beaver Builder

Есть много вариантов использования шорткодов Beaver Builder. Давайте рассмотрим несколько полезных примеров.

1. Кнопки призыва к действию в таблице цен

Допустим, у вас есть таблица цен с несколькими вариантами продуктов на целевой странице или странице продаж. Вы можете просто перечислить цены, а затем предложить покупателям оформить заказ с помощью кнопки внизу страницы. Однако пользователям нужно будет прокручивать дальше, что потенциально может повредить пользовательскому опыту (UX).

Вместо этого вы можете создать кнопку призыва к действию (CTA), которая побуждает клиентов покупать продукт. Это приведет к прямой ссылке на страницу оформления заказа, поэтому клиентам не нужно будет переходить дальше. Затем вы можете добавить эту кнопку в свою таблицу цен с помощью короткого кода:

Не забудьте настроить кнопку CTA, чтобы она соответствовала вашему визуальному бренду.

2. Контактная форма во вкладке

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

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

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

Это так просто! Теперь клиенты могут связаться с вами, не покидая страницу.

3. Изображения в текстовом поле

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

Сочетание текста и изображений — эффективный способ отображения товаров в вашем интернет-магазине. Например, вы можете добавить изображения в модуль Pricing Box, чтобы продемонстрировать различные функции продукта:

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

4. Любой модуль в редакторе блоков

Вы также можете использовать шорткоды Beaver Builder при работе с редактором блоков. Это может быть особенно удобно, если вы пишете сообщение в блоге и хотите добавить интерактивные элементы в свою статью.

Вы можете легко добавить модуль Beaver Builder на страницу, не выходя из редактора блоков. Просто вставьте блок шорткода и вставьте свой код внутрь:

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

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

5. Дата (только тема Beaver Builder)

Наша тема Beaver Builder поставляется с настраиваемым шорткодом Date. Это отображает текущую дату в любой части вашей страницы, включая верхние и нижние колонтитулы и боковые панели:

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

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

Как добавить шорткоды с помощью Beaver Builder (в 2 шага)

Мы только что рассмотрели несколько сценариев, в которых шорткоды Beaver Builder могут ускорить и упростить процесс проектирования. Теперь давайте посмотрим, как добавить их на свой сайт:

Шаг 1: Создайте свой шорткод

Шорткоды недоступны на вашем веб-сайте. Сначала вам нужно сохранить элементы Beaver Builder, прежде чем вы сможете вставлять их в виде шорткодов. Эти элементы могут включать:

• Модули
• Ряды
• Столбцы
• Шаблоны

Например, допустим, вы хотите разработать собственный модуль контактной формы. Вы можете сделать это, перейдя в Beaver Builder> Сохраненные модули> Добавить новый :

Затем вам будет предложено назвать ваш модуль и выбрать его тип:

Нажмите «Добавить сохраненный модуль ». На следующей странице выберите Launch Beaver Builder , чтобы получить доступ к редактору. Здесь вы можете настроить контактную форму по своему вкусу:

Когда будете готовы, не забудьте опубликовать свой модуль. Теперь он появится на странице «Сохраненные модули ». Если вы используете последнюю версию Beaver Builder, вы сможете увидеть автоматически сгенерированные шорткоды:

Если вы не видите столбец ShortCode , вам нужно будет создать код вручную. Для этого вам понадобится слаг модуля.

Если вы нажмете кнопку « Изменить » под вашим модулем, вы сможете просмотреть его слаг. Если вы его не видите, откройте меню « Параметры экрана » и установите флажок рядом с Slug :

Теперь вы можете использовать следующий код для создания шорткода для этого модуля:

 [fl_builder_insert_layout slug="my-post-slug"]

Не забудьте заменить «my-post-slug» на слаг вашего модуля Beaver Builder. В нашем примере это будет выглядеть так:

 [fl_builder_insert_layout slug="contact-form"]

Вот и все — теперь вы знаете, как создавать шорткоды для модулей Beaver Builder.

Шаг 2. Вставьте шорткод на свою страницу

Последним шагом будет добавление шорткода на вашу страницу. В большинстве случаев этот процесс будет включать вставку фрагмента в текстовое поле модуля.

Вот наш пример таблицы цен из ранее. Как видите, мы добавили шорткод для кнопки CTA в текстовое поле Feature 5 :

Поскольку Beaver Builder использует интерфейсный редактор, вы сразу же сможете увидеть сохраненный модуль. В некоторых случаях (например, при использовании HTML-модуля) вам может потребоваться сохранить изменения, прежде чем шорткод преобразуется в визуальный элемент.

Вывод

Шорткоды Beaver Builder позволяют быстро добавлять сохраненные модули, строки, столбцы или макеты в разные части ваших страниц. Вы можете использовать их для ускорения процесса проектирования и создания красивых страниц WordPress.

Напомним, вы можете использовать шорткоды Beaver Builder, выполнив следующие простые шаги:

1. Сохраните элемент (модуль, строку, столбец или макет) и найдите его шорткод или ярлык.
2. Вставьте шорткод в текстовое поле в модуле Beaver Builder или в блок шорткода в редакторе блоков.

Вы готовы начать создавать потрясающие страницы для своего сайта? Ознакомьтесь с полным списком удобных функций Beaver Builder!

СВЯЗАННЫЕ ВОПРОСЫ

Использует ли Beaver Builder шорткоды?

Beaver Builder предоставляет короткие коды для сохраненных элементов, таких как модули, строки, столбцы и шаблоны. Затем вы можете добавить эти фрагменты в текстовые поля и модули. Это возможно как в интерфейсном редакторе Beaver Builder, так и в редакторе блоков WordPress. Кроме того, шорткоды позволяют использовать другие ваши любимые плагины вместе с Beaver Builder.

Нужна ли вам тема Beaver Builder для использования шорткодов?

Вам не нужна официальная тема Beaver Builder для использования шорткодов. Вы можете создавать страницы и добавлять шорткоды с большинством тем, используя плагин компоновщика страниц. Однако некоторые шорткоды, такие как шорткод Date, работают только с темой Beaver Builder.

В чем разница между Beaver Builder и Beaver Themer?

Beaver Builder — это инструмент для создания страниц, который позволяет редактировать область содержимого страниц и сообщений с помощью модулей и шаблонов. В отличие от этого, Beaver Themer — это дополнительный плагин, который позволяет вам редактировать области вашего сайта, которые обычно контролируются вашей темой, такие как заголовки, нижние колонтитулы и боковые панели. Этот контент включает в себя шаблоны тем, части шаблонов и сетки постов.