CSS (Cascading Style Sheets) is code used to style your content. There are innumerable styling options already included with Avada, in the Global Options, and within both Element and Page Options. But even with that plethora of styling options, chances are, that at some point you are going to want to change something that will require some custom CSS.

In this document, we will take a look at both where and how we apply custom CSS in Avada. Read on to demystify this topic, and watch the video below for a visual overview.

Step 1 – To apply custom CSS to a specific element, you will first need to give that element a unique Class or ID. All of the Elements you can insert via the Fusion Page Builder, including the Column and the Container Elements, will have an option to set these values (Note: You can use either, but both are not required).

Step 2 – After you set the custom class or ID, we can then control the styling of that element by adding custom css that targets the class name. This CSS should primarily be added to the the Custom CSS field in the Global Options, found at Avada > Options > Custom CSS.

Obviously, this is the hard bit, where you need to know CSS, and how to apply it. This is beyond the scope of this document, and even outside the scope of official support, but there are plenty of tools (see further down the page) that will help you both find the classes you need to modify, and how to write the CSS to display that class as you wish.

Here is a simple example, where we change the background color of .custom-class-name to black.

IMPORTANT NOTE – The style above will apply a black (var(–awb-color8)) background to the element with the class name ‘custom-class-name’. Please note the period (.) before the class name. This is very important, and if forgotten, would break any other styles that you have applied. If we were to use a custom ID instead of a class, we would simply use a “#” symbol instead of a “.”.

As we may be overriding existing styles, we can also use the “!important” value just before the “;”. This tells the browser that this style is to take priority over other CSS trying to set the same style.

If you’re unsure about how to get the code for a color you wish to use, you can use this online tool.

Here are a few, relatively simple, common examples of custom CSS, used in Avada.

If you would like to override existing styles of an element, you will need to find the CSS selector that it is currently using, and there is no better way to do that than to inspect your site with some kind of browser developer tool. Among other things, browser developer tools and extensions allow you to inspect the CSS of live sites and make changes to the CSS and view the live changes, without making any changes to the actual site. These tools are invaluable, and well worth the time it takes to learn them. There are several out there to use; see below for the different options we recommend.

If you use Chrome, you already have built in browser tools to help you inspect your site. Just right click and choose ‘Inspect’ or use the F12 shortcut.

There is a lot of information out there on the web about Chrome Developer tools, but here are a few starter links to get you going.

Firefox also comes with its own set of Developer Tools, very much like Chrome. There is also even a Developer Edition of the browser. Please follow these links for more information on that.

CSS is an incredibly powerful too to change the way content displays. For a really interesting project that highlights this power, see CSS Zen Garden.

Having the ability to customize elements in Avada is the backbone of the ability to change the appearance of virtually any part of your Avada website, but CSS is a complex and deep topic, well beyond the scope of our support.

There are many, many resources on how to use CSS on the Internet, and it’s a very useful skill to learn. The Avada Users Group on Facebook regularly discusses CSS changes, and that may also be a good place for you to learn about CSS in a very specific Avada context.

When you are using Google fonts that usually mean retrieving the font files from their API, which includes sending the IP addresses of your users (which are considered to be private data) to Google. You might find that circumstance worrisome, but at the same time you don’t want to do without the nice typography options Google fonts offer.

Avada to the aid. We have a Global Option that easily allows you to decide whether Google fonts should retrieved via the Google fonts API, or if they should be hosted locally on your server.

To offload Google fonts, please go to Avada > Global Options > Privacy and set Google Fonts Mode option to ‘Local’.

These can be set to either Descending or Ascending.

So, in this way, with the Post Cards Element, you can select the post type to display (Post Type Option), select which items from that post type will display (Posts By Option), and then order those items in exactly the way you want.

An exception to this might be when displaying FAQ posts. Here, it might be preferabel to use the Sorting options in the FAQ Element itself. Check out the FAQ Element doc for full details on that powerful Element.

By default, WordPress orders posts and custom posts types by their publish date. These include blog posts, portfolio posts, FAQs, and the like. Avada also reinforces this order with Avada sliders and Elastic sliders. To learn how to re-order posts and custom post types, please continue reading below.

Below are the posts and custom post types that you can re-order in WordPress by published date.

