How to Use tagDiv Composer

tagDiv Composer is a WordPress page builder plugin developed by tagDiv. It is available exclusively on themes developed by tagDiv: Newspaper and Newsmag. So, to use this page builder, you need to use either Newspaper or Newsmag. We added tagDiv Composer to the best page builders list and use it on one of our websites. tagDiv Composer is especially a great page builder to create a dynamic website such as a news portal, online magazine, blog and other website types that require regular article update. Even so, you can also use tagDiv Composer to create a more static website. iFlow (also developed by tagDiv), is one of the websites that is built with tagDiv Composer.

How to Use tagDiv Composer

Unlike popular page builders like Elementor and Divi Builder which work on both WordPress pages and posts, tagDiv Composer works only on pages. However, you can use tagDiv Cloud Library to create a custom single template to have an amazing design and then assign it to any article.

To start creating a page using tagDiv Composer, you can simply create a new page (Pages -> Add New) and click the TAGDIV COMPOSER button. You will be directed to the tagDiv Composer front-end editor.

On the tagDiv Composer editor, you can add the elements you want by dragging them from the left panel to the canvas area. You can either click the plus button on the top-right corner or the Add Element button to see the elements list.

To preview the page, you can click the eye icon on the top bar or hide the right panel by clicking the arrow icon on the bottom-left corner.

Once done editing the page, click the floppy disk icon to save the changes and click the X icon to exit the tagDiv Composer editor. You will be taken back to the WordPress editor (Gutenberg).

On the WordPress editor, you will see a random text. Just ignore it and click the Preview button to preview your page once again and click the Publish button to publish it.

tagDiv Composer Elements

tagDiv Composer comes with a bunch of design elements you can use to build a beautiful web page without coding. In general, the elements in the tagDiv Composer editor are categorized into two types: row and shortcode.

# Row

A row is the largest container to host shortcodes. When adding a row, you can set the column structure (layout). There are 11 row layouts offered by tagDiv Composer.

# Shortcodes

Shortcodes are the actual design element you can use to build your page. In tagDiv Composer, shortcodes are categorized into 6 types:

## Header Shortcodes

Header shortcodes are shortcodes dedicated to the website header. You can use the header shortcodes when creating a custom header with tagDiv Composer. Here is the shortcodes list.

Header main menu	Header date
Header categories list	Header weather
Header logo	Mobile menu
Header live search	Mobile horizontal menu
Header login	Mobile live search

## Block Shortcodes

You can use a block shortcode to display articles in stylized columns or lists according to the block shortcode you choose. A block shortcode is ideal to add a section on the homepage of your dynamic website where this section displays articles from a specific category. The articles on a block shortcode can be filtered by categories, tags, and authors. The block shortcodes list:

Flex Block 1	Block 6	Block 16
Flex Block 2	Block 7	Block 17
Flex Block 3	Block 8	Block 18
Flex Block 4	Block 9	Block 19
Flex Block 5	Block 10	Block 20
Block 1	Block 11	Block 21
Block 2	Block 12	Block 22
Block 3	Block 13	Block 23
Block 4	Block 14	Block 24
Block 5	Block 15	Block 25

## Big Grid Shortcodes

The use of Big Grid shortcodes is pretty similar to block shortcodes. They can be used to display articles into stylized columns where you can also filter the articles by categories, tags, and authors. The difference, your articles will be displayed in a grid which has larger columns. A Big Grid shortcode is ideal to display the headlines or featured articles on the top section of the homepage.

Big Grid Flex 1	Big Grid 2	Big Grid Full 1
Big Grid Flex 2	Big Grid 3	Big Grid Full 2
Big Grid Flex 3	Big Grid 4	Big Grid Full 3
Big Grid Flex 4	Big Grid 5	Big Grid Full 4
Big Grid Flex 5	Big Grid 6	Big Grid Full 5
Big Grid Flex 6	Big Grid 7	Big Grid Full 6
Big Grid Flex 7	Big Grid 8	Big Grid Full 7
Big Grid Flex 8	Big Grid 9	Big Grid Full 8
Big Grid Flex 9	Big Grid 10	Big Grid Full 9
Big Grid Flex 10	Big Grid 11	Big Grid Full 10
Big Grid 1	Big Grid 12	Big Grid Slide

