How to make content bands in your weebly site
Sunday May 1, 2016 | Comments
This tutorial will show you how to make content bands in your Weebly site.
Content bands are drag & drop areas independent of the main drag & drop area you're familiar with. They add personality to a site and allow you to apply different styles to them such as background colors, font colors, size, etc to its constituents.
Note: If your entire theme is encompassed in a wrapper, this tutorial will not yield the same result.
Step 1. Open Weebly's HTML/CSS Editor
Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.
Step 2. Choose your page layout
On the left, choose the page layout you want to add the content band to.
Step 3. Locate hTML code
On the right, locate the HTML code for your main content area.
Step 4. duplicate HTML code
Copy your main content area's HTML code and paste it directly below the code you just copied. The same code should appear twice.
Step 5. Add class and HTML code
In order to give the content band a different background color from the main content area, we need to give it a class so we can then apply CSS to it later on. We also need to create a new drag & drop area, and to do that, you can just add the class directly before "content".
Below is the main content area code from the theme in this tutorial. The class "first" was added and the text "first:" was added before "content" as indicated in orange below:
<div class="main-wrap first">
</div><!-- end main-wrap -->
Step 6. Add cSS codes
Click on "main_style.css" on the left, and scroll down to your main content area's codes. Add the class from Step 5 and then add your styling codes.
For the content band in this tutorial, we're going to give it a grey background, so we've added the hex color code "#f1f2f2" to the class from Step 5 as shown below.
Step 7. Add Weebly Elements
It's time to be creative and start adding Weebly elements to your new content band!
Note: The additional white content band below the grey content band in the image below is a second content band that was added for demonstration purposes.
Details of Project
Level of difficulty: Intermediate
Time to complete: 15 Minutes
How To Install Any Font Into Your Weebly Site
Updated on June 20, 2016
How To Create A Sidebar That Will Appear On Every Standard Weebly Page
Updated on June 11, 2016
How To Create An "<h1>" Tag In Your Weebly Site
Updated on July 9, 2016
Weebly Tricks on Facebook
Weebly Tricks on Google+