← Torna alle funzionalità
Free

Righello pagina

Aggiunge righelli e guide trascinabili stile Photoshop.

Designer in Figma o Photoshop usano righelli e guide. Il Righello pagina porta questo nel browser.

Anteprima dal vivo
example.com/design Ruler: ON
0
50
100
150
200
250
300
350
400
450
500
550
600
650
700
0
50
100
150
200
250
y: 80px
x: 200px
y: 200px
120px
Caratteristiche principali

Righelli pixel superiore e sinistro

Righelli precisi con tacche ogni 50 pixel.

Guide trascinabili

Trascina dal righello per creare guide con coordinate precise.

Misurazione distanza automatica

Distanza tra guide parallele calcolata automaticamente.

Guide codificate per colore

Orizzontali blu, verticali rosse.

Sovrapposizione non intrusiva

Non influenza DOM o layout.

Guide illimitate

Posiziona quante guide vuoi.

Casi d'uso comuni

Verifica implementazione mockup

Posiziona guide e verifica misure mockup.

Spaziatura coerente

Verifica spaziatura uniforme tra elementi.

Verifica allineamento

Usa guide verticali per verificare allineamento.

Misurare dimensioni

Due guide per misurare larghezza o altezza.

Verifica breakpoint

Guide ai breakpoint comuni per verificare responsive.

Come usare
1

Attiva il Righello

Apri dock e clicca icona.

2

Trascina le guide

Trascina dal righello per posizionare guide.

3

Leggi misurazioni

Ogni guida mostra posizione. Distanze tra guide sono automatiche.

4

Sposta o rimuovi

Trascina per riposizionare, doppio clic per rimuovere.

5

Disattiva

Clicca di nuovo icona per nascondere.

Pronto a provare? Righello pagina?

Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.

Aggiungi a Chrome Aggiungi a Edge Aggiungi a FireFox