To create a new Slideshow, click Add Section > find Slideshow > Click Add button.


TABLE OF CONTENTS



1 - Settings

Layout

  • Boxed layout: Add a padding around the main wrapper. 


Slideshow settings

Contain all necessary elements to customize the slide section.

  • Input the values to adjust the Slide height for different devices (desktop, tablet, mobile) and separate them by commas.
  • Slider effect (slide switching effect)

Slide


Fade


  • Loop: Allow users to switch slides in a loop.
  • Auto switch slide (in second): Activate auto-changing slide and set the action time.
  • Show navigation: Arrows display.


2 - Content

Slide image

  • Slide image:  Pick a photo to display.
  • Image crop: With a bigger image, you can adjust the displaying position for it.


Paragraph & button

  • Text 1: Insert Heading for the current slide.
  • Text 2: Insert Subheading for the current slide.
  • To enable a Button, type a name into the Button label field and link it to another page with Button URL field.


Product to sell

  • Product item: Connect the slide with a product.
  • Show price: The product's price (including old price and main price) will be displayed on the slide.
  • Show product label: Circle tag with item's sale percent.
  • Customize popup content: Modify the text on the sale tag.

Custom Content

Using SVG to add advanced content.

  • SVG 1/2: Paste the SVG code.
  • Add an extra content for the icon with the Text for SVG 1/2 field.


Tickets arrangement tips:

The [+] tickets are used to modify and style the slide images.
Bring it to the top of the content section to apply for all slide images.
To apply for a single slide, drag the [+] ticket down below that one.


[+] Content wrapper

To adjust the text block position, click Add content > create a [+] Content wrapper.


  • Text block position: Insert the values in order of "Left : Top"
  • For example: 0% : 50%, 50% : 15% 

→ Arrangement on desktop: Left side 0%, Top 50% (center).

→ Arrangement on mobile: Left side 50% (center), top 15%.

  • Text Alignment: Left/ center/ right.


[+] Paragraph

Modify the text 1 and text 2 from the Slide image ticket.

  • You can change the font size, font weight, color, margin, line height and Animation for each text.


[+] Button

To adjust the button which exists on the slide, click Add content > create a Button ticket.

  • You are allowed to change its font size, font weight, colors, border, padding, rounded corners and Animation.


[+] Product

To adjust the product's prices, click Add content > create a Product ticket.

  • Modify the price Margin: insert values in order of Top Right Bottom Left.
  • Prices settings: Main price and old price styles changing:
  • Price color
  • Font size
  • Font weight
  • Sale label settings
  • Sale label position: Insert the values in order of "Left : Top"

For example: 54% : 20%, 85% : 75% 

→ Arrangement on desktop: Left side 54%, Top 20%.

→ Arrangement on mobile: Left side 85%, top 75%.

  • You can also set the sale tag's width, font size, font weight, background and text color.


[+] SVG Content

To adjust the SVG display, click Add content > create a SVG Content.

The elements that you are able to edit are:


Animation field lets you give animations to the content, choose one action from the drop-down box. To set the timing, insert the values in Animation settings in order of delay time (ms) | duration (ms).

  • For example: Text 1 Animation - slideInDown, settings - 500 | 1000

→ Text appears from the top, slides down with a delay time of 500ms and takes 1000ms to finish the action.



How to insert values for your theme.