Where can i use page builder?

Most places you can add content you can use page builder, but with the exception of custom coded blocks and the product item, you can normally only use it for static content.

• Static pages

  • can be accessed from admin → content → pages

  • Special pages include home page and 404 page

• CMS Blocks

  • can be accessed from admin → content → pages

  • For lumarix this will include things such as the footer and the value header bar

• Product description

  • admin-> Catalog → products->product ->content ->description

• Category description

  • admin → Catalog → category->category->content ->description

  • For lumarix, this has been customised and will appear at the top of the page, be careful before editing

• Menu

  • admin → Catalog → category->category->megamenu

• FAQ

  • can be accessed from admin → content → faq

How to edit a page?

Where pagebuilder is usable , a button reading edit with page builder will appear.

Layout

Rows

All pages need rows and columns. You must first add a row, you can add seperate rows to separate the content in the page builder. The rows will normally adjust to the height o the largest object, but you can change this in the settings. If you hover your mouse at the the column, the options tab appears. Here you can delete the row, duplicate it ,move it by clicking the icon on the left and dragging it, or adjust the settings. In the settings you can change the height, background image and colour, apply classes and other settings.

Columns

To add columns, drag them into the row. from the side bar. The columns object splits the row into a “grid” .

If the grid is grid size 12, the row is split in 12 segments. The columns cannot contain part of a segment, the columns can be the size of 1 segment, 3 segments ect. If you need smaller columns, you can adjust the grid size by clicking on the left hand side of the column.

Tabs

Tabs create tabbed content that you can switch between . You can add a new tab by going to the item options on the page and clicking the plus.

Elements

Text

Text elements let you add text to the page builder. Text can have headings, links, colours, widgets, images and site variables.

Heading

A heading is stand alone large text that can be set to different heading sizes.

Buttons

Buttons are clickable items that you can add text to, they have several different styles and can link to various things in the site. To add a link go to settings on the button and change the button link section. You can link to a url , or directly link to a product, category or page.

Divider

A divider is a line that spans the whole item it’s put into. It’s generally used for separating content.

HTML Code

This block can directly receive html code that will render on the page.

Media

Image

Add a image to the page

Video

Add a video to the page.

Banner

Add a banner, this is normally text over an image.

Slider

This is a the same as a banner, but you can have multiple that can automatically rotate and be switched between

Map

You can add a map, this hover requires a google maps api key to be registered in settings.

Content

Block

A block is a static block made in the content section. If a item will be used in multiple places and changed regularly, its best to do it this way and only change it in one place.

Products

This lets you add a product carousel from your site. You can add different rules and conditions, choose the number of products shown , and have them switch around.

Padding and Margins

Everything in page builder can have the paddings and margins adjusted, however unless you know what you’re doing its best not to use these to much. Pagebuilder supports negative values for these.

Padding

Increase/decrease the space between content and it’s border.

Margin

Increase/decrease the space around the element.

How do i use Templates?

Templates are saved pages and items made in pagebuilder.

...

It’s recommended you save something as a template if you want to try things out but don’t want to lose what was there.

Desktop / Mobile

At the top of the pagebuilder are 2 icons for desktop and mobile. Clicking these will change the view. Mobile and desktop have seperate images and heights for all elements, so be sure to change these to make sure its fits on both.

By default page builder doesn't have mobile columns.

If you're using Lumarix we have added a special function to allow this.