How to Build an Attention Grabbing Highlight Box with Thrive Architect

In this article, you’ll discover how you can build a custom element that you can use in your blog posts to highlight a certain idea and keep the attention of your readers at the same time!

We call it "The Highlight Box":

Remember the Original Fancy Dividers?

Check out our first post about Fancy Dividers that we added to Thrive Architect a while ago. In that article, you can learn how to use the fancy dividers to create a simple design layout with Thrive Architect.

The example that I show in that video was built by myself, not the designers, so you know it's not that hard to create...

Example of a highlight box used in one of our blog posts

It was brought to our attention by one of our members, Karen McCamy, that it would be cool to show you guys how to build this element and use it in your own blog posts!

More...

Setting Up the Highlight Box Structure

The structure of the highlight box is essentially made out of two content boxes placed inside a bigger content box.

So, first of all, add a “Content Box” element on the page, increase its minimum height, and then place two more content boxes inside:

A content box layout containing two “inner” content boxes

Then, remove the additional spaces above and below the inner content boxes by editing the “Layout & Position” option for each content box and remove any margins.

Also, make sure you decrease the minimum height on the “big” content box so that the additional space at the bottom is removed as well. So far, it should look like this:

Any additional space between the “inner” content boxes needs to be removed 

Applying the Colors

To find out exactly what colors are on the original Highlight Box, we can use a Google Chrome extension called “ColorZilla”:

Use the ColorZilla Chrome Extension to find identify the code of any color you see on the web

Using this, you can hover over any color on any website, and it will give you the exact color code that you can then use in Thrive Architect:

After clicking on the layout that uses the color you are after, the color code will be automatically copied to the clipboard

In this case, our colors are #EDE9C1 for the top section and #FDFDF1 for the bottom section of the content box.

Copy the two colors and paste them in the “Background Style” color option for both of the content boxes in your layout, making them look like this:

How the content box layout looks after applying the colors on the original Highlight Box

Make sure to also save these colors as global colors before you move on, to easily use them on other elements of the Highlight Box.

Applying an Icon

Now that you have the structure and the colors in place, it’s time to display an icon in the Highlight Box.

To do this, simply drag the “Icon” element from the sidebar and place it in the top section of the content box:

Drag the “Icon” element and place it inside the top content box

After you’ve added the icon, first of all, decrease its size (from 60 px to 50 px), then go to the “Borders & Corners” and increase the value of the “Corners” to 70 px.

Because the icon is now fully round, it will make it look a bit strange in its current setting:

Don’t worry if the icon looks a bit strange - We’re about to fix it

You can fix this by going to “Layout & Position”, select the lock icon and increase the padding of the icon with 20 px:

Select the “lock” icon to apply a 20 padding to all sides of the icon

While in the “Layout & Position”, you can move the icon upwards, in order to look exactly like the original one.

To do this, apply a -45 px top margin, instead of the default 20 px. This will move the icon slightly above the Highlight Box:

The icon is now positioned slightly above the Highlight Box, but something is missing...

To make the icon blend in with the rest of the Highlight Box, you need to apply the same background color the top section has.

If you saved that color as a global one, you can simply select the Icon, go to “Background Style” and select that global color.

This will make the icon blend in nicely with the rest of the Highlight Box:

The icon blends in perfectly with the top section of the highlight box, both having the same background color

Adding the First Line of Text

The next step is to drag a “Text” element and drop it right below the icon:

Place the first line of text below the icon

The text on the original highlight box is an H4 heading, 24 px, Open Sans text.

However, it’s important that when you go to Main Options of the “Text” element to choose the font, select Google Fonts, search for Open Sans and, in the “Regular” drop-down, choose the “300” version of that font:

Apply the Regular 300 “Open Sans” font type to the text

Then, you can type in any headline you think might gain the attention of your reader:

The Highlight Box is starting to take shape...

Adding the Bottom Section Text

The next step is to add another “Text” element, but this time, place it in the bottom section of the content box:

Place the second line of text in the bottom section of the highlight box 

