Use shortcodes in your layouts

Shortcodes are macros that can create markup dynamically. Thiey have a format similar to [shortcode]

This article refers to shortcodes from two sources:

  • Shortcodes that come from outside Page Builder
    Examples are shortcodes that are provided by other plugins to accomplish some action.
  • Shortcodes that you create for any object that has a slug or post ID and insert into Page Builder layouts or into pages that don’t use Page Builder.
    For example, the following screenshot shows text and the shortcode for a saved Photo module in the first feature field in a Pricing Table module.

Here are some other examples of ways you can use shortcodes in Page Builder and how to create Page Builder shortcodes.

Use any Shortcode in your Page Builder layout

You can embed plugin shortcodes in your Page Builder layouts.

Generally, shortcodes can be used in any field that accepts text. Here are some examples of text fields in Page Builder modules where you can use shortcodes:

  • HTML module
  • Text editor module
  • Heading field of the Heading module
  • Label field or text editor area of a Tabs module
  • Text editor area in an Icon module
  • Heading field or text editor area of a Callout module

Create Page Builder shortcodes

You can create shortcodes for the following types of Page Builder content:

  • Posts
  • Pages
  • Custom post types
  • Saved layout templates
  • Saved rows or modules

You can use this shortcode in any text field where shortcodes can be used.

For example, you could create a Subscribe form, save it as a row or module, create the shortcode for it, and add it to a blog post that doesn’t use Page Builder. Or you could use the shortcode for one module in another Page Builder row or module, such as a Tabs module. See the Advanced Ideas section below to see how some of our community have used Page Builder shortcodes.

Here are some of the properties of Page Builder shortcode:

  • When you update the source content, the shortcode content is automatically updated.
  • You can insert shortcodes for content on other sites on a multisite installation. See the Shortcodes Reference in the Related Articles.

The following procedure shows how to create Page Builder shortcodes.

Prerequisite: If you plan to use a row, module, or template in your shortcode, it must be saved first. See the Related Article on saving rows and modules.

To create Page Builder shortcode:

  1. Get the ID or slug of the content you want to embed with a shortcode. See the Related Article below for info on how to do this.
  2. Create the shortcode using the following format, depending on whether it’s the slug or the ID:
    [fl_builder_insert_layout slug="my-post-slug"]
    [fl_builder_insert_layout id="123"]
    See the Shortcodes reference in the Related Articles below for more advanced options.

  • If you add the shortcode to a Page Builder layout and it isn’t rendered properly, try putting the shortcode into an HTML module.
  • See the Related Articles for why there can be a performance hit with the use of too many Page Builder shortcodes.


Related Articles