# 2.1. Text

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

<figure><img src="https://content.gitbook.com/content/cZrhJDsqJxZMsvuaSaiJ/blobs/NSlc3XBFTuA5tBsgGRfn/image.png" alt=""><figcaption></figcaption></figure>

## **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.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FvS8d34KUpz26cLgZ7ofb%2Fimage.png?alt=media&#x26;token=c5fe2d8a-939d-4dd6-9c53-6d1af54102a7" alt=""><figcaption></figcaption></figure>

* 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.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FnBEnNLZAF24DBh1Nosx7%2Fimage.png?alt=media&#x26;token=5c4394e2-d02c-4dca-b96e-c8d782520291" alt=""><figcaption></figcaption></figure>

* **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.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FrujLIhwSwKScniaclX9x%2Fimage.png?alt=media&#x26;token=cd920bee-c8d8-43f4-b4f2-affd4a902564" alt=""><figcaption></figcaption></figure>

* **Align:** Align the entire text content to the left, right, center, or justify within the containing element. For more information, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Sizes:** Adjust the size of the text container, including width and height. For more information, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on:** Choose the devices on which the text will be displayed (Desktop, Mobile).
* **Styles:** Allows you to change the background color of the selected text. For more information, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).

### 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.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FYA1ztByf0GLILImJ3Eiw%2Fimage.png?alt=media&#x26;token=bcd73601-ee15-45d9-acf2-46d88bfdb43b" alt=""><figcaption></figcaption></figure>

* **Events:** Allows you to set events for click or hover actions on the widget, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/event).
* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively., see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).