How To Add Local Custom CSS

05/08/2019

If you want to add custom CSS that affects your site globally, you can do so in the Avada > Theme Options > Custom CSS section. Please read our How To Apply Custom CSS document for more information on applying CSS generally.

But with Fusion Builder, you can also add Custom CSS to each individual page. This option makes it easier for you to manage your custom CSS. To learn how to add custom CSS to single pages, please read on.

IMPORTANT NOTE: This feature is only available in the Fusion Builder released with Avada version 5.0 and up.

How To Add Local Custom CSS In Fusion Builder

Step 1 – Create a new page or edit an existing one.

Step 2 – Activate the Fusion Builder by clicking the ‘Use Fusion Builder’ button on top of the page editor.

Step 3 – On the main Fusion Builder toolbar, you’ll see the ‘Custom CSS’ icon.

Step 4 – Click this icon to expand the Custom CSS field. In this field, insert the custom CSS that you want applied to that specific page.

Step 5Please note that custom CSS you add to this option will only apply to the specific page you add it to.

Step 6 – Click ‘Save Draft’ or ‘Publish’ to save your changes.

How To Add Local Custom CSS In Fusion Builder Live

Step 1 – Create a new page or edit an existing one.

Step 2 – Activate the Fusion Builder Live Editor by clicking the ‘Fusion Builder Live’ button on top of the page editor.

Step 3 – On the Fusion Builder Live toolbar, click the ‘Toggle Sidebar’ Icon to open the Sidebar.

Step 4 – Go to the Fusion Page Options tab, and choose the Custom CSS sub-tab.

Step 5Please note that custom CSS you add to this option will only apply to the specific page you add it to.

Step 6 – Click the global Save button at the top right of the Toolbar to save your changes.

Fusion Page Options - Add Custom CSS