How do I use the theme page builder?

Updated 5 months ago by Taylor McManus

Avia Layout Builder - The Theme Page Builder

When creating a new page or post, you will see a blue button called "Advanced Layout Editor". Click on this button to use the theme page builder with drag and drop elements to create a unique layout.

There are three different tabs of items to build a page - layout, content and media elements. These elements are all drag and drop elements into the content area or you can click on them and drag them where you want the widget to be placed on the page. Clicking and dragging the elements allows you to rearrange elements and add content to the page.

Layout Elements

These are used to build the columns and rows of the page for the page to function best responsively. The items with the ratios are columns. The three on the end - Color Section, Grid Row and Tab Section are additional ways to build the layout of the page with extra elements included in the widget.

The Color Section Widget allows you add a fullwidth and choice of height image or video in the background. You can add content elements within this widget to place over the background, whether that be a color, image or video. I use this one a lot!

The Grid Row Widget is a fullwidth (100% width of the browser) that content widgets can be added in the different rows. This widget has the ability to be 1/2, 1/3, 1/4, 1/5 wide columns.

The Tab Section Widget is fun way to add a lot of content but not have it make the page super long in height. You can have titles to each tab and add content elements to content area.

Content Elements

All the widgets included in this section are fun ways to add content to your website and keep the layout interesting. There is the usual text editor as the first widget and then there are 2+ rows to choose from on how you want to add content to your website. I have highlighted some of my favorite widgets I used to build pages below. They include...

  • Text Block - this is your normal WordPress content editor
  • Separator/Whitespace - don't be afraid of the whitespace
  • Special Heading - every page must have an H1
  • Button, Fullwidth and Button Row - allowing you to create very clear call to action buttons
  • Tabs & Accordions - great widget to use for a lot of content but so it doesn't make the page length a mile long.
  • Table - ability to add in tabular data without knowing any code
  • Testimonials - you have the choice of a grid or slider layout.

Media Elements

The items in the third tab are for all widgets that include image, video and maps. The first widget is to add a single image to a page. The third image is to add a video to your website using either your YouTube of Vimeo link from your account page. The rest of the images are different widgets to create sliders, galleries and a google map.

Remember! You can preview the page before it is live for the rest of the world to see. Click on the Preview button in the right sidebar Publish Panel. And when your page is perfect, click on the blue Publish button.

How did we do?

Powered by HelpDocs (opens in a new tab)