How to use the Content Box element
The "Content Box" element can be very useful when creating your website with Thrive Architect because you can add more elements in it and it acts as a container for them. Here is how to use it in a few easy steps:
1. Add the element to the page
The first thing you have to do is to add a "Content Box" to the page. In order to do that, click on the plus sign from the right sidebar. This will open the list of elements.
Look for the "Content Box" element and when you have found it, drag & drop it to the desired place on the page:
You will see that the for the moment "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:
2. Add content
Depending on what your goal is, you can add various elements inside the "Content box". By default, a "Text" element is already added to the "Content Box". You can simply click inside the box and start typing or paste the text you want to display in your content box.
Tip: In case you don't need the default "Text" element, you can easily delete it using the little trash icon that appears when you click on the element:
Furthermore, you can add other types of elements (such as buttons, images etc.) by simply dragging and dropping them into the "Content Box". This way you can create the content that is the most suitable for your page.
3. Customize the Content Box
After you have added the "Content Box" to the page, you can use its options from the left sidebar to customize it.
Note: Keep in mind that you can customize the "Content Box" before, as well as after, you have added content to it.
If you customize the "Content Box" after you have also added content to it, you will have to select it again, either from the breadcrumbs, or by clicking on it directly in the editor, to see its left-sidebar options.
Using these options, you can choose one of the styles that are available for the "Content Boxes". In order to see and select one of these, click on the field from the "Style" section here:
This will open the drop-down with the available styles. You can scroll down to see all of them:
If you click on either one of these styles, you will see how it would look like directly in the editor on your "Content Box".
Once you have found the style you want to apply to your "Content Box", click on it to select it and then, click on the "Apply" button from the drop-down.
You can change the style of your "Content Box" anytime, by simply clicking on the field from the "Style" section again and taking the same steps as mentioned above for the first time when you select a style.
Furthermore, you can save the style of your "Content Box" as a global one anytime, by clicking on the file+globe icon from the "Style Options":
This will open a drop-down, where first, you will have to give a name for the Content Box Style and then, simply click on "Apply" to save it as a global style. This way, you will be able to re-use it again whenever you need it:
With the help of the "Main Options" you can adjust the width and the height of the "Content Box", as well as add a link to it or change the "Vertical Position" of the elements that will be inside it:
- a) If you want to modify the "Width" or the "Height" of the "Content Box" all you have to do is drag the slider under these options, or enter a value manually in the sections next to the sliders.
- b) If you want to add a link to the "Content Box" then, you will have to activate this option by clicking on the switch next to it. This will open a drop-down, where you can insert the desired link; or in case you want the "Content Box" to link to one of your pages, then, you can start typing to search through your pages.
Similarly to the other linking options in Thrive Architect, you can also select the link to be opened in a new tab, and/or be no-follow:
Furthermore, you also have the possibility to add a Jump link to the "Content Box", meaning you can add a link that will jump to a different element on the same page. You can do this by using the second option (anchor icon) from the "Add link to Content Box" section:
Adding a dynamic link to the "Content Box" can also be done easily, if you use the dynamic link option (third option) from the "Add link to Content Box" section:
- c) Just as its name says, the "Vertical Position" option allows you to choose the vertical positioning of the content, meaning the elements that are/will be in the "Content Box". You can do this by simply clicking on one of the desired vertical positioning from this section.
Besides these options, just like for other elements, the more general options are also available for the "Content Box". Using these, 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, to make your box look even better.
4. Define various states
Last but not least, you have the possibility to define the aspect of the "Content Box" for various states. If you click on the "State" section from the upper part of the left sidebar, a drop-down will open and you will be able to access the "Hover" state as well:
This lets you customize your "Content Box" in hover state. This state refers to how the "Content box" will look like when the visitors of your website hover their mouse over it. After you click on "Hover", the available options of the element will change:
Using these options, you can make your "Content box" look differently in "Hover" state. For instance, you can add another type of background to it, or you can change the "Typography" options.
5. Save & preview
The last step, after you have finished customizing the "Content Box", is to save the work you have done, using the "Save Work" button, from the bottom left part of the page:
Then, you can preview it, to see how it will look like for the visitors of your page. In order to do that, use the "Preview" option from the bottom-center part of the 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 :)