# 3.5. Shape

The **Shape** utility is a versatile tool designed to help users create and present content in a creative and visually engaging way. With diverse features such as **Social logo, Pattern, Background, Arrow**s and **Icons,** this tool empowers you to produce professional and eye-catching designs.

## **1. Add Video to the Landing Page** <a href="#id-1.-add-video-to-the-landing-page" id="id-1.-add-video-to-the-landing-page"></a>

* Click on **Widgets** in the sidebar of the editor.
* Select **Video** from the **Media** section.
* Choose the **Video** element and drag it onto your landing page

<figure><img src="/files/KmTBaSIviSUv4x0NYQST" alt=""><figcaption></figcaption></figure>

## 2. Shape Editor

### 2.1. Change shape

To change a **Shape** to fit your design, click on the **Shape** you want to edit on the screen ⇒ Select **Change Shape** from the quick settings toolbar.

<figure><img src="/files/o7bx6DlZo8Q8QC75NIKI" alt=""><figcaption></figcaption></figure>

A **Shape manager** popup will appear on the screen, showcasing a variety of shape options:

* **Socials**: A collection of social media platform icons such as Facebook, Instagram, LinkedIn, Messenger, YouTube, Zalo, Spotify, Telegram, and many others.
* **Pattern**: A selection of decorative patterns, lines, and geometric shapes to add highlights to your design.
* **Background**: A collection of simple and aesthetically pleasing decorative background patterns to create distinct spaces for main content.
* **Arrows**: A range of arrow icons in various styles to guide or emphasize specific content.
* **Icons**: Small illustrative icons that quickly and intuitively convey information.

<figure><img src="/files/YBQhtfy9obuVkuQClYPl" alt=""><figcaption></figcaption></figure>

### 2.1. Content Editor

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

<figure><img src="/files/25mlf3zRDyI8XLwYqdjH" alt=""><figcaption></figcaption></figure>

The **Custom** **Shape** feature allows users to edit Shapes in detail using **SVG (Scalable Vector Graphics) code**. This enhances design flexibility and supports the creation of unique shapes tailored to your specific requirements and creative ideas.

### 2.2. Design Editor

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

<figure><img src="/files/W4dMG7qAQj6h3LcudceR" alt=""><figcaption></figcaption></figure>

* **Align:** Helps you align the **Shape** within its container. For more information, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Sizes:** Adjusts the size of the **Shape**, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on:** Determines which devices the **Shape** will be displayed on, including Desktop and Mobile.
* **Styles:** Allows you to change the background color and shadow effects of the selected **Shape**, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **Border:** Allows you to add and customize the border around the **Shape**, and you can also adjust the roundness of the corners, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).

### 2.3. Advanced Editor

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

<figure><img src="/files/TMNrozdDeMnC2whMzSZ9" 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 **Shape** 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/media-widgets/shape.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.