Tutorial Stats
How to Create Partials in Weebly
Tutorial Description
This tutorial will show you how to create partials in Weebly, but what are partials?
A partial is a small code file that you place within many larger code files. The purpose of a partial is to allow you to change one or multiple areas of multiple pages instantaneously and at the exact same time.
As for an example, partials are really useful for ad placement on your website. Let's say you have hundreds of blog posts, with each blog post containing 3 ads each. You want to change all of these ads, but instead of spending hours or even days going through every single blog post and changing the ads manually (very time consuming), you would instead simply change the code in the partial file once and be done in less than a minute.
For this tutorial, I'll be creating just 1 partial for simplicity's sake, but for your website, you can create as many as you need. The partial I install in this tutorial will be for a 336x280 ad unit.
A partial is a small code file that you place within many larger code files. The purpose of a partial is to allow you to change one or multiple areas of multiple pages instantaneously and at the exact same time.
As for an example, partials are really useful for ad placement on your website. Let's say you have hundreds of blog posts, with each blog post containing 3 ads each. You want to change all of these ads, but instead of spending hours or even days going through every single blog post and changing the ads manually (very time consuming), you would instead simply change the code in the partial file once and be done in less than a minute.
For this tutorial, I'll be creating just 1 partial for simplicity's sake, but for your website, you can create as many as you need. The partial I install in this tutorial will be for a 336x280 ad unit.
SHOW MORE
Tutorial
Step 1. Add HTML codes
On the left, grab Weebly's "Embed Code" element and add it where you want the 336x280 ad to appear. Within the "Embed Code" element, add the following HTML code:
<div class="partialOne"></div>
Repeat this step for the amount of times you want the 336x280 ad to appear on this page or any page on your Weebly site.
<div class="partialOne"></div>
Repeat this step for the amount of times you want the 336x280 ad to appear on this page or any page on your Weebly site.
Step 2. Open Weebly's HTML/CSS Editor
At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.
Step 3. Upload Ad Image File
On the left, under "ASSETS", locate the "images" folder. Click the gear icon on the "images" folder, select "Upload File(s)...", and upload your ad image file.
Note: If you're using code (e.g., Google Adsense) to display your ad instead of an image file, you can skip this step.
Note: If you're using code (e.g., Google Adsense) to display your ad instead of an image file, you can skip this step.
Step 4. Create Partial File
On the left, click the "+" icon to the right of "ASSETS" and select "New File". Name this new file "partialOne.tpl". On the right, add the following HTML code:
<img src="/files/theme/images/336x280_ad_partial.png" />
Add the file name of the ad image you uploaded in the previous step to this HTML code as shown below in orange:
<img src="/files/theme/images/336x280_ad_partial.png" />
Note: If you're using code (e.g., Google Adsense) to display your ad instead of an image file, then simply add your ad's code to the new "partialOne.tpl" file instead of the HTML code above .
<img src="/files/theme/images/336x280_ad_partial.png" />
Add the file name of the ad image you uploaded in the previous step to this HTML code as shown below in orange:
<img src="/files/theme/images/336x280_ad_partial.png" />
Note: If you're using code (e.g., Google Adsense) to display your ad instead of an image file, then simply add your ad's code to the new "partialOne.tpl" file instead of the HTML code above .
Step 5. Add JQuery Code
In order to append our ad to every location on our website that we've added the HTML code from step 1 to, we need to add some jQuery.
On the left under "ASSETS", click on the "custom.js" file. On the right, add the below jQuery code directly beneath "jQuery(function($) {":
// Load Partial
$(".partialOne").each(function() {
$(this).load("/files/theme/partialOne.tpl");
});
Click "SAVE".
On the left under "ASSETS", click on the "custom.js" file. On the right, add the below jQuery code directly beneath "jQuery(function($) {":
// Load Partial
$(".partialOne").each(function() {
$(this).load("/files/theme/partialOne.tpl");
});
Click "SAVE".
You're done! Publish your site to see your Partial at work!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
