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 an Accordion to your landing page:
  • 2. Accordion Editor
  • 2.1. Content Editor
  • 2.2. Design Editor
  • 2.3. Advanced Editor
  1. VI. BASIC ELEMENTS
  2. 5. Advanced Widgets

5.1. Accordion

Previous5. Advanced WidgetsNext5.2. Tabs

Last updated 4 months ago

Accordion is an advanced widget in landing page design that allows you to organize content in an expandable/collapsible format. This feature helps users view information in a clean and organized manner without cluttering the interface.

1. Add an Accordion to your landing page:

  • Click on Widgets in the sidebar of the editor.

  • Select Accordion from the Advanced section.

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

2. Accordion Editor

2.1. Content Editor

To add content to Accordion items:

  1. Select the Accordion element.

  2. Click on Content in the quick setup bar to open the Accordion content editor.

  3. Click on the item where you want to add content, then drag the necessary elements such as Text, Image, Button... into the content area of the Accordion element.

To manage and add items in Accordion:

  1. Select the Accordion element.

  2. Click on Content in the quick setup bar to open the Accordion content editor.

  3. Choose the action you want to perform on the Accordion item: Collapse, Duplicate, Rename, or Delete.

Tip:

  • Click +Add at the end of the Accordion list to add a new empty item.

  • You can change the order of the items. Click and hold the item you want to move, then drag it to the desired position.

To choose how the Accordion expands and collapses:

  1. Select the Accordion element.

  2. Click on Content in the quick setup bar to open the Accordion content editor.

  3. Choose an option in the Choose the default state:

    • All items closed: Visitors will see the Accordion items initially closed and can select the item they want to open for more details.

    • First items opened: Visitors will see the content of the first item, while the other items remain closed.

    • First items opened: Visitors will see the content of all items as soon as the page loads.

  4. Click the toggle button Allow multiple open items:

    • On: Visitors can open multiple items at once.

    • Off: Visitors can only open one item at a time.

  5. Apply transition effects:

    • Yes: Visitors can see a transition effect (fast/slow) when selecting different items.

    • No

Note: The option to allow multiple items to open in the Accordion will not be available if you select Open all items as the default state.

2.2. Design Editor

You can customize every part of the Accordion to match the design of your page. Customize the titles of the items, the content container of each item, or the entire space of an item (including both the title and the container).

To design the Accordion:

  1. Select the Accordion element.

  2. Click on Design in the quick setup bar to open the Accordion design editor.

  3. Edit the Accordion as desired in the Design popup.

Detailed guide for the sections in the Design popup:

2.3. Advanced Editor

You can set up advanced features for the Accordion to create a unique experience that suits the specific needs of your project.

To set up advanced Accordion settings:

  1. Select the Accordion element.

  2. Click on Advanced in the quick setup bar to open the Accordion advanced editor.

  3. Set up the Accordion as desired in the Advanced popup.

Hover over the item you want to edit and click the Settings icon .

Align: Helps you align the Accordion element within its container. See details .

Size: Allows you to adjust the size of the Accordion element on the webpage. See details .

Display on: Enables you to control how the Accordion element is displayed on different devices (Desktop and Mobile).

Style - Background: Allows you to customize the background color of the Accordion element to your preference. - Box shadow: Lets you add a shadow around the Accordion element.

General - Header: Allows you to customize the background color of the header part of the Accordion items, adjust the icon (type, position, color, size...), and the title (font, color, size...). - Collapse: Lets you customize the background color of the displayed content section.

Boder: Lets you add and customize the border around the Accordion. 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