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 class="container">
        <div class="content-wrap">{first:content}</div>
      </div>
    </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.

​.first {
  background:#f1f2f2;
}

Click save.

---

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.

---

You're done!
Publish your site to see your new content band!

---

Additional information

If your main content area uses an "ID" instead of a "class", you can simply add a class to  your main content area's code as shown below in orange.

​    <div id="main-wrap">
      <div class="first">
        <div class="container">
          <div class="content-wrap">{first:content}</div>
        </div>
      </div>
    </div><!-- end main-wrap -->

​​To make more than one content band, just repeat Step 4 and Step 5. For Step 5, simply change the class to "second", as well as the drag & drop code e.g, {second:content}, and so on for additional content bands.

---

comments powered by Disqus