Slideshow Multi Layers

Modified on Tue, 02 Mar 2021 at 05:49 PM

TABLE OF CONTENTS



There are 4 parts that you can add to the section: Slide Image covers Layer Image, Layer Text, Layer Button

Click Add Content to put more features into the section


1. Content

a. Slide Image

  • Slide use: choose Image/Video or Background Color to display 
  • Image: Select or Upload image
  • Image position: type a position that you want to show the image. Eg: center center
  • Slide link: paste a link or search it by clicking the blank 
  • Video Link: go to Settings > Files > click Upload Files to upload your video, then copy the URL and paste it to the blank
  • Min height: set the height for the section. Eg: 300px (Use for slide use background color)
  • Set Overlay color (If Slide use background color, overlay color will be background color for slide)
  • Overlay opacity: the more % you set, the more opacity the image gets 



  • Thumbnail: are reduced-size versions of pictures or videos, used to help in recognizing and organizing them


  • Thumbnail text: you can add text next to the thumbnail
  • Block label: is the name you add to the section. In this case, you name this Slide Image

b. Layer Button

  • Button Label: give a name for the section (Eg: Layer Button)
  • Button Link: Paste a link or Search the available one into the blank


  • Button Styles
  • Inherit Button style: drag horizontally to set the style for Button. If you'd like to customize the style,  set 0 
  • Button font size: 14px
  • Padding button: Order: Top Right Bottom Left 
  • Border radius
  • Set color for the Button Text and Button Background
  • Button font-weight: select the suitable font-weight for the button
  • Button letters spacing


  • Layer Setting
  • Tick Hide on Mobile if you want this feature to disappear on the Mobile
  • Block label: Give a name to the whole feature (Eg: Layer Button)
  • Movement Sensitivity: drag to set the sensitivity for the movement
  • Position: Horizontal(%),Vertical(%) (Eg: 50%,50%)
  • Amination
  • Button animation: select the displaying style for the button
  • Button animation duration: drag to set the time in second for the button to move to the destination 
  • Button animation delay: drag to set the time in second for the button to delay before moving out



c. Layer Text

  • Add text to Title and Subtitle 
  • Set Content alignment for the Text


  • Layer Setting
  • Tick to Hide on Mobile
  • Block label: give a name for the section
  • Movement Sensitivity: drag to have more sensitive in the movement 
  • Width: in %
  • Layer padding: Order: Top Right Bottom Left
  • Position: set the text position in Horizontal(%),Vertical(%) (Eg: 50%,50%)


  • Font Size: Set the font size for Title and Subtitle
  • Text Color
  • Alter the color for Title, Subtitle, and the text background 
  • Drag to set the transparency for the text background. The opacity of the text corresponds to how big the number is. 


  • Font weight: modify the font-weight for Title and Subtitle
  • Margin Bottom: Set the margin for Title and Subtitle in px


  • Letter Spacing: Alter the Spacing for the letter of Title and Subtitle
  • Animation
  • Choose the amination styles for Title and Subtitle 
  • Title animation duration: drag to set the length of the effect for Title
  • Title animation delay: the Title will delay displaying as the time you set  
  • Subtitle animation duration
  • Subtitle animation delay


d. Layer Image

If you want to have more features in one Slide, just add the sections you want and drag them below the Slide Image section.


2. Settings

  • Section Label: Give a name for the section (Eg: Slideshow Multi layers)
  • Layout
  • Tick to have Box Layout
  • Set Background color for the section
  • Slider Height: Select the height for the slider
  • Or you can customize Slider height (in %)
  • Tick to have Parallax Scroll and Parallax Hover (Parallax effect is the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling)
  • Set active slide by default: Drag to set the slide to appear firstly base on the slide order
  • Auto Slide
  • Change slides every: the slide will automatically change to the others in the seconds you set
  • Slideshow Animation: choose a showing animation style for the slideshow
  • Navigator
  • Tick to Show Navigator Next Prev
  • Navigation background-color
  • Background transparency: drag to modify the transparency for the navigation background
  • Alter Navigation color



  • Tick to Show Pagination
  • Set Pagination color
  • Modify the Pagination dots margin in px (Order: Top Right Bottom Left)
  • Pagination dots width, height
  • Pagination position: select the existing option to place the Pagination























Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article