Slideshow
Slideshow is a dynamic module that displays key products, promotions, announcements, or brand information through a combination of images, videos, text, and buttons. It is an ideal choice for visually appealing areas on the page, which can effectively enhance the user experience and convey content visually.
(I) Basic Settings
Height Setting
Desktop height setting: There are two options: Fill and Custom. Select Fill to adapt the height of the slideshow according to the size of the uploaded image. Select Custom to manually drag the slider to define the height of the slideshow, with a minimum size of 600px and a maximum size of 1200px. This is for setting the height of the slideshow on the desktop.
Mobile height: There are two options: Fill and Custom. Select Fill to adapt the height of the slideshow according to the size of the uploaded image. Select Custom to manually drag the slider to define the height of the slideshow, with a minimum size of 420px and a maximum size of 1000px. This is for setting the height of the slideshow on the mobile.
Automatic carousel: Enable automatic carousel, and the carousel images will play automatically.
Carousel interval: Manually drag the slider to set the carousel interval time, with a minimum of 4s and a maximum of 15s.
1. Slide
Type: Select the corresponding type according to the uploaded image or video.
Image: Upload or change the image. It is recommended to use high-resolution images.
Mobile images: Upload or change the image. It is recommended to use high-resolution images. Set separate uploaded images for mobile devices to ensure the display effect. If no separate image is uploaded for mobile devices, the desktop image will be used by default.
Color scheme: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc. Different color schemes can be set for different slideshows.
(1) Group
Horizontal alignment: Select the horizontal alignment of the button in the slideshow: Left-aligned, Center-aligned, Right-aligned.
Vertical alignment: Select the vertical alignment of the title, text, and button in the slideshow: Top-aligned, Center-aligned, Bottom-aligned.
Interval: Manually drag the slider to set the spacing between various elements, with a minimum of 0px and a maximum of 100px.
Maximum width of the content area: Manually drag the slider to set the percentage of the content area width, with a minimum of 0% and a maximum of 100%.
Filling
Manually drag the slider to adjust the margins of the top, bottom, left, and right of the content area, with a minimum of 0px and a maximum of 200px.
1.1 Title
Text content: Enter the title of the slideshow.
Heading size: Set the size of the title (Small, Medium, Large, Extra Large, Maximum).
Color: Can be set to any of the body text, title, or block title colors. Flexible color settings to present diverse display effects.
Whether to use artistic fonts: When enabled, the title will use artistic fonts.
Alignment: Select the text alignment: Left-aligned, Center-aligned, Right-aligned.
Filling: Manually drag the slider to adjust the margins of the top, bottom, left, and right, with a minimum of 0px and a maximum of 100px.
1.2 Text
Text content: Enter the description of the slideshow content.
Size: The display size of the text, manually drag the slider to adjust the text size, with a minimum of 0.8 and a maximum of 3.
Color: Can be set to any of the body text, title, or block title colors. Flexible color settings to present diverse display effects.
Alignment: Select the text alignment: Left-aligned, Center-aligned, Right-aligned.
Filling: Manually drag the slider to adjust the margins of the top, bottom, left, and right, with a minimum of 0px and a maximum of 100px.
1.3 Button
Button text: Enter the content of the button.
Link: Select the link address to jump to when the button is clicked.
Whether to open a new tab: Enable this option, and clicking the button will open a new page.
Style: You can choose the corresponding button style. There are four styles available: Primary Button, Secondary Button, Arrow Button, and Link. For Primary Button, Secondary Button, and Arrow Button, there are three button sizes: Large, Medium, and Small. You can adjust the display style and size of the button according to different scenarios.
Last updated