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. V. BASIC SETUP TOOLS FOR THE LANDING PAGE
  2. 3. Quick Setup Bar
  3. 3.3. Advanced Editor

Event

Previous3.3. Advanced EditorNextAnimation

Last updated 4 months ago

Events allow you to add interactive actions to components on the page, such as buttons, images, and text blocks. These events can make your page more dynamic and engaging while enhancing the user experience.

1. Choose events:

  • On click: The event that occurs when a user clicks on the element.

  • On hover: The event that occurs when a user hovers the mouse pointer over the element.

2. Set up actions when the event occurs:

  • Change Color: Changes the color of the element when the event occurs.

    • Targets: Options to change the color of the text, background color, or border color.

  • Open Popup: Displays a popup window with information or a form.

    • Targets: Options to select the popup and the effect for the popup appearance.

  • Close Popup: Closes an currently open popup window.

    • Targets: Options to select the popup and the effect for closing the popup.

  • Scroll To: Automatically scrolls the page to a specific element.

    • Targets: Options to select the section to scroll to.

  • Open Link: Opens a specific link when the user interacts with the element.

    • Targets: Options to select the target link and choose how to display it: in the same site or in a new window.

  • Hide/Show element: Show/Hide a specified element.

    • Target: Enter the ID of the element to be hidden or displayed when the event is triggered.