Thrive Knowledge Base

How to use the Content Box element

The 'Content Box' element can be very useful when creating your website with Thrive Architect. Here is how to use it in a few easy steps:

Step 1

Drag & drop the element to your page. You will see that the 'Content Box' is a simple box. What makes it so useful though, is the fact that you can drag other elements and place them inside the box.

Step 2

Add content to the 'Content box'. Depending on what your goal is, you can add various elements inside the 'Content box': text elements, buttons, images etc. Create the content that is the most suitable for your page.

Step 3

Customize the content box. Choose the width (a) and height (b) of the 'Content Box' by dragging the slider under these options or entering values manually. You will see that the whole content will get adjusted of course, not only the box. You can choose the ‘Vertical Position’ (c) of the elements from the box.

Besides these options, just like for other elements, the more general options are also available. Thus, you can customize your 'Content box' further. For instance, you can add a color layer or an image as a background from the 'Background Style' option (d), to make your box even more eye-catching.

Step 4

Define the aspect of the box for various states. If you click on the 'State' section from the upper part of the sidebar, you will be able to access the 'Hover' option as well.

This lets you customize your content box in 'Hover' state. This state refers to how the 'Content box' will look like if customers hover their mouse over it. As you can see after you click on 'Hover', the interface of the content box will change.

Thus, you can customize your 'Content box', so that it will look differently in 'Hover' state. For instance, you can add another type of background to it, or you can change the 'Typography' options.

Step 5

Save and preview your 'Content box'. After you are satisfied with the way your 'Content box' looks like in 'Default' and 'Hover' state as well, you are welcome to save the page and 'Preview' it, to see how it will look like for the visitors of your page.

Find out more about how the elements in Thrive Architect work by following this link.

We hope this article was useful for you. If so, give us a smile below :)

>