parallax-slider

Parallax Slider

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

Tips


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! )

http://youtu.be/8D-RfpDM8C8

Change the headline text

  1. Expand the Library sliders >> parallax-slider (folder).
  2. Double click on the “parallax-slider” page to open.
  3. The H1 headline text is noted in the page by the description of ( Slider 1 Headline, etc )
  4. Click on the text with your mouse.
  5. Click on the H2 tag located on the Quick Tag Selector Toolbar.
  6. With the entire H1 tag selected, type a new headline:
  7. 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

  1. To remove the button, select with your mouse, and delete.
  2. To change, right click with your mouse, and select Hyperlink Properties.
  3. Change the ‘Text to display:’ at the top to change the button name.
  4. Scroll through your pages to link to a new page, or type the name of the page manually.
  5. Click OK to save.

Replace or remove the image

  1. Expand the Library >> sliders >> parallax-slider (folder).
  2. Import, drag or copy your replacement image into the ‘images’ folder,  ( or any folder within your website )
  3. Open the ‘parallax-slider’ Library page.
  4. Locate the image you want to change.
  5. Double click to open the Picture Properties window.
  6. Click the Browse button.
  7. Browse to your Library >> sliders >> parallax-slider >> images (folder).
  8. Select the imported image.
  9. Click the Open button.
  10. Then click OK.
  11. You should see your new image on your page.
  12. As with all images replaced using the Picture Properties panel, double click on the new image to open the panel back up.
  13. This time, click the Appearance Tab.
  14. Unselect the ‘Specify size’ option.
  15. Then click OK.
  16. This will remove any width and height properties, allowing the image to scale on mobile devices.

Add and remove slides

  1. Expand the Library >> sliders >> parallax-slider (folder).
  2. Open the ‘parallax-slider’ Library page.
  3. Switch to ‘Code’ view.
  4. To remove a slide, select the entire commented tag, and delete.
  5. To add more slides, copy an existing slide including the comment tags
  6. Then paste above or below, pasting once for each new Slide you would like to add.
  7. 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! )

http://youtu.be/unx8mXNelT8

  1. Expand the Library sliders >> parallax-slider (folder).
  2. Double click on the “parallax-slider” page to open.
  3. The H1 headline text is noted in the larger font at the beginning or top of the paragraph text.
  4. Click on the text with your mouse.
  5. And type your new heading.
  6. If your new text looses the <H2> formatting as in this example:
  7. Just select the new text and re-apply the <H2> tag using the ‘Format’ menu:
  8. 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

  1. To remove the button, select with your mouse, and delete.
  2. To change, select the blue button text with your mouse.
  3. 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.
  4. Click OK to save.

Replace or remove the image

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/r4CmBsbX1fc

  1. Expand the Library >> sliders >> parallax-slider (folder).
  2. Import, drag or copy your replacement image into the ‘images’ folder,  ( or any folder within your website )
  3. Open the ‘parallax-slider’ Library page.
  4. Double click on the image you want to change, this will open the Select Image Source window.
  5. Select the replacement image.
  6. Click the OK button.
  7. You should see your new image on your page.

Add and remove slides

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/XVl6adO_RUY

  1. Expand the Library >> sliders >> parallax-slider (folder).
  2. Open the ‘parallax-slider’ Library page.
  3. Switch to ‘Code’ view.
  4. To remove a slide, select the entire commented tag, and delete.
  5. To add more slides, copy an existing slide including the comment tags
  6. Then paste above or below, pasting once for each new Slide you would like to add.
  7. You’ll now have a duplicate slide. Just change the content and images to suit your needs.