Home Blog Basics: Using the tagDiv Composer Front-End Page Builder

Basics: Using the tagDiv Composer Front-End Page Builder

By
Bogdan B.
-
171
Featured Image for tagDiv Composer Basics

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

  • 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:

The theme immediately switches into front-end edit mode:

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.

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.

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

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.

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.

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.

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.

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.

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:

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.

RELATED ARTICLES

171 COMMENTS

  1. While I was making my homepage by edit with tagdiv composer, it suddenly stopped working and showing a blank page with a small tagdiv composer directory on the left corner and a buffering icon on the center of the screen.

    • Thank you for reaching out. Can you please include this message into an email to contact@tagdiv.com so that our Customer Support Team can assist you? Please provide all the details, including screenshots. Thank you for understanding!

  2. Hey I want a quick answer. I have Newspaper theme on my website tagDiv builder but I install elementor pro also now i am facing issue on managing my home page on mobile i don’t know what to do is tagdiv builder support elementor pro or i unstall it

    • Hi! Thank you for reaching out to us. Unfortunately, the Elementor Pro was not tested with the Newspaper Theme. Our theme works best with the tagDiv Composer page builder because it gives you all the frontend functionality you need, including access to the templates within the tagDiv Cloud Library so that you can customize your website from top to bottom. If you need any assistance with our Newsper template, please open a new topic on the forum.tagdiv.com. Thank you!

      • thanks for your kind reply i removed the elementor plugin yet because facing some technical issue if i have a prob with tagdiv then will post on forum thanks .

  3. Hi,

    While I was making my homepage by edit with tagdiv composer, it suddenly stopped working and showing a blank page with a small tagdiv composer directory on the left corner and a buffering icon on the center of the screen.

    What should I do to fix it?

    Thank you.

    • Thank you for reaching out to us! Can you please open a new topic on forum.tagdiv.com or send us an email at contact@tagdiv.com so that our support team can assist you with this situation? Unfortunately, the Blog area is not assigned to the Customer Support Center. Thank you so much for understanding!

  4. thanks for the guide i was thinking to switch to newspaper but didn’t know how to customize, now i am able to customize in site staging soon to publish live…

    • That’s great news, Kathir! Thank you for choosing Newspaper theme to design your project <3. If you ever need our support team's guidance, please don't hesitate to drop us a line via email, or by opening a new topic on the tagDiv forum.

    • Hi,

      Please note that the speed of your website depends on how well your site is optimized. First of all, you will need to check the image size and try to optimize them if you want to bring good theme results. Also, note that we have a speed optimization tutorial but this is addressed only to advanced users. So, if you follow the steps which are presented in this tutorial here -> https://tagdiv.com/how-to-increase-page-loading-speed/ Please note that we do not have a score for that in Page Speed because this value depends on your settings and customizations. You can check our demo with mobile theme from here -> https://demo.tagdiv.com/newspaper_local_news/

      All the best!

  6. I purchased the theme from an agent – Plugin theme.net without them giving me the purchase code. I can’t use tagdiv composer . What can I do to alternatively use it?

  7. Hi, I created a new page using Composer and then made that the Homepage (Front page).
    But when I created a second new page using Composer and then made it the Posts page, it doesn’t retain the design. When I try to edit the Posts page it says “TD Composer is disabled on Posts Page”.

    How can I design the Posts page (blog page) using Composer?

    • Hi,

      Thank you for such great words! You have made our day 🙂 One of our main goals is to please every customer!

      All the best!

  13. Newspaper is my most favorite WordPress theme. But recently I notice the “tagDiv Composer” plugin may uncomfortable with DigitalOcean droplet because I use 4 different hostings, Newspaper running smoothly on every hosting but when comes DigitalOcean, after activating the “tagDiv Composer” plugin an error occurred that is “Your site is facing critical issue” why?? Please help me.

    • Hello,

      I feel sorry to hear this from you but please note that we did not receive any bad reports until now regarding this hosting provider. Make sure that you have properly set the theme according to our documentation and if you have a chance try to change the hosting provider to check the results. If you need more technical assistance, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ and we are ready to help you.

      Best regards!

  14. can you help me on this every thing is working fine on my website but i have an issue with tag div composer editor i edit my home page and update once but the issue is that my web on mobile and desktop after some days i dont know maybe when i update plugins or create a new post my amp mobile version become strech all images are strech on homepage the view of homepage change for everyone on mobile and desktop then i go on pages and only press update on home page edit and its working fine ..any solution whats going on even my theme is purchased and tag dic composer not work for me i create post code from other site and then paste on my site to update plz suggest anythng

    • Hello,

      Thank you for using our theme! Unfortunately, please note that a blog account is not assigned to our support forum and that’s why, if you need more technical assistance, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ and we are ready to help you.

      Best regards!

  18. Hi there. Need to add a link do download a xls file. Already upload it to my upload folder but doesn´t give me an opption to import it.
    Thanks.

    • Hello,

      Unfortunately, the theme does not have any such an option that allows you to do this. Try to use such a plugin with this functionality.

      Best regards!

  19. Hi, I installed the Newspaper theme without content in a blog I have but I don’t know how to change the demo content, I configured the whole theme but I don’t know how to change the demo articles always come out last by default and I want to change them for older ones.
    Can someone please help me? (I’m not an expert)
    thanks

    • Hello,

      Thank you for using our theme! Please note that is not recommended to edit the demo content because when you want to change your demo, all of this content will be lost. Please create your own content (post/page/category etc.) because once these are created for you, all of these will automatically be added into your database. For more details, please check here -> https://forum.tagdiv.com/installing-demos/

      Best regards!

    • Hello,

      Unfortunately, I don’t understand exactly why you should add TD Composer shortcodes in Gutenberg? It makes no sense. Please note that our blog account is not assigned to our support forum and further, if you need more technical assistance, please open a new topic at our support forum from here -> https://forum.tagdiv.com/forum/newspaper/ and we are ready to assist you.

      Best regards!

  22. kindly help me i update my theme to newspaper but it giving e fatal error while preview my draft post what can i do to get rid of this

    Fatal error: Uncaught Error: Call to a member function format() on bool in /home/customer/www/hazrataliquotesenglish.com/public_html/wp-content/plugins/td-composer/legacy/common/wp_booster/td_module_single_base.php:672 Stack trace: #0 /home/customer/www/hazrataliquotesenglish.com/public_html/wp-content/plugins/td-composer/legacy/common/wp_booster/td_module_single_base.php(796): td_module_single_base->get_item_scope_meta() #1 /home/customer/www/hazrataliquotesenglish.com/public_html/wp-content/plugins/td-standard-pack/Newspaper/loop-single.php(63): td_module_single_base->show_item_scope_meta() #2 /home/customer/www/hazrataliquotesenglish.com/public_html/wp-content/plugins/td-standard-pack/Newspaper/single.php(26): require_once(‘/home/customer/…’) #3 /home/customer/www/hazrataliquotesenglish.com/public_html/wp-includes/template-loader.php(98): include(‘/home/customer/…’) #4 /home/customer/www/hazrataliquotesenglish.com/public_html/wp-blog-header.php(19): require_once(‘/home/customer/…’) #5 /home/customer/www/hazratali in /home/customer/www/hazrataliquotesenglish.com/public_html/wp-content/plugins/td-composer/legacy/common/wp_booster/td_module_single_base.php on line 672

  25. Hello,
    how can i change post page templete?
    I went on demo, then now ican not delete unnecessary thnigs.

    Thank you for your help.

    Baris

    • Hi,

      Is it the page or the post template that you want to change? If you have questions or you need help, please create new topics in the theme support forum and we will provide assistance. Mention with details what exactly you would like to do. Let us know.

      Thank you!

  26. Hi,

    I somehow use boxed layout. A background image is uploaded. I’d like to use full-width background. Shall I simply remove the background image? How can I set full-width background?

    Thank you in advance,
    Have a great day!

  27. I have purchase newspaper theme, but now cloud library and TD Composer both not working, show 500 error on clicking I also send an email on contact@tagdiv.com but still received no response and still problem is not resolved.

  28. 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!

    • 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!

  31. Hi,
    I love this theme, but I need to know how to show wp-user-avatar before the author under the title in post
    This is an example of what I need

  33. 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!

  34. 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 blog 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!

  35. 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!

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

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

  38. 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!

  39. 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.

  40. Hi,

    Yes, most of the theme files were moved into the tagDiv composer plugin as per the requirements of Envato: https://help.author.envato.com/hc/en-us/articles/360000472383-WordPress-Theme-Requirements. We wrote an article on the subject here: https://tagdiv.com/updating-the-core-of-tagdiv-themes/ Moving forward with such requirements, a child theme will only work with functions.php, and style.css, as there are very few files left in the main theme as Envato, requires all functionality to be added through plugins.

    Sorry for the inconvenience and thank you for understanding.
    Best regards!

  41. I purchased Newspapers 9 theme couple of days ago and i don’t know how to create logo. Is there any tool for creating logo?

  42. 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!

  43. 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

  44. 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

  45. 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.

  48. 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

  49. everytime when i activate the tagdiv composer my website goes down, so i go to the files- plugins and i rename the directory (td-composer) in order to deactivate the plugin.
    what should i do?

  50. 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?

Newer Comments »

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.

© Proudly made by tagDiv using the Newspaper theme. Powered by WordPress
Exit mobile version