Weebly offers “Embed Code” element to add custom HTML, CSS and JavaScript code on your page content. But sometimes it is necessary to modify the source HTML / CSS of your site. Weebly allows both free and premium users to edit the source HTML / CSS code of a site in order to encourage adding more customization and make a good looking site with needed features. Here is a step by step tutorial on how to edit source HTML or CSS in free Weebly site and things you can do with Weebly code editor.
Summary of Weebly Code Editor Options:
- Top toolbar with buttons to search, enable/disable auto preview, etc.
- Name of your current theme can be changed by double clicking.
- Header Type – Weebly’s default page layouts containing HTML codes for individual layouts.
- Styles section contains external style definition of all elements in .less format.
- Partials section having files related to blog, ecommerce, etc.
- Assets section contain all theme files like scripts and images.
- Export theme – download your Weebly theme to local computer.
- View the code for the currently selected layout or file.
- Preview the site, enable auto preview on top toolbar to preview code changes instantly.
- Popup view to check your site in a popup window.
- Save or cancel the changes made.
How to Edit Weebly Source Code?
Login to your Weebly account and edit the site you want to modify the source code. The option for “Edit HTML / CSS” is available under the “Theme” menu of Weebly editor as shown below:
Once you click on the button a new page will be loaded which is called Weebly code editor.
What Can I Do with Code Editor?
Weebly code editor has the following features:
Below are some important things you can do on Weebly code editor.
1. Top Toolbar
The top toolbar in the code editor is used to invert the color, search, check documentation and auto preview the changes. By default any changes done on the code will be instantly showing under the preview window. You can also preview your changes in a popup window and check Weebly code editor help documentation on editing a theme. It is recommended to deactivate the “Auto Preview” option to avoid the preview is loading for each change you do. When the “Auto Preview” is disabled there will be a new “Refresh” button will appear which can be used to refresh the preview window to the change in the code.
2. Theme Name
You can change your theme name by double clicking on it. Changed theme will be showing under “Theme > Change Theme > Theme Gallery > Custom”. Whenever you change the theme new copy of it will be saved with a different name like a child theme. Any modifications to child theme will not have an effect on the original theme and you can any time revert back to Weebly’s original theme.
Weebly uses a theme across your account, which means multiple sites under a single account can use a single modified theme. Changing the CSS or page layouts will impact all sites using that modified theme.
If you want to modify the same theme with different design for two different sites then save it with two different names and use it on appropriate sites.
3. Edit / Add Page Layout
Under the “Header Type” section you can find the source HTML code for all the default page layouts offered by Weebly. You can also add or upload your own page layout by clicking on “+” button. Learn more about Weebly page layouts. With the introduction of Weebly 4 all page layouts are consolidated into three types as header, no-header and splash.
4. Styles
All external style sheets are available under “Styles” section. Currently Weebly uses LESS files for different sections of the site like “_blog.less”, “_nav.less”, etc. The main external style sheet is “main.less” in which all other styles are imported using “@import” rule.
The main stylesheet was previously called “main_style.css” is now referred as “main.less”. All responsive themes use .less style sheets instead of .css files.
4.1 Editing Source CSS and Adding Custom External Style Sheets
Weebly has a one single style sheet per theme, which you can see it in the code editor with the name “main.less” under “Styles” section. Click on the CSS file to see the code on the editor beside and you can add your own custom CSS codes here. Any code added here would be effective throughout your site since “main.less” stylesheet will automatically be linked to all default header types.
You can also upload additional CSS files like “style.css” and link it to the necessary page under “Pages > Select the page > SEO Settings > Header Code” section using the below code:
<link rel="stylesheet" type="text/css" href="http://yoursite.com/files/theme/style.css">
External CSS sheets linked under “Settings > SEO > Header Code” section will be loaded on all the pages which you can see it by right clicking and choose “View Page Source” on the browser.
5. Partials
As the name indicate “Partials” section contains part of the template files ( with .tpl extension) which will be used in combination with other files. The template files for the blog page, ecommerce, navigation, membership and search box are available under “Partials” section for modification.
6. Assets
The “Assets” section contains all source files like images and scripts used on your theme. You can edit and upload files under “Assets” section and use it in the site editor using “Embed Code” element or under “Header Code” and “Footer Code” sections. The files can be uploaded by clicking on “+” icon and then choose the “Upload File(s)…” option.
6.1 Uploading Script Files
You can upload a JavaScript (.js) file under “Assets” and link the file to a particular page either directly inside “Embed Code” element or under “Pages > Select the page > Advanced > Footer Code” using the below code:
<script src="https://yoursite.com/files/theme/JavaScript.js/"></script>
6.2 Uploading Images
Similar to .css and .js files, you an also upload image files with extensions like .jpg, .png, .bmp, .gif, etc. Weebly stores the image files uploaded on the code editor under “http://yoursite.com/files/theme/” but the image files uploaded on the site editor using image, slideshow or gallery elements are stored in different “upload” directory. The advantage of uploading images on the code editor is that they can be linked with the URL any place on your pages.
1. All files uploaded on the code editor can be linked with the relative URL within your site. For example, if you have uploaded an image “myimage.jpg“, it can be linked using “/files/theme/myimage.jpg” inside “Embed Code” element and under “Header Code” or “Footer Code” sections.
2. You can also right click and get the direct URL with “weebly.com/…/” and link it on anywhere on your site.
3. Though all types of files can be uploaded, certain files like .php may not work as intended.
7. Export Theme
This is an option to export the complete Weebly theme to your local PC or Mac. After you did any modifications it is recommended save and export your theme so that you can restore it when it is needed. Learn how to import and export Weebly theme.
8. View and Edit Code
Here is the actual place you can view and edit the CSS, HTML or Script code. The code corresponding to the file you have selected will be displayed on the editor. You can search for the required code and modify it as per your need. Ensure to edit the code carefully as the modification will affect the whole site.
9. Preview Area
The changes done on the code can be viewed under the preview area. The preview is automatic when the “Auto Preview” option is checked on the top toolbar otherwise you can click on the “Refresh” button to preview the changes.
10. Pop-out View
Though the preview area is available on the screen, most of the time it is congested due to smaller display area. You can view the changes in a separate full screen browser window using pop-out button.
11. Cancel / Save Your Changes
Importantly any changes done will only be effective when you click on the “Save” button, enter a new theme name and save your changes. You can also cancel the changes without saving. Most of the time the browser will keep the cache even though you did not save or publish the site. So if you see any changes appear without saving or publishing then it is a good idea to logout and clear your browser’s cache and check again.
Hi there, considering Weebly for an affiliate site that links out to a 3rd party payment site. I want to be able to be able to add the following rule site wide to all external links. When a user clicks on a link send to a.domain.com . Then when the next user clicks on a link send them to b.domain.com essentially a one for you and one for me setup. I have been told only way might be to swap out the destination sub domain every second using a script. Not totally equal but should achieve a close enough result. What I an wondering is if Weebly will allow this type of modification or script to run over external links. Thanks in advance
Good morning,
I bought a player that I want to insert in my site on weebly, but I can not understand how I should operate.
I downloaded the player files to my PC and now I have to upload them to the site.
The instructions are these:
“Adding video player to your webpage
Copy all from the deploy folder to server
Insert following code into the …… of your web document (code from index.html file)
…
(the code is very long and I do not report it all here)
Then, the instructions continue:
Next step, in your web document, insert the following line of code where you want to video player appear in between ……
A webpage should be only one instance of jQuery. Loading more then one instance of the jQuery library can cause conflicts…”
I need to understand this:
– How can I upload files to my site?
– where should I copy the codes that sent me?
I tried to go to the Thema css and insert through the html of the page, but it does not work.
Can you help me?
It depends on what type of code it is – use the links in the above article for inserting CSS and JavaScript. You can insert HTML code using custom HTML element or directly insert on the page template in theme editor.
Oh please help. I have a weebly site on Bluehost and can NOT get my image (gif) to display when the website is published. To test, I have tried other images (jpgs, pgns, gifs) and no luck. I gone to the website through various browsers (Chrome, FireFox, Explorer) and on two different computers. I’ve searched the web looking for a possible solution and you’re the closest I’ve come. The website is currently not published.
Any insight you can share is GREATLY appreciated!
With gratitude…
This does not seem to be a Weebly issue, you should check with Bluehost on this.
I am also with BH and had other issues. They changed the php from 5.4 (default) to 5.6 and it worked fine thereafter. Worth a try.
You should read this article https://www.webnots.com/how-to-install-weebly-on-bluehost/.
Are they offering all latest Weebly features and allow to modify source code. We don’t think so.
I have heard weebly calls javascripts to show the pages, so it is not good for seo. is it?
I would like to place a permanent text paragraph (an introduction) between the header and the posts on a blog page.
Since my site has two different blog pages, I would like different text on each one.
Any ideas about how to do this?
Thanks in advance.
Is it possible to use php code or .php file in weebly?in business
As far as we checked, php scripts will not work with Weebly. You can upload the files but it will not be effective.
Hi,
Do you know if it is possible to amend the HTML code for headings on the order form when you get to the cart? For example changing the ‘Delivery Information’ header to ‘Your Details’
Any help would be greatly appreciated
Katy
did u ever get an answer to this?
I am trying to build a site at weebly . This site will offer Business services to clients all over the world . However I run into following issues :
1) Since I want to sell Services ( and not products) , so I donot want to upload images for products/categories. How can I edit the code to remove the Image placeholder for products/categories from all the relevant pages of online stores.
2) My business is based in Cyprus and the payment processor (Stripe) doesn’t allow Cyprus based businesses to sign up. What are my options for accepting Credit card/debit card payments in euro for transfer to Cyprus bank account . Are there any payment processors that can accept Cyriot Businesses …or.. Can the code be edited to use my own merchant gateway of Cyprus .
I shall appreciate very much if you can guide me.. or alternatively take the above tasks on a fee basis.
Thanks and regards
Alex
This article was helpful – thanks.
For websites with the membership feature enabled, there is a new pop up window that opens up for people to input username/password, etc. when they click the login button.
Can you direct me to where the code snippets that govern this pop up are in the weebly standard html/CSS code? I haven’t been able to find this specifically…(I want to modify the font color of the “reset password” link and the log-in button fill). Thanks in advance.
This is controlled using template files under “partials” section.
But for the CSS – you can right click and find the class for changing the color and add the code in main style sheet.
Hello
When I use the edit html/css button on the design page for my weebly justhost account web page I am sent back to the same page again and never get the html editor as I should. Could you please let me know how to get this to work. I am not going to make any major changes to the template, just background etc.
Thanks in advance
Jayson Davis
Hope your host allows to edit the source code, some hosts do not allow. Please check with your host.
I have uploaded a jpg image and don’t know how to use in in the embed code? Can you help me how to do this?
You can link images using within embed code element.
There are three ways to link the URL of an image:
1. Right click on the image and get the URL within Weebly code editor.
2. Use the absolute URL – yoursite.com/files/theme/image-name.jpg.
3. Use the relative URL – /files/theme/image-name.jpg.
Hope this helps.
I cant edit my html code on header type, inside content tag, it just displaying {content}. Is there way to expand this {content} tag, so i can modify html code more?
Thanks
Your actual content will be available on the corresponding page which you can directly modify without editing header type or use embed code element to insert HTML code on the page directly.
You can modify the header type for adding custom layouts or adding / modifying elements in the existing layouts.
Hello! I’ve been trying to figure out how to create a pop up form for my website but it just seems impossible. I found several pages which generate the form and pop up code for me but I can’t use it on weebly. I have uploaded the CSS and the JavaScript file to my site but the form requires an html file and if I just upload it the button doesn’t work. And if I try to add it on my “Header Type” it just puts the form above the page instead of making it pop up.
Any help would be greatly appreciated. Thank you!
I am on my home page, and wish to copy & paste from list wire my java script.
could you please tell me how do I do this, as it does not show up. I have done it so many times but still does not work.
Thank you
Linda
If you want the script to be effective at site level, paste it under “Settings > SEO > Footer Code” section. If you want on the page level then paste it under “Pages > Choose the page > Advanced > Footer Code” section.
I added an image on my home page using the embed code method, as its an animated gif, but it is not responsive. Any assistance would be greatly appreciated.
The image on your site is responsive and looking good on mobile.
Hello,
I would like to add a “Book now” button on my site and behind this button I would like to link to a payment page with various amounts. Therefor I need the possibility to place plugins or change the HTML code of the Weebly site.
Is this possible?
Thank you!
Ann.
First you need to create a product with price. The button can be linked to a product category or to an individual customizable product so that the user can choose the needed package.
I am using Weebly through Ipower. I created a members only page which is password protected but I need to create a logout button that when pressed, will clear the cache. Can I add html code to the header of the pages that creates a button to say”logout” and when pressed, it will take the action to clear the cache?
Hi! I cannot for the life of me find where the hyperlinks are in the code. I went through everything and cannot find it anywhere. My goal is to remove the hyperlink of the top page in a subset to then have it act as a title. Help please?
I want to create a new page which opens at the anchor link on an other page – can this be achieved?
Yes, when creating a new page select “External Link” option from the drop-down when clicking on “+ Add” button. Enter your URL in the “External site” input box. You can enter a URL of your own site here.
I am editing a website with the Phototistic template on Weebly and I am trying to figure out how to reduce the white space around the main image on the landing page, which is the home page. I used to code with css years ago, so I am familiar with it; but I am having trouble figuring out which block of code affects that white border. Any help would be appreciated.
Right click and use “Inspect Element” option in Google Chrome or Firefox to understand which CSS style is causing the white space.
For the life of me, I can’t figure out how to apply changes in the HTML to just one page. I’m using the same header type (No Header) for both pages of my site and whenever I go to the Design tab, click “Edit HTML/CSS”, click “no-header.html” and edit the code, the change is applied to both pages! From what I can tell, the other buttons in the Design tab (“Change Theme”, “Change Fonts”, “Change Background”) affect the current page only, as they should. It’s only the “Edit HTML/CSS” button which is applying changes site wide. Please help!
There is a way out there – create a duplicate page layout.
Create a new page layout say “no header addition.html” and copy paste the the code of “no header.html” inside the new template. You can modify the new template as you need and choose the page layout under “Pages” tab for specific pages you need.
Also refer the section “How to Add Your Custom Page Layout?” in the article – https://www.webnots.com/select-page-layout-in-weebly-site/.
Hope this helps.
That worked like a charm! You have no idea how frustrating it was trying to figure that out.
Thank you VERY much :)
Good to know it is useful.
Per edit source HTML or CSS above, step #1 I do not get the option to rename my theme? Can you help? Thank you.
Double click on the theme name and you will be able to edit it.
Hi, thanks for this because now I know what I am supposed to be seeing!
I am using Weebly Free on Bluehost. Using FireFox. I cannot get the editor window to open! (A window opens then resolves to the Bluehost page for managing your site). I have refreshed the browser, used IE, used browsers on another machine. Today I chatted with Bluehost and of course it works on their side and other than clearing the cache and trying another browser they had no suggestions.
My site is now HTTPS so if I cannot edit I will not be able to continue using Weebly. Anyone else experience this? Anything you can think I can try? Of course, I am going to try again with Bluehost tomorrow but I have a feeling if I don’t figure it out I will have to switch builders. Thanks.
J
Did you do some changes on your files installed on your root directory? Try install Weebly again on the temporary domain and check you are able to edit the site.
Meanwhile, hope you know the Weebly editor offered by Bluehost is age old without latest features from Weebly. The below two articles may help:
https://www.webnots.com/bluehost-weebly-plans-review/
https://www.webnots.com/delete-weebly-in-bluehost-and-revert-wordpress/
Thanks so much for the reply. I have decided to not use Weebly — I am going for Drupal, I think, although I want to get a guess at how much support I can get from Bluehost on that! Anyway, I will be back to your site to look for helpful information!
So I was trying to see how fast my website was and I got an 84/100. To fix this, I was supposed to “Remove render-blocking JavaScript. Then it gave me what I’m guessing are some files I’m supposed to delete from my code. These are the two files? links? that I’m supposed to fix.
[https ://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http ://cdn2.editmysite.com/js/site/main.js?buildTime=1432061499]
Can I edit this in Weebly in the way you described? Thanks!
No, these are not the files which you can view it.
I have the same query! What is the solution then?
Hi,
i need to add an SEO verification code for google
if i enter this it just simply doesn’t verify via google. Am i doing this right?
Help
What do you mean by SEO verification code?
You can add Google Analytics tracking code and Webmaster Tools verification code under “Settings > SEO > Footer Code / Header Code” sections respectively.
Save your changes and then publish your site. It may also take sometime for verification.
Hi
Great informative site thank you very much
I just need to add a table in a particular page. I have codes But i dont know where to paste it. In weebly is it possible to edit a single page. Where should i go to edit the source. Kindly mail me
Thanx
KRISH
Check how to add table in Weebly site here.
Can I get back the original html code if I accidentally messed it? Its saved and I’ve lost a bunch
Change the theme back to original under “Design” tab to discard all your changes and go back to original theme. When you do HTML / CSS changes you need to save it as a custom theme name without modifying the original which helps restoring original theme.