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.
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 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||Single image|
|Archives list||List menu||Slide|
|Author box||News ticker||Text with title|
|Categories/tags list||Popular category||Video Playlist (Vimeo)|
|Column text||Raw html||Video Laylist (YouTube)|
|Homepage post||Search Form||Widget sidebar|
## 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.
|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|
|Fancy text with image||Menu product||Text with image|
|Hero||Numbered counter||Title over image|
Working with rows and shortcodes
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.
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.