Use shortcodes in your layouts

You can use Page Builder shortcode or shortcode from other WordPress plugins in any text area in a WordPress site. Outside of Page Builder, this would be the WordPress text editor where you add content for pages and posts. In Page Builder layouts, here are some examples of text areas where you can use shortcode:

  • 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

And so on. Or you can embed the shortcode into an HTML module.

Use any WordPress shortcode in your Page Builder layout

You can embed shortcode from any other plugin in your Page Builder layouts. For an introduction to WordPress shortcode, see  https://codex.wordpress.org/Shortcode.

Create Page Builder shortcode

You can create Page Builder shortcode to display the following types of content:

  • Post
  • Page
  • Custom post type 
  • Saved layout template
  • Saved row or module

You can use this shortcode in any text area where WordPress shortcodes can be used, as described at the beginning of this article. 

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 in another Page Builder row or module that accepts text, such as a Tabs module. See the Advanced Ideas section below to see how some of our community have used shortcodes. 

Tip: See the Related Articles for technical details about why there can be a performance hit with the use of too many 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 from other sites on a multisite installation. See the Shortcodes Reference in the Related Articles.

The following procedure shows how to create Page Builder shortcode.

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.

Tip: If you add the shortcode to a Page Builder layout and it isn't rendered as shortcode, try using an HTML module. 

Embed Page Builder shortcode into a text widget

By default, you cannot add any WordPress shortcode to WordPress text widgets. You can add this ability by adding the following code to the functions.php file in your child theme.

add_filter('widget_text', 'do_shortcode');

You can then add your shortcode to a WordPress text widget.

Advanced ideas for using Page Builder shortcode

Here are some examples of how the Beaver Builder community have used Page Builder shortcode in unconventional ways. Note that most of these ideas require PHP coding or CSS to make them work, and you should ask the community for help if you need it. If you implement shortcodes in a novel way, make sure you check the results extensively in various browsers on various devices.

  • Create a row or module, save it, and embed it with shortcode into Post content that doesn't use Page Builder.
  • Insert a saved row or module into a tab in the Tabs module.
  • Embed a contact form from Page Builder or another plugin into a tab in the Tabs module.
  • Add a button to a cell in a Pricing module.
  • Create a Subscribe Form module and turn it into a Subscribe widget.
  • Use saved modules in Post and Post Archive sidebars. 
  • Create two columns of links to fill one of the footer columns in the Beaver Builder theme.
  • Create a custom area for clients to send feedback and watch video tutorials in the WordPress admin area.
  • Use shortcode in the text option in the top bar and footer layout in Beaver Builder Theme.
  • Replace the Genesis theme's header and footer area in a hook.