Styling an Element in Thrive Themes

The “Style Options” panel comes with a set of pre-defined templates you can choose from when setting up the style of an element.

There are several elements for which you can access the “Style Options”: “Button”, “Background Section”, and “Content Box”.

For this example, I will use a “Button” element, but keep in mind that almost the same process is valid for all the above-mentioned elements.

Add the Element to Your Post/Page

The first thing you need to do is add the element to your page. Click on the plus sign from the right-sidebar:

Look for the element in the list:

Once found, drag and drop it to your page:

You will notice the left sidebar loads automatically on screen, so you can proceed with customizing the element as you best see fit:

In order to see the full list of pre-defined templates, click on the “Template Button”:

Note: the “Style Options” might show up with a different name, depending on the element you have chosen, but it will always be located at the top of the left sidebar, right before the “Main Options” section.

  • “Content Box”:

  • “Background Section”:

Choose a Style

At this stage, you can start browsing through the list of available styles, should you want to use a pre-defined template.

Default Styles

When you open the “Template Button” panel, you will notice that the “Default Styles” is selected by default:

You can scroll through the list and select one of the already existing templates, or, should you want to customize the element by yourself, you can do that with the help of the “Main Options” from the same left sidebar.

Saved Styles

In the “Saved Styles” tab, you are able to view and apply all the other previously created styles:

So, for example, if you have saved as global a certain design for a button while working on another page, you can use it as many times as you want on all Thrive Architect build pages or posts.

Check out this article to see more information about using the Global Style feature on buttons.

How to Save a Style

This feature comes in handy if you have customized a certain element to your liking, and would like to use it at a later date and on multiple pages/posts.

Customize the Element

Use the “Main Options” of the element to design it, just like you would do with any other element. You can change it’s color, shape, and size, add shadows or gradient layers to it, etc:

Once done, click on the “Save as Global Style” icon, and save the template:

Give a name to the “Button” style, and then click on “Apply” in order to save your work:

This means that this style has been saved as a global one, within the “Saved Styles” tab. You will notice that the “Template Button” options have been replaced with the below set of options:

You can read more information about how to use the global style feature on buttons in the article linked here.

Edit a Saved Style

You can edit the style of an element that has a “Saved Style” applied to it. Select the element on your page and then, in the left sidebar style section, look for the pencil icon:

Click on it and start editing the element:

You will see a message at the top of the sidebar, letting you know that you are editing an element that has a “Global Style” applied to it. This means that whatever changes you bring to this element, they will also be applied to all other elements that have this style applied to them.

So, for example, if I’ve added this “Yellow Button” element (which I saved as a global one) on multiple pages, whatever changes I apply now to it, will also show up on all other pages as well.

When you are done with all the changes, make sure to save your work by clicking “Done”:

However, if you want to modify just the style of this particular element, without affecting all other elements that have this style applied to it, you can do that as well.

In order to do that, click on the “Unlink Global Style” button:

This will unlock the initial “Style Options” panel, and you can customize the element as you best see fit, being sure that the changed will be applied only to the currently selected element:

Rename/Delete

If you want to “Rename” or “Delete” a saved style, you can do that from the three dots icon:

When you click on “Rename”, a pop-up will appear where you can insert the new name and then click on “Apply”:

If you want to “Delete” the template, you will be informed that if you proceed with this action, all the elements on which you have previously applied and used this style will be restored to their default style:

Load the “Styles” Library

Lastly, clicking on the downwards pointing arrow will load the “Default Styles” and “Saved Styles” library:

These are the ways in which you can customize the style of an element with the options available in the left sidebar. You can read more articles about all the available Thrive Architect elements in our knowledge base.

Hopefully, this article was useful to you. If so, don’t hesitate to rate it with a smile below 🙂

Was this article helpful?

Related Articles

>