Block Element Basics<\/h2>\n
To begin, let\u2019s discuss how the Block<\/em> element gives you the flexibility to fully customize pre-designed content quickly<\/em> \u2013 preventing you from having to repeat the same editing steps over and over again.First off, make sure your Thrive Suite tools (e.g. Thrive Theme Builder<\/a>, Thrive Architect<\/a>, Thrive Apprentice<\/a> and Thrive Quiz Builder<\/a>) have all been updated with their latest versions to have access to the Block<\/em> element. <\/p>\n Once that’s done, you’ll see the Block<\/em> element featured prominently within your Thrive visual editor\u2019s elements tray in the right sidebar:<\/p>\n Find the Block<\/em> element at the top of the right sidebar.<\/p>\n When you drag & drop the Block<\/em> element onto the page, a template library containing hundreds<\/em> of professional content designs will appear as an onscreen lightbox:<\/p>\n After drag & dropping a Block <\/em>element on to the page, the Block<\/em> template library will appear as an onscreen lightbox.<\/p>\n Depending on which Thrive tool you are using, the Block <\/em>element then gives you access to dozens of different template categories, each containing several different designs.<\/p>\n The Block element actually offers 3 different types<\/strong> of content templates for you:Page Blocks<\/strong>: Blocks designed to be unconstrained by landing page templates. Perfect if you\u2019re building landing pages or full page content on a blank canvas.Theme Blocks<\/strong>: Blocks designed to match your website and branding. Ideal for full width content that should look and feel like the rest of your WordPress theme.<\/p>\n Content Blocks<\/strong>: Blocks designed for content focused pages that sit within your theme templates such as blog posts or company pages.<\/p>\n But although the Block<\/em> element can be found inside each Thrive product’s visual editor, the type of templates<\/strong> available varies per tool.Here\u2019s a breakdown of the Block<\/em> template types you\u2019ll find in each of the following Thrive Themes tool scenarios:Thrive Theme Builder<\/a> template pages<\/strong>:<\/p>\n Thrive Architect landing page templates<\/a><\/strong>:<\/p>\n Thrive Architect<\/a> blog posts & landing pages using Thrive Theme Builder<\/strong>:<\/p>\n Thrive Apprentice<\/strong><\/a> lesson pages<\/strong>: <\/p>\n Thrive Quiz Builder<\/strong><\/a> Splash pages, Opt-in pages and Results pages<\/strong>:<\/p>\n And to help you find the right template faster, the Block<\/em> template library can be filtered in 3 different ways:<\/p>\n For example, if you’re trying to write a product review article for your blog, simply click on the “Product Review List” category (within the lightbox sidebar), or type the category name into the Search Bar to see the available templates:<\/p>\n To filter Block<\/em> templates, type the category name into the search bar, limit templates to Block type, or click on a category listed in the template library sidebar. Select a design by clicking on the thumbnail.<\/p>\n Once you find the design you\u2019re looking for, just click its thumbnail preview to add it to your Thrive visual editor:<\/p>\n Once you click on a Block <\/em>template, it will load within your Thrive visual editor.<\/p>\n So now that you have the Block<\/em> element basics under your belt, let’s take a look at ways the Block<\/em> element will help you create awesome content faster<\/em>.<\/p>\n Not only are all the Page Block, Content Block and Theme Block templates contained within a single drag & drop Block<\/em> element, but the unique benefits of each are combined as well!Let\u2019s take a closer look at all the rapid content creation benefits Blocks <\/em>provide for you.<\/p>\n Previously, Page Block templates were only available on \u201cPage Block Ready\u201d landing page templates within Thrive Architect<\/a>, while the Content Block templates could be used across various kinds of WordPress content. But now that both template types have been consolidated into the Block<\/em> element, you can deploy many more designs across your posts and pages.<\/p>\n You can add Block<\/em> templates to your blog post content.<\/p>\n So whether you\u2019re looking for pro-designs to use inside your latest blog post, or in need of a killer Call to Action template on a landing page, the Block<\/em> element \u2014 and its hundreds of templates<\/em> \u2014 is your new content creation weapon of choice.<\/p>\n An awesome feature that all Block<\/em> template designs share is our state-of-the-art Smart Color Technology<\/a>.Put simply, this means that \u2014 if your site is built with <\/em>Thrive Theme Builder<\/em><\/a> \u2014 your pre-set brand color will instantly<\/em> be applied to any Block<\/em> template you deploy.<\/p>\n If Thrive Theme Builder<\/a> is active on your site, all of the Block <\/em>templates will be Smart Color enabled. That means 1) the Brand Color you set in the Thrive Theme Builder dashboard, will 3) instantly be applied to any 2) Block <\/em>template design you select.<\/p>\n This gives you 2 great benefits when it comes to content creation:<\/p>\n Another time-saving and quality-of-design boosting feature the Block<\/em> element gives you is its ability to inherit your theme\u2019s Font Styles and Typographies<\/strong>.In other words, wherever you add a Block<\/em> template, the design will automatically blend in to match the surrounding content.<\/p>\n The Block<\/em> element’s intelligent font matching feature saves you tons of tedious clicks matching your template designs to the parent landing page or blog post. In this example, a “Team” category Block<\/em> template was dropped onto the “Fitbrand Smart Homepage” template<\/a>. Not only were smart colors applied to the Block<\/em> template, but its font styles and typography were instantly matched as well. (Note<\/strong>: Bolding and Italic styling must be applied separately.)<\/p>\n And just like the Smart Color feature discussed above, this means that whenever you change your theme\u2019s Typography settings, your Block<\/em> designs will automatically inherit these changes as well.Of course you can always make specific font style and typography changes to any of your Block<\/em> designs where needed, just be aware that such modifications will unlink this global Font inherit feature for those specific designs.<\/p>\n Another quick-customization benefit the Block<\/em> element provides you with is its intelligent group editing<\/strong> feature.Because several of the Block<\/em> templates include multiple variations of the same element (e.g. check out the \u201cArticles\u201d or \u201cProduct Highlight\u201d template categories), group editing makes transforming those variations faster<\/em> because you only need to do it once<\/strong>.Take a look at one of the \u201cProduct Review List\u201d temp<\/em>lates as an example \u2013 changing the styling of one instance of the grouped images, fonts, buttons or highlight ribbons applies the changes to them all:<\/p>\n The group editing feature of the Block<\/em> templates makes it easy to customize any design in just a few clicks.<\/p>\n We call this group editing intelligent<\/strong> because it knows which modifications NOT to apply to the group (like the number of stars given to a particular product or the actual in-line text changes):<\/p>\n The Block<\/em> template group editing feature is intelligent<\/strong> because it doesn’t apply item specific modifications like inline text changes or star rating assignments.<\/p>\n You also have the power to ungroup elements. This feature allows you to apply variation-specific changes<\/strong> that will not be applied across the entire design. This is a great way to highlight a single item within a Block <\/em>template:<\/p>\n You can also ungroup elements within your Block <\/em>templates if you want to highlight a single item of a design.<\/p>\n Use this ungrouping feature whenever you want to make a particular element within a Block<\/em> template stand out from the crowd.<\/p>\n Another useful feature the Block<\/em> element applies specifically to your blog posts is the ability to make templates use the full screen width (not just the width of the blog post content area):<\/p>\n Yup, you can make Block<\/em> templates take up the full-width of a screen on blog posts. Note: <\/strong>If you use this full-width setting, make sure it doesn’t interfere with your sidebar!<\/p>\n This new feature comes in handy whenever your Block<\/em> design just doesn\u2019t fit within the width boundaries of a blog post\u2019s content area (determined by your WordPress theme settings).To activate this feature for a given Block<\/em> element, just highlight its breadcrumb in the Thrive visual editor, select the Main Options<\/em> tab in the left sidebar and toggle the \u201cStretch to fit screen width\u201d<\/em> button:<\/p>\n Want to make your Block<\/em> templates stretch to full-width in a narrow blog post content area? Here’s how.<\/p>\n Please be aware that if your blog posts display a sidebar, the “Stretch to fit screen” Block<\/em> element option will overlay it.<\/p>\n Make sure to preview the placement of any full-width Block<\/em> design on a blog post so this sidebar interference doesn’t occur.<\/p>\n Of course, no content design is really complete unless it\u2019s been optimized for the screen-size trifecta<\/strong>: desktop, tablet and mobile:<\/p>\n The Block <\/em>template designs are fully responsive and mobile optimized \u2014 straight out of the cloud!<\/em><\/p>\n Rest assured that each Block<\/em> element template you drag & drop into your WordPress content will look great \u2014 straight out of the cloud<\/em> \u2014 no matter what sized device your readers are using!<\/p>\n It should now be clear just how beneficial the Block <\/em>element is. In fact there\u2019s really no limit to the types of content you can rapidly <\/em>create using the templates this new element offers.<\/p>\n So to help get your content creation fire stoked, here are some real world examples of how the Block<\/em> templates can level up your site’s overall design as well as speed up your content creation timeline.<\/p>\n Got a personal brand online business?<\/p>\n Then I bet there’s some books, products or tools you often recommend to your followers.Creating a \u201cRecommended Resources\u201d page is a great way to put all those endorsements in one place. Here’s a before and after look at a website that used nothing but Block<\/em> element templates to rapid-fire<\/em> update its Recommended Resources page.<\/p>\n You can achieve this example\u2019s results using the Thrive Architect<\/a> page builder plugin by itself or in combination with Thrive Theme Builder<\/a>.<\/p>\n Here\u2019s the original Recommended Resources page that was built from scratch<\/strong> without any Thrive Architect content templates just a few years ago:<\/p>\n An old Recommended Resources Page built from scratch with Thrive Architect back in 2017. Because every margin, padding and column size of this page was created from scratch, it took waaay <\/em>too much time to build. Because the content creator was not a pro-designer, the page did little to impress.<\/p>\n At the time of this page’s creation, the author spent hours<\/em> creating a basic looking design that did little to impress. The time it took just to tweak individual Column<\/em> sizes, change Content Box<\/em> border colors and Button<\/em> design behaviors really added up!<\/p>\n It took less than 30 minutes<\/strong> of dragging, dropping and making a few quick copy-paste customizations to some \u201cHero Area\u201d, \u201cResource List\u201d and \u201cLead Generation\u201d Block<\/em> templates on a Blank Thrive Architect landing page template to make the following upgrade:<\/p>\n After less than 30 minutes<\/strong> of minor customizations to a few different Block <\/em>template designs on a Blank Thrive Architect landing page template, this upgraded Recommended Resources page was completed by the exact same non-designer content creator.<\/p>\n By using nothing but Block<\/em> templates, you can now focus on the content of your pages rather than tearing your hair out trying to tweak all those margins, paddings and borders only a pro designer knows how to make look good.<\/p>\n How many blog posts have you come across that just looked like a 4-year old high on grape juice designed?Even if the content was good, you didn\u2019t even consider giving it a share because \u2014 you\u2019ve got a reputation to uphold\u2026 \ud83d\ude09<\/em>The truth is that well-designed content feels more authoritative and Block<\/em> templates help you achieve that look fast<\/em>.<\/p>\n Let’s now take a look at how quickly you can spice up an old blog post using a few more Block <\/em>templates.<\/p>\n The only tool you need for this 10-minute magic trick is Thrive Architect<\/a>.<\/p>\n Remember the non-designer content creator from the previous example?<\/p>\n Here’s an old blog post said amateur built with 2 (built-from-scratch) attempts at in-content designs:<\/p>\n An old blog post attemting to showcase some built-from-scratch in-content designs.<\/p>\n And dere’s that very same blog post after a 10-minute plug-and-play, Block <\/em>template design upgrade: <\/p>\n Here’s the same blog post using 2 Block <\/em>template designs instead. Total time invested in the update? 10 minutes.<\/em> <\/p>\n At this point, I should probably come clean with you.<\/p>\n The poor schmuck without any design talent running around upgrading their old content with Block<\/em> templates for this post is… well… me.<\/em> \u00af_(\u30c4)_\/\u00af<\/p>\n And thanks to the new Block<\/em> designs, you too can update your old About Page so it’s not moping around your website like an online afterthought.<\/p>\n At the risk of severely embarrassing myself here, let me show you what I mean…<\/p>\n Thrive Architect<\/a> with or without Thrive Theme Builder<\/a> makes this transformation a synch!<\/p>\n I’m definitely NOT proud of it, but here’s how my About Page appeared for a looong<\/em> time. Look familiar much?<\/p>\n I’m not proud of it, but here’s how my About Page looked like berfore Block<\/em> elements came along.<\/p>\n 2 Block<\/em> templates and few minor modifications later and you’ve finally got yourself a respectable looking About Page:<\/p>\n 2 Block <\/em>templates plus a few minutes of customization and a respectable About Page is released into the wild!<\/p>\n![\"The](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/06\/Block1.png\" "\\"Block1\\"")
<\/span><\/p>\n![\"Block](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Block-Element-Template-Library.jpg\" "\\"Block-Element-Template-Library\\"")
<\/span><\/p>\nPage Blocks vs. Theme Blocks vs. Content Blocks<\/h3>\n
\n
\n
\n
\n
\n
\n
![\"3](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/How-To-Filter-Block-Element-Templates-e1595402675467.jpg\" "\\"How-To-Filter-Block-Element-Templates\\"")
<\/span><\/p>\n![\"Select](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/How-To-Load-a-Block-Element-Templates.jpg\" "\\"How-To-Load-a-Block-Element-Templates\\"")
<\/span><\/p>\nBlock Element Benefits<\/h2>\n
Available for Both Your Page and Post Content<\/h3>\n
![\"Add](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Block-Template-inside-a-Blog-Post.jpg\" "\\"Block-Template-inside-a-Blog-Post\\"")
<\/span><\/p>\nSmart Color Enabled<\/h3>\n
![\"Block](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Smart-Color-Block-Templates.jpg\" "\\"Smart-Color-Block-Templates\\"")
<\/span><\/p>\n\n
Font Matching<\/h3>\n
![\"Block](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Block-Element-Font-Matching-Feature.jpg\" "\\"Block-Element-Font-Matching-Feature\\"")
<\/span><\/p>\nGroup Editing<\/h3>\n
![\"Group](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Block-Template-Group-Editing-Feature.gif\" "\\"Block-Template-Group-Editing-Feature\\"")
<\/span><\/p>\n![\"Group](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Intelligent-Group-Editing.gif\" "\\"Intelligent-Group-Editing\\"")
<\/span><\/p>\n![\"Ungroup](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Block-Template-Ungroup-Editing-Feature.gif\" "\\"Block-Template-Ungroup-Editing-Feature\\"")
<\/span><\/p>\nGo Full-Width on Your Blog Posts<\/h3>\n
![\"You](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Full-Width-Block-Template-in-a-blog-post.jpg\" "\\"Full-Width-Block-Template-in-a-blog-post\\"")
<\/span><\/p>\n![\"How](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Full-Width-Blocks-in-Blogs.gif\" "\\"Full")
<\/span><\/p>\nDoes Your Blog Use a Sidebar?<\/h4>\n
Fully Responsive and Mobile Optimized<\/h3>\n
![\"All](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Mobile-Optimized-Block-Templates.gif\" "\\"Mobile-Optimized-Block-Templates\\"")
<\/span><\/p>\nRapid Content Creation Examples Using Block Templates<\/h2>\n
Build a “Recommended Resources” Page<\/h3>\n
Thrive Tools Used<\/h4>\n
Before Using Block Templates<\/h4>\n
![\"An](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Modern-Mainimal-OLD-Recommended-Resources-Page.jpg\" "\\"Modern")
<\/span><\/p>\nAfter Using Block Templates<\/h4>\n
![\"An](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Modern-Mainimal-NEW-Recommended-Resources-Page.jpg\" "\\"Modern")
<\/span><\/p>\nCreate Blog Posts You’re Actually PROUD to Share<\/h3>\n
Thrive Tools Used<\/h4>\n
Before Using Block Templates<\/h4>\n
![\"\"](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/OLD-Blog-Post-with-designs-from-scratch.jpg\" "\\"OLD")
<\/span><\/p>\nAfter Using Block Templates<\/h4>\n
![\"\"](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Updated-Blog-Post-with-Block-Tempaltes.jpg\" "\\"Updated")
<\/span><\/p>\nCreate an About Page that STANDS OUT<\/h3>\n
Thrive Tools Used<\/h4>\n
Before Using Block Templates<\/h4>\n
![\"A](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Pathetic-About-Page-e1595427712964.jpg\" "\\"Pathetic-About-Page\\"")
<\/span><\/p>\nAfter Using Block Templates<\/h4>\n
![\"Make](\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2020\/07\/Updated-About-Page-with-Block-Templates.jpg\" "\\"Updated-About-Page-with-Block-Templates\\"")
<\/span><\/p>\nYour Turn To Craft Better Content Faster<\/em><\/h2>\n