# Blocks

Blocks are the building units of every page you create in Levo. Each block is a pre-built section — Navbar, Hero, Content, Contact Us, Footer, and more — designed so you can assemble a full webpage without writing a single line of code.

Every block category comes in multiple variations (Navbar 1, Navbar 2, Navbar 3, etc.), so you always have a starting point that fits your layout. Pick the one closest to what you need, customise the content and design to match your brand, and you're done — no developer needed, even for future updates.

#### Adding a Block

1. In Levo Studio -> click the **"+" icon** on the right side to open the **Add** **Block Panel**.

<figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2FRxJudAvx3DOGr5fElbP2%2Fimage.png?alt=media&#x26;token=81168ffe-27ab-4d4d-823f-1d5c4b5b58dc" alt=""><figcaption></figcaption></figure>

The Block Panel will be visible to you.

<figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2FCzbFYGZNir4DGHGEsrGc%2Fimage.png?alt=media&#x26;token=cad99987-3e50-44a4-afb8-34bdad001488" alt=""><figcaption></figcaption></figure>

All blocks are pre-optimised for responsiveness and design, removing the need to handle any technical complexities from your side.

You will see 2 tabs:

1. My Blocks
2. All Blocks

To use the block that you have used earlier, use "My Blocks". To use the base collection of blocks from Levo, use "All Blocks". We will dig deeper for "My Blocks" in this [section](#my-blocks).

For now, you can initially learn to add from "All Blocks" by going to that tab, choosing the category of your choice and clicking "Add Block" item.

<figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2FDDZXNX5Z0qbO3Q3y4YeU%2Fimage.png?alt=media&#x26;token=f418266f-851e-4460-a2a0-5e14eb9d5916" alt=""><figcaption></figcaption></figure>

This will add the chosen block at the end of the page or below your previously selected block in the page.

#### Edit Block Panel (aka Right Side Panel)

After adding a block in **Levo Studio**, you can customise it by clicking directly on the element in the block. This will open the **Edit Block Panel** on the right side of the screen.&#x20;

<figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2FbtJqGnkBeDbIUyctnxO5%2Fimage.png?alt=media&#x26;token=aa1884ff-c96a-49df-8336-b8acb720311a" alt=""><figcaption></figcaption></figure>

There you will see 3 tabs for:

1. **Content:** for adding or editing content like text, image, link etc.<br>

   <figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2FrTPOlLmUhuILJfIV2J0J%2Fimage.png?alt=media&#x26;token=5bb1dbb5-54db-426e-bbb1-f34175e42f8c" alt=""><figcaption></figcaption></figure>

2. **Styles:** for defining how your element, or wrapper of the element(s) will look \
   &#x20;

   <figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2FIuikSHdsIhSZ9HKGoMuF%2Fimage.png?alt=media&#x26;token=f7a9b5e0-01d0-4f6f-9672-ee8362fe0299" alt=""><figcaption></figcaption></figure>

3. **Animation:** to animate your element or section on Entry, Scroll or Hover<br>

   <figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2FWw11cvMTNGWY8rLg3xdV%2Fimage.png?alt=media&#x26;token=ae8d402a-7103-4d66-beb2-15963c84baea" alt=""><figcaption></figcaption></figure>

Now, you know the basics, so you can play around with it or jump on these detail guides on how to use it: *(to be linked)*

* [*How to edit the content of a Block?*](https://levo.gitbook.io/levo/levo-101/levo-studio/blocks/how-to-edit-the-content-of-a-block)
* [*How to style in Levo Studio?*](https://levo.gitbook.io/levo/levo-101/levo-studio/blocks/how-to-style-in-levo-studio)
* [*How to animate elements or sections?*](https://levo.gitbook.io/levo/levo-101/levo-studio/blocks/how-to-animate-elements-or-sections)

## My Blocks

My Blocks is your personal block library. Save any block once, then reuse it across as many pages as you need.

Here is the problem it solves: imagine your site has 50 pages, all sharing the same Navbar, Footer, and Testimonial section. Without My Blocks, updating the phone number in your Footer means opening all 50 pages and editing each one manually. With My Blocks, you change it in one place and every page updates instantly.

Access "My Blocks" from the tab next to "Add Block" in the right panel.

<figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2Fq8sMBTvBmznWTSU7WLgB%2Fimage.png?alt=media&#x26;token=6f5f9117-8e23-4003-bee0-1313b2778b5f" alt=""><figcaption></figcaption></figure>

**What is an instance?**

An instance is a placed copy of a saved block. There are two kinds:

* **Same instance** — the block stays linked across all pages. Edit it anywhere and it updates everywhere. Use this for content that must always be consistent: Navbars, Footers, announcement bars.
* **New instance** — an independent copy with no link to the original. Edit it freely without affecting any other page. Use this when you need a variation for a specific page.

**How to use it?**

Hover over any saved block in the My Blocks tab and you will see two options:

1. **Use this instance:** Hover over the block, and select "Use this instance." Any edits will automatically apply across every page using the same instance.\
   ![](https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2FvIu3NdquAR1RSi7cx5lc%2FIndia%20\(1\).gif?alt=media\&token=da7ae2c4-d2ce-4c3d-9904-be4b23c6ab61)\
   When a shared instance is on the canvas, the panel shows ***"This block is used in N pages".*** Hover over that message to see exactly which pages.\ <br>

   <figure><img src="https://2896098033-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30hPKLDSSleMsSAQQkJP%2Fuploads%2F64Tz1ZDHe1Znb29rhO64%2Fimage.png?alt=media&#x26;token=439a3ea0-eb68-4242-b9fd-33446505c614" alt=""><figcaption></figcaption></figure>
2. **Create a new instance:** adds an independent copy. Changes to this block stay isolated to the current page and do not affect the original or any other page using it.


---

# 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://levo.gitbook.io/levo/levo-101/levo-studio/blocks.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.
