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 menuHeader date
Header categories listHeader weather
Header logoMobile menu
Header live searchMobile horizontal menu
Header loginMobile 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 1Block 6Block 16
Flex Block 2Block 7Block 17
Flex Block 3Block 8Block 18
Flex Block 4Block 9Block 19
Flex Block 5Block 10Block 20
Block 1Block 11Block 21
Block 2Block 12Block 22
Block 3Block 13Block 23
Block 4Block 14Block 24
Block 5Block 15Block 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 1Big Grid 2Big Grid Full 1
Big Grid Flex 2Big Grid 3Big Grid Full 2
Big Grid Flex 3Big Grid 4Big Grid Full 3
Big Grid Flex 4Big Grid 5Big Grid Full 4
Big Grid Flex 5Big Grid 6Big Grid Full 5
Big Grid Flex 6Big Grid 7Big Grid Full 6
Big Grid Flex 7Big Grid 8Big Grid Full 7
Big Grid Flex 8Big Grid 9Big Grid Full 8
Big Grid Flex 9Big Grid 10Big Grid Full 9
Big Grid Flex 10Big Grid 11Big Grid Full 10
Big Grid 1Big Grid 12Big 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 boxInstagramSingle image
Archives listList menuSlide
Author boxNews tickerText with title
Authors boxPinterestTitle
Categories/tags listPopular categoryVideo Playlist (Vimeo)
Column textRaw htmlVideo Laylist (YouTube)
ExchangeRecent commentsWeather
Homepage postSearch FormWidget sidebar
Image boxSeparator
## 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.

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:

ButtonIcon boxPricing table
Call to actionImage info boxProgress bar
ClientInline single imageSocial icons
Column contentInline textTeam member
Column titleListTestimonial
Fancy text with imageMenu productText with image
HeroNumbered counterTitle over image

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.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

6 thoughts on “How to Use tagDiv Composer”

    • Hi John,

      Have you finished reading our article? To delete an element (called shortcode in tagDiv Composer), you can right-click the element you want to delete and select Delete. If it doesn’t work, try to press the Delete key on the keyboard

  1. I have created a series of pages using TAG Div and they look great but the page I have created and set as my home page is now appearing at the top of all my pages throughout the website. Is there some sort of ‘sticky’ typr flag i have accidently used?

  2. We have tagDiv composer on our website but when we select the “edit content” button the WP editor window loads to infinity. Does anyone have any recommendations on how to fix this issue?


Leave a Comment