What to do after you've installed mocha on your website

After you've installed Mocha on your Weebly website, there are still a few things you should do to make sure you have a smooth building experience.

refresh your browser

Be sure to refresh your website browser, this will clear any temporary artifacts from the previous theme.

if you created a new weebly website...

If you created a new Weebly website and chose a default Weebly theme right before you installed Mocha, you may have a bunch of placeholder content from the previous default Weebly theme present in Mocha.

If so, the quickest simplest solution is to simply delete the pages with the content from the old theme. Then, create a new page with your desired header type, and you'll have a fresh new page without any existing content from the old theme.

If you Installed Mocha over your Existing Weebly Website...

If you installed Mocha over your already-existing Weebly website, your content most likely transferred through. 

If you click on a page and you don't see your content: be sure to set its header type to "Header." You can change the header type of a page by going into "Pages" and clicking on the relevant page.

By setting the header type to "Header" you'll be able to see all of your previous content.

using features and header types

Mocha comes with a series of header types, which are also called page types because they define the entire page layout, not just the header.

To set the Header Type of a page, do the following:

1. In the Weebly Editor, click on the "Pages" tab.
2. Click on the page you wish to edit (or, create a new page).
3. In the "Header Type" dropdown, select the header type you wish to add.

‍

List of Pre-Built Header Types included in Mocha.

• Homepage - This is the page layout similar to the one used to build the homepage Mocha demo. It comes with a fullscreen background image header, followed by the blocks and sections you saw in the demo.
• Header - This is a "default" page layout. It features an adjustable header (with drag 'n drop support + video, image, and color background options), followed by a blank white drag 'n drop area where you can add Weebly blocks.
• No Header - Just one drag and drop area section, no header.
• ScrolliPage - This is a page that automatically adds a vertical navigation "dot" for every Weebly Section element you add. Be sure to read the relevant instructions for ScrolliPage.
• ScrolliPage-Demo - This is the same ScrolliPage page layout, except with pre-built content blocks like the ones seen in the Mocha ScrolliPage demo.
• Video-Page-Demo - This is the exact header type page layout we used for building the Mocha homepage demo. Large fullscreen video header, followed by all the same sections and blocks as seen in the demo.
• VideoPageFull - A fullscreen version of the video header, except with no added pre-built blocks.
• Parallax (1-5) - Alternating Parallax sections. If you'd like more than 5 parallax sections per page, you'll need to use the Page Builder.
• PureSlider - This is the Header Slider. You can choose how many slides you'd like in the Header Slider. If you'd like to mix-and-match PureSlider with other features (such as Parallax or Carousels) you'll have to use the Page Builder.

‍

These pages listed above are fixed, pre-built page layouts. However, you aren't forced to use them. You can create your own header types and page layouts by using Page Builder in Mocha (be sure to read instructions on how to use Page Builder).

‍

demo video tutorial

The following video tutorial will go into:

• How to use Page Builder to create your own layouts, which you can later import into Weebly.
• How to add and edit the PureSlider Header Sliders.
• How to add and edit the Carousels.
• How to add and edit the Parallax section.

‍

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.

Transcript of Video

1. To get started, drag and drop the modules in the editor into your desired configuration.
2. When you're satisfied with your design, press the black "publish" button.
3. You will be shown a popup with all the generated code. Double click inside the code box to select all the code, and then copy the selection to your clipboard by pressing CTRL + C if on Windows, or Command + C if on MacOS.
4. Now go to your Weebly website builder. Click on the "theme" tab. Then click on "edit HTML/CSS" in the lower lefthand corner. You'll be taken to a code editor.
5. Locate in the upper left the "header types" section. Next to the text is a "+" plus icon.
6. Click on it, and click on "Create a New Header Type."
7. Name this header type whatever you want. This is where your layout will live. Select your newly created header type, and take a look at the code.
8. You'll see a few lines of auto-generated code. Delete all that.
9. After you deleted the auto-generated code, paste in your previously-copied code from the Page Builder right into the code box.
10. Press the blue "save" button!
11. Give the editor a few seconds to catch up. Then, create a new standard page, or click on an existing page in the "pages tab" (depending on whether you want the layout on a new page or one of your current pages).
12. In the page settings, locate the "header type" dropdown. From the dropdown, find your newly-created header type where you pasted all your layout code.
13. The page should refresh and then load with your layout. It will look weird at first, don't worry, because it doesn't have any images yet.
    
    ‍Simply begin uploading images in the image placeholders and start replacing text with your own. Soon, your webpage will look amazing. Keep doing this process, creating new header types and pasting your layout code in for each new layout you'd like.Be very careful not to accidentally tamper with any existing code in the theme, in any header types that you did not create.

‍

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.

how to change theme options

Mocha is a highly customizable theme, with plenty of built-in editor theme color controls.

how to access mocha's customization panel

To access the Mocha customization panel, please do the following:

1. Open up your Weebly editor.
2. Click on the "THEME" tab.
3. Click on "Theme Options"
4. You'll see a series of color swatches and toggle controls.
5. See the section below to learn what each option does.

List of All Available Controls and Descriptions:

• Search Box - Shows/Hides the website search box.
• Nav Button - Shows/Hides the button in the navigation bar.
• Nav Search - Shows/Hides the search icon in the navigation bar.
• Contrast Navigation - Inverts the Navigation Bar Color
• Search Icon - Shows/Hides the search icon in the navigation bar (site-wide).
• Body Color - Sets the color of the website body.
• Nav Color - Sets the text of the navigation bar in its unscrolled state (before the user starts scrolling).
• Nav BG - Sets the background color of the navigation when the user starts scrolling.
• Nav Btn Txt - Sets the color of the navigation bar button's text.
• Nav Btn BG - Sets the color of both the navigation bar button outline and the background color on-hover.
• Nav Color Scroll - Sets the color of the navigation bar text when the user starts scrolling.
• Footer Color - Sets the color of the footer section.
• Slider Color - Sets the color of the Slider pagination.
• Btn Text - Sets the color of the button text across the site.
• Btn BG - Sets the color of the button background & outline across the site.
• Btn 2 Color - Sets the color of the second button style across the site (button styles can be switched by clicking on a button and selecting from styles in the pop-up).

How to Change navigation colors

You can customize Mocha's navigation colors with ease. 

Mocha comes with three customizable navigation states:

Nav Color - The color of the navigation bar text and components when its in the unscrolled state (the way the navigation bar looks like before the user starts scrolling). In this state, the background is transparent (hence no option).

Nav BG - The background color of the navigation bar when the user starts scrolling and it becomes fixed to the top of the screen.

Nav Color Scroll - The color of the navigation bar text and components in its scrolled state, when the user being scrolling.

Here's how to adjust these variables.

1. Open up your Weebly editor.
2. Click on the "THEME" tab.
3. Click on "Theme Options"
4. Find the Nav Color, Nav BG, and Nav Color Scroll swatches as described above.

how to change body color

By default, Mocha comes with a dark black-themed background. But that doesn't mean you have to keep using this color style. In fact, Mocha works very well with a wide variety of colors, particularly colors on the darker side of the spectrum.

‍

If you'd like to change the background body color for Mocha, here's how:

1. Open up your Weebly editor.
2. Click on the "THEME" tab.
3. Click on "Theme Options"
4. Find the option for "Body Color."
5. Change this variable.

how to change Button colors

Mocha includes options for changing the color of the buttons. Here's how.

1. Open up your Weebly editor.
2. Click on the "THEME" tab.
3. Click on "Theme Options"
4. Find the option for "Btn Text and Btn BG."
5. Btn Text is the text of the buttons, while Btn BG is the outline and background color for the buttons.
6. Set both of these to your desired colors.

Note that if your selected buttons are not responsive to these changes, you may need to change their style.

‍

Troubleshoot Issues

I can't set the color picker to black or white

This is unfortunately a known bug with Weebly's color picker in all themes, both default and premium. The best remedy for this is to either "reset" the theme options (often times our default value is a true black or white color), or to choose a color "near" the absolute black or white in the color picker. If you absolutely must set it to exactly #fff or #000, please contact us.

‍

carousels

Mocha comes with Carousels, letting you portray content in a sliding horizontal manner. At the moment, Carousels only support images and text, but we're adding an option where you can drag 'n drop your own content into each Carousel slide soon.

How to Add carousels

To add Carousels sections to your Weebly website, you'll need to use Page Builder to create a custom page layout with Carousel blocks built-in. Be sure to watch the Page Builder tutorial. Here's a quick overview of how adding Carousels works:

1. Open your Weebly builder.
2. Open Page Builder (by clicking on the red "Page Builder" button in the upper right hand corner of this screen).
3. Create your desired page layout, and be sure to add a "Carousel" block somewhere to your Weebly website.

PureSlider Overview

Mocha comes with a gorgeous full-screen header slider called PureSlider. This header slider lets you add both images (as backgrounds) and content on top of each slide.

‍

how to add pureSlider to your website

To view a video tutorial on how PureSlider is installed and setup, please click here to see the Mocha Demo tutorial.

There are two ways of adding PureSlider to your Weebly Pages. These options are listed below:

Option 1: Create a Page Layout With PureSlider in Page Builder

The Mocha Page Builder lets you create website page layouts and designs that you can then import into Weebly. If you'd like to use PureSlider in conjuncture with another feature like TrueParallax on the same page, then PageBuilder is the best option.

In the PageBuilder, simply drag 'n drop the "PureSlider" section to the top of your layout. You can then add more sections in any desired format. Be sure to view the tutorial on how to use Page Builder ‍

Option 2: Set the Header Type of a Page to PureSlider

If you're creating a simpler page layout with just the PureSlider, followed by a blank white section, you can simply:

1. Click on the "Pages" tab in Weebly.
2. Create a new page (or click on an existing one).
3. Click the "header type" dropdown in the left hand column.
4. Scroll through the header type options. You'll see PureSlider-5 for example, the number defines how many slides are in the PureSlider. So if you're seeking to add a PureSlider with five slides, you'd select "PureSlider-5."

‍

‍

how to setup and use pureSlider

There are two ways of adding PureSlider to your Weebly Pages. These options are listed below:

How to Set-up and use pureSlider

Note: The Mocha Demo video tutorial goes into how to add and setup PureSlider on your Weebly website.

Scroll down until you see the "Background Editing for PureSlider" black section. To add background images to the slider, you need to have it "unlocked." To add content to the slider, you need to have it "locked." To navigate throughout the slides, use the slider's arrow keys or use the dots on the bottom.

To add a background image to a slide, click on the "unlock section" button. Then, click on the center of the slide for which background you'd like to change. A pop up should appear letting you upload an image. We recommend using images that are less than 2MB in size, and with resolutions above 1920 x 1080.

Make sure the background editing is unlocked. Hover over the image until a little pop up appears on the bottom of the slide (you may need to scroll down a bit). Click on the "delete" icon.

‍
Misplaced Content

Experiencing issues with dragging and dropping content into the proper slides? Since the sliders are stacked on top of each other by design, you need to be careful to drag and drop content to the right slide. This may involve some trial and error. When adding content to the sliders, make sure any existing content "wiggles"--this signifies that the content you're about to drop will land on your slides. If you notice that, upon dragging and dropping an element, it disappears, it means it's on the other slides. Dropping content a second time to the same slide will correctly place it on the slide. You may need to follow the following approach:

Drag content to the slide --> (it may disappear) --> Drag content again to the same slide --> It will now stick to the right slide, and any following items dropped will stay on the same slide. You can then go into the other slides and delete any "artifacts" or incorrectly placed objects.

‍

how to add content to a slide

To add content, ensure that the background editing for the PureSlider is locked. Then, simply drag 'n drop contents from the Weebly element sidebar into the slider.

‍Important: be very careful to avoid adding too many elements to each slide. it may look fine on desktop, but if your visitors come on mobile devices, the content may overflow since the slide height is set to the height of the screen. we heavily recommend only adding a title, some text, and perhaps a few buttons.

‍

‍

‍

trueDepth parallax Overview

TrueParallax is a 3D parallax technology built into Mocha. It lets you create gorgeous mobile-responsive parallax sections on your Weebly website.

Weebly does offer "parallax" background images as part of their Weebly sections element, but its very different from what we offer. Weebly's parallax offering is just a fixed background image. Our TrueParallax actually moves the image as the user scrolls down, simply at a slower rate, creating a 3D illusion of depth. Furthermore, our TrueParallax works on mobile, whereas Weebly's solution does not.‍

‍
How to Set-up and use pureSlider

Note: The Mocha Demo video tutorial goes into how to add and setup Parallax on your Weebly website.

Option 1: Use The Mocha Page Builder

The Mocha Page Builder lets you create website page layouts and designs that you can then import into Weebly. In the Page Builder, you can create your own desired page layout by dragging and dropping parallax sections in any configuration you want. There is no limit on the number of parallax sections included via this approach. Click here to see instructions on getting started with the Page Builder.

‍
Option 2: Change Header Type

If you'd just exclusively like to add TrueParallax, you can simply click on the "Pages" tab in Weebly

• Click on the pages tab in Weebly
• Create a new page (or click on an existing one)
• Click the "header type" dropdown in the left hand column
• Scroll through the header type options
• You'll see Parallax-5 for example, the number defines how many parallax sections are in the page. So if you're seeking to add five Parallax sections, you'd select "Parallax-5."

‍

‍

‍

‍

‍

Editing and using parallax

By now, you should've created a page with your desired amount of parallax sections.​

If you added TrueParallax by setting the header type to Parallax (option 2) instead of using the page builder (option 1): the number of parallax sections in a page is proportional to the number of white non-parallax sections. For example, if you chose "parallax-3" as your header type, you'll have three parallax sections and three white content sections in an alternating pattern.

‍
adding background images

Note: The Mocha Demo video tutorial goes into how to add and setup Parallax on your Weebly website.

When adding background images to your parallax sections, please ensure that your background images are large enough to cover the entire screen. Therefore, we recommend uploading high quality images that have a resolution of at least 1920 x 1080. Any smaller and the images may not stretch to fill the section, leaving white space.

uploading an image into a parallax section

​Notice the black sections throughout the page. Above them is a parallax section. To add an image, click on the button for the appropriate section, and then click anywhere in the middle of the section.

After you add the background image, click on the button again to "lock" it. You'll notice that the image shifts a bit back into a correct position. If any issues arise, please contact us.

removing an image in a parallax section

To remove a background image, click on the "toggle" button again and hover over the bottom of the image. You'll need to scroll until the section is right in the middle of the screen. Hover over the image until you see a small popup appear with a trash icon.

Click on it to delete the image. If nothing pops up, it means you have to toggle the background editability again.

‍

‍
adding content into the parallax sections

Simply drag 'n drop elements from the sidebar into the parallax sections to drop them in place. The more items you drop, the bigger the parallax sections get. They will automatically adjust their height to accommodate your content.

If you need more padding between the edges of the parallax section and your content, use the "spacer" Weebly element.

Deleting The White Drag and Drop Sections in Between the Parallax Sections (if Option 2 used to add parallax)

You may notice that your parallax pages have white content spaces in between parallax sections. What if you don't want a white content space? Or if you want only parallax images? The solution is very simple.

If you don't add any content to the white sections in between the parallax image sections, they will disappear on the live version of your website.

‍

‍

‍

‍

‍

create onePage Vertical Navigation with ScrolliPage

ScrolliPage is a powerful feature in Mocha that lets you add one-page vertical navigation scrolling to your Weebly website.

In essence, ScrolliPage gives your website page a secondary "vertical" navigation that consists of dots. When the user clicks on a dot, they automatically scroll down to some point.

You can add ScrolliPage to your page layouts in two ways. The first way is to use Page Builder. This is the most flexible method because you can use ScrolliPage in conjuncture with other features and elements.

If you just want to use ScrolliPage with default Weebly sections, you can do that too. Continue reading to see how.
‍

‍

how to add scrolliPage via Page builder

Please see the following video tutorial to learn how to add ScrolliPage via Page Builder:

‍

‍

how to add scrolliPage via Header Types

If you don't want to use Page Builder to add ScrolliPage, you can do so via header types.

‍

Please watch this video on how to do this.

‍

‍