This is a normal Paragraph text type, 19 px, 400 Open Sans font:

Apply a Regular 400 “Open Sans” font type to the text

Then, before you start typing your actual text, there’s one more option you need to take care of.

You need to have a little space between the text and the margins of the content box:

You need to add some space between the text and the margin of the content box

To do this, you need to add paddings. In the video, I added paddings to the Text element, but actually, it is ideal to add paddings to the container element, this being the bottom content box.

So, select the bottom Content Box using the breadcrumbs:

Use the breadcrumbs to select the bottom content box

Go to “Layout & Position”, select the lock icon and apply a 20px padding:

Click on the “lock” icon and apply a 20px padding to the content box

Now, there is some space applied between the text and the margins of the content box:

The highlight box is almost done. There’s only a tiny detail we need to take care of...

We’re almost done, we just need to apply a subtle border around the entire content box.

Applying Borders to the Highlight Box

Select the big “Content Box” element using the breadcrumbs:

Using the breadcrumbs, select the big content box

Then, go to the “Borders & Corners” option, select the color picker and choose the global color that you have applied to the top section:

Select the global color that you have applied on the top section of the highlight box

Apply a 1px width for the border:

Apply a 1px pixel width to the border

And there you go, the Highlight box is all done:

Remember the Original Fancy Dividers?


Check out our first post about Fancy Dividers
 that we added to Thrive Architect a while ago. In that article, you can learn how to use the fancy dividers to create a simple design layout with Thrive Architect.

The example that I show in that video was built by myself, not the designers, so you know it's not that hard to create...

Ta-daaaaa!

Save the Highlight Box for Later Use

Then, in order to be able to quickly use the highlight box whenever you need, you can save it as a template and reuse it again without having to build it from scratch all over again.

To do this, select the big content box, and click on the green “Save” icon:

To be able to reuse it again and again, you need to save the highlight box as a template

To be able to reuse it again and again, you need to save the highlight box as a template

You can then save it as a template, and whenever you want to reuse it, use the “Templates & Symbols” element:

Use the “Templates & Symbols” element to display the highlight box template on various places of your site

Drag it and drop it on the place in the exact same spot you want to display your template, and you’re done!

Try it Out!

Give it a shot! Build a highlight box for your own blog posts and gain the attention of your visitors in this way!

If you have any other suggestions of something that you would like to see us build, leave a comment below and let’s chat!

Author: David Gavrilut

