Using Weebly Section Element on Responsive, Custom and Old Themes

Weebly introduced a new “Section” element as part of the fourth generation Weebly 4 upgrade. It was one of the much expected features to create full width and parallax sections anywhere on the page. Unfortunately section element is only available on new responsive themes and none of the old themes will have this element enabled on the editor. In this article let us discuss the followings:

Using Section Element on Responsive Theme

By default section element will be available under “Build” tab of the site editor and grouped under “Structure” along with divider and spacer elements. You can see the element only on responsive and default theme. If you have modified the theme or purchased a theme from third parties then the element will not be available.

Drag and drop the section element on the content area and you will be prompted to choose the layout to be added inside the section. Select one of the available options – Gallery, Team, Featured, Menu or Contact and save the layout.

Click on the section and you will have the following customizing options.

1. Drag & Drop Elements

Drag and drop any elements to the section area similar to content area. By default the width of the section element will occupy the full width of the screen. But the elements can be customized independently.

2. Resize Section Area

Drag the bottom border of the section to resize the section area’s height.

3. Delete

Click on the delete option to delete the section area.

4. Move

Move the element up or down on the same page or to any other page on your site. Similarly your can also copy the section to another page on your site.

5. Edit Background

Like flexible header, section area’s background can be an image, color or video. Free and starter plan users can set image and color for the background. Pro, business and performance plan users can set image, color and video backgrounds.

Background image can be edited with default image editor and parallax or reveal scrolling effects can be set for the background.

The content on section area can be aligned top, middle or bottom using advanced option.

Using Section Element on Custom and Non-responsive Theme

We do not get the point of introducing a default element only on responsive themes since this is a mere modification on the header type (page layouts). As sections and flexible header works similar manner adding a piece of code from new header type to your old existing header types will bring section element to the editor. Let us show you how to do it step by step.

Step 1 – Create a New Site to Check Section Element Code

As section element is available only on responsive theme, first create a new dummy site. Edit the source HTML by navigating to “Theme > Edit HTML / CSS”. You will see three header types – header.html, no-header.html and splash.html.

Click on the no-header.html and check the code of “content-wrapper”. It should be something like below:

<div id="content-wrapper">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>

Section Element Code in HTML Layout

Section element is appearing on the editor with the use of the code “{{#sections}}…{{/sections}}”.

Step 2 – Modify Your Live Site With Custom Theme

Now that you know it’s a simple “{{#sections}}…{{/sections}}” code that populates the section element. The next step is to open your live site with custom theme and add the code to all the header types. Edit your live site and navigate to code editor under “Theme > Edit HTML / CSS”. Find out the div tag for the {content} section of the main wrapper and add sections code like below:

{{#sections}}
<div id="main-content" class="container">{content}</div>
{{/sections}}

Ensure to add the code above and below the main content area and not on the banner area. Save your changes and check the site editor. You should see the “Section” element which can be used to create full width sections on your custom theme.

Add the sections code in all header types to enable full width section element. If you don’t add the code in any of the header type and choose that header type for your page, it will show you the following error when you drop section element.