How to Edit HTML and Adding Custom CSS in Thrive Architect

In this article, you’ll learn how to view and edit the HTML source code of your page and how to add custom CSS to individual elements or the entire page.

---

These are advanced features intended for users who are comfortable working with HTML and CSS code. For most page-building tasks, the visual editor’s built-in options are sufficient.

Viewing and Editing the Page HTML

You can access the full HTML source code of your Thrive Architect page to make direct edits:

1. Open your page in the Thrive Architect editor.
2. In the right sidebar, click the Settings icon (gear icon).
3. Click Advanced Settings to expand the section.
4. Click View Page Source (HTML).
5. The HTML editor opens, displaying the full source code of your page.
6. Make your changes directly in the code editor.
7. Click the checkmark icon (top-right of the code editor) to apply your changes.
8. Click Save Work in the bottom-left corner of the editor to permanently save the changes.

Important: Clicking the X icon (top-right) will discard any HTML changes you made. Always click the checkmark first to apply, then Save Work to persist.

Adding Custom CSS to an Element

You can apply custom CSS to any element on your page using a two-step process: first assign a CSS class to the element, then write the CSS rules.

Step 1: Add a CSS Class to the Element

1. Click the element you want to style with custom CSS.
2. In the left sidebar, scroll down to the HTML Attributes section.
3. In the Class field, enter a class name (for example: custom-highlight).

Step 2: Write the Custom CSS

1. In the right sidebar, click the Settings icon (gear icon).
2. Click Advanced Settings to expand the section.
3. Click Custom CSS.
4. The CSS editor opens. Write your CSS rules using the class name you assigned, prefixed with a dot. For example:

.custom-highlight p {
  font-weight: bold;
  color: #333333;
}

1. Click the checkmark icon to apply the CSS.
2. Click Save Work to save all changes.

The custom CSS is applied to the current page only. It will not affect other pages on your site.

Use Cases

• Custom styling — Override default element styles for a specific section without affecting the rest of the page.
• Third-party widget styling — Adjust the appearance of embedded widgets or shortcodes.
• Advanced layout tweaks — Fine-tune spacing, positioning, or visibility rules that aren’t available in the visual editor’s options panel.

Related Resources

• Getting Started: Learn about the Thrive Architect editor layout and interface.
• Importing and Exporting: Learn how to export and import page content between pages or sites.