Tutorial Stats
How To Create An "h1" Tag In Your Weebly Site
Tutorial Description
Download The App: Skip the tutorial and download Weebly Tricks' free H1 Tag app now in the Weebly App Center! https://www.weebly.com/app-center/h1-tag
This tutorial will show you how to create the all, SEO-important, "<h1>" tag in your Weebly site. "<h1>" tags are important for SEO because they tell the search engines what the page entails with specific keywords -- they should only be used once on a page. "<h2>" tags are considered next important, then "<h3>" tags and so on.
Currently, Weebly only offers an "<h2>" tag and this is designated to the "Title" element. Weebly may designate the"<h1>" tag to a drag & drop element in the future, but for now, we can work around this. Creating an "<h1>" tag will require the one time application of HTML and CSS, which will allow you to simply type in your "<h1>" tag on your pages without ever having to go back into Weebly's HTML/CSS Editor.
Note: The "Page Title" tag found in each Weebly page under "Advanced" is not the same thing as an "<h1>" tag.
This tutorial will show you how to create the all, SEO-important, "<h1>" tag in your Weebly site. "<h1>" tags are important for SEO because they tell the search engines what the page entails with specific keywords -- they should only be used once on a page. "<h2>" tags are considered next important, then "<h3>" tags and so on.
Currently, Weebly only offers an "<h2>" tag and this is designated to the "Title" element. Weebly may designate the"<h1>" tag to a drag & drop element in the future, but for now, we can work around this. Creating an "<h1>" tag will require the one time application of HTML and CSS, which will allow you to simply type in your "<h1>" tag on your pages without ever having to go back into Weebly's HTML/CSS Editor.
Note: The "Page Title" tag found in each Weebly page under "Advanced" is not the same thing as an "<h1>" tag.
SHOW MORE
Tutorial
Step 1. Open weebly's HTML/CSS editor
Click on "THEME" at the top, then click on "Edit HTML/CSS" on the left.
Step 2. add html code
On the left, click on the page layout you'd like to add the "<h1>" tag to. On the right, look for your main content area's "<div>". Copy the HTML code below and paste it directly above your main content area's "<div>".
<div class="h1-container">
<div class="container"><h1 class="h1-tag">{h1-tag:text global="false"}</h1></div>
</div>
Note: Repeat this step for every page layout that you want the "<h1>" tag to appear on.
<div class="h1-container">
<div class="container"><h1 class="h1-tag">{h1-tag:text global="false"}</h1></div>
</div>
Note: Repeat this step for every page layout that you want the "<h1>" tag to appear on.
step 3. add "<h1>" tag's CSS
On the left, click on "main.less" and locate the "h2" tag code in the CSS file on the right. Now copy the code below and paste it directly above the "h2" tag code you located.
The instructions for customizing the "<h1>" tag are in bold.
.h1-container {
background:#000; /* Changes the h1 tag's background color */
}
.h1-container .container {
padding: 2em 2.5em 0; /* Changes the h1 tag's spacing */
box-sizing:border-box;
}
.h1-tag .wsite-text { /* Customize your h1 tag's text with this code */
text-transform:uppercase;
}
Click save.
The instructions for customizing the "<h1>" tag are in bold.
.h1-container {
background:#000; /* Changes the h1 tag's background color */
}
.h1-container .container {
padding: 2em 2.5em 0; /* Changes the h1 tag's spacing */
box-sizing:border-box;
}
.h1-tag .wsite-text { /* Customize your h1 tag's text with this code */
text-transform:uppercase;
}
Click save.
Step 4. Type your "<h1>" tag
Once you're back in the Weebly Editor, you should see a text that reads "CLICK HERE TO EDIT" -- this is your "<h1>" tag. Simply click on this area and add your h1 text for this page.
The search engines will read this text as this page's "<h1>" tag.
The search engines will read this text as this page's "<h1>" tag.
You're done! Publish your site to see your new "<h1>" tag!
Additional information
Since we added the code "global="false"" to the code in Step 2, every new page you created with this page layout will allow you to create a unique "<h1>" tag unique to that page.
Don't worry, even after completing this tutorial and publishing your site, the text "CLICK HERE TO EDIT" will not appear on the published pages using the page layout(s) you installed the "<h1>" tag on until you add your h1 text.
Yes, you can repeat this tutorial to create "<h3>" tags, "<h4>" tags, and so on and so forth.
If a large gap appears beneath your h1 tag, this is due to the top padding from the main content area. To reduce this large gap, we just need to change the top padding for the main content area. For this particular demo site, we added the following CSS code to the CSS file to reduce the large, top green space you see in the image below. Your theme's CSS file may already have the code below in it -- you'll just need to adjust the top padding.
#main .container {
padding-top:1em;
}
Don't worry, even after completing this tutorial and publishing your site, the text "CLICK HERE TO EDIT" will not appear on the published pages using the page layout(s) you installed the "<h1>" tag on until you add your h1 text.
Yes, you can repeat this tutorial to create "<h3>" tags, "<h4>" tags, and so on and so forth.
If a large gap appears beneath your h1 tag, this is due to the top padding from the main content area. To reduce this large gap, we just need to change the top padding for the main content area. For this particular demo site, we added the following CSS code to the CSS file to reduce the large, top green space you see in the image below. Your theme's CSS file may already have the code below in it -- you'll just need to adjust the top padding.
#main .container {
padding-top:1em;
}
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
