×

Pro Switch to Empty > Elements

You are presented with an overview of all existing elements (none by default).

Let's add a new one.

The element form itself is pretty straight forward and consists the title, an options section, the parts section and the elements markup.

Start by entering a name for your new page builder element.
In this tutorial we will create and image with a caption field underneath it.

Enter a unique ID for your element.
The IDs row, text and media are forbidden to use.

Afterwards you will have to add element parts.
Our element will consist of two parts: the image itself and the caption.

Define a replacement to be used in the markup later (this is a string which is easily distinguishable from HTML markup).

Add the caption part and set it to type RichText to make it editable with markup options.

Now it's time to enter your elements HTML markup.
It's important to reuse the replacing strings you defined above for each of your elements parts. If you're not going to use those your element will not be editable in the page builder.

When your markup and part setup is complete publish your element.

Let's test our newly created element in the page builder itself.
Switch to Posts and create a new one.

Right after you did so you will notice the element you just created in the +Add column of page builder elements.

When the element is added to the page layout you instantly see the two parts you just set up. The media element above and the caption part underneath it.
Let's add some content to those by simple double clicking on either one of them.

Now let's try changing and extending the element we just created and filled with content.

Switch back to Empty > Elements …

… and edit the Image & Caption element.

In your HTML markup now move the caption part above the image part itself …

… and add another meta RichText part underneath the image.

Update the element to confirm the changes you just made.

Change back to the post you just created containing the new Image & Caption element to edit it again and see the element changes in action.

You instantly notice that the caption field moved above the image and underneath there now is the additional meta RichText field …

… therefore changing an custom page builder element affects all the elements which are present anywhere in your layouts, keeping them in sync.