Difference between revisions of "Using page builder layouts"
From WikiName
| Line 4: | Line 4: | ||
When you purchase a prebuilt layout, you get a zipped file with the following content. | When you purchase a prebuilt layout, you get a zipped file with the following content. | ||
| − | * | + | * LAYOUT_NAME.json |
* design-options.txt | * design-options.txt | ||
* all-devices.css | * all-devices.css | ||
| Line 13: | Line 13: | ||
====Get ready==== | ====Get ready==== | ||
| − | First install the page build plugin and activate it. Follow the step 0 on this | + | First install the page build plugin and activate it. Follow the '''step 0''' on this [[How_to_build_business_sites_with_Swift|page]] |
| − | ==== | + | ====The simple process==== |
| − | + | #Create a new page with the page template specified in the '''readme''' file. | |
| − | + | #Now click on the page builder tab and click on prebuilt layouts. A modal/popup opens. | |
| + | #In the model click on import/export and drag and drop the '''.json''' file to import the layout. | ||
| + | #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. | ||
Revision as of 07:22, 16 August 2015
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
- Create a new page with the page template specified in the readme file.
- Now click on the page builder tab and click on prebuilt layouts. A modal/popup opens.
- In the model click on import/export and drag and drop the .json file to import the layout.
- 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.
