{"id":305740,"date":"2020-07-15T04:33:38","date_gmt":"2020-07-15T11:33:38","guid":{"rendered":"https:\/\/wpbeaveraddons.com\/?p=305740"},"modified":"2020-07-15T04:41:32","modified_gmt":"2020-07-15T11:41:32","slug":"table-of-contents-module-for-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/table-of-contents-module-for-beaver-builder\/","title":{"rendered":"Introducing the Table of Contents module for Beaver Builder"},"content":{"rendered":"\n<p>Hello Builders!<\/p>\n\n\n\n<p>Today, we are releasing a brand new module for the PowerPack Beaver Builder addon.<br><br>Meet the <strong>Table of Contents module<\/strong>. As the name suggests, with this module, you will be able to add <a href=\"https:\/\/wpbeaveraddons.com\/demo\/table-of-contents\/\" class=\"rank-math-link\">Table of Contents<\/a> section to your website\u2019s blog easily using the Beaver Builder.<\/p>\n\n\n\n<p>Like this one!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"620\" height=\"668\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/bb-toc-img1a-2.png\" alt=\"\" class=\"wp-image-305808\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/bb-toc-img1a-2.png 620w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/bb-toc-img1a-2-278x300.png 278w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/figure>\n\n\n\n<p>Looks awesome, right? Let me take you through the features of this module.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p><br>I am sure there is no debate on how big of a role your blog or content plays, and while the content is important, another thing that is often overlooked is proper navigation.<\/p>\n\n\n\n<p>Good navigation can improve your website\u2019s user experience a lot, and when it comes to a blog, a table of contents giving the reader an overview of what the article contains is a really helpful addition. Most of the readers out there are not interested in reading the entire piece of content. Instead, they are looking for a solution and are skimming through, and in that case, a responsive and functional TOC or Table of Content can be a great addition.<\/p>\n\n\n\n<p>Check out the detailed tutorial video of Table of Contents module for Beaver Builder<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube aligncenter wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Add Table of Contents Section on your Blog using Beaver Builder | PowerPack Addon\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/YkOoN93RLh4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">PowerPack\u2019s Table of Contents<\/h3>\n\n\n\n<p>With the new PowerPack\u2019s Table of Contents or TOC module, you can easily add additional navigation to your website within minutes. If you are using the Beaver Themer, you can directly, add and set up the module on your blog archives template, and it will start showing up on every blog on your website. Easy peasy!<\/p>\n\n\n\n<p>Let\u2019s take a look at the features of the TOC module.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Easy Setup<\/h4>\n\n\n\n<p>Setting up the TOC module is pretty straightforward. You drag and drop the module on the page you want to, and it will automatically fetch the headings from the blog and display them as contents. From there, you can go ahead and make the other changes you want to make, like designing, responsiveness, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"800\" height=\"396\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/toc-gif-4.gif\" alt=\"\" class=\"wp-image-306149\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Include\/Exclude what you want<\/h4>\n\n\n\n<p>With the module content settings, you can specify the sections and rows\u2019 data you want to show. If the TOC module is fetching the heading of a row you do not want (for example footer or the CTA at the bottom), just add a class or ID to that row and add the same to the module settings and you are good to go. The table will exclude all the headings in that row.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"871\" height=\"722\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/TOC-BB-Include-Exclude.jpg\" alt=\"TOC BB Include Exclude\" class=\"wp-image-305790\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/TOC-BB-Include-Exclude.jpg 871w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/TOC-BB-Include-Exclude-300x249.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/TOC-BB-Include-Exclude-768x637.jpg 768w\" sizes=\"(max-width: 871px) 100vw, 871px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Extensive Styling<\/h4>\n\n\n\n<p>What is the point of having the table of contents if it does not match your website\u2019s style?<\/p>\n\n\n\n<p>For the styling, you get loads of options with the PowerPack\u2019s TOC module for Beaver Builder. You can change the typography, colors, padding, margin, look, behavior with the style tab of the module settings. The design you want to create is literally a couple of clicks away!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"869\" height=\"754\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Styling-Beaver-Builder-TOC.jpg\" alt=\"Styling Beaver Builder TOC\" class=\"wp-image-305793\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Styling-Beaver-Builder-TOC.jpg 869w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Styling-Beaver-Builder-TOC-300x260.jpg 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Styling-Beaver-Builder-TOC-768x666.jpg 768w\" sizes=\"(max-width: 869px) 100vw, 869px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Sticky Table of Contents<\/h4>\n\n\n\n<p>Often with REALLY LONG blogs, the biggest grind is to scroll back to the top so that one can go through the table of contents and the items on that list. But with the TOC for Beaver Builder, we have added the sticky feature which gets triggered when the user scrolls off from the Contents table. You can change the position of the table, and if you want the table to appear on a few devices like a desktop or laptop, you can do that as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"700\" height=\"333\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/TOC-GIF-5.gif\" alt=\"\" class=\"wp-image-306155\" \/><\/figure>\n\n\n\n<p>And further, to eliminate the time where the user has to scroll back to the top of the page, we have added a Scroll to Top button to ease the navigation further.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Hierarchical View<\/h4>\n\n\n\n<p>The Hierarchical view makes the table looks more organized and easy to navigate. You can enable the hierarchical navigation using the Content settings, and all the content of the page will align itself in the table automatically. Further, if you want to change the list style, you can choose from numbers, icons, and bullets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"342\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/image-4-1-1024x342.png\" alt=\"\" class=\"wp-image-306137\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/image-4-1-1024x342.png 1024w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/image-4-1-300x100.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/image-4-1-768x257.png 768w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/image-4-1.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Get the Table of Contents Module for Beaver Builder<\/h3>\n\n\n\n<p>If you are PowerPack user, all you need to do is to update the plugin to the latest version, and you will get the TOC module for beaver builder.<\/p>\n\n\n\n<p>If you are new here and are looking for a way to get your hands on this module, you can get it along with other creative 90+ modules. Not just that, you also get <a href=\"https:\/\/wpbeaveraddons.com\/page-templates\/\" class=\"rank-math-link\">350+ professionally designed templates <\/a>to use with Beaver Builder.<\/p>\n\n\n\n<p>Get access to all of the things I&#8217;ve mentioned above here! <a href=\"https:\/\/wpbeaveraddons.com\/pricing\/\" class=\"rank-math-link\">Get PowerPack For Beaver Builder<\/a><\/p>\n\n\n\n<p>Also, if you want to be a part of our <a href=\"https:\/\/www.facebook.com\/groups\/beaveraddons\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">Facebook community<\/a>, you can join here.<br>Do let me know your thoughts on the Table of Contents module, and if you found this piece of content useful, do share the love!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Builders! Today, we are releasing a brand new module for the PowerPack Beaver Builder addon. Meet the Table of Contents module. As the name suggests, with this module, you will be able to add Table of Contents section to your website\u2019s blog easily using the Beaver Builder. Like this one! Looks awesome, right? Let&hellip;<\/p>\n","protected":false},"author":1811,"featured_media":305788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-305740","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/305740"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1811"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=305740"}],"version-history":[{"count":4,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/305740\/revisions"}],"predecessor-version":[{"id":306158,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/305740\/revisions\/306158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/305788"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=305740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=305740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=305740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}