Skip to main content

Slides

Home → Create Website → Paragraph Types → Slides

Slides

Add a slideshow with each slide featuring a full-width image or video. Optionally, slides can include description boxes and messages you'd like to communicate to your visitors and clients. With slides you can welcome visitors on the landing page or provide a link to collections. Or use them as an appealing design element to structure a long page.

To explore examples of this paragraph type, visit our picturemaxx Drupal demo page

  1. Add slides to a page
  2. Configure slideshow display

1. Add slides to a page

    1. In Main Administrative Menu, navigate to Content.
    2. In the Content Overview table, select a page to add a Slide to, and click Edit
    3. Scroll the Edit template page down to the Add Section dropdown button and select Add Slides there.
    4. In the Headline area, enter a name or description text (optional). The Editor menu allows applying a Format and/or Style to the text.
    5. Unfold Display Options to insert media, position textbox, configure background colors and set other slide options. The Setup page fields section below explains how to tailor your slide display.  
    6. Add more slides with Add Section to Slide > Add Slides.

    NOTE: To learn how to add new background colors, refer to Change Look & Feel (2. Background Colors for Paragraph Types).

  • Screenshot of the setup page of Slides

     

  • Headline
    Add a title and text to your slide.

    URL
    Start typing the title of a content item to select it. You can enter an internal path or an external URL.

    Link text
    Type a name for the link button on the slide. 


    Display Options

    Display Options setup is especially important for the this paragraph type. Upload background images/videos for the desktop version of the page and images for the mobile version. To make sure the text is readable, place it over a clear area of the image or choose an individual background color for it. Configure image/video dimensions and you are ready to go.

    Important: Keep the same size for all uploaded images and videos within a slide element for a smooth change from slide to slide.

    Background-Media Paragraph
    Upload an image or video file for the slide.

    Background-Image Paragraph Mobile
    You can upload a different image for mobile devices.

    Background Color Paragraph
    The background color for your slide affects the color of the text within the textbox. The font color will automatically appear white, if you select a dark background for the paragraph. It won't interfere with the image display. 

    Position Textbox
    Choose where to place the textbox. The default None option positions the textbox to the top left corner.

    Background-Color Textbox
    Select a background color for the text box, independent of the background color of the slide. 

    Minimal Height of Paragraph
    Define the slide height in your browser. With a fixed height value, the width of the image will change to match the size of the browser window. You can either set the slide height here or upload images that already have proper dimensions for your slide. In this case, enable Use Image Dimensions

    Use Parallax Effect
    Learn more about this feature on the Parallax Effect page.

    Use Image Dimensions
    Enable the option to specify the size of an image for the slide before uploading it.  and to make sure it appears the same way in different display sizes. The display is responsive.

    Important: Optimal image size for slides is 1920 x 1080 px. You can change the height of the image file, but keep the width. For example, upload 1920 x 700 px files for the slides on your page.

    Add Section
    Add more slides.

Video: Add slides to an existing page. In this example, we choose a dark background color for the entire slide, so the text appears white. To learn more about background colors, see Change Look & Feel.

2. Configure slideshow display

 

Fine-tune your slideshow with effects and controls available in Display Options (Slideshow).

  • Use fade effect

    Apply this transition effect to make a slide fade out.

    Show Play/Pause button

    Let users control auto-rotation of the slides. A paused carousel improves accessibility for users with visual impairments and people who are distracted or confused by auto-rotation.
    NOTE: If the user has chosen reduced motion in system settings, auto-rotation is always paused.

    Show slide indicators

    Display a set of dots that indicate the number of slides and the current position of the slide in the carousel.

    Shuffle mode

    Play a specified number of slides in a random order. This option helps to ensure page performance if you choose to display a large number of slides. 

    Shuffle interval

    Set a time interval for cache cleanup to reshuffle the slides.

    NOTE: Use this setting carefully, as it affects the entire page. The smaller the interval, the more frequently the page is rerendered.

    Maximum number of slides in shuffle mode

    Limit the number of slides displayed in a sequence. 

Before publishing the page:

  • Click Preview to make sure everything looks the way you want. You can preview any change before publishing it. 
  • To return to the Edit page, click Back to content editing.
  • To make new content visible on your website, turn on the Content is live (published) option.
  • Click Save to store your changes. The website content items are listed on the Content page.