Because the posts are ordered by their publish date by default, you can manually manipulate your posts publish dates to get them in the order you’d prefer. The post with the oldest date appears last, and the post with the earliest date appears first.

Step 1 – Navigate to the posts you’d like to re-order. For example, blog posts in the ‘Posts’ tab.

Step 2 – Hover over a post, and you’ll see the ‘Quick Edit’ link. Click this to bring up the main details of a post, such as title, slug, date, and the like.

Step 3 – In the ‘Date’ field, change the date and time accordingly.

Step 4 – Repeat steps 2-3 for all the posts you’d like to re-order.

If you want to manually reorder your posts you can use the Post Types Order plugin. It works for all Avada posts and post types, using a simple drag ‘n drop way for you to rearrange the order. Continue reading below to learn how to install and use this plugin.

Step 1 – Go to the Plugins > Add New tab of your WP admin sidebar.

Step 2 – In the search bar on the upper right side of the screen, search for ‘Post Types Order’. It’ll be the first search result and the plugin created by Nsp Code.

Step 3 – Once you’ve found the correct plugin, click the ‘Install Now’ button.

Step 4 – Wait for the plugin to finish installing. Once it’s finished, click the ‘Activate Plugin’ link and wait for the plugin to finish activating.

Step 1 – Go to Settings > Post Types Order tab on your WP admin sidebar to bring up the options for the plugin.

Step 2 – On this page, you can set which interface to enable or disable. For example, you can choose ‘Hide’ for the Post option to disable the re-order feature on blog posts.

Step 3 – To re-order posts, hover on the tab of the post you’d like to re-order, then select ‘Re-Order’. For example, if you’d like to re-order your Portfolio posts, hover on the ‘Portfolio’ tab on your WP admin sidebar and select the ‘Re-Order’ option.

The first method of adding Anchor IDs is to use the ‘Name Of Menu Anchor’ option located in Container elements. This option lets you add an Anchor ID to the Container itself. When using this method, the user will scroll to the beginning of the Container. If you just want to generally point your users to a section, then this is the best method.

Step 1 – Edit your chosen Container, and under the ‘General’ tab, locate the ‘Name of Menu Anchor’ option. In the text field, enter a unique Anchor ID. For example, aboutsection.

Step 2 – Once finished, save your changes.

The second method of adding Anchor IDs is to use the Menu Anchor element. This allows you to target a specific section inside a container. For example, if you’d like to target specific content, then you would place a Menu Anchor element directly above it. That way, the user scrolls directly to the content you’d like them to see rather than just the beginning of the section it’s a part of.

Step 1 – Add the Menu Anchor element directly above the content you want the achor to scroll to.

Step 2 – In the ‘Name’ field, enter a unique Anchor ID. For example, aboutme.

Step 3 – Once finished, save your changes.

When you use anchors on your menu items, it will always automatically scroll to the corresponding section. To learn how to create one page websites or how to use anchors on your menus correctly, please read our How To Build A One Page Website With Avada doc. If you want to use anchor links as well as normal links on your site, please read our One Page Menu With Multi-Page Links doc.

You can also add anchor links using the One Page Text Link Element. This element is an Inline Element and can be inserted via the WordPress Content Editor. It can be used with any basic HTML elements like plain text and images. See the One Page Text Link Element for full details on this Element, but its basic usage is shown below.

Step 1 – Set up your Menu Anchors as instructed in the area ‘Setting Up Anchor IDs’ section above.

Step 2 – Add any element that allows for regular text to be inserted via the WordPress Content Editor. For example, the Text Block Element.

Step 3 – Edit the Text Block element to bring up the Element Settings window.

Step 4 – Locate the WordPress content editor field. On the toolbar, you’ll find the Avada Builder Element Generator icon. Click the Element Generator to bring up the selection window.

Step 5 – Locate the ‘One Page Text Link’ element, then click it to bring up it’s options window.

Step 6 – In the ‘Name Of Anchor’ option, enter the anchor name of the section you’d like to link to with a hashtag ( # ). For example, if your anchor is aboutme, then you’ll need to enter #aboutme.

Step 7 – Once finished, click ‘Insert’. You can then add content into the Text Block element as normal. Once you’re done, click ‘Save’ to save your changes.