Using SEO Friendly Headlines with CSS

Learn how to create custom headlines that look like H1s without affecting your SEO in WordPress using simple CSS and the Flatsome theme.

 •


Crafting SEO friendly headlines that are both visually appealing and optimised for search engines is a critical aspect of modern web design. These headlines play a dual role: improving search engine visibility and enhancing the user experience. By combining proper HTML structure with clean CSS styling, you can create SEO-friendly headlines that not only look great but also boost your website’s performance.

Why SEO Friendly Headlines Matter in Web Design

Headlines are more than just text; they guide readers and help search engines understand your content. Using proper heading tags, like H1 for main titles and H2 for subheadings, creates a clear structure that’s easy to read and improves your site’s ranking potential.

Well-crafted, keyword-rich headlines attract attention and improve your visibility in search results. For example, if your page is about healthy recipes, a headline like “Easy Vegan Dinner Ideas” can draw in both readers and search engines.

Beyond SEO, good headlines improve user experience. They make it easier for visitors to scan your site and find relevant information quickly. Paired with simple, mobile-friendly design—bold fonts, proper spacing, and responsive layouts—headlines can enhance readability and keep people engaged longer.

SEO-friendly headlines are a small yet powerful part of web design, helping your site stand out while offering a better experience for visitors.

6 Steps to Style SEO Friendly Headlines with CSS

Step 1: Access Custom CSS Settings in Flatsome

  1. Log into your WordPress admin dashboard.
  2. Navigate to Flatsome > Advanced > Custom CSS.
  3. In the Custom CSS section, you can paste the CSS code to style your headlines.

Step 2: Modify the Headline Fonts

  • Ensure that the font family you choose in your custom CSS matches the font used across your site. If you are using Google Fonts, simply replace the font-family in the CSS with your selected one.

    Example:

/* ==================================================
    CUSTOM HEADLINES - by sebdelaweb.com
==================================================== */
.h1, .h2, .h3, .h4 {
    font-family: 'Lato', Helvetica, sans-serif !important; /* Change font family */
    font-weight: 700; /* Change font weight */
    color: #555; /* Change font color */
    text-rendering: optimizeSpeed;
    width: 100%;
    margin-top: 0;
    margin-bottom: .5em;
}
.h1 {
	font-size: 1.7em;
}
.h2 {
	font-size: 1.6em;
}
.h3 {
	font-size: 1.25em;
}
.h4 {
	font-size: 1.125em;
}
  • Check the font weight of your H1 tag by inspecting the element in your browser (right-click the element > inspect). Match the custom CSS font weight to ensure your custom headline looks like an H1 or H2 but isn’t actually one.

Step 3: Adjust the Font Color

  1. In the Flatsome theme, navigate to Flatsome > Theme Options > Style > Colors.
  2. Copy the color code used for your headlines.
  3. Paste this color code into the CSS to ensure that your custom-styled text matches your other headings.

Step 4: Set Headline Font Sizes for Desktop and Mobile

In the custom CSS, you can specify different font sizes for desktop and mobile. For example:

/* ==================================================
    CUSTOM HEADLINES - by sebdelaweb.com
==================================================== */
@media(max-width:549px){ /* Mobile font size */
    .h1{
        font-size:1.2em
    }
    .h2{
        font-size:1.2em
    }
    .h3{
        font-size:1em
    }
   .h4{
        font-size:0.9em
    }
}

Step 5: Remove Margins Under Headlines (Optional)

If you want to remove the margin below your custom headlines, you can add the collapse class to your headlines.

  1. Add this to your custom CSS:
/* ==================================================
    CUSTOM HEADLINES - by sebdelaweb.com
==================================================== */

.collapse p, .collapse h1, .collapse h2, .collapse h3, .collapse h4 {
    margin-bottom:0px; /* Force remove margin */
}

2. When you don’t want extra space below a headline, simply add the “collapse” class.

Step 6: Applying the CSS to Your Page

  1. Open UX Builder for your page.
  2. Insert your headline text and assign a class (like H1 or H2) without using actual H1 or H2 tags.
  3. Paste your custom short code (or CSS) into the relevant section to apply the style.

Now, your headlines will look like an H1 or H2, but they won’t affect your SEO structure, which helps keep your landing page optimized.

By merging SEO best practices with CSS styling, you can create headlines that are both functional and visually engaging. Clean code, responsive design, and thoughtful keyword placement make all the difference. To see this process in action, watch the YouTube tutorial linked above. Visit Seb de la Web for more expert advice and tutorials on optimizing your WooCommerce site.

Continue learning

flatsome designs

200+ Free Designs

Get for free

Need a custom design? Hire Seb today

Get the #1 All In One Design Agency for Flatsome

Hire Seb & Tas