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!
Thanks for explaining. Awesome
It was my pleasure, Stephen!
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! 😀
Haha no problem at all, Karen!
This tutorial is fantastic and very helpful. Thank you!
Happy to hear that, Crystal!
Thanks David, that was great. In fact, it was the ‘highlight’ of my day. 🙂
Haha that’s so cool! Happy to hear that, Franc 🙂
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 🙂
Very cool David. Thanks also for the prompt about saving templates so we can use them multiple times.
It was my pleasure, Alice! Glad I could help 🙂
Thank you for the great demo David. Love these neat ideas to make our posts more interesting for our visitors.
Of course! Glad you found this useful, Tina 🙂
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.)
Haha thanks a lot for the comment, Michelle, I appreciate it! 🙂
Super! Thanks
Happy to see you enjoyed it, Sandra!
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’m glad you found this helpful, Andy! Will definitely keep them coming 🙂
Thank you, David! You make this look so easy!
Thanks for the comment, Kaisa! That was the goal, glad I could do that 🙂
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 🙂
Great, can’t wait to try it out.
That’s great! Thanks for the comment, Ron!
Fantastic and very helpful. You guys at Thrive make it so easy to build and maintain my websites.
Thanks Dave!
I’m really happy to hear that, Jayme!
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! 🙂
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! 🙂
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!
Haha I’m really happy you found it useful!
Brilliant! Very well demonstrated. ????
Thank you very much, Andrea!
Is it possible to export your my saved template to another WP that’s running Thrive Architect?
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.
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 🙂
Thank you David!
My pleasure, Faisal!
Thanks a lot, it’s so easy ! You should have a template collection to add to thrive ????
My pleasure, Philippe! We already have a template collection for the Styled Box element in Thrive Architect, you can check that out 🙂
Great Video! There really seems to be no limit with this theme!
That’s true! Thrive Architect has huge design potential!
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!
I’m really happy to hear that, Joan! (especially that I made it fun haha)
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.
That’s great, John! I’m happy to hear that 🙂
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!
Just amazing! thanks
You’re very welcome, Hugolina! 🙂
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.