PureSlider is a powerful header slider in Oxygen that let's you create responsive, hardware-accelerated header slideshows without editing any code. In this tutorial, we'll go over everything you need to know about using PureSlider.
There are two ways of adding PureSlider to your Weebly website. These options are outlined below:
The Oxygen 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.
If you're creating a simpler page layout with just the PureSlider, followed by a blank white section, you can simply do the following:
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.
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 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.
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.
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.