How to Build an Attention Grabbing Highlight Box with Thrive Architect

Author
David Gavrilut   65

Updated on December 22, 2019

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!

by David Gavrilut  April 30, 2019

65

Enjoyed this article ?

You might also like:

Leave a Comment

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

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

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

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

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

  • 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.)

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

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

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

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

    Thanks Dave!

  • Hi David,

    This was PERFECT! <3

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

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

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

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

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

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

    • 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? 🙂

  • 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

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

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

      • David, this is SO true! 🙂

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

        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)

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

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

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

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

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

    • Hey, Praveen. Sure, if you have Thrive Architect installed, you can definitely do this 🙂

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

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

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

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

  • David

    Very helpful article. I haven’t been able to find a good enough guide on highlight boxes specifically for Thrive themes. This will help me build out my site and make content more engaging.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}