To build a page layout using Unsyon Page Builder, switch your editor to “Visual Page Builder”.
Once you do that, default page editor will be switched into Visual Editor, and we will be able to build a custom layout. Let’s study Layout Elements.
Section (row) – is a container for columns. To add a section, click on “Section” icon in “Layout Elements” tab.
When you hover a mouse on section, some additional icons will be displayed, here are they:
- Hide / Show – allows to temporary hide a sections and all it’s content from a front-end part. This option may be useful when you just need to hide section from a page for some time, but you don’t want to delete it.
- Save as template – allows to save section with it’s content as a template. Then you can load already saved templates when you build a new page and want to use one of previously created sections.
- Edit – all of Page Builder elements have this icon, it opens additinal settings for current section / element.
- Duplicate – duplicates a section with it’s settings and content inside.
- Remove – removes a section and it’s content inside.
- Collapse – allows to collapse or expand section. Useful option if you have a lot of different sections on the same page.
Section Element has additional settings (e.g. you can change Background Color / Image, animate section and add cool effects), they can be changed when you click on “Settings” icon
This table explains section settings:
|General||Allows to change section style, Container stretch, Section animations and some of CSS styles|
|Attributes||Allows to add unique section ID or custom CSS classes. Unique section ID is important for a One Page Navigation.|
|Background||Allows to change section background color, set Background Image and change it’s style|
|Effects||Allows to add section overlay, parallax and canvas effects|
|Styling||Allows to change additional styles like borders, shadows, border radius etc.|
|Margins||Allows to set custom section margins for different devices (desktop / mobiles).|
|Paddings||Allows to set custom section paddings for different devices (desktop / mobiles).|
|Responsiveness||Allows to manage section styling for different devices.|
You can build different multi-column layouts using Column Element. Add several columns and drag them inside previously created Section. Remember, that Columns, like any Page Builder Element have additional style settings.
All done! We’ve just created new 2 columns layout and now we can add some content inside.