Slideshow Customization

Modified on Fri, 25 Dec, 2020 at 11:16 AM

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.



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 at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article