Page Builder

When creating a new page, a button above the content editor Visual Page Builder will show the builder.

It contains three categories of elements (shortcodes), each in its own tab - Layout Elements, Content Elements and Media Elements. Clicking or dragging an element will add it to the page flow. Clicking the element after it is inserted will open its options. Most of them are configurable.

It's recommended to install the dummy demo content. It inserts configured pages like the online demo of the Theme. You'll see how easy it is to edit a page this way.

Here you can find a video that shows the features of the Unyson Page Builder (the video is not created for any theme in particular and the elements in the video have different options and styling than the one in the theme).

Page Builder Shortcodes

It's recommended to put the different shortcodes into sections and columns. That way your page will have a well aligned and ordered flow.

Most of the shortcodes are self-explanatory. Here is a list with short descriptions for some of the more specific ones:

Section

Many options are available in this shortcode. Some of them:

• You can insert inner spacing (padding). The values are inserted with space between them in clock-work order - for example "50px 20px 50px 20px" means padding top and bottom is 50px and left and right is 20px, this can also be written shortly as "50px 20px". You can also specify the Mobile Padding which is used when the site is viewed on a mobile device.
• Background Color and Background Image. There is also an additional option - Filter that will insert a transparent (or not) colored overlay above your background image.
• Text Color - this option changes the text color of the shortcodes placed in the Section.
• Parallax Image - can be switched On or Off.

Column

Most options here affect the Shortcodes placed inside the Column. Some of the options:

• Custom Padding - when enabled, gives you the option to place custom padding for the column.
• Background Color - adds a background color for the Column.
• Selecet Text and Buttons Positions - this option affects the Shortcodes placed inside the Column. Keep in mind that some Shortcodes have their own options for the Text Alignment and can override this option.

Double Images

With this shortcode, you can add two Images with the one being on top of the other or add One Image, with a Pattern behind it. You have the options to select the Image Style.

• The One Image option lets you add an Image and select a Background Pattern behind it. You can also upload a Custom Pattern.
• The Two Images lets you upload Two Images. The second image will be behind the first one.

Gallery (Media)

Here you can add Images or Videos that will be displayed in a grid. For the Gallery you can specify the Items Per Page, Columns, Aspect Ratio and Grid Spacing. The Show Image Title option will display the Title of the images when hovered in the gallery.

Aspect Ratio - The theme can automatically resize the thumbnails of the projects to the selected landscape or portrait aspect ratios. There is also an additional option available - Auto (Crop and Align Thumbnails) - this will make all portrait thumbnails to have height equal to two landscape ones.

Button

There are three Button Styles - Default, Colored or Special.

You can also add an Icon for the button, which is displayed next to the button label.

Image/Icon Box

With this shortcode, you can put an Image or Icon Box with text. You can also select its Style - Horizontal or Vertical.

OpenTable Form

This Reservation Form links to your Restaurant in the OpenTable website. There are two From Styles - Boxed Layout (the fields appear one under another) and Wide Layout (the fields appear next to each other). You can also select to show Form Icons for each fields, as well as select the Button Style and Icon.

This Shortcode is similar to the Official OpenTable Widget, but is created in a way to be displayed with the Theme's style and to function properly in WordPress. To find your Restaurant ID, you can follow these steps:

1. Navigate to the OpenTable Restaurant Center - Reservation Widget.
2. Select your Restaurant in the Restaurant field:
3. Click the Next button.
4. In the Next Page you can find your Restaurant ID:
5. Copy and place the Restaurant ID in the OpenTable Form Shortcode:

Special Heading

You can insert a title with a subtitle as well as select the Heading Size, Heading Position and Subheading Position. This can be used to put titles for the different sections of the page.

Square Block

Add a Block with a Background Image, Title, Subtitle and Content. You can also add an URL for the Block, when clicked. This Shortcode can be utilized for additional information, like Special Offers, Events, Chefs or Restaurant Info.

Spacer

Can be used for adding spacing between components. Also, features an additional field for height when viewed on mobile.

Hide on Desktop and Hide on Mobile option fields

All of the Shortcodes can be hidden either on mobile or on desktop. That way you can remove or show different elements for the different devices.

Animation On Scroll

Also available to all Shortcodes. When enabled you can add an animation to the element, which activates on scroll. The Animation Type and Delay can be adjusted.

Page Builder Templates

The structure of most of the Online Demo Pages can be found and used under the Templates menu when editing a Page with the Visual Page Builder. You can find the button, next to the Publish button in the Visual Page Builder:

Clicking one of the Templates will load the Shortcodes used in the corresponding Page in the Online Demo.

Note: If you haven't imported the 1 Click Demo Content, there might be some bugs or issues with some of the Templates' Shortcodes. This is because they might link to some other Page, that isn't available.

Shortcodes

Unyson Shortcodes can also be used without the full Visual Page Builder functionality. After installing and activating the Unyson plugin, make sure that you have installed the 3 extensions - Page Builder, WordPress Shortcodes and Backup & Demo Content.

After that you can use the Unyson Shortcodes from the corresponding button in the Content Editor when editing a Page.

The shortcodes are explained in the Page Builder Shortcodes section above.