---

Step 1. open weebly's html/css editor

​Click on "THEME" at the top, then click on "Edit HTML/CSS" on the left.

---

Step 2. Add html coding

On the left, choose the page layout that you want the split sections to appear on, and then on the right,  add the HTML coding from below either directly above or below the main content <div>. For this tutorial, we want the split sections to be located above our main drag and drop area, therefore we've added the HTML code directly above the main content <div>:

<div class="split-section">
    <div class="container">
        <div class="left">{left:content}</div>
        <div class="right">{right:content}</div>
    </div>
</div>​

Note: Adding the HTML code above the main content <div> will place the split sections directly above the main drag and drop area, and placing the HTML code below the main content <div> will place the split sections directly below the main drag and drop area.

---

Step 3. Add css code

To customize our split section, on the left, click on "main.less" and add the CSS code below to the CSS file on the right:

.split-section .container {
    display:table;
    width:100%;
    padding:0;
}

.split-section .left,
.split-section .right {
    display:table-cell;
    vertical-align:middle;
    width:50%;
    padding: 4em;
    box-sizing: border-box;
}

.split-section .left {
    background:#f1f1f2; /* Changes the background color of the left side */
}

.split-section .right {
    background:#009bff; /* Changes the background color of the right side */
}
​
@media screen and (max-width:767px) {
    .split-section .left,
    .split-section .right {
        width:100%;
        display:block;
    }
}

Click save.

---

Step 4. drag and drop weebly elements

Now since your split sections are all hooked up, it's time to start dropping Weebly elements into them. On the left, grab your desired Weebly element, and drag and drop it into the area where you installed the split sections.

---

You're done! Publish your site to see your new split section!

---

comments powered by Disqus