How to Create Custom Styled Content Boxes in Minutes with Thrive Architect

Thrive Architect features a "content box" element, which starts out as a blank, empty container. In this video, you'll discover how you can go from this blank slate to almost any custom styled content box you can think of, in just minutes.

You'll see how to create mobile responsive note boxes for your blog content, feature boxes for landing pages and sales pages and much more.

More...

The Basic Workflow

The basic worflow for building styled content boxes goes like this:

  1. Add the content box element to your page.
  2. Apply padding to all sides.
  3. Add the text content.
  4. Style the box with background colors, gradients, images, borders, rounded corners, shadows etc.
  5. Switch to tablet and mobile views to make adjustments where necessary.

Make sure you do the last step before you duplicate the content box or save it as a template. This ensures that you have to do the responsive editing only once.

Get the Templates from the Video

In Thrive Architect, you'll find a set of landing pages called "Element Templates". Inside, there's a landing page called "Content and Icon Boxes". I have added all the content boxes from the video to this landing page. You can load the landing page, choose any of the boxes you'd like to reuse and save them as content templates on your site.

You can find detailed instructions on how to load the page and save the content boxes here.

Future Templates

As you could see from the video, it's very easy to create completly customized content boxes. However, we won't just leave it at that. We are working on brining a "styled box" element into Thrive Architect, where you will have more immediate access to a growing library of professionally designed content box templates. Stay tuned for news on this upcoming feature.

I hope you found this tutorial useful and are inspired to build some custom content boxes of your own!

Shane

Author: Shane Melaugh

Shane Melaugh is one of the co-founders of Thrive Themes and in charge of marketing, content and product strategy. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

77Comments

Jonathan R Reply

Wow ! These are amazing. My designer will go crazy with delight. It seems to me that with TA its nearly irrelevant which theme you choose… to a point. Thanks for such a great toolset.

Brilliant! This truly is an awesome tool – Thanks, Shane :)

Shane, great video! Sparked a lot of inspiration. It would be cool to tie all of these technical design tutorials to the content development tutorials (content patterns, etc) in a Thrive University course.

I’m getting the idea that it would be good form to develop a style guide for each of my websites. It would include how to present summaries, lists, content upgrades, notes, sidebars, etc. All of these content boxes could become templates that I just pull up anytime I need to present a specific content “module”.

    Shane Melaugh Reply

    I agree with you very much, Martin. I’m a big believer in style guides and design systems and that is indeed the direction we’re developing Thrive Architect in. Of course, making a design system capable visual editor that isn’t totally overwhelming to the user is a bit of an audacious goal, so it’s a long term project.

    What you can already do (and what I do for my sites) is to create the basic layout elements that you’ll use repeatedly – like button styles, note boxes, highlight boxes and so on. Save those as content templates and re-use them.

    Content boxes are a good example of this, actually. I use 2 – 3 different content boxes per website. No more. So, I’m not designing the thing from scratch, every time. I create it once and then keep using it. It’s convenient and also very good for visual consistency.

Florian S Reply

Hi Shane, again a great Video. One question: What is the best way to setup a vertical Divider between two columns? Thanks, Thomas

    Hanne Reply

    Hi Thomas, you can add a border to a column (and only add a left or a right border. This will give you the “vertical divider” look :)

Harry H Reply

Very inspiring Shane!! Thanks for that! I am the opposite of an “early adopter”, so I was kind of irritated by the new look and feel of TA. But luckily through all the great demo cases by you and Hanne, I get more and more inspired to embrace TA! So, again: Thanks!

And by the way, another thank you for giving the templates you’ve made available for us in TA.

    Shane Melaugh Reply

    Thank you for your comment, Harry. It’s great to see that we are winning you over. :)

    We’ll be creating lots more of these types of tutorials. If you have any specific questions or requests, please let us know. We’re very interested in making these as useful as possible.

Daphne B Reply

GREAT!!!
So nice to see you build custom style content boxes to fit any taste and website.

    Shane Melaugh Reply

    It’s pretty cool, right? :)

    I’m glad to know you found this tutorial useful as well.

Very nice video, I definetly will use this feature.

Randy Y Reply

Thanks, this is good stuff for those of us who don’t have quite as good an eye for design.

I LOVE the new Thrive Architect!!! We depend on it DAILY for our website.

Will there be options to change the border line-style in in the TA GUI? I.E. Dashed, Dotted, Gradient or even Image borders?

That would be a lovely addition.

Richard

    Shane Melaugh Reply

    Hi Richard,

    I’ve got great news for you: dashed and dotted borders are already available. I should have shown an example in this video, now that you mention it.

    When you set a border, you see a line of icons, starting with “none”. There, you can set solid, dashed or dotted borders.

Phil B Reply

You must be reading my mind, Shane.
Had an urgent need for some content box ideas — and along you came with this tutorial.
So many great suggestions.
Now the issue is where to start!
And thank you so much for making the content box templates available to us, as well.

    Shane Melaugh Reply

    That’s great to know, Phil. I’m glad that this tutorial was useful and timely for you. :)

Quentin P Reply

I’ve said this before, but Thrive just keeps getting better. This is the first time I’ve seen a breadcrumb interface used so intuitively – it’s so much more than a navigation element! Clever stuff. Keep these videos coming. I learn more every time.

    Shane Melaugh Reply

    Thank you, Quentin! We do aim to keep getting better relentlessly. :)

Hi Shane,

I was trying to add an Image which when hovered, will show some text describing the image with an overlay to make it readable.

But I couldn’t figure out how to add text just to the hover state. Is it even possible with Architect?

    Shane Melaugh Reply

    We don’t have a feature for this yet, no. One of our planned features is an extension of animation and hover effects and we will include something like this as well. However, it’s a relatively low priority feature compared to things like A/B testing for landing pages, so it won’t happen soon.

anthony s Reply

Really helpful.

I was struggling with similar city picture on a page and this was really illuminating. Thanks…

And, more designs please…

    Shane Melaugh Reply

    Thanks for your comment, TJ. It’s great to know that this was useful for you.

Sharon P Reply

Shane,
Great video! Thanks for sharing. However, I noticed that I don’t have nearly all of the updated templates in my Thrive Architect update that you show in the video. For example, my templates don’t show any of the guarantee boxes, content boxes, “Big Picture”, Pricing Tables, etc. Are these supposed to be purchased separately? I was under the impression that when Thrive Architect updated that it automatically updated new templates as well.

    Shane Melaugh Reply

    Hello Sharon,

    There are no templates included here that you’d need to purchase separately. If you don’t have access to these templates yet, please make sure that you’ve updated to the latest version of the plugin and try doing a hard refresh (Ctrl + F5) on your page, before loading the templates gallery. If that doesn’t help, please contact our support team.

Jay N Reply

Hi guys, awesome tools thanks Shane as always. Quick question, how would we use an image in the place of the icon, so I’d love to place an image in a roundel in the corner of my content box?

    Shane Melaugh Reply

    Hello Jay,

    You can apply the exact same thing to an image. Just a few notes: the image will retain its proportions. That means: if you want to have a perfect circle, you need to use a perfectly square image. On a square image, you will get this circle effect if you apply a large enough border radius. Also, the icon has a background that you can apply a color or other styles to. For an image, this would only work if you use an image with a transparent background.

Thomas L Reply

Wow that’s pretty eye-opening. I know you guys mentioned that every previous template can be built from scratch, but it’s only seeing it in action that leads to the realization that we can do it too.

    Shane Melaugh Reply

    Thank you for your comment, Thomas! That’s great to hear. :)

Igor O Reply

This is awesome!

Question. Is there any way to take a content template that you create like this inside Thrive Architect and insert it somehow in WordPress editor – with Thrive short codes perhaps?

Thank you for the tutorial Shane.

Soraya S Reply

I just love these videos. I’m a new Thrive Theme user and I find these tutorials immensely helpful for instruction AND for inspiration. Shane has a great teaching style, as well. Please keep them coming. I especially love the design ideas, and I carefully watch and take notes from every one.

Luis Garcia Reply

Hey, Shane thanks for this video and for the downloadable template for the content box. Very helpful. I wanted to ask if you can do the same thing for the footer. My footer is not looking attractive at all and I can visually see where to go and not knowing how to use the plugin as much works against me as well. So it would be great if you can do a video on creating some footers examples and having some footer examples as a downloadable element. That would help out.

    Shane Melaugh Reply

    Thank you for the suggestion, Luis!

    I can make a video showing how to create a simple footer layout. However, you can’t apply Thrive Apprentice headers or footers to theme pages and posts. Not yet, anyway.

Brilliant and very useful, thanks, Shane! Just starting to use TA now (but longtime Thrive Themes member) and really appreciation both these tutorials and the templates to help not have to start from scratch.

Those content boxes are sooo flexible, and no more hand-coding div after div and css … love it!

Quick question: Will TA be affected by the proposed WordPress Gutenberg changes?

    Shane Melaugh Reply

    Hi Robert,

    It’s great to hear that you appreciate the flexibility we’ve baked into Thrive Architect.

    Regarding Project Gutenberg: it won’t impact anything we do, at least not for the time being. So far, the reception in the WordPress community has been mostly negative, so it’s uncertain how soon it will make it into core. Even once it does, it’s a really limited, overly slimplistic editor. It’s lightyears away from being a really useful tool for either webdesign or marketing. My guess is that there will be practically no overlap between what Gutenberg does and what we do, for at least a few more years.

Shane,
Another theme company just added some animations to their theme, but I see you already have them! This is much easier to use than the other theme (Divi) I have used for a couple of years! I thought the other theme was drag and drop, but it’s not true drag and drop like this! The other theme is riddled with short codes and much slower (bad, as it hurts load time and ranking). I also know that Google guys and gals will be going into “material” design with layers, and you already have layers built in!

Keep up the good work.

The more tuts and layouts, the better.

You can probably emulate what I call “the rise of elegantthemes” if you are familiar with it, and skyrocket your theme’s success.

Jeff

    Shane Melaugh Reply

    Thanks for your comment, Jeff. You know, this is a problem I see a lot, in our market. There are a lot of tools that are advertised as front end editors, drag and drop, WYSIWYG, fast, intuitive and so on, but they are actually none of those things.

    I’m glad you like the tutorials. There are many more I’m planning to do.

    I’d be interested to know your thoughts about the rise of elegant themes. I have my ideas about it, but I’d love to hear your perspective on it. :)

Amazing. Unfortunately my website is locked up in Divi. But I use thrive leads and was wondering how TA worked. Very helpful and inspiring video.

    Shane Melaugh Reply

    Thank you for your comment, Jim! Sorry to hear that you find yourself locked into Divi. For the moment, there’s not much we can do to alleviate that problem, I’m afraid.

Dale M Reply

Your Training Videos are the best around – thanks

Karen McCamy Reply

As usual, this was so helpful! It’s really awesome to see how many design ideas can come from a “simple” content box! I especially like the last example with the background image, overlay, and icon effects! The templates are icing on the Thrive Cake! ;-) Loving Thrive Architect! It’s truly a game-changer!

    Shane Melaugh Reply

    Thank you, Karen! I’m pleased to know that you found this inspiring. :)

I loved content box in TCB but TA is even more awesome – looks like fun :)

Johan d Reply

OMG, how amazing this is! Can this be set as a template for a single site or is it also possible to set the templates for different sites. Now, I open a new site and have to start building the same template again for using in the site I am working on (which is not that much of a work seeing this post, but still the you can build a collection of content boxes).

But, great work. Its amazing!

    Shane Melaugh Reply

    Hello Johan,

    If you want to use the same templates on multiple sites, the fastest way to do that is to create a new, blank landing page, add all the content boxes and other custom elements you want to use there and then export the landing page.

    You can then import that landing page to any other site and save the elements you created as content templates.

    It’s not the most convenient solution imaginable, but it’s the best one we have right now, for moving styles between websites.

Absolutely loving the look and feel of Thrive Architect. Thanks so much Shane. The tutorials are amazing. :-)) Looking forward to playing around and implementing these new features to my website.

    Shane Melaugh Reply

    Thank you, Sue! I’m happy to know that you find the tutorials useful. :)

Adrian Iacob Reply

Many thanks, Shane! A lot of interesting info!
I want to ask a qustion: It’s possible to make a header like that ( http://www.upwlondon.co.uk/ ) with video without sound in background and text with button above?
Thank you!

    Shane Melaugh Reply

    Yep, that’s pretty easy to do with Thrive Architect. Video backgrounds are already available in the plugin and we will be creating a blog post about them soon.

      Adrian Iacob Reply

      Wonderful! A blog post about them will be wellcome!
      Thank you! :)

David W Reply

Thanks Jonathan, this is very cool. The new features give so much more creative flexibility.

Once more, you have overdelivered:-). I was missing the styled boxes from TCB – and now there is such a variety of new boxes alongside with this great tutorial and even templates. Thank you!

Anil R Reply

As always…you guys ROCK!!! My decision to become a member for a year was so easy after experiencing the superiority of your products and service. Leadpages is now advertising a 14-day trial, so I thought I’d give it a shot. After just about an hour tinkering with their landing page builder, I cancelled the Leadpages account…they don’t come near to what you guys have here at Thrive. Wishing you continued success!

Shane. I love the tutorials you (and Hanne) produce and this one is no exception. TA has so many options so it’s great that you show us what can be done. Your tutorials really shorten the learning curve.
Thank you for all the helpful tips. ideas and the templates. Absolutely love TA.

THANK YOU SO MUCHHHHH!!!!

That’s absolutely amazing!! thank you so much!

Hi Shane,
a while back in TVE you added a feature that allowed vertical alignment within columns. You can see it at work here in a site I am developing (I have not upgraded this site to Architect for this reason). I cannot find this feature in Architect. Is there a work-around, or will this be added?
Thanks,
Alex

    Shane Melaugh Reply

    Hello Alex,

    The feature is included in Thrive Architect as well. Click on anything inside your column layout, then click on “columns” in your breadcrumbs at the top of the screen. You can see an example of it used in Tip #4 in this blog post.

      Alex H Reply

      Thanks for your quick reply Shane – Just as an FYI, I had found that vertical alignment option but it wasn’t working. I then used another browser and it works fine. There are several items in Architect that seem to be problematic in Safari, but work fine in Firefox (and others I assume). The vertical alignment is one example and strangely, it works on the end product (viewing the published page) but while in the editor the elements do not respond to the alignment? Small issue in what is otherwise a great upgrade!

      Shane Melaugh Reply

      Thanks for the info. I know that some browser specific issues have been logged and we’re working on resolving any such bug that comes our way.

They are awesome Shane ! Just so impressed with the diversity of boxes you showcased. Thank you!

johan Reply

They are awesome Shane ! Just so impressed with the diversity of boxes you showcased. Thank you!

It’s fantastic and so simple! Now, we can create beautiful content boxes.

A bit out of context… but with the liberty that architect allows us to have, would you build a complete custom made website and or as complex as wordpress theme using architect ? Or you would stay away from building complete website with architect.

Amazing! I love it :D thanks for such nice tutorial! :)

Bjorn H Reply

Brilliant! My favorite parts were…..the hover section. I completely overlooked its functionality before. And how you implemented the purple gradient overlay to allow the text and the image to both shine without clashing against each other.
Thanks a lot!

Volker Jaeckel Reply

It is so much fun to see what is possible. Shane, brilliant!

Birgit B Reply

These are great styling options, but to be honest, I very much appreciated the former templates in TCB, because I am not a designer and with templates I had working and good looking suggestions for specific elements. I could change them as I wanted, but I appreciated not to have to design everything on my own. So I am happy that you offer saved templates in your LP templates for all who are not that good at designing.

Philipp K Reply

whoa Shane…

what an amazing tutorial. Just one question bugs me constantly: Do you guys ever sleep?

Producing great plugins AND amazing tutorials!