Basics: Using the tagDiv Composer Front-End Page Builder

Home

The tagDiv Composer is Newspaper Theme’s front-end page builder that lets you design and edit the page through its drag-and-drop functionality. Each module, each element has its own settings and can be modified in a few clicks, no coding skills required. Find out more about its amazing features below.

Important Notes

  • The tagDiv Composer automatically activates when updating to Newspaper 8 or installing the theme for the first time.
  • Please do not use both the tagDiv Composer and WPBakery page builder simultaneously on the same page.
  • Please do not edit a page with the tagDiv Composer if that page was originally built with another page builder.

Welcome to the tagDiv Composer basics

When you create pages or edit templates with our theme, you can use our custom-made page builder called the tagDiv Composer. This handcrafted page builder comes with the drag-and-drop functionality to facilitate ease of use.

This builder is a powerful tool specially crafted to help you style your pages using custom-made content blocks and grids. You can access the tagDiv Composer when editing a page by pressing the “tagDiv Composer” button:

tagDiv Composer Page Builder: Gutenberg Add New Page

The theme immediately switches into front-end edit mode:

tagDiv Composer Page Builder: Newspaper Homepage

You can see the front-end preview of your page and the tagDiv Composer on the left of the screen. The builder has a top control section that offers the following options: Add Element, View Page, Save Changes, and the Close button.

tagDiv Composer Page Builder: Add element

The title of the page can also be changed from this section by pressing the edit button next to the title.

Drag And Drop

Let’s start with the Add Element button. Press the button, and a drop-down list of all the elements appears. You can add any of them to the homepage.

Drag-and-drop any of these elements to create the layout you desire.  However, you must first start with a row as the Composer works with rows and columns. You can add a row by dragging the row icon in the space on the page. By default, the first row is already on the page.

The row

If you click on the row of the page, a settings panel appears on the left side of the screen. This functionality applies to every content or structural element, not just rows.

tagDiv Composer Page Builder: Row Settings 1

After you dropped the element on the page, in the top left corner, you can access the row settings:

tagDiv Composer Page Builder: Row Settings 2

The row settings allow you to select the layout of the row meaning you can have a set number of columns in different styles. The row can be split in one of 6 possible column layouts so you can style your pages creatively.

tagDiv Composer Page Builder: Row Layout

The General row settings also include a column gap, alignment, background, YouTube video background, opacity, and the stretch row option.

The General tab also includes the viewport options which allow you to set options based on the user device. Use this to have separate settings for each device selected.

tagDiv Composer Page Builder: Devices

The second tab under the row settings allows you to place dividers between rows in unique styles. You can select the type of divider for the top or bottom of the row, and you can adjust their width, height, colors, shadows and so much more.

tagDiv Composer Page Builder: Divider tab

The CSS tab is an essential part of the page builder as it allows you to change the position of the row and adjust the margin, padding, and border for your rows.  You can also set background images or colors, shadow, color overlay as well as hide a particular row for specific viewports. Use this to show or hide a specific element on a particular device.

tagDiv Composer Page Builder: CSS tab

Delete elements

If you want to delete a row or element, you can grab it from the top left “Row” button. Then, drag it to the bottom right of the screen in the “Drag here to DELETE” box, or select the row and press the delete button on your keyboard. Moreover, with the help of the right-click menu, you have access to different commands for deleting elements, too.

Inner row

The row can also be structured in a sub-division called an inner row if you want to create a more complex structure of rows and columns for better control over your content.

Block Elements

Block elements are the content elements you should use to present your content inside the rows.

tagDiv Composer Page Builder: Block Elements

Once you add a block to the row/column of your choice, you can see the actual content rendered live. Changing its settings also changes the live representation of the page making it easier to see what every setting does.

Deleting an element is similar to removing a row. Merely 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.

Important note: Shortcodes and ads are not rendered in the live preview of the composer screen so, to see them applied to your page, you have to press the save button and view the page itself on the front-end.

Full Width Content

If you need to increase the width of your content to get a more stylish look for your website. The stretch row option allows you to change the row width to different sizes making your content full width or a fixed width selected from the available row sizes:

tagDiv Composer Page Builder: Basics Row Width

One page site

Sometimes you need to create a site that features just a presentation for your company that does not require multiple pages and different articles. You only need the one page where you can present your business objectively and to the point. The multi-purpose elements allow this kind of implementation with different sections of content you can style creatively.

Homepage

By default, WordPress sets the blog page as the main page, and this isn’t what most of us want, we need custom pages. To change WordPress default settings you have to:

  • Step 1 – Create a new page, go to Pages -> Add New
  • Step 2 – Set the page title, configure the page by editing it with the front-end tagDiv Composer. Add the desired elements and select the desired page template.
  • Step 3 – Go to Settings -> Reading and set the newly created page as a homepage.

Landing Page

A landing page is a standalone web page, created specifically for marketing. It’s where a visitor “lands” when they have clicked on an ad of your site for example. The theme allows you to create an entirely blank page without headers or footer in the way for this exact purpose. You can find the blank template in the page template section.

Conclusions

With unlimited customization options, the tagDiv Composer is the first step towards easy designing and amazing layouts. Take it for a spin and create a page with it. Add elements, drag-and-drop, click on one to open its Settings Panel and modify each option to create the perfect block to display your fantastic content. Don’t stop there! Hop on over to tagDiv Composer multi-purpose elements and find out more about how versatile our front-end page builder is.

