User Guide

Search limit to:





Slideshow

by Admin on Apr 15, 2024

1. What is a slideshow?

A slideshow is a display of a series of images or other content, typically displayed in sequence, often with added transitions between each image. It is commonly used on websites to showcase multiple images or pieces of content in a visually appealing and dynamic way. They are often used for presenting portfolios, product galleries, or highlighting key features or promotions.
In Eurus theme, go to the homepage, in the Template section group, add the “Slideshow” section.

2. Use slideshow as the page hero section.

"Hero" refers to the prominent section at the top of a webpage, often used to grab the visitor's attention and deliver key messages or visuals. By enabling the "Use as hero" configuration in the slideshow settings, you can designate the slideshow to serve as the hero section on a page. This allows you to leverage the dynamic and visually engaging nature of a slideshow to create an impactful introduction to the page content. 

Keep in mind that images used in the hero section won't be lazy-loaded, with the aim of preventing an increase in page load times and minimizing any negative impact on user experience (UX), so it's best to limit having only one hero section per page to avoid impacting performance.

3. How to set up each slide?

Click “Add slide” set up each slide in the slideshow:

a) Image

  • Select an image for the slide. Optimize the image for mobile devices if necessary.
  • Adjust the opacity of the image overlay. A higher value makes the image darker.

b) Content & content position:

  • Enter the subheading, heading, and text to display on the slide.
  • Select the heading tag for this section to enhance the SEO of the page. 
  • Customize the labels and links for up to two buttons. Choose whether to show buttons as primary buttons with full styling or as outline buttons.
  • Align the text and buttons on the slide. Customize the horizontal and vertical positions if needed.
  • Choose colors for the primary button, including hover effects, text color, and hover text color. Optionally, set colors for the secondary button.

These settings allow you to create engaging and visually appealing slides with customized content and styling for each slide in the slideshow.

4. How to customize the animation and styles of the slideshow?

Two Layouts and Image Pagination for the Slideshow Section:

Media with Text Slide: This layout displays the image and content separately, without an overlay like a regular slide. It showcases the image alongside the story or details of the product. You can change the background color of the content section.

  • Desktop: The image and content are arranged separately on a single row, with the option to swap the left and right positions.
  • Mobile: The image and content are arranged separately, with the option to switch between displaying the image above or below the content.

To set the background color for the content section, customize the Content Background Color. You can also adjust the Button Color, Button Text Color, and other styling options to fit your theme.

Three-Fold Slide: This layout features two additional images with accompanying content, providing a more comprehensive way to tell the product's story.

  • Desktop: Two images are positioned on either side, with the content placed in between on a single row.
  • Mobile: The two images are displayed on the same row, split into two, with the content positioned either above or below the images.

There are 2 configuration groups for setting 2 images for the slide.

  • Upload your first & second images for the slide. Check the user guide for recommended image sizes. Add mobile-optimized versions for better responsiveness. You can also paste or search for image links if needed.
  • Add a subheading and main heading with optional text formatting. Use highlights and underlines to emphasize important text.
  • Configure the first and the second button. Choose button styles and positions according to your design preferences.
  • To set the background color for the content section, customize the Content Background Color. You can also adjust the Button Color, Button Text Color, and other styling options to fit your theme.

Image Pagination: (Applicable only on desktop) This option previews the image of the next slide, enhancing the visual appeal of the pagination. In addition to enhancing visual appeal, this feature also functions as a navigation tool, allowing users to move back to the previous slide or forward to the next slide with a preview.

You can set up pagination in the Slideshow section:

To customize the animation and styles of the slideshow, you can:

  • Enable autoplay and adjust the timing for changing slides. You can typically set the duration to change slides every 5 to 10 seconds.
  • Choose the pagination style that best fits your design. Options for indicating slide progress include: 

Option name

The corresponding look of pagination

None

Only slide show, no pagination.


Dots

Bars


Image

  • Change the color for background and text of the pagination in the Image pagination background and Image pagination text settings.
  • Enable autoplay and adjust the timing for changing slides. You can typically set the duration to change slides every 5 to 10 seconds.
  • Tick the Pause on hover box to keep the pagination fixed when the cursor hovers over it.
  • Tick the Next/Previous arrows to show the left and right arrows on the slide show (not works with Image pagination style).
  • Select the transition style for slide changes. 2 options include slide or fade effects.
  • If desired, enable the parallax effect. This adds depth to the slideshow by moving background images at a slower rate than foreground content: Theme settings => Design => Enable “Disable parallax effect". By disabling this configuration, you effectively enable the parallax effect for the slideshow.
  • Adjust the height of each slide to ensure it displays optimally within your web page layout.
  • Customize the padding around the slideshow to control its spacing within the page content.