Tilda Helper — Chrome Extension for Tilda Block IDs
Trace Logo's GitHub
Skip to content

Tilda Helper / extension for the Tilda website builder / Chrome / 1.1.0

Here’s your ID.
Keep going.

Copy block IDs and selectors, manage layers and check responsive layouts right inside the Tilda editor.

Download Tilda Helper
TMy site / Home↶　↷　▥　⚙Publish
SettingsContentCR01
Digital design studioWe design.
We build.
We launch.Discuss a project ↗
SettingsT123
Code runs after publishing<style>
　#rec845210 { z-index: 10; }
</style>
Editor diagram — click the block ID.

No need to open settings.

Drag the divider: the ID appears on the block and copies with one click.

Home / Editing
Our next projectStarts
with this block.
With the helper
Home / Editing
Our next projectStarts
with this block.
Block settings
Block ID #rec845210
Without the helper
Neighboring blockBelow?
Above?
#rec845210You
decide.

Raise
the right layer.

Change the Z-index and the block moves; in Tilda the value is stored through a service T123 block.

#rec845210 { z-index: 10; }Demo: try 0 and 10. Not available for T1093.

See it on
three screens.

Scroll any screen: multi-preview shows the published page on tilda.ws, scrolling in sync.

Desktop / 1201 px
Design studioMaking
the next
step.
ProjectForm
and meaning.
Shall we talk?
Tablet / 959 px
Design studioMaking
the next
step.
ProjectForm
and meaning.
Shall we talk?
Phone / 360 px
Design studioMaking
the next
step.
ProjectForm
and meaning.
Shall we talk?
Interactive diagram. In the extension, publish the page first.

Your block.
Your code.

Copy the ID for CSS and the T123 contents with the button next to the code preview.

T123 / HTML code
<style>
#rec845210 {
  z-index: 10;
}
</style>

Get back
to creating.

Install Tilda Helper from the unpacked folder and reload the editor.

Download Tilda Helper

Install in Chrome

Download the archive with the button above and unzip it.

  1. Open .
  2. Turn on “Developer mode”.
  3. Click “Load unpacked” and choose the unzipped folder.

Tilda Helper FAQ

How do I copy a block ID in Tilda?

Hover over a block in the editor: next to the “Settings” and “Edit block” buttons a badge with the ID, like #rec845210, appears. Click it to copy the ID to the clipboard.

How do I change a block’s Z-index in Tilda?

A Z-index field appears in the block settings. The value is saved in a service T123 block right under it, so you don’t have to edit code by hand.

How do I preview a Tilda page on three screens at once?

Multi-preview opens the published page in three windows, including a 1201 px desktop, and scrolls them in sync. It checks the published version.

Why does multi-preview show old changes?

It opens the published page. Save, publish, then open multi-preview again.

Is there a typography tool for text in Tilda?

Yes, a separate extension — Trace Typograf: it sets non-breaking spaces, dashes and guillemets in text fields in Taptop and Tilda.

Where does the extension work?

In the page, projects and zero editors on tilda.ru and tilda.cc; multi-preview works on tilda.ws.

Why does it need clipboard access?

The clipboardWrite permission is needed to copy IDs, CSS classes, anchors and code.

Is it free, and how do I install it?

Free, pay what you want. The extension is installed from the archive in developer mode (steps are in the “Install in Chrome” block). Tilda Helper is an independent extension, not an official Tilda product. More free tools are in the Tools section.