This tutorial will show you how to put ads on the sides of your Weebly site. In keeping up with the responsive designs of websites these days, the ads will remain visible on the desktop version of your site, but disappear for the tablet and mobile versions.
Ads on the sides of your main content area tend to stand out more compared to other ads located on your site because they reside outside of the normal flow of expected content. It's a great location to advertise new and important information regarding your brand, yet the ads remain non-intrusive to your visitors' navigation of the page.
Step 1. Open Weebly's HTML/CSS Editor
At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.
Step 2. Create a new page layout
To create a new page layout, on the left, click on "HEADER TYPE>New Header Type", and name this page layout "sides.html".
Note: This new "sides.html" page layout will carry the structure allowing you to put ads on the sides of your main content. By doing this, you can easily switch a page back to a page layout that doesn't carry the side ads structure.
Step 3. Replicate HTML code
On the left, choose either the "header.html" or "no-header.html" page layout, copy all of the HTML codes within the page layout you choose, select the new "sides.html" page layout, delete all of the HTML codes currently within the "sides.html" page layout, and paste the HTML codes that you copied into the "sides.html" page layout.
Note: Choose the "header.html" page layout if you want your new "sides.html" page layout to have a customizable header, or choose the "no-header.html" page layout if you dont.
step 4. add <body> class
In order to target just our new "sides.html"page layout with CSS codes in step 7, we need to add the body class "sides-page" to the "<body>" tag as shown below in orange:
In order to install the side ads' structure coding, we need to remove the "Section" element's coding from the new "sides.html" page layout. To do this, scroll down to your main content area's code and remove the orange codes from it as shown below:
Once you're back in the Weebly Editor, go to "Pages" at the top, select the page you want the side ads to appear on on the left, and under "HEADER TYPE", select "Sides".
Step 9. Add Weebly Elements
Once you've applied the "Sides" page layout to your page, on the left, grab the Weebly Element you'll be using for your side ads and drop them into the drag and drop areas located on the left and right side of the main content area.
You're done! Publish your site to see your new side ads!
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.