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":

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!

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:

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:

Applying the Colors

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

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:

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:

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:

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:

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

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:

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:

Adding the First Line of Text

The next step is to drag a “Text” element and drop it right 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:

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

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:

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

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:

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:

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

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

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:

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

Apply a 1px width for the border:

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

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

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

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!