# 2.1. Text

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

<figure><img src="/files/wh30RwHj2jIMiPqr3L0V" 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="/files/94ZMWFV0uiKFWdADg2ax" 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="/files/IJTqJYVjyn0RxHGIqUQ6" 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="/files/5uHCuoXCHbsDXmGwj0Ey" 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>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align.md).
* **Sizes:** Adjust the size of the text container, including width and height. For more information, see details [<mark style="color:blue;">**here**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size.md).
* **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>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles.md).

### 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="/files/KhFxIkFoNtXpOVkSE6um" 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shopone.io/english/basic-elements/basic-widgets/text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.