January 10, 2014

3 Ways in Editing Weebly’s "< HEAD >"

Posted by Domingo Tambasacan at 1/10/2014

3 Ways in editing Weebly's <head>

Weebly has a unique style for its CSS and HTML. Its preset lay outs has their own custom codes but they all share same CSS. However, before modifying any of these, you must read this tips on how to edit the <head> part in the most comfortable way.

1. Applying a code in the <head> that affects the whole site

Codes like Google Analytics and Webmastertools as well as Alexa should be likely inserted to all pages of the site.

Go to settings > SEO > header code and directly paste your code to the box provided. Just make sure to paste it correctly and should not be in the middle of anything else.

2. Applying a code in the <head> that affects selected lay outs

Weebly has preset lay outs like Tall header and No header. This is useful if your site consists of different lay outs and you want to insert a code specific to a certain type.

Go to Design > Edit CSS/ HTML, on the right side select the lay out you want to edit. Insert the code manually to the lay out you selected either by pasting it just after the <head> or above the </head>

3. Applying a code in the <head> that affects selected pages

Each page you make has its own settings.  This procedure is helpful for certain codes like music playing or a pop up surprise that usually seen in the homepage.

Go to Pages > select the page you want to edit > Advance settings +. Now directly insert your code in the “Header Code” area and save. Any code you insert here won’t affect the other pages regardless of types.

This is a simple knowledge but very helpful. If you are a beginner and trying to edit your own site, add this information to your knowledge base. It could not only save time but offers a manageable style of editing your Weebly site.


Usually we only need three elements for every tutorial; the HTML, the CSS and the JavaScript. The codes we are placing on the <head> is your CSS and JavaScript while the code you are pasting on your page via "embed code" is the HTML.

So it is common sense that once you inserted the JavaScript and CSS on Page 1's <head>, you should paste the HTML on Page 1 alone using the "embed code" element and not on the other pages. While if you inserted the JavaScript and CSS on the whole site's <head> (affecting whole site) then you can insert the HTML to any page. Lastly, if you inserted the CSS and JavaScript to selected layouts then only insert the HTML on pages having that type of lay out. Hope this is clear. If you wont follow it, you cant see any effect.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!



  1. How can i add an embedded code on weebly header image which only have an edit text . I want to replace that text option and add an html search box code . How can i do that

    1. You may start reading this topic:



© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top