Subscribe For More!

If you want to be the first to find out more about our themes
please subscribe to our newsletter

Bogdan B.
Bogdan B.
Passionate for gaming, mountain biking and travelling. I face every task as a new challenge to bring my skills to the next level.

48 COMMENTS

  1. We purchased Newspaper 9 a while ago but have never used it.

    Q. Can tagDiv enable us to modify NewsPaper 9 to have a “front page” as our website is now with using the Newspaper 9 as secondary pages for the blog entries?

  2. Hello
    I purchased this a while ago but the problem is the TD composer icon doesn’t show up on my plugins sidebar??
    I tried to deactivate the plugin and activate again, but I can’t find that icon? I want to edit my pages.
    thanks in advance

  3. Hi,

    When I start editing a page, I press the “tagDiv Composer” button, but the theme doesn’t switch into front-end editor mode (just show a blank page).
    I just installed Newspaper and the plug-in tagDiv Composer.

  4. Ciao ho acquistato news 9 paper ieri e l’ho sto sistemando…ho notato che non riesco ad inserire nella home alla fine la paginazione… numerica: c’è un modulo per questo? il mio è un magazine blog non un sito statico serve poter girare la pagina 1 – 2 – 3 etc

  5. Hi. I changed the background color of my site in tagDiv Composer, but in the mobile mode the background is half. What should I do. please answer

  6. Hi,

    I’ve just installed newpaper 9 on my staging site and there’s no theme panel option under newpaper on the left so i cant edit the way it looks on my site.

    Also, why am i seeing © Newspaper WordPress Theme by TagDiv in the footer.

    Thank you

    • Hi,

      Thank you for your question. The Newspaper theme update brings a change for the customers that use WP Bakery Page Builder with our Theme – When you’ll be updating to the Newspaper 9.7.3 version, you’ll need to activate the tagDiv Composer to keep the Newspaper theme functionality you’ve previously used. Otherwise, you will have basic WordPress functionality, complying with Envato WordPress Requirements – https://help.author.envato.com/hc/en-us/articles/360000472383-WordPress-Theme-Requirements Please note that activating the tagDiv Composer doesn’t mean that you are required to use our custom page builder on your website. You can use the WP Bakery page builder as you did before the update. Also, we recommended you to do not use the tagDiv Composer and WP Bakery page builders on the same page, because you cannot edit with WP Baker blocks and shortcodes created with tagDiv Composer or vice-versa.
      Please make a backup for your website before updating. If you need help, please don’t hesitate to open a new thread on forum.tagdiv.com or send us an email with all the details at contact@tagdiv.com.

      Thank you for understanding!

  7. Hello, I am using newspaper theme to build a charity website. However i do not know how to add a call to action button (Donate) button in the header after the last menu item. Please help… Many thanks.

  8. Hi Catalin,

    I just want to ask, why when i create a new page using tagdiv composer, it’s look nice when we see on PC but when i try open it using my mobile phone only show the title page name.

    any advice for me?

    looking forward your advice soon.

    • Hi,

      Thank you for your interests in our theme! I suppose that you are using the Mobile Theme which has a different layout rendered on mobile than the desktop version. For more details about mobile theme functionality, please check here -> https://forum.tagdiv.com/the-mobile-theme/ Unfortunately, the blog is not assigned to the support team. For support, please open a new topic on forum.tagdiv.com / http://forum.tagdiv.com/forum/newspaper/ and provide all the details. Our expert team is ready to assist you ASAP.

      Thank you!

  9. I deleted all the demo contents on my blog.

    How can I add “Latest news”, “social media counter”, “Most Popular” to the home page?

  10. Hi, I want to insert a shortcut, a flipbook in my newspaper, but I cant find any element in the tagdiv. Is there an element to insert a shortcut?
    Thanks!

  11. I love to use newspaper 9 theme but want to make it full screen theme like as Forbes or other multi national sites have.. is that possible to make stretch to newspaper 9 theme?

    • Hi,

      Yes, it is possible to use the theme in full width if you will use stretch ROW functionality for all of your elements added through it, as you can see here -> https://www.screencast.com/t/dGKeAUJgeKC
      Unfortunately, the Facebook account is not assigned to the support team, so they can’t help you here. Please open a new topic on forum.tagdiv.com and provide all the details. Our support team is ready to assist you ASAP.

      Our working hours: Monday – Friday: 08:00AM – 05:00PM GMT+2

      Thank you for understanding!

  12. Je gère mon site Web. Je trouve difficile de remplacer les images et vidéos chaque jour. Merci de me aider pour apprendre les astuces pour me faciliter la gestion du contenu wordpress.
    Cordialement

    • Hi,

      Thank you as well for the feedback, remember that if you need help using the theme or the composer you can always create topics in the support forum. We will gladly help.

      Thank you!

    • Hi,

      Thank you for your interest in our theme! Please note that plugin comes bundled with our product and you will need to simply install it and set up it according to this official documentation. If you need more technical assistance in this regard, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ and our team are ready to assist you.

      Best regards!

  13. May I use td composer to edit mobile editor?
    When I use td composer on pages , the mobile editor always empty, so my PC is ok to look webpage, but nothing on the mobile (only show subject)

    • Hi,

      Unfortunately, the mobile editor cannot be edited with TD Composer, sorry! This is destined only for the mobile viewport when the Mobile Theme and only the text is supported to be added in that section, sorry!

      Thank you!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our latest

Stories