Were you looking for a way to add more style to the Thrive Architect elements? The HTML Attributes option lets you easily add custom CSS and labels.
This article will explain why and how to use the “HTML Attributes” option.
- Why use the HTML Attributes option?
- How to access the HTML Attributes option?
- Different ways to use the HTML Attributes option
Why Use the HTML Attributes Option?
The HTML Attributes option is an additional setting that allows you to add custom code to style the element. You can also perform actions like labeling it with an ID to make it easy to link to from another page.
How to Access the HTML Attributes Option?
Almost all the Thrive Architect elements come with an HTML Attributes option.
When you open the page or post in the Thrive Architect editor, click on the element to which you want to add an HTML attribute.
Once you select the element, you’ll see all the attributes associated with the element appear in the left-side panel. This is where you can scroll down to find the HTML Attributes option.
When you expand the HTML Attributes option, you get two fields where you can enter a class name or an ID as required.
Different Ways to Use the HTML Attributes Option
As mentioned above, you can use the HTML Attribute option to add custom styling code or label the element with an ID. This is where we’ll see how that can be done.
Styling the Element with Custom CSS
When you want to style a specific element or connect an additional CSS class, use the Class field under the HTML Attributes option.
You can enter a piece of text in the field that will be called the class name. Let’s say the class name is set to “highlight_text.”
Once you’ve assigned a class name, you must define the function.
To define the class, navigate to the Settings icon on the right side of the panel and click Advanced Settings.
Under the Advanced Settings option, click on the Custom CSS option since you want to use it.
When you click on Custom CSS, you’ll see a dark overlay where you can type the custom CSS code you want to add.
After adding the code, click on the tick icon at the top right corner of the screen.
The specific CSS Class will then work for any text element you add.
Labeling the Element With the ID Field
The ID field under the HTML Attributes allows you to label an element so it can be linked to easily from another page or post.
If you want to add a label to an element, simply add a text that you can call a label into the ID field under the HTML Attributes option.
The ID will make linking to this element from another element on the same or a different page easier.
Let’s assume the source element is a button. To add a link here, click the button, and its attributes will open in the left-side panel.
Now, in the left-side panel, open Main Options and scroll down to the Target URL field under the Button link. The Target URL is the field where you must add the ID or the label you added for the target element. The ID in this field should be prefixed by a hash – #.
We’ve just seen how easy it is to add custom code and links using the HTML Attributes option.
Need help linking to an element on another page? Here is an article that will help.