> 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-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type.md).

# Position type

In Landing Page design, positioning styles such as **Default**, **Pinned**, and **Sticky** play a crucial role in optimizing user experience and enhancing the page's effectiveness. Below is an explanation of each style and its applications:

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

**1. Default**

**How it works:** Elements appear naturally according to the standard HTML/CSS flow.

**Applications in Landing Pages:**

* Used for basic content like text, images, or information blocks.
* Most of the content on a Landing Page utilizes this style for neat and manageable layouts.

**Examples:**\
&#x20;     **-** Product or service descriptions.\
&#x20;     \- Introductory images or supplementary content blocks (e.g., testimonials).

**2. Pinned (Fixed)**

**How it works:** The element remains fixed at a specific position on the screen and does not move when the user scrolls.

**Applications in Landing Pages:**

* **Fixed Navigation Bar:** A menu that stays visible at the top or bottom of the screen for easy navigation.
* **Fixed Call-to-Action (CTA):** Buttons like "Sign Up Now" or "Buy Now" that are always accessible for interaction.
* **Quick Contact Form:** A small form fixed at the corner of the screen for quick customer access.

**Examples:**\
&#x20;     **-** A "Sign Up Now" button fixed at the bottom-right corner of the screen.\
&#x20;     \- A contact icon (e.g., phone or chat) that remains static.

**3. Sticky**

**How it works:** The element "sticks" to a position as the user scrolls past it, but only within a specific section of the page.

**Applications in Landing Pages:**

* **Sticky Header:** A header or main menu that stays visible as users scroll, ensuring easy access to other sections of the page.
* **Sticky Table of Contents:** Useful for long content, allowing users to quickly navigate to different sections.
* **Sticky Call-to-Action (CTA):** A button or promotional information that follows the user while scrolling to maintain visibility.

**Examples:**\
&#x20;     **-** A navigation bar that remains visible after scrolling past the top section of the page.\
&#x20;     \- A pricing table header that stays fixed while scrolling through the pricing details.