How To Customize Header (H1 to H6) In WordPress without Plugin – Step by Step

How To Customize Header (H1 to H6) In WordPress without Plugin

Hi, Friends. welcome to another post of GuideFuel. In this post, I discuss How To Customize Header (H1 toH2 ) In WordPress without a plugin (using CSS ). The attractive design of website and Post help to convert your traffic to the audience.

Beautiful design attracts users and it reduces bounce rate. Because user stays more time on your website or blog. So every blogger use responsive and beautiful theme and Design it Awesome

Customizing Header ( H1 to H6 )

We must use Header tag in every post . because it help in Search Engine Optimization. And Help to Increase Our ranking in Search engine Results page (SERP).

It helps the reader to understand our content more clearly and by using it, our post looks more attractive.

Header tag is an important factor of On-page SEO and by using it, the post looks more clearly and Improve our rankings. As you know, Google crawls your web post, crawlers understand content by header then show in SERP.

In this post, I discuss customizing H1 to H6v tag ( called Header Tag ) by using coding (CSS)

So without any delay, let’s come on topic.

We have to 2 steps to do in order to customize header in WordPress

  1. Copying the Given CSS Styles below
  2. Put the code into WordPress

Let’s do first step, ( CSS )

Add custom domain to blogger with godaddy

How to create blogger sitemap

Customized Header (H1 to H2) CSS

I give you the coding or CSS Styles with previews and I tell you to last where to put them. First, see this and understand what I m saying.

As in coding, I wrote in the first line .entry-content h4 {     where “h4” stands for Heading name as you want .i mean you may use customization for header as you want . you may replace h4 with h1 to h6.

In the coding I wrote coding (CSS) for h4 you can change to your choice ( which you want to use)

So, Let’s explore  preview and css coding

how to customize h1 2 heaer in wordpress without plugina

.entry-content h4 {padding: 3px;text-shadow: -1px -1px 0px #000000;box-shadow: -2px 2px 3px #000;padding-left: 10px;margin-bottom: 7px;}.entry-content h4:before {font-family: FontAwesome;position: relative;content: 'f02d';text-shadow: 0px 0px 0px #000;color: #000;font-size: 17px;padding-right: 10px;}

.entry-content h4 {padding: 3px;padding-left: 10px;background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%,transparent);background-color: #FEBD17;border-radius: 9px;box-shadow: 2px 2px 2px;border: #000 1px solid;}.entry-content h4:before {font-family: FontAwesome;position: relative;content: 'f061';font-size: 17px;padding-right: 10px;}.entry-content h4{background-color: #e3f0f2; background-image:url(http://www.shoutmeloud.com/wp-content/plugins/custom-post/lib/images/note.png);background-position: 7px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(102, 204, 204);color: #111111; font-family: Georgia, ‘TimesNew Roman’, Times, serif; font-size: 14px; line-height: 21.983333587646484px; margin-bottom:1.571em; padding: 10px 10px 10px 45px;}
Customize header in WordPress without plugin.entry-content h4{padding: 3px;text-shadow: -2px -1px 1px #060606;box-shadow: -3px 2px 3px #000;padding-left: 10px;margin-bottom: 7px;background: #303030;color: #F7F7F7;}.entry-content h4:before {font-family: FontAwesome;position: relative;content: 'f054';font-size: 17px;padding-right: 10px;}

So , I given you code code already .

and Second step is how to put this codes I wordpress. Now, I am guiding you step by step.

how to put this codes I wordpress

  1. Go the your WordPress Dashboard ( yoursite.com/wp-admin)
  2. Then Go to Appearance then Customize
  3. Now,Click on Additional CSS
  4. Then Put the CSS of header ( Copy the css from this website )
  5. Then Save and publish

So, By this way you can customize header in wordpress without plugin.

Conclusion

There are many plugin for customizing header ( h1 to h6) in wordpress Store and you can use for customizing headers . but this is the method of without plugin and by using it step by step you can customize header without plugin. So I give you full step by step guide on How To Customize Header (H1 to H2) In WordPress without Plugin .

I hope, this tutorial post help you in customizing header. and if you got any problems ,please comment below

Do not forget to share in social media with friends.

Here are some awesome posts for you.

 

4 thoughts on “How To Customize Header (H1 to H6) In WordPress without Plugin – Step by Step”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.