Re-using PageBuilder widgets and rows

Re-using a PageBuilder "widget" (e.g. a Feature Box) within a page or even a whole row is very easy. Simply go to the right hand side of the widget or row and click the icon labelled duplicate. You can now drag and drop that duplicated widget or row to where you want it to be.

But what happens when you want to re-use a widget or a whole row across different PageBuilder pages? That's the scenarios that this guidance article hopes to cover.

Re-using a widget (aka an "addon")

A "feature box" is one of the PageBuider "widgets" that comes with the Joomla theme we are using i.e.Flex. It typically consists of an icon, a headline and some text. So let's assume you've configured an instance of a "feature box" exactly the way you like (fonts, padding, colours, sizes etc) such that you want to use it as the basis for configuring more "feature boxes" on other PageBuilder pages.

On the PageBuilder editor page showing the row with your "feature box" widget, just click the "Save Addon" icon towards the top right of widget (widget is my preferred but probably confusing name for an "Addon"!). In the Save Addon pop up box give a descriptive name that preferably starts with syc- (to make it very obvious is it something we have created).

To re-use your saved widget, go to the PageBuilder page and row where you want to use the widget and click the "Add new addon" icon. On the resultant screen, you will see all the built in widgets for the Flex / PageBuilder theme but down at the bottom of the left hand list, you will see "Saved Addons". Click the one you want and you are almost done.

What you shouldn't forget is that what you have just done is insert a copy of the HTML for the widget from your original location. This is important for two reasons

  1. You must make sure to edit the new instance for where it is being used. For a "feature box", this may mean editing its title, text, icon, hyperlink and maybe its colour
  2. Your new instance of the feature box has no ongoing relationship with the saved addon. If you make further changes to the saved add on, they are not reflected into any instances created from the saved add on.

Note - at the time of writing there is already a saved syc-feature-box addon/widget.

Re-using a row

Re-using a whole row (which may contain one or more separate widgets) is very similar.

In the PageBuidler editor, click the "Save Row" icon towards the top right of the required row. Again give the saved row a dscriptive name preferably starting syc-.

To re-use a row, click the "Add section" option shown at the top of a PageBuilder page editor. In the resultant window, our copy of PageBuilder does not allow us to use any of the content from the "Sections" library (we'd have to pay another $50 or so for this). However, we can use the saved rows in the "My Sections" tab.

Clicking on the "syc-cta-login-with-button" will get the the row in the screen grab below. I have used this on pages which have some content that is only visible to logged on SYC members. Setting the access level for the widget in the row to "Guest" means that this "call to action" is only shown to users who aren't logged on.