Page Builder Introduction

Page Builder is a powerful drag 'n drop tool that you can use to create custom page layouts for Mocha, by dragging and dropping various sections and pre-built blocks to build the perfect layout for your website. You can then import this layout into Weebly, where you'll add content like text and images.

Page Builder lets you add pre-built sections to your Weebly website. These are sections where the layout is already professionally designed for you. All you have to do is paste your text and images.

Weebly does not allow 3rd-party theme developers, such as ourselves, to sell our themes with content "pre-included." As a result, by default all third party themes are shipped "empty," and rely on the user to make layouts.

As a solution to this limitation, we launched Page Builder.

Here's The General Procedure For Using Page Builder:

1. In Page Builder, drag 'n drop the blocks and modules you want to see on your page. You can mix-and-match features, such as a Header Slider followed by a Carousel, or a series of Parallax sections with vertical navigation "ScrolliPage."
2. When you're satisfied with your layout, import it into Weebly. When you're done creating your layout, Page Builder will generate a bunch of code. Simply copy and paste this code into Weebly (per the instructions).
3. In Weebly, you now have access to this page with your custom layout! Now, you can add content to your custom layouts.

Page Builder lets you create websites that would have never been possible to build in Weebly alone. It's a favorite feature among our customers.

Here Are The Benefits Of Page Builder, Summed Up. With Page Builder, You Can...

• Create gorgeous layouts that would be impossible to create in Weebly alone.
• Mix-and-match various features that Mocha contains (such as Header Sliders and Carousels) on the same page.
• Add professionally-designed pre-built content sections to your Weebly website, which you can edit in Weebly.

How to Create Page Layouts in Page Builder

To enter Page Builder, please press the red "Page Builder" Button in the upper right hand corner of this screen.

The video above illustrates how to use Page Builder. The tutorial is based on the Oxygen theme but the directions are completely the same with Mocha. If you need a transcript of this video, please see below.

Note: the demo video tutorial is another video tutorial which illustrates how to use the Mocha-specific page builder. Click here to watch it.

How to Edit Page Layouts in Page Builder

Let's say you created a page layout in Page Builder, and imported it into Weebly. You've added your own content.

But now, you want to make an edit to the layout. Perhaps add or delete a block. How do you do this without losing your existing content?

The solution is to simply re-create the Page Layout in Page Builder, except with the modification or edit you need.

Here are the steps:

1. In Page Builder, re-create your current page layout (drag and drop all the blocks you used on your page). The order doesn't matter--as long as the blocks are there. Note: if you forgot which blocks you used, don't worry: Go into the HTML/CSS code editor, and click on your Page Builder created header type HTML page. Scroll down all the way to the bottom. You'll see a list of all the blocks used at the bottom of the code.

1. Make your edit. If you wish to delete a block from your layout, for example, do it in Page Builder. Or, if you'd like to add a block, do so.
2. Export your page layout, copy all the code.
3. Go into the Weebly HTML/CSS editor.
4. Click on the header type you're modifying (the page you built previously with Page Builder).
5. Delete all the code in this header type.
6. Paste your HTML code you generated in step 3.
7. Save your changes.
8. The layout should now update, and you should still have your content preserved in the other blocks.

‍

Troubleshoot Issues

Ran into any issues with Page Builder? Here are some common ways to resolve them.

The Weebly Editor Is Stuck Loading Forever After Importing A Page.

This usually means the code pasted has an error in it. Try the following:

1. In Page Builder, re-create the layout and generate the HTML code.
2. Go into your HTML/CSS editor, click on the affected header type, and delete all the existing code.
3. Paste all the code you copied in step 1.
4. Save.

If this does not resolve the issue, please contact us and we'll help you out as soon as possible.