fullscreen-carousel

Fullscreen Carousel

This slider takes advantage of a "full screen" background image that transitions behind the text for the change of each slide.

Tips


Instructions

Fullscreen Carousel

In this tutorial, we’ll demonstrate how to update the Fullscreen Carousel layout. The Fullscreen Carousel ‘slides’ a series of div containers, from right to left. The default Fullscreen 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 a background image.

We’ll learn how to:

  • change the heading text
  • change the paragraph text
  • change or remove the button link
  • replace or remove the background image
  • add and remove slides

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

Change the headline text

  1. Expand the Library sliders >> fullscreen-carousel (folder).
  2. Double click on the “fullscreen-carousel” 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 H1 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. The images for the fullscreen-carousel are located in the Library >> sliders >> fullscreen-carousel >> images (folder).
  2. To determine their image size, select one of the images in the Folder list.
  3. And view the image properties at the top of the Folder List.
  4. Your replacement image should be the same size.
  5. Import, drag or copy your replacement image into the ‘images’ folder,  ( or any folder within your website ).
  6. As with replacing any image, you can simple rename your replacement image the same as the image it’s replacing, so you only need to drag and drop it into the same folder, to over write
  7. ( example )
  8. Or give it a unique, identifiable name of it’s own.
  9. Then drag your new image into the Library >> sliders >> fullscreen-carousel >> images (folder).
  10. Open the ‘fullscreen-carousel’ Library page.
  11. Locate the image you want to change.
  12. Double click to open the Picture Properties window.
  13. Click the Browse button.
  14. Browse to your Library >> sliders >> fullscreen-carousel >> images (folder).
  15. Select the imported image.
  16. Click the Open button.
  17. Then click OK.
  18. You should see your new image on your page.
  19. As with all images replaced using the Picture Properties panel, double click on the new image to open the panel back up.
  20. This time, click the Appearance Tab.
  21. Unselect the ‘Specify size’ option.
  22. Then click OK.
  23. 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 >> fullscreen-carousel (folder).
  2. Open the ‘fullscreen-carousel’ 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.

Fullscreen Carousel

In this tutorial, we’ll demonstrate how to update the Fullscreen Carousel layout. The Fullscreen Carousel ‘slides’ a series of div containers, from right to left. The default Fullscreen 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 a background image.

Change the headline text

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

  1. Expand the Library sliders >> fullscreen-carousel (folder).
  2. Double click on the “fullscreen-carousel” 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. And type your new headline.
  6. If your headline looses the <h1> formatting as in the example below
  7. Just select your new text, then re-apply the <h1> 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.

If for any reason you loose the <p> paragraph formatting, just select your new text and re-apply the <p> tag using the ‘Format’ menu.

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 button text selected, go to the Properties Panel ( Ctrl+F3 ).
  4. Click on the ‘Point to File’ tool, and drag your mouse over to the page you want to link to.
  5. Click OK to save.

Replace or remove the image

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

  1. The images for the fullscreen-carousel are located in the Library >> sliders >> fullscreen-carousel >> images (folder).
  2. The image size is 1500 x 550 pixels. Create your replacement images at the same size.
  3. Import, drag or copy your replacement image into the ‘images’ folder,  ( or any folder within your website ).
  4. As with replacing any image, you can simple rename your replacement image the same as the image it’s replacing, so you only need to drag and drop it into the same folder, to over write
  5. ( example )
  6. Or give it a unique, identifiable name of it’s own.
  7. Then drag your new image into the Library >> sliders >> fullscreen-carousel >> images (folder).
  8. Open the ‘fullscreen-carousel’ Library page.
  9. Locate the image you want to change.
  10. Double click to open the ‘Select Image Source’ window.
  11. If you’ve dropped your replacement images into the ( Library / sliders / fullscreen-carousel / images ), your replacement images should be in view.
  12. If your replacement images are saved to a different folder, just browser to that folder.
  13. Select the replacement image.
  14. Click the OK  button.
  15. You should see your new image on your page.
  16. As with all images replaced using the Picture Properties panel, double click on the new image to open the panel back up.

Add and remove slides

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

  1. Expand the Library >> sliders >> fullscreen-carousel (folder).
  2. Open the ‘fullscreen-carousel’ 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.