Page Layout, Rows, Columns

Print

To build a page layout using Unsyon Page Builder, switch your editor to “Visual Page Builder”.

Enable Unyson 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.

Page Sections

Section (row) – is a container for columns. To add a section, click on “Section” icon in “Layout Elements” tab.

Section / Row

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 Controls

Section Settings

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

Section Settings

This table explains section settings:

Tab Description
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.

Page Columns

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.

Adding a Column

All done! We’ve just created new 2 columns layout and now we can add some content inside.


Was this article helpful to you?
Yes No

How can we help?