## Extended Shortcodes

You can use extended shortcodes to add specific elements to a page. For instance, you can use the Instagram shortcode to display your Instagram feed, the Video Playlist shortcode to embed a YouTube playlist, the Ad Box shortcode to display an ad unit, and so on.

Ad box	Instagram	Single image
Archives list	List menu	Slide
Author box	News ticker	Text with title
Authors box	Pinterest	Title
Categories/tags list	Popular category	Video Playlist (Vimeo)
Column text	Raw html	Video Laylist (YouTube)
Exchange	Recent comments	Weather
Homepage post	Search Form	Widget sidebar
Image box	Separator

## External Shortcodes

The external shortcodes can be used to integrate a plugin with a tagDiv Composer-powered page. The plugins supported by tagDiv Composer are Slider Revolution, WooCommerce, tagDiv Social Counter, and tagDiv Newsletter.

Newsletter

Revolution Slider

Social Counter

Woo Shortcodes

Posts Loop

Posts Loop 2

A little note. The Woo Shortcodes is only available if the WooCommerce plugin is installed and activated.

## Multipurpose Shortcodes

You can use multipurpose shortcodes to add creative elements to a landing page, contact page, static homepage, about page, and so on. The shortcodes you can use are:

Button	Icon box	Pricing table
Call to action	Image info box	Progress bar
Client	Inline single image	Social icons
Column content	Inline text	Team member
Column title	List	Testimonial
Fancy text with image	Menu product	Text with image
Hero	Numbered counter	Title over image
Icon

Working with Rows and Shortcodes

# Rows

Before adding a shortcode, you need to add at least one row. As mentioned earlier, when adding a row, you can set the column structure (layout). To add a row, simply drag it from the left panel to the canvas area.

To set the row layout, hover your mouse over the row you want to set its layout and click Row. Then go to the left panel and select your preferred layout.

Right below the layout options, there are several setting options you can select such as the columns gap, vertical align, parallax, full height, and so on.

To set the background color, you can go to the Css tab. You can also use an image as the background. From this tab, you can also set the margins as well as the paddings.

To customize the columns inside a row, hover your mouse over the column you want to customize and click Column. You can then go to the left panel to customize the column.

If you want to delete a row, hover your mouse over the row you want to delete and click Row and press the delete key on your keyboard. Please note that deleting a row will also delete all elements inside it, including the shortcodes.

# Shortcodes

After preparing the rows, you can start adding the shortcodes. To add a shortcode, simply drag the shortcode you want to add from the left panel to the canvas area.

To customize a shortcode, hover your mouse over the shortcode you want to customize and click Element. You can then go to the left panel to customize the shortcode.

Some shortcodes have different setting options. For instance, for the Big Grid shortcodes and Block shortcodes, there are options to filter the articles by categories, tags, and authors.

While for shortcodes like Call to Action and Inline Text, you will see a panel to edit the content.

One thing all shortcodes have in common. They have a Css tab where you can style them. On the Css tab, you can set the margins, paddings, colors, background, and so on. You can play around on the Css tab to beautify a shortcode.

If you want to delete a shortcode, simply right-click the shortcode you want to delete and select Delete.

Working with Templates

In addition to creating a page from scratch, you can also create a page from a premade template. tagDiv Composer offers lots of premade templates that are stored on the cloud. Before being able to access a cloud template, you need to activate the tagDiv Cloud Library plugin. You can go to Newspaper -> Plugins to activate the plugin.

To create a page from a cloud template, simply click the cloud icon on the top bar or the Load Template button. Select the template you want to use and click the IMPORT TEMPLATE button to load it to the tagDiv Composer editor.

The Bottom Line

tagDiv Composer is a default page builder plugin of Newspaper theme and Newsmag theme. This page builder is designed specifically for dynamic websites like news portals, online magazines, and blogs although you can also use it to create a more dynamic website such as a portfolio, company profile, and so on. tagDiv Composer works only on WordPress pages. You can read our review of tagDiv Composer on this post.