How to Use the HTML Attributes Option

Read this article to find out why and how to use the "HTML Attributes" option from Thrive Architect

Thrive Themes avatar
Written by Thrive Themes
Updated over a week ago

Note: In case you are looking for the "Styles" option, please be advised that it was renamed and it is now called the "HTML Option". Thus, you will not find it as the "Styles" option anymore.

Here you can find out why and how to use the "HTML Attributes" option.

Why? With the help of the "HTML Attributes" option, you have the possibility to add custom CSS to elements and you can give a certain label to any element from your page. Later on, through that label, you can link another element to the labeled one.

How? First, you need to access any element and open the "HTML Attributes" drop-down from the left-sidebar options:

You will see that the "HTML Attributes" option has two fields: the 'Class' and the 'ID' field:

1. The 'Class' field

This field is part of the CSS process, helping you add custom CSS to any element on your website. If you wish to find out more about it, you should check out the separate Custom CSS tutorial that we have here.

2. The 'ID' field

All you have to do here is add some text (or a name) to this field, which will serve as the label for your element.

Then, you can use this label depending on your requirements. For instance, let's say you have a landing page with a button on top and you would like your customers to be sent to a certain element on the same page when clicking the button.

In order to make this happen, you just have to label the element using the ID field of the "HTML Attributes" option and then, link the button to it.

You can use the "Button Link" option from the "Main Options" of the button to do this:

The '#' symbol will already be in the specific linking field. You will have to type in the label/name that you have previously given to your element to make the connection between the two elements.

Keep in mind, that you can link other types of elements as well, not necessarily a button.

After you have saved the page you can use the 'Preview' mode to test if the linking process works as it should.

Would you like to find out more about how various options in Thrive Architect work? Check out our other articles and tutorials here.

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

Did this answer your question?