tagDiv Composer tutorial

Our custom page builder called the tagDiv Composer is a custom made drag and drop builder required for creating pages when using the IonMag theme.

This builder is a powerful tool specially crafted to help you style your pages using custom made content blocks and grids. The tagDiv Composer can only be used on pages and only on the frontend of your website.

You can access the tagDiv Composer when editing a page by pressing the “TAGDIV COMPOSER” button:

composer_access

 

The theme will immediately switch into frontend edit mode:

composer_welcome

You will see a frontend preview of your page and the tagDiv Composer on the left of the screen. In this welcome screen, you can see two additional options apart from the page builder functionality that let you choose the page template and the header style you want.

 

The builder has a top control section that offers the following options: Add Element, View Page, Save Changes and the Close button:

td_composer_nav

 

Let’s start with the Add Element button. This is the place to start customizing your page and adding content to it. Press the button, and the dropdown list will appear with all of the elements you can add to the homepage.

td_composer_add_element

 

You can drag and drop each and every one of these elements to create the layout you desire.  However, you must first start with a row as the Composer works with rows and columns. You can add a row simply by dragging the row icon in the empty space on the page:

td_composer_add_row

Once drag into the page, if you click the element, a settings panel will open on the left side of the screen. This functionality applies to every content or structural element, not just rows.

 

Rows have two special section designed to help you create layouts. After you dropped it on the page, on the top left corner, you can access the row settings or column configuration:

td_composer_row_column

 

The row settings will allow you to select the layout of the row meaning you can have a set number of columns in different styles. Row settings also allow you to add a row ID and an extra CSS class if you want to add custom CSS to affect just the particular row.

There is also the design options CSS tab for adding extra styling to the row by adding margins, padding or borders. There are only three columns available in our theme, so there are four variations to splitting the row:

td_composer_row_settings

 

If you want to delete a row you can grab it from the top left “Row” button and drag it to the bottom right of the screen in the “Drag here to DELETE” box:

td_composer_delete_row

You can add the different blocks either directly inside a row or inside an inner row, if you want to create a more complex structure. Each block has its own settings presented in the Block Settings Guide

Once a block is added to the row/column of your choice, it will be displayed live so you can see the actual content live. Changing its settings also changes the live representation of the page to make it easier to see what every setting does.

Deleting an element is similar to removing a row. Simply drag the element to the bottom right of the screen or just hit the delete icon found on the top right of the block element.

td_composer_delete_element

In the animation below you can see an example of setting up a block with the tagDiv Composer page builder.

td_composer_example