Welcome to the official documentation for the Swift Page Builder. We have spent hours upon hours developing this page builder and re-working it to make it as slick and as usable as we possibly can. We are constantly looking to improve it in every possible way, and giving you the tools to create limitless pages for your website.
All support is provided through our support forum. If you are looking for support for the page builder, then you will need to ask the question through the specific theme forum on our support forum.Register for support
1) Install Swift Framework Plugin
You may have already got this far, if you have installed the plugin already then please proceed. If you haven’t then you will want to go to Appearance > Install Plugins, once you have installed and activated one of our themes. There you will find the option to install the Swift Framework plugin. Once installed you can proceed to step 2.
2) Plugin Options
You will find the included options for the Page Builder under the Swift Framework plugin menu. See right.
Below you can see the included options for the Page Builder. You can enable/disable it, set which post types you’d like it to be included on, and also the colour scheme. The shortcode mapper we will detail in a following section.
To add a content element to the page, here are the steps.
- Click the Add Element button in the top bar of the Swift Page Builder.
- Select your element from the list. You can use the tabs at the top to limit your option by type, or use the search box top right to filter the elements on the fly.
- Once you have found your element, simply click it to add it directly to the builder, or you can drag it into the builder area in your desired location.
The element controls are hidden until the element is hovered, to preserve the clean design of the elements and the builder in general.
Upon hovering over the element, the controls specific to that element will appear to the right. See right:
The controls in order from left to right are; Delete, Save, Duplicate, and Edit.
Delete – will remove the element from the builder completely.
Save – will save the element in it’s current configured state to the “Saved Items” panel.
Duplicate – will duplicate the element in it’s current configured state.
Edit – will load the edit modal for that element, and allow you to configure it. We cover this in more detail in the Editing Elements article.
To resize an element is incredibly simple. All you need to do is hover over the right edge of the element, click and then drag to resize. You will see an overlay indicator for the width that the element will resize to, as shown on the right.
Simply let go when the element indicator shows the desired size and the element will fit to that size.
To move an element, simply hover over it, click and hold your mouse and then drag it to the place you’d like it to be. An example of this is shown on the right.
To edit an element, simply hover over the element and click on the Edit icon within the hover controls. This will load the Edit Element Modal, and here you will be able to adjust the various options for that specific element. You can see an example of the modal on the right.
Adjusting the Element Edit Modal
The Element Edit Modal can be adjusted to suit your needs, you can move it around the screen, and also resize the width from the right hand corner of the modal, just check for the resize cursor, and then increase/decrease the modal size to your liking.
You can rename elements by either editing the top field of the element in the Edit Modal, titled “Element Name“.
Alternatively, you can quickly edit the element name by clicking it in the main page builder area, see right for a demo:
The Swift Page Builder can be used in various different styles, depending on the complexity of your page. We’ll detail a few basic structures below, but ultimately the structure of your page is completely up to you, and will be determined on the design you are trying to achieve.
Basic (Elements Only)
The basic structure would mean solely using elements, in various widths if required, on your page. An example of this can be seen on the right.
Rows and Elements
A slightly more complex structure would be to use Rows within your page, to group elements, add background colours etc.
Rows are designed to contain the elements within. You can add a background image/video/colour to the row to give your page a more creative direction, and this can be used to backdrop the elements within, or rows can infact be used on their own as a full width image or video section.
An example layout using Rows + Elements can be seen on the right.
Rows, Columns, and Elements
If you desire the maximum flexibility and control of your page, then you can introduce columns to the structure, to further the grouping of certain elements.
Columns ensure that elements will always appear in line with other elements, and allows you to align multiple elements vertically in a row with other single or multiple elements.
An example layout using Rows, Columns, and Elements can be seen on the right.
Saving an element is convenient way of configuring an asset to a setup which you use frequently, and replicating it in 2 clicks. To save an element, simply follow the following steps:
- Click the Save button, on the element that you wish to save, see right:
- The element will now appear in the “Saved Items” modal, which is accessible from the Page Builder header.
Saving a page template is convenient way of saving a collection of configured elements, which you can then load onto multiple pages and edit as needed. If you are looking to create collections of elements which you would like to reference on multiple pages without changes, then an SPB Section would be more appropriate, see that section for more details.
To save a page template, simply create the page you wish to save, and then press the Save Template button in the Swift Page Builder header. See right:
Once saved, the page template will then be available in the Saved Items modal, under the Page Templates tab.
To load a page template simply click the Saved Items button in the Swift Page Builder header, and click the Page Templates tab and click the page template to load it.
Loading a page template will add the content from that template to the bottom of your page – it will not replace the content of the page.
SPB Sections are a great way of creating re-usable sections of elements which are shared on many pages, but are able to all be updated at once from a single location.
To create an SPB Section, simply go to SPB Sections > Add New, from the menu item in the WordPress Admin menu on the left.
This will then open up a normal WordPress page editor, and here is where you create your SPB Section.
Using an SPB Section
SPB Sections are used just like any other element in the Page Builder. All you need to do is follow the following steps:
- Click the Add Element button in the Swift Page Builder header.
- Select the SPB Section element.
- Edit this element, and then select the section that you wish to display in the edit modal that appears.
You are then free to use this SPB Section on as many pages as you like, and you only need to update it from a single location, within the SPB Sections admin.
We have created a Shortcode Mapper so that you can use 3rd party shortcodes within the builder. To setup the mapped shortcodes, you’ll need to follow the steps below:
- Go to Swift Framework > Options from the WordPress Admin Menu on the left.
- Within the Page Builder panel, you will find the Shortcode Mapper tool (see right).
As you can see in the image on the right, we have filled out an example shortcode map, with a single parameter. Once we have added this map, you’ll want to press Save, and then return to your page to add the element.
Once we have mapped our shortcode in the Swift Framework Options, we can then return to the Swift Page Builder to add the element into our page.
Once you are editing your desired page, simply press the Add Element button in the Swift Page Builder header, and there you will find the element you have mapped, see right:
Editing your mapped shortcode is the same as editing any other element in the page builder. Simply hover over the element, press the Edit icon, and the mapped parameters will be there for you to edit. See right.