With its simplicity and flexible options, Avada became the best-selling WordPress theme throughout the years.

The theme comes with various demos you can import with a single click  – which is a very helpful option especially for beginners.

That being said, to get the best out of Avada, you might need to customize it from time to time. One of the most important changes you should make is about how Avada handles H1 tags in post titles.

You may not choose to use your post title as H1 and create another H1 tag at the beginning of your post. However, that is a discussion for another  time and if you are a beginner, you should not do that before understanding it fully. You should just make your post title the H1 tag of the post.

H1 tags are very important for a blog post/article or web page to rank well and every blog post or web page you create should have one H1 tag (and only 1 H1 tag, definitely not more although you can have more than one H2, H3 and so on). We will go into these heading tags in detail later, but let us first fix the problem you might have if you are using Avada as your WordPress theme.

The latest version we are using right now is Avada 5.0.6 and the post titles in blog archives (blog archives = your homepage, your category and tag  pages, date-based or author-based archives) show up as H2 by default.

UPDATE: After implementing this change, the font used for your H1 (post title) may be different than what you want. Therefore, I included the custom CSS code I have been using to change those H1 tag fonts into what I prefer (Lato font family in this case).     

How Do We Change Those H2 Tags Into H1 Tags?

Very easily. Here is how:

Step 1: Log in to your hosting account’s file manager, open the folder Public_html>Wp-content>Themes>Avada and find single.php there.

Note: If you do not have access to cPanel or a “File Manager” in your hosting panel to view these folders, you can log in to your web site’s FTP account using software like WinSCP and edit this file easily with it.  

 

Step 2: Right click to edit this single.php file and find the following line:

<?php echo avada_render_post_title( $post->ID, FALSE, '', '2' ); ?>

 

Step 3: Now, simply change this ‘2’ to ‘1’ – what you do here should give you this result:

<?php echo avada_render_post_title( $post->ID, FALSE, '', '1' ); ?>

 

Step 4: Repeat Step 2 – this line of code is used twice, you must change both of these lines into the one in Step 3.

 

Step 5: Refresh your page and view your source code to see if the post title tag actually became an H1 tag. Hit Ctrl+F5 to clear the cache AND refresh at the same time. Sometimes you will need this to if the changes took effect.

That is all you have to do to fix it!

Custom CSS Code To Change H1 Tag Style

After converting our post title, which is initially H2, into H1 tags, you may not like the font those new H1 post titles use.

I tried to change it to the font of my choice within Avada’s “Theme Options” section, but somehow the settings did not take/work.

I think, like many people who are suffering from this, I am simply overlooking a tiny detail there but that has to be solved another time – the post will be updated accordingly.

In the meantime, here is the solution I have been using for that particular problem:

Simply place this code in to Theme Options>Custom CSS section  to change the style of H1 tag within your post:

.fusion-title-size-one, h1 {
margin-top: .67em;
margin-bottom: .67em;
font-size: 32px;
font-family: Lato !important;
color: #4c4c4c;}

Secondly, paste this code into the very same section to change the style of post titles within archives like homepage and category archives.You will need this if you use different colors for your links and your post titles. On the web site I use this code, my links are blue while I use a tone of black for post titles everywhere:

.post h2 a {
color: #4c4c4c !important;
font-family: Lato !important;
}

Lato, font size, margins and color, these are all my choices for that particular web site. Replace them with your choices and save settings.”!important” part in the code was necessary in my case for the custom css to overtake from the default settings.

NOTE: If you are using a WordPress cache plugin (which you definitely should), you might need to disable it to see the changes take place. You can enable it again after seeing the changes taking effect. Ctrl+F5 also refreshes a page/post cache but sometimes that does not work/show the result.

You could not make it work and still have questions ? Ask them in the comments.