Skip to main content
All CollectionsGetting started
Introduction to Blocks
Introduction to Blocks

Learn how to use, move, and customize blocks for your website. Master the Layers panel and create reusable blocks with ease.

Jozef Pokrivcak avatar
Written by Jozef Pokrivcak
Updated over 3 months ago

Understanding Blocks

Blocks are the foundational sections of your website. They are instantly adaptable across all screen sizes, robust and unbreakable by design, and equipped with an integrated tracking layer for analytics. With one-click publishing, what you design is exactly what you get live on your site.

Introduction to our Block Library

Our Block Library is continuously expanding, with new additions every week. The library includes a search feature for easy block discovery.

  • To add a block, simply drag and drop it onto the canvas or directly into the website frame.

  • Clicking on a block's name will automatically add it as the last block in your website frame.

Note: You can also add new blocks by clicking “Add block” button located at the bottom of each block in the Website frame.

Moving Blocks on the Canvas

To attach a block, drag it towards the website frame. When the desired location is highlighted, drop it there.

To detach a block, drag it away from the website frame. The block's name will appear, allowing you to modify different breakpoints.

To reorder blocks, use the violet handle on the left side of the selected block to drag and drop it to a new position.

Layers Panel Capabilities

The Layers Panel is divided into multiple sections:

  • Page Layer:

    • Clicking the target button zooms you directly to the selected page, note, or image, regardless of your current canvas position.

    • Click the arrow to expand and begin working with your block.

    • More settings include copying, bringing the block forward/backward, and deleting.

  • Blocks Layer:

    • Drag and drop blocks to move them within the website frame.

    • Click the arrow to expand and start working with block elements.

    • Double-click the block's name to rename it.

    • More settings include duplicating, making a reusable block, and deleting.

  • Elements Layer:

    • Click the eye icon next to an element's name to hide/unhide it.

    • Click the "+" sign to add another instance of the element to the block.

    • Some elements contain additional layers—unwrap them to customize further.

    • Use quick actions to add a nested element or delete an element.

Reusable Blocks

You can save blocks as templates for future use. Click on the block options in the Layers panel and select "Make Reusable." To reuse the block, go to the block picker, select the "Components" category, and find your block.

To edit a reusable block, click "Edit" directly on the block in the canvas. Once satisfied with your edits, publish your changes.

All instances of the block on your website, including published ones, will update automatically.

If you prefer to use the block as a template without affecting the original, click more options (three dots next to the block's name) and then "Detach" to create an independent instance.

Did this answer your question?