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 getting started video 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.‍