jumbotron-carousel

Jumbotron Carousel

The Jumbotron Slider uses an horizontal transition effect between slides.

Tips


Instructions

Jumbotron Carousel

In this tutorial, we’ll demonstrate how to update the Jumbotron Carousel layout. The Jumbotron Carousel ‘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/01dV25Jdrxo

Change the headline text

  1. Expand the Library sliders >> jumbotron-carousel (folder).
  2. Double click on the “jumbotron-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. Expand the Library >> sliders >> jumbotron-carousel (folder).
  2. Import, drag or copy your replacement image into the ‘images’ folder,  ( or any folder within your website )
  3. Open the ‘jumbotron-carousel’ 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 >> jumbotron-carousel >> 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 >> jumbotron-carousel (folder).
  2. Open the ‘jumbotron-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.

Jumbotron Carousel

In this tutorial, we’ll demonstrate how to update the Jumbotron Carousel layout. The Jumbotron Carousel ‘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/dRFmpTQIe9I

  1. Expand the Library sliders >> jumbotron-carousel (folder).
  2. Double click on the “jumbotron-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. Type your new headline.
  6. With the entire H1 tag selected, type a new headline:
  7. If you ‘loose’ the <h1> formatting as in the example below
  8. Place your cursor to the left of the text, and press the enter key to move it to a new line ( if it’s not on it’s own line like the example above )
  9. Select the text with your mouse, and re-apply the <H1> tag using the ‘Format’ menu >> Heading 1

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 the link, just select with your mouse.
  3. With the blue button text selected, click the ‘Point to File’ tool in the Properties Panel ( Ctrl+F3 ).
  4. 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! )

http://youtu.be/cVa9265-CrU

  1. Expand the Library >> sliders >> jumbotron-carousel (folder).
  2. Import, drag or copy your replacement image into the ‘images’ folder,  ( or any folder within your website )
  3. Open the ‘jumbotron-carousel’ Library page.
  4. Locate the image you want to change.
  5. Double click to open the Select Image Source window.
  6. If you dropped your replacement image into the ( Library / sliders / jumbotron-carousel / images ) folder, you should see your replacement image.
  7. Select your replacement image, and click the OK button.
  8. 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/kvjI4c9OOg8

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