Page Builder

Other articles in this category

Search More Content

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Use shortcodes in your layouts

You can insert Page Builder layouts as shortcodes into any text or text editor field. This feature should be used by expert users only.

Basics:

  • Shortcodes can be recognized as a bit of code that lives between square brackets, such as
  • When you update the source content, the shortcode content is automatically updated.
  • You can use shortcodes in the text editor of posts, events, custom post types or in Blackbaud Builder module settings fields that accept text, such as the Description field of the Smart Heading module.

Why use Blackbaud Builder shortcode?

The two most common uses for Page Builder shortcode are:

  • Inserting a Blackbaud Builder module into other Blackbaud Builder modules where normally only text can occur, as the following examples show.
  • Inserting a section of a Blackbaud Builder layout, such as a saved row, into a standard admin content area like.
    For example, you could insert a Subscribe Form module into the middle of a post that is edited with the admin text editor.

Here’s an example where the shortcode for a Photo module was inserted into a feature field in a Pricing module.

The screenshot shows a Pricing Table module in which the first feature in the first feature in the first column contains text (“Your logo or custom text printed on apparel”) a <br> tag to put the photo on the next line, and the shortcode for the saved Photo module.

Here are a couple of other examples of how you can use shortcodes:

  • Add a button to a cell in a Pricing Table module.
  • Embed a contact form or other Gravity Form into a tab in a Tabs module.

What Blackbaud Builder content can be turned into shortcodes?

You can create shortcodes for any Blackbaud Builder content that has an ID or a slug:

  • Saved rows, columns, or modules
  • Saved layout templates

Create a Blackbaud Builder shortcode

Prerequisite: If you plan to use a row, module, column, or layout template in your shortcode, it must be saved first so it has its own slug. See the article about saving rows, columns, and modules or the article about saving layout templates.

To create a Blackbaud Builder shortcode:

  • Get the slug of the saved item: You can view the slug by opening the Saved element for editing after clicking the wrench icon, as shown in the below screenshot.

This will open a new tab. Make note of the URL shown in your browser. In this case we have:

“https://mysite.com/fl-builder-template/header-example-1/?fl_builder” (The item slug is highlighted in bold).

  • Create the shortcode by using the following format:
  • With the example above, the final shortcode would be:
  • Use this shortcode anywhere described in the following section.

Where to insert shortcodes

You can insert Blackbaud Builder shortcodes or any other shortcodes into a Blackbaud Builder module or the standard WordPress text editor.

In a Blackbaud Builder module, insert the shortcode into any text field. Here are some examples of text fields in the Blackbaud Builder modules:

  • Text editor module
  • Label field of a Tabs or Accordion module
  • Text editor area in any module, such as the Smart Heading, Icon, Info Box, Accordion or Tabs module…