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 Text to the Landing Page
  • 2. Text Editor
  • 2.1. Content Editor
  • 2.2. Design Editor
  • 2.3. Advanced Editor
  1. VI. BASIC ELEMENTS
  2. 2. Basic Widgets

2.1. Text

Previous2. Basic WidgetsNext2.2. Button

Last updated 4 months ago

In landing page design, using Text effectively is crucial for conveying information clearly and engagingly to the viewers.

1. Add Text to the Landing Page

  • Click on Widgets in the sidebar of the editor.

  • Select Text from the Basic section.

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

  • You can choose Heading, Title, or Paragraph for your landing page.

    • Heading: This is the most important text, usually the main title of a section or page. It is used to grab the reader's attention.

      • Use H1 (Main Title) for the primary title of the page; each page should only have one H1 to clearly define the main topic of the page.

      • Use H2 (Subheading) for the main sections within the content, helping to divide the content into manageable parts.

      • Use H3-H6 (Subheadings) to further break down sections in the content if necessary.

    • Titles (Subheadings): These are subheadings or other important sections that help break down the content into more readable parts.

    • Paragraphs: These are the main content of the page, consisting of text paragraphs to convey detailed information.

2. Text Editor

You can edit the text content of elements such as headings, paragraphs, buttons, or any other text components on your landing page.

2.1. Content Editor

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

  • Enter or edit the text content: Change the content, font, size, color, and text formatting.

  • Use formatting tools: Alignment, bold, italic, underline, etc.

    • Font Weight: Allows you to adjust the thickness of the font, from the lightest to the boldest font style.

    • Text Transform: Used to change the text display style, such as converting all text to uppercase, lowercase, or capitalizing only the first letter.

    • Text Shadow: Creates a shadow effect for the text, making it more prominent and adding depth.

    • Font Style: Adjusts the text style between italic and normal.

    • Text Decoration: Adds decorations to the text, such as underline, strikethrough, or no decoration.

    • Font Family: Choose the font for the text from the list of available fonts.

    • Font Size: Adjust the text size in pixels or centimeters.

    • Color: Choose a color for the text.

    • Alignment: Align the text in positions such as left, right, center, or justify.

    • Letter Spacing: Adjust the spacing between characters in the text.

    • Line Height: Adjust the spacing between lines of text in a paragraph.

    • Ordered List: Create a numbered list where the items are numbered sequentially.

    • Bullet List: Create an unordered list where items have bullet points.

    • Text Direction: Set the text display direction from left to right or from right to left.

    • Indent: Add indentation to the beginning of a paragraph.

    • Outdent: Reduce the indentation at the beginning of a paragraph.

    • Heading: Select heading levels from H1 to H6 to apply to the text.

2.2. Design Editor

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

  • Display on: Choose the devices on which the text will be displayed (Desktop, Mobile).

2.3. Advanced Editor

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

Align: Align the entire text content to the left, right, center, or justify within the containing element. For more information, see details .

Sizes: Adjust the size of the text container, including width and height. For more information, see details .

Styles: Allows you to change the background color of the selected text. For more information, see details .

Events: Allows you to set events for click or hover actions on the widget, 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