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 categories list
  • Header logo
  • Header live search
  • Header login
  • Header date
  • Header weather
  • Mobile menu
  • Mobile horizontal menu
  • 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
  • Flex Block 2
  • Flex Block 3
  • Flex Block 4
  • Flex Block 5
  • Block 1
  • Block 2
  • Block 3
  • Block 4
  • Block 5
  • Block 6
  • Block 7
  • Block 8
  • Block 9
  • Block 10
  • Block 11
  • Block 12
  • Block 13
  • Block 14
  • Block 15
  • Block 16
  • Block 17
  • Block 18
  • Block 19
  • Block 20
  • Block 21
  • Block 22
  • Block 23
  • Block 24
  • 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 Flex 2
  • Big Grid Flex 3
  • Big Grid Flex 4
  • Big Grid Flex 5
  • Big Grid Flex 6
  • Big Grid Flex 7
  • Big Grid Flex 8
  • Big Grid Flex 9
  • Big Grid Flex 10
  • Big Grid 1
  • Big Grid 2
  • Big Grid 3
  • Big Grid 4
  • Big Grid 5
  • Big Grid 6
  • Big Grid 7
  • Big Grid 8
  • Big Grid 9
  • Big Grid 10
  • Big Grid 11
  • Big Grid 12
  • Big Grid Full 1
  • Big Grid Full 2
  • Big Grid Full 3
  • Big Grid Full 4
  • Big Grid Full 5
  • Big Grid Full 6
  • Big Grid Full 7
  • Big Grid Full 8
  • Big Grid Full 9
  • Big Grid Full 10
  • 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
  • Archives list
  • Author box
  • Authors box
  • Categories/tags list
  • Column text
  • Exchange
  • Homepage post
  • Image box
  • Instagram
  • List menu
  • News ticker
  • Pinterest
  • Popular category
  • Raw html
  • Recent comments
  • Search Form
  • Separator
  • Single image
  • Slide
  • Text with title
  • Title
  • Video Playlist (Vimeo)
  • Video Laylist (YouTube)
  • Weather
  • 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.

  • 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
  • Call to action
  • Client
  • Column content
  • Column title
  • Fancy text with image
  • Hero
  • Icon
  • Icon box
  • Image info box
  • Inline single image
  • Inline text
  • List
  • Menu product
  • Numbered counter
  • Pricing table
  • Progress bar
  • Social icons
  • Team member
  • Testimonial
  • Text with image
  • Title 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This