This Is How To Create Ultimate Design Of Your Headlines




If you are beginner blogger or web designer you probably still learn how to make your website impressive.
The competition is huge and you naturally want to distinguish the design of your website.
Headlines are one of the most important things in the content of any blog. So why not start with them?

This tutorial will show you how you can create impressive design headings of any color you choose with the text shadow.
All you will need to do is the simple edit of the CSS code.

1. Choose a color of headline

Open your website or blog in a new window and have a look at its design. What colors are used to create the appearance of the website?

For example, my current primary color of elements on a website is #43c6ac.

Let’s check what colors fit with your main color on a www.color-hex.com.

Look for the triadic, complementary or analogous colors and choose the one you like and can imagine complementing your main color on the website.
If you don’t like any of them, try to look at shades of this color. Sometimes in an instance the 4 colors darker shade nicely complement your actual color.

I choose the #2c917d the first one from a monochromatic scheme.

Copy the color and go back to your home page.

2. Open the developers console




First, hover the mouse over any headline on your website. Once the mouse point on the heading, right-click and choose the option “Inspect” (This applies on Google Chrome).

This Is How To Create Ultimate Design Of Your Headlines, How to change color of headlines, change heading color in blog, how to change blog headlines using css, blog design, how to design a blog

The developers’ console should appear and show the current HTML code on left, and CSS code on right for the headline.

This Is How To Create Ultimate Design Of Your Headlines, How to change color of headlines, change heading color in blog, how to change blog headlines using css, blog design, how to design a blog

 

In the style section on right should be placed CSS code which specifies the current color of your headline. Click on the color and replace the color with your new chosen one, click enter.

Wordpress tutorial, css tutorial, This Is How To Create Ultimate Design Of Your Headlines, How to change color of headlines, change heading color in blog, how to change blog headlines using css, blog design, how to design a blog

Immediately after you hit enter the change should be visible on the website. But this change is local and does not make any actual changes. This serves only for the showing and trying purposes.

If you do not like this color, try to play with them a find the one that suits your needs.

You can also enhance your headline with special effect with a text shadow. It is so simple.
Just add this code with your color: text-shadow: 2px 2px #f8ffae; right bellow the color property.

This Is How To Create Ultimate Design Of Your Headlines, How to change color of headlines, change heading color in blog, how to change blog headlines using css, blog design, how to design a blog, wordpress tutorial, css tutorial

First two attributes specify the position of the shadow. The combination of letters and numbers behind a hash key refers to the hexadecimal color value (hex colors) which are supported in all browsers.

The whole code which I am now going to copy is as below:

#content .post .article-content .entry-title a                    color: #2c917d                    text-shadow: 2px 2px #f8ffae;
}

Copy the whole code with the curly bracelets and go to your WordPress customizer. (Navigate to Appearance Customize).

This Is How To Create Ultimate Design Of Your Headlines, How to change color of headlines, change heading color in blog, how to change blog headlines using css, blog design, how to design a blog, wordpress tutorial, css tutorial

3. Edit the CSS code




Open “Additional CSS” section and paste your copied code here. Changes should be visible immediately.
Save the options and that’s it!

This Is How To Create Ultimate Design Of Your Headlines, How to change color of headlines, change heading color in blog, how to change blog headlines using css, blog design, how to design a blog, wordpress tutorial, css tutorial

You can play with this and try different color combinations until you will be completely satisfied.

The similar way applies to many other changes. This way you can change the color or type of font, background color etc.

Now when you have a killer website headlines, you can share it with others and comment with your link here to show your unique combination.

Let me know in case you have any issues during the process, I will be happy to help.


Was this post helpful to you? If yes, you can “buy me a covfefe” and help me to manage the costs of this website 🙂

Thanks!

barbaria

Barbaria is a web developer, web designer, and travel blogger. She's obsessed with digital matters, especially creating websites. She also loves to learn new skills. Many of these skills she gained online through the tutorials. That's why she decided to share her own skills with others too. And help other people learn new things and fulfill their dreams.