David is a video content creator and writer at Thrive Themes. When not at his working desk, he enjoys driving like an enthusiast, visiting the beautiful cities of Transylvania for the 100th time. Either that or he could end up watching an entire season of Friends in one day.

  • Stephen Eastwood says:

    Thanks for explaining. Awesome

    • David Gavrilut says:

      It was my pleasure, Stephen!

  • Tommy S says:

    Great video and how-to David!

    I’m planning on creating 3 versions of the highlight box:
    – yellowish (like above) for extra important info or link
    – greenish for key takeaways or action items and
    – redish for warning / avoid this / mistakes

    Saving them as templates and then having at least one in every post. Not only does it add nice color and break up text, it also keeps me focused on what the reader needs to know.

    Cheers!

    • David Gavrilut says:

      That’s a great idea, Tommy!

      If you’re looking for color matching inspiration, you can check out this website that our designers use as well when they have to match colors :)

      • Karen McCamy says:

        David,
        This is a great website to know about! I was not familiar with it, so thanks for the link! :D

      • David Gavrilut says:

        Haha no problem at all, Karen!

  • Crystal C. says:

    This tutorial is fantastic and very helpful. Thank you!

    • David Gavrilut says:

      Happy to hear that, Crystal!

  • Franc K says:

    Thanks David, that was great. In fact, it was the ‘highlight’ of my day. :-)

    • David Gavrilut says:

      Haha that’s so cool! Happy to hear that, Franc :)

  • Cory P says:

    As a non-designer, THANK YOU for tutorials like these! I love being able to make my blog look like it was designed by someone who knows what he’s doing. Keep ’em coming, David!

    • David Gavrilut says:

      I’m so happy to hear this, Cory! That was the plan all along! Will keep them coming :)

  • Alice E says:

    Very cool David. Thanks also for the prompt about saving templates so we can use them multiple times.

    • David Gavrilut says:

      It was my pleasure, Alice! Glad I could help :)

  • Tina Cook says:

    Thank you for the great demo David. Love these neat ideas to make our posts more interesting for our visitors.

    • David Gavrilut says:

      Of course! Glad you found this useful, Tina :)

  • Michelle W says:

    Thanks! You make this look so easy. I can’t wait to give it a try because it really makes a ‘professional-looking’ difference. (Enjoyed your sense of humor too.)

    • David Gavrilut says:

      Haha thanks a lot for the comment, Michelle, I appreciate it! :)

  • Sandra G says:

    Super! Thanks

    • David Gavrilut says:

      Happy to see you enjoyed it, Sandra!

  • Andy says:

    Yep – absolutely super. I am a neophyte page builder and these videos are crucial to my development. It is not my forté but I have to learn this stuff one way or another and you are making that possible. Thanks so much!!! Keep those videos coming.

    • David Gavrilut says:

      I’m glad you found this helpful, Andy! Will definitely keep them coming :)

  • kaisa says:

    Thank you, David! You make this look so easy!

    • David Gavrilut says:

      Thanks for the comment, Kaisa! That was the goal, glad I could do that :)

  • Robert Bailey says:

    I suppose this can also be used on a landing or web page… just the same way… ? Very good. Little visual tweaks that make the reading or scanning easier are great…!

    • David Gavrilut says:

      It could definitely work on a different kind of page too. You just need to be careful how wide that page is. I choose a blog page because it’s a bit more narrow, and it looks much better :)

  • Ron H says:

    Great, can’t wait to try it out.

    • David Gavrilut says:

      That’s great! Thanks for the comment, Ron!

  • Jayme says:

    Fantastic and very helpful. You guys at Thrive make it so easy to build and maintain my websites.

    Thanks Dave!

    • David Gavrilut says:

      I’m really happy to hear that, Jayme!

  • Karen McCamy says:

    Hi David,

    This was PERFECT! <3

    Thank you **so much** for doing this!

    I've implemented it by using your instructions, which worked flawlessly! :D

    FWIW…my "workflow" (@ Starbucks of course…it's my "office" ;-) LoL!):
    — Video running on my iPad
    — Doing the building on my PC!

    One thing I noticed is that the template didn't populate "immediately" after saving, but I just went out of Architect and back into it and then template was there! (Just mentioning this in case others might run into the same…)

    It's so awesome of you to do this. I'm sure there are many use cases for modifying this sort of special content box, as others have noted…

    This design is so versatile (as you & your colleagues have demonstrated recently) because by changing the icon and title, it can be used for all sorts of content you want to emphasize!

    AND…the "templates & symbols" feature is really such a huge time saver!

    Thank you again! :D

    • David Gavrilut says:

      It was my pleasure, Karen! I really had fun doing this! :)

      And, definitely, you can create different variations of this box, as you said, different icon, different set of colors and so on.

      I thank you for making the request to build this! :)

  • This is great however I prefer to just have tons of pre-made templates to choose from and adjust. If you could provide more of those that would be great! :)

    • David Gavrilut says:

      Indeed, that would be cool. Our designers are constantly working on new templates and new landing pages, so we hear you! Until then, you can also check out the library for the Styled Box element, we have a bunch of cool templates out there, too :)

  • Laura K says:

    This was great! Thanks so much for sharing this — looking forward to finding an excuse to use a version of this!

    • David Gavrilut says:

      Haha I’m really happy you found it useful!

  • Andrea C says:

    Brilliant! Very well demonstrated. ????

    • David Gavrilut says:

      Thank you very much, Andrea!

  • Ted says:

    Is it possible to export your my saved template to another WP that’s running Thrive Architect?

    • David Gavrilut says:

      Hey, Ted!

      There is a way to do that, via a Landing Page.

      For example, if you have this Highlight Box on one site and you wanna use it on another site too, you can display it on a Landing Page, then go on the Architect sidebar, click on “Settings” and select “Export Landing Page”. Save it, go on your other site, and select “Import Landing Page” and voila!

      Using this method you can display a bunch of elements that you wanna reuse, on a Landing Page and then just “transfer” the entire Landing Page.

      Is this something that would work for you? :)

  • Thanks for sharing the nice post. Get professional photo retouching service at a competible price from clipping Expert Asia and make your business lucrative.

  • Tony says:

    Great article and video! One question….when removing the margin or space between the two content boxes (within the larger content box) why did you make the lower margin of the top content box -20? Is there a reason for this compared with just making it zero?? Cheers
    Tony

    • David Gavrilut says:

      Hey Tony. It’s true, I didn’t check the bottom content box, because it also had a 20 px top margin – Basically, both of the content boxes had 20 px top and bottom margin, which was causing all of the additional spacing between each other and between them and the content box.

      So, you can do either as I did, add a -20 bottom margin to the top content box, or just set all margins to 0 and that solves the problem :)

  • Thank you David!

    • David Gavrilut says:

      My pleasure, Faisal!

  • philippe says:

    Thanks a lot, it’s so easy ! You should have a template collection to add to thrive ????

    • David Gavrilut says:

      My pleasure, Philippe! We already have a template collection for the Styled Box element in Thrive Architect, you can check that out :)

  • William W says:

    Great Video! There really seems to be no limit with this theme!

    • David Gavrilut says:

      That’s true! Thrive Architect has huge design potential!

      • Karen McCamy says:

        David, this is SO true! :-)

        I just commented on a recent Thrive article that I’ve become spoiled by Architect! :D

        I wish Word would work the same way…with drag-and-drop elements! Traditional word processing seems so *antiquated* after working with Architect! LoL! ;-)

        Now…if only your programmers could figure out how to make THAT happen for “text” documents! (I can dream, can’t I? ;D)

  • Joan B says:

    This was a very informative video and I love that you made it fun too. Thanks, David and Karen for requesting it. Brilliant!

    • David Gavrilut says:

      I’m really happy to hear that, Joan! (especially that I made it fun haha)

  • Adrian says:

    Well presented David. It’s videos like this that keep me paying the subscription.
    Can you please show us some more using Apprentice and Quiz builder?

    • David Gavrilut says:

      I’m happy to hear that, Adrian! That’s the main goal of these posts! And we’ll definitely create more content around Apprentice and Quiz Builder :)

  • john Vandyk says:

    Thanks David. Very helpful and innovative. Inspires me to use thrive architect. Continue the good work.

    • David Gavrilut says:

      That’s great, John! I’m happy to hear that :)

  • Praveen says:

    Hi, how can this be done on content which is not made in Thrive Arch. Like a normal blog post?

    • David Gavrilut says:

      Hey, Praveen. Sure, if you have Thrive Architect installed, you can definitely do this :)

  • Simona Hagiu says:

    Hi David.

    Thanks for this nice article. I’m New with Thrives and your video showed me that is simple to create fancy items… And cheers from Brașov. ????

    • David Gavrilut says:

      That’s amazing, Simona! Brașov is one of my favorite cities! And thanks for the comment, I’m glad you enjoyed this article!

  • Barney Davey says:

    Love it! Especially that it can be saved as a template. Once and done. Where I come from we call this a Johnson Box, which comes from the direct marketing world. I’ve been using the color box plugin, but this is much better in many ways. Now, if I had time I could try to figure out where I’ve used the shortcodes for that plugin and replace with this element. With 600+ posts, that’s a job I’m not up to at the moment.

    • David Gavrilut says:

      That’s true, a lot of plugins are based on shortcodes and adding CSS to an element to make it look good while still be functional, which is not the case with Architect :)

      And thanks for the comment! I’m glad you enjoyed this!

  • Hugolina says:

    Just amazing! thanks

    • David Gavrilut says:

      You’re very welcome, Hugolina! :)

  • >