Slideshow Customization

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

TABLE OF CONTENTS

• 1 - Settings
• 2 - Content
  • Slide image
  • [+] Content wrapper
  • [+] Paragraph
  • [+] Button
  • [+] Product
  • [+] SVG Content
  • Animation field

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:

• Color
• Font size
• Font weight
• Margin
• Animation 

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.