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 background image and text color that is different 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 Background image

On the left, select "ASSESTS>Upload File(s)..." to upload the background image you intend to use for your content band.

---

Step 7. 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 an image background of an avocado, so we've added the code below to the class from Step 5 as shown below. Add the file name of the image you uploaded from Step 6 to the bold text below.

.first {
  background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('avocado.jpg');
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('avocado.jpg');
  background-image: -o-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('avocado.jpg');
  background-image: -ms-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('avocado.jpg');
  background-image: -moz-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('avocado.jpg');
  background-size: cover;
  background-position: 50% 50%;
}​

For this content band, we also want the 'Title' (h2) text and the 'Paragraph' (p) text to be a different color from the rest of the site. To do this, we simply add the class from Step 5 directly before 'h2' and 'p' as shown below. To change the color of the text, simply alter the hex color code.

.first h2 {
  color:#799b2c;
}
.first p {
  color:#c4c4c4;
}​

Click save.

---

Step 8. 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.

---

​To lighten or darken the tint that appears over you content band's background image, simply adjust the bold text in the code below.

.first {
  background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: linear-gradient( rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -o-linear-gradient( rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -ms-linear-gradient( rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -moz-linear-gradient( rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-size: cover;
  background-position: 50% 50%;
}​

---

To make the top and bottom of the tint different shades, simply adjust the bold text as shown in the code below. The code to the left is for the top tint (i.e., 0.5), and the code to the right is for the bottom tint (i.e., 0.9).

​.first {
  background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -o-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -ms-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -moz-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-size: cover;
  background-position: 50% 50%;
}​

---

To make the top and bottom tint different colors, adjust the text in bold as shown in the code below. For this tutorial, we've made the top tint green (i.e., 121,155,44) and kept the bottom tint black (i.e., 0,0,0). The code to the left is for the top tint (i.e., 121,155,44), and the code to the right is for the bottom tint (i.e., 0,0,0).

You can use hex.colorrrs.com to convert your hex color code (e.g., #799B2C) to an rgb color code (e.g., 121,155,44).

​.first {
  background-image: -webkit-linear-gradient( rgba(121,155,44, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: linear-gradient( rgba(121,155,44, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -o-linear-gradient( rgba(121,155,44, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -ms-linear-gradient( rgba(121,155,44, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-image: -moz-linear-gradient( rgba(121,155,44, 0.5), rgba(0, 0, 0, 0.9) ), url('avocado.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

---

comments powered by Disqus