Using page builder layouts

We at SwiftThemes officially support the SiteOrigins page builder plugin. You can find a tutorial on how to create custom layouts here. Here are we are going to explain how to use the prebuilt layouts you bought from the members area.

When you purchase a prebuilt layout, you get a zipped file with the following content.

• LAYOUT_NAME.json
• design-options.txt
• all-devices.css
• only-desktop.css
• only-tablet.css
• only-mobile.css
• readme.txt

Get ready

First install the page build plugin and activate it. Follow the step 0 on this page

The simple process

1. Create a new page with the page template specified in the readme file.
2. Now click on the page builder tab and click on prebuilt layouts. A modal/popup opens.

   

   

3. In the model click on import/export and drag and drop the .json file to import the layout.

   

4. In the zipped file you got, there will be four css files, namely
   • all-devices.css
   • only-desktop.css
   • only-tablet.css
   • only-mobile.css

   Add them to their respective sections in the Custom CSS for this page section. If the box is not visible, check the screen options in the top right.

   

5. In the Swift CMS options section, 90% of the times you want to Hide post title, Disable ads within post content and Disable all ads on this page.
6. The last option in the Swift CMS options, Prevent WordPress from adding<p> and removing <br /> tags. is strictly according to your needs. If you are seeing unnecessary spacing between your text, you might want to check it.

Most of the times, it will be mentioned in the read me file.

1. Finally we have the design-options.txt. If you haven't done any customisation so far, then just goto to import/export page under swift options and import the design options. If you already customised your site and don't want to loose your customisation, then there are a list of settings that the current layout requires in the readme file, set them manually.

You can find more info about import export here here

Most of the times, the layouts use sliders and widgets whose options are specific to each site. So after you import the layout, you have to go to those widgets and see the values accordingly.