ShopOne
English
English
  • WELCOME TO SHOPONE
  • I. OVERVIEW OF LANDING PAGES
    • 1. Overview
    • 2. What is a Landing Page?
    • 3. The Difference Between a Website and a Landing Page
    • 4. Types of Landing Pages
    • 5. Designing an Impressive Landing Page
  • II. INSTRUCTION FOR CREATING A LANDING PAGE FROM A TO Z
  • III. CREATING A LANDING PAGE WITH SHOPONE
    • 1. Dashboard Page
      • 1.1. Switching Workspaces
      • 1.2. Notifications
      • 1.3. Language
      • 1.4. Create a New Landing Page
      • 1.5. Search for Landing Page
    • 2. Actions with Landing Page
      • 2.1. View Landing Page Details
      • 2.2. Backup Data
      • 2.3. Landing Page Editor
      • 2.4. Rename
      • 2.5. Duplicate
      • 2.6. Export file
      • 2.7. Delete
    • 3. Features in the Dashboard
      • 3.1. Template
      • 3.2. Form Data
      • 3.3. Domains
      • 3.4. Settings
      • 3.5. Account
  • IV. Domain Setup
    • 1. Definition of a Domain
    • 2. Connecting your domain on ShopOne
      • 2.1. Connecting your domain to the ShopOne Cloud DNS platform
      • 2.2. Connecting your domain to the WordPress platform
    • 3. Pointing your domain to ShopOne
      • 3.1. Pointing your domain to ShopOne
      • 3.2. Check DNS
    • 4. Pointing a domain from some popular domain providers
      • 4.1. Pointing a domain from GoDaddy
      • 4.2. Pointing a domain from PA Viet Nam
      • 4.3. Pointing a domain from Nhan Hoa
      • 4.4. Pointing a domain from NameCheap
      • 4.5. Pointing a domain from Mat Bao
      • 4.6. Pointing a domain from Name.Com
      • 4.7. Add a domain to CloudFlare
      • 4.8. Pointing a domain from CloudFlare
  • V. BASIC SETUP TOOLS FOR THE LANDING PAGE
    • 1. Top Bar
      • 1.1. Save
      • 1.2. Preview
      • 1.3. Publish
      • 1.4. Help: Keyboard shortcuts
      • 1.5. Undo and Redo
      • 1.6. Choose Interface
    • 2. Sidebar
      • 2.1. Layers
      • 2.2. Popups
      • 2.3. Widgets
      • 2.4. Section
      • 2.5. Page background
      • 2.6. Settings
    • 3. Quick Setup Bar
      • 3.1. Content Editor
      • 3.2. Design Editor
        • ID CSS
        • Align
        • Size
        • Display on
        • Styles
        • Typography
        • Border
      • 3.3. Advanced Editor
        • Event
        • Animation
        • Desktop/Mobile sync design
        • Position type
        • Custom advance
      • 3.4. Duplicate
      • 3.5. Move
      • 3.6. Delete
      • 3.7. Help
  • VI. BASIC ELEMENTS
    • 1. Section
    • 2. Basic Widgets
      • 2.1. Text
      • 2.2. Button
      • 2.3. Container
    • 3. Media Widgets
      • 3.1. Image
      • 3.2. Slider
      • 3.3. Gallery
      • 3.4. Video
      • 3.5. Shape
    • 4. Business Widgets
      • 4.1. Forms
      • 4.2. Auto Number
      • 4.3. Countdown
      • 4.4. Lucky spin wheel
      • 4.5. Notify
    • 5. Advanced Widgets
      • 5.1. Accordion
      • 5.2. Tabs
      • 5.4. HTML Code
  • VII. TRACKING AND MEASURING THE LANDING PAGE
    • 1. Setting up SEO & Social page descriptions
    • 2. Tracking and Conversion Code
      • 2.1. Instructions for installing Facebook Pixel on a Landing Page
      • 2.2. Instructions for installing TikTok Pixel
      • 2.3. Instructions for installing Google Analytics on a Landing Page
      • 2.4 Instructions for installing Google Ads code on a Landing Page
      • 2.5. Instructions for adding Google Tag Manager code on a Landing Page
  • VIII. EXTENDED FEATURES
    • 1. Instructions for creating a "Call Now" button or linking to a Contact Page
    • 2. Instruction for changing Landing page design mode from Mobile Only to Responsive
    • 3. Animation page
      • 3.1. Snow Animation
      • 3.2. Firework Animation
Powered by GitBook
On this page
  • 1. Add Slider to the landing page
  • 2. Slider Editor
  • 2.1. Content Editor
  • 2.2. Design Editor
  • 2.3. Advanced Editor
  1. VI. BASIC ELEMENTS
  2. 3. Media Widgets

3.2. Slider

Previous3.1. ImageNext3.3. Gallery

Last updated 4 months ago

The Slider widget is a tool that allows you to display a series of images, videos, or content in a horizontal or vertical sliding format. This is an effective way to capture users' attention and present a lot of information in a limited space.

1. Add Slider to the landing page

  • Click on Widgets in the sidebar of the editor.

  • Select Slider from the Media section.

  • Choose the Slider element and drag it onto your landing page.

2. Slider Editor

2.1. Content Editor

To access the Content Editor, click on the Slider widget you wish to modify on the screen and select Content from the quick settings bar.

  • Click "+ Add" to add a new slider element.

  • Click and drag to move slider elements.

2.2. Design Editor

To access the Design Editor, click on the Slider widget you wish to modify on the screen and select Design from the quick settings bar.

  • Display on: Allows you to control the display of the Slider on different devices, including Desktop and Mobile.

  • Slider settings: Allows you to customize settings related to the display and functionality of the slider.

    • Transition Direction: Determines the movement direction of the slides during transitions: left to right, right to left, bottom to top, top to bottom.

    • Transition Duration: Adjusts the time for the transition effect between slides.

    • Perview: Determines the number of slides displayed simultaneously in the slider's viewport.

    • Spacing: Adjusts the spacing between slides.

    • Infinite loop: Allows the slider to automatically repeat when it displays the last slide.

    • Autoplay: Automatically runs the slider without user interaction.

    • Time on each item: Sets the display time for each slide before moving to the next slide (only applies when Autoplay is enabled).

    • Gap: Sets the distance between slides in the slider.

  • Thumbnails: Displays small preview images below or next to the default slider, allowing users to preview and select the slide they want to view.

    • Enable: Displays thumbnails in the slideshow.

    • Perview: Specifies the number of thumbnails displayed simultaneously in the thumbnail area.

    • Vertical: Sets the orientation of thumbnails (vertical or horizontal).

    • Loop: Allows thumbnails to loop as users scroll or navigate through them.

    • Spacing: Adjusts the gap between thumbnails.

    • Width: Adjusts the width of the thumbnails.

  • Dots: Help users identify the number of slides and which slide is currently being displayed in the slider.

    • Enable/Disable: Allows you to turn the dot indicators on or off. When disabled, the dots will not be shown.

    • Basic: Customize general settings for the basic, unselected dot indicators.

      • Width: Adjust the width of the dots (unit: px). Increase or decrease the size to fit your design.

      • Height: Adjust the height of the dots (unit: px) to ensure balance with the slider's interface.

      • Background: Select a background color for the dots. You can use a color palette or input a custom color code.

      • Border: Customize the border and corner radius of the dots.

    • Selected: Allows customization of general settings for the selected dot indicator.

      • Background: Select a background color for the dots. You can use a color palette or input a custom color code.

      • Border: Customize the border and corner radius of the dots.

  • Button: Enable/disable and customize the navigation buttons (left/right) for the slider.

2.3. Advanced Editor

To access the Advanced Editor, click on the Slider you wish to modify on the screen and select Advanced from the quick settings bar.

Click the icon on each slide to access settings: Duplicate, Set as default, Rename, Content, Delete.

Align: Helps you align the Slideshow within the container, see details .

Sizes: In the design editor, allows you to adjust the size and position of elements on the website, see details .

Styles: Customize the background color and shadow effects for the entire slider or specific slides within it, see details .

Border: Allows you to add and customize the border around the Slider, and you can also adjust the border radius, see details .

Animation: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively, see details .

Desktop/Mobile sync design: Allows you to set synchronization options for the design between desktop and mobile, see details .

Position type: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users, see details .

Custom advance: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code, see details .

here
here
here
here
here
here
here
here