What can I do if updating my heading tags <h1></h1> changes the styling of my website?

Each type of HTML tag has its own style. As a result, changing a tag to or from an <h1> tag may result in a different text size, text color, text alignment, etc.

Making changes to your theme code comes with risks, particularly if you are unfamiliar with coding. For complex restyling issues we recommend reaching out directly to your theme developer for help or hiring one of our SEO experts to implement your custom SEO fixes.

To make basic styling edits yourself you can add some CSS code inside the HTML tag to edit the styles.

 

Important Note: We strongly recommend making a theme copy and testing all changes to your theme inside the theme copy and not the live theme. After previewing and testing the new changes then you can publish your updated theme.

 

Locate the tag inside the theme code

1. Add inline style code inside the opening HTML tag style=””

For example:

<h1 style=””></h1>

 

2. Insert the desired styles between the quotation marks

For example: 

<h1 style=”font-size:28px;color:#333060;margin-bottom:20px;”></h1>

 

 

CSS styling code: 

 

Change Text Size

Replace the number with your preferred font size

font-size:16px;

 

Change Text Color

Replace with the hex code of your preferred color

color:#000000;

 

Change Text Alignment

Select one of the following options

text-align:left;

text-align:right;

text-align:center;

 

Increase Spacing Above the Text

Replace the number with your preferred amount of spacing

margin-top:12px; 

 

Increase Spacing Below the Text

Replace the number with your preferred amount of spacing

margin-bottom:12px;
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us