Usage

If you have the extension installed you can now start using the extension. The extension can be used with the following Magento entities:

  • CMS Blocks
  • CMS Pages
  • Category Pages (through CMS Blocks)

Basic Concept

To efficiently use the Site Builder, you first need to understand the basic concept behind the content structure. There are four fundamental content structures you need to know about:

../_images/schema.png
  1. Breakpoints: A Breakpoint represents a certain device class, the defining characteristic is screen width. The extension comes with four breakpoints:

    • Smartphone: XS Extra Small Screen Width
    • Tablet: SM Small Screen Width
    • Laptop: MD Medium Screen Width
    • Desktop PC: LG Large Screen Width.
  2. Rows: Rows contain columns and are an outermost unit. A Row can contain any number of columns. The row also has a column count, the number of columns, which can be display side by side.

  3. Columns: Columns are contained in a row and hold any number of elements. A column has width, which corresponds to the column count of its row. For example, if the column count is 12 and the width of the is 6, this means the column has a width of 50% (6/12). The column width is always set to a breakpoint, so a column has actually four widths.

  4. Elements: An Element is a concrete content representation. For example an Image, a Headline, a Product, etc. It is always contained in a column. An Element can have different spacings properties (margin & padding) and visibility depending on the breakpoint. This extension comes with a variety of elements (see Elements).

Editor

../_images/editor.jpg

Preview Control

To open a preview of your current state of the content, click on the Open Preview Button. A new window should open, which displays your rendered content. If you wish, you can leave the window open it will automatically update itself if changes are made. On a multi-sore setup, you can additionally choose in which store you want to preview it.

Breakpoints Switcher

Select a breakpoint by clicking on one of the buttons. After selecting a breakpoint you can change the column widths in this breakpoint.

Template Controls

View Templates

../_images/templates.jpg

By clicking on the View Templates you can see all existing templates. For every template, you can execute the following actions

Delete (1):Deletes the Templates and the associated screenshots
Use (2):Replaces the current content with the content from the template
Preview (3):Opens a preview with template content

Save as Template

../_images/template-save.jpg

To save the current state of your content as a template click on the Save as Template Button. In the drawer, you can set a name (2), a description (3). If you started from an existing template you can update this selecting the update mode (1), The extension generates screenshots for all breakpoints. Since the generation happens entirely in the browser, the result is not always completely accurate. By clicking on the Save button your template will be created.

Row

../_images/row.jpg

The following actions can be performed on a row:

  1. Display or hide columns: By clicking on (1) you can show or hide the columns of the rows.
  2. Change the name: Every row can have a name. The name is entirely an internal reference and will not be displayed on the frontend.
  3. Add a row: By clicking on the Add a row* Button you can add another row. The row will be placed where the button is.
  4. Set the column count: Every row has column count, the number of columns that can be displayed in a row without a line break.
  5. Move: You can move the row up or down with these buttons. Alternatively, you can move it via drag and drop, use the drag handle on the left side of the row.
  6. Delete: By clicking on the Delete button, the current row and all its columns will be removed.

Column

../_images/column.jpg

The following actions can be performed on a column:

  1. Column width: This sets the current width of the column in the currently selected breakpoint. The maximum width of a column is the column count of the row (100% Width)
  2. Move: You can move the column left or right with these buttons. Alternatively, you can move it via drag and drop, use the drag handle on the left side of the column.
  3. Delete: By clicking on the Delete Button, the current column and all its elements will be removed.
  4. Add a column: By clicking on the + button you can add another column. The column will be placed where the button is.

Element

../_images/element.jpg

The following actions can be performed on an element:

  1. Edit: Opens the Edit Drawer where the element configuration (see Element Configuration) and the element preview (see Element Preview) is placed.
  2. Delete: By clicking on the Delete Button, the current element will be removed.
  3. Move: You can move the element up or down with these buttons. Alternatively, you can move it via drag and drop, use the drag handle on the left side of the column. The drag handle allows you to also move the element to another column

Element Configuration

The element edit drawer consists of three areas. In the first area information about the current is shown. This includes the element type. Here you can also change the name (1). The name of an element is only visible in the Magento backend. You can also change the status (2). Disabled elements won’t be rendered in the frontend. Additionally, you can add some CSS Classes (3) if you want. The CSS Classes will be rendered outermost HTML tag of an element. Adding CSS Classes is considered an advanced feature, and should only be used by experts.

In the Configuration Section (5) you will find element-specific configuration options. For instance, in an image element, you would set here the image and alt text that should be displayed in the frontend. You can find details to each element in the Elements section

../_images/element-edit.jpg

Element Preview

The element preview gives you a quick glance at how the current element will look in your shop. The element is displayed in the current row. All other elements and columns are also displayed to give you an idea of how it might look but are slightly faded out.

../_images/element-preview.jpg

In the element preview section the following actions can be performed:

  1. Home: Reset the preview to the starting point of the element preview, analog to an internet browser home button.
  2. Reload: Reload the preview with the current configuration. The preview detects changes automatically, so you might not need this feature.
  3. Breakpoint Switcher: Select a breakpoint in which the preview is shown
  4. Visibility: Toggles the visibility in the selected breakpoint. By default, an element is visible in all breakpoints, if not other by the element defined.
  5. Column Widths: You can change the width of the columns in the current row. The column width is breakpoint specific.
  6. Margin: You can set a specific margin in each direction (top, bottom, left & right). The margin setting is breakpoint specific.
  7. Padding: You can set specific padding in each direction (top, bottom, left & right). The padding setting is breakpoint specific.

Element Library

By clicking on the Add Element button in a column you can open the Element Library. In the element library, you will find all element types. All elements are categorized. By selecting a category on the left you will see all elements of this category. Alternatively, you can also search for a specific element. If you have found the right element you can click on the element to add it to the current column.

../_images/element-library.jpg