How to Add a PureSlider Header Slider to Your Pristine-Powered Website

Pristine comes with a powerful PureSlider header slider that you can add to your Pristine theme in no time. Here's how to get header sliders on your website.

Features of Pacific PureSlider Header Sliders: 

• Swipe Gestures for Improved UX - PureSlider uses the latest code to enable swipe gestures on mobile. Users can simply "swipe" to change slides.
• Intelligent AutoPlay - On your live website (not in the editor) the slider will automatically autoplay through the slides until the user interacts with the slideshow, at which it stops.
• Hardware Acceleration - PureSlider leverages hardware acceleration to deliver a smooth, crisp experience to all users and devices. This technology also improves loading speeds.
• A Lightweight, Native Solution - Unlike external apps, PureSlider is a native solution built into Pristine. This yields better SEO, better site performance, and faster loading speeds.

Step 1: Add PureSlider to Your Website Page

There are two ways of adding PureSlider to your Weebly website. These options are outlined below:

Option 1: Use the Pristine Page Builder (Most Flexible)

The Pristine 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, the 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. Click here to see instructions on getting started with the Page Builder.

Option 2: Change the Header Type of a Page (Quickest, but More Limited)

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

1. Go to 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."
   

Step 2: Edit PureSlider, Add Your Images, and Create Your Slideshow

The instructions that follow assume that you've added PureSlider to a page, via either Option 1 (Page Builder) or Option 2 (Pre-included Header Type). Here, we go over how to edit the images and content in the PureSlider.

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." See image on the right.To navigate throughout the slides, use the slider's arrow keys or use the dots on the bottom.

How to Add a Background Image to a Slide

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.

How to Remove a Background Image from a Slide

Make sure the background editing button 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.

Be Advised! 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 (Such as Text) onto 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.

‍