Thank you for purchasing Mocha!

You're One Step Closer to The Perfect Website

You're well on your way to creating a phenomenal Weebly website. Mocha is a premium Weebly theme and a result of months of development by our team of designers and developers. This page is your go-to location for everything related to Mocha. All main tutorials and how-to guides are available here.

Navigating Through These Tutorials

You can navigate through the various sections in this tutorial by clicking on the links in the left sidebar (the sidebar is scrollable). You might not even need to use all the features included in Mocha, and that's completely fine. But this documentation includes how-to tutorials for using every feature in Mocha.

Theme Introduction: Page Builder and Mocha Theme

Our theme offers more features than the default Weebly themes you might be familiar with. While you can still use the drag-and-drop method to create a website with Mocha, this theme also provides a unique and powerful way to build your site using "blocks" or "sections."

What are Blocks?

Blocks are pre-designed content sections (such as text, images, or features like sliders and parallax effects) that you can easily add to your website. There are two ways to add blocks:

1. Simple Method: Choose a header type (like a slider or parallax effect) from the drop-down menu in the Weebly Page Settings. This method is easy but less customizable.
2. Customizable Method: Use the PageBuilder tool to create your own page layout by dragging and dropping blocks in the order you want. This method offers more customization options.

Using PageBuilder

PageBuilder is a separate tool that lets you create custom page layouts for your Mocha theme. To use it, follow these steps:

1. Arrange the blocks in PageBuilder to create your desired page layout.
2. Click "Publish" to generate HTML code.
3. Copy the HTML code and paste it into Weebly, following the PageBuilder instructions (please see How to Use Page Builder in the sidebar)
4. Edit the content in your new layout within Weebly.

If you want to change your layout later, simply create a new layout in PageBuilder and replace the existing code in Weebly. Your content will be preserved as long as the same block is present in the new layout.

Happy designing!