The Parallax Slider has an animated slide in/out effect on your text and transparent image object.

Parallax Slider
Tips
- Slider Components READ ME FIRST Learn More
- Page specific components Learn More
Instructions
Parallax Slider
In this tutorial, we’ll demonstrate how to update the Parallax Slider layout. The Parallax Slider ‘slides’ a series of div containers, from right to left. The default Jumbotron includes 3 slides, the content of each slide can be any html content, in the included example layout we’ve added an h3 text headline, a paragraph of regular text, a clickable button and an image.
We’ll learn how to:
- change the heading text
- change the paragraph text
- change or remove the button link
- replace or remove the image
- add and remove slides
Video Demonstration ( skip the reading, just watch and learn! )
Change the headline text
- Expand the Library sliders >> parallax-slider (folder).
- Double click on the “parallax-slider” page to open.
- The H1 headline text is noted in the page by the description of ( Slider 1 Headline, etc )
- Click on the text with your mouse.
- Click on the H2 tag located on the Quick Tag Selector Toolbar.
- With the entire H1 tag selected, type a new headline:
- Save to update.
Change the paragraph text
This is regular text on the page, just change as you would normally change the text on a page.
Change or remove the button link
- To remove the button, select with your mouse, and delete.
- To change, right click with your mouse, and select Hyperlink Properties.
- Change the ‘Text to display:’ at the top to change the button name.
- Scroll through your pages to link to a new page, or type the name of the page manually.
- Click OK to save.
Replace or remove the image
- Expand the Library >> sliders >> parallax-slider (folder).
- Import, drag or copy your replacement image into the ‘images’ folder, ( or any folder within your website )
- Open the ‘parallax-slider’ Library page.
- Locate the image you want to change.
- Double click to open the Picture Properties window.
- Click the Browse button.
- Browse to your Library >> sliders >> parallax-slider >> images (folder).
- Select the imported image.
- Click the Open button.
- Then click OK.
- You should see your new image on your page.
- As with all images replaced using the Picture Properties panel, double click on the new image to open the panel back up.
- This time, click the Appearance Tab.
- Unselect the ‘Specify size’ option.
- Then click OK.
- This will remove any width and height properties, allowing the image to scale on mobile devices.
Add and remove slides
- Expand the Library >> sliders >> parallax-slider (folder).
- Open the ‘parallax-slider’ Library page.
- Switch to ‘Code’ view.
- To remove a slide, select the entire commented tag, and delete.
- To add more slides, copy an existing slide including the comment tags
- Then paste above or below, pasting once for each new Slide you would like to add.
- You’ll now have a duplicate slide. Just change the content and images to suit your needs.
Parallax Slider
In this tutorial, we’ll demonstrate how to update the Parallax Slider layout. The Parallax Slider ‘slides’ a series of div containers, from right to left. The default Jumbotron includes 3 slides, the content of each slide can be any html content, in the included example layout we’ve added an h3 text headline, a paragraph of regular text, a clickable button and an image.
We’ll learn how to:
- change the heading text
- change the paragraph text
- change or remove the button link
- replace or remove the image
- add and remove slides
Change the headline text
Video Demonstration ( skip the reading, just watch and learn! )
- Expand the Library sliders >> parallax-slider (folder).
- Double click on the “parallax-slider” page to open.
- The H1 headline text is noted in the larger font at the beginning or top of the paragraph text.
- Click on the text with your mouse.
- And type your new heading.
- If your new text looses the <H2> formatting as in this example:
- Just select the new text and re-apply the <H2> tag using the ‘Format’ menu:
- Save to update.
Change the paragraph text
This is regular text on the page, just change as you would normally change the text on a page.
Change or remove the button link
- To remove the button, select with your mouse, and delete.
- To change, select the blue button text with your mouse.
- With the blue text selected, go to the Properties Panel ( Ctrl+F3 ), click on the ‘Point to File’ tool, and drag over to the page you want to link to.
- Click OK to save.
Replace or remove the image
Video Demonstration ( skip the reading, just watch and learn! )
- Expand the Library >> sliders >> parallax-slider (folder).
- Import, drag or copy your replacement image into the ‘images’ folder, ( or any folder within your website )
- Open the ‘parallax-slider’ Library page.
- Double click on the image you want to change, this will open the Select Image Source window.
- Select the replacement image.
- Click the OK button.
- You should see your new image on your page.
Add and remove slides
Video Demonstration ( skip the reading, just watch and learn! )
- Expand the Library >> sliders >> parallax-slider (folder).
- Open the ‘parallax-slider’ Library page.
- Switch to ‘Code’ view.
- To remove a slide, select the entire commented tag, and delete.
- To add more slides, copy an existing slide including the comment tags
- Then paste above or below, pasting once for each new Slide you would like to add.
- You’ll now have a duplicate slide. Just change the content and images to suit your needs.