tagDiv Composer tutorial

tagDiv Composer is a spectacular drag and drop builder designed to help you create beautiful pages on the frontend when using the IonMag WordPress theme.

Specially crafted for blog, news, and magazine websites, the powerful tagDiv Composer lets you style pages using custom-made content blocks and grids.

Watch the film

To edit a page with the live builder, press the “TAGDIV COMPOSER” button:

composer_access

 

The ionMag theme will immediately switch into frontend editing mode:

composer_welcome

 

On the frontend, you will see a preview of your page, and the tagDiv Composer displayed on the left of the screen. In this welcome screen, there are two additional options that let you choose whatever page template and header style you want.

The page builder has a top control section that includes the “Add Element,” “View Page,” “Save Changes” and “Close” buttons:

td_composer_nav

 

Let’s start with the “Add Element” button! This is the place where you have to begin customizing your homepage. Just press the button, and a dropdown list with all the elements will appear.

td_composer_add_element

 

Drag and drop every one of these elements into the row and create the layout you desire.
The tagDiv Composer works with a system based on rows and columns, so it’s easy to add a new row. Simply drag the “Row” icon into the page:

 

If you click on the wanted element, a settings panel will open on the left side of the screen. This functionality applies to every piece of content or structural element.

The “Rows” have two special sections designed to help you create unique layouts. After dropping a row onto the page, you can access the “Row Settings” or “Column Configuration” from the top left corner:

td_composer_row_column

 

The “Row Settings” allows you to select the layout of the row by establishing a number of columns in different styles. If you want to add some custom CSS for a particular row, this option lets you add a “Row ID” and an extra CSS class.

Also, for adding extra styling, you can use the CSS tab to adjust several design options, like margins, borders and more. The theme works with three columns, and you can split the row in four different ways:

 

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:

 

You can add 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 set of settings presented in the Block Settings Guide.

Once a block is added to the row/column, it will be displayed live so you can see the actual content instantly.

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