> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-elements/media-widgets/shape.md).

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