Salta ai contenuti

Separatore

Crea spaziatura reattiva tra i blocchi, con una linea di separazione opzionale per distinguere meglio i contenuti.

Usa il blocco Separator per aggiungere più respiro tra contenuti vicini o per inserire un semplice divisore tra due parti di una pagina. Funziona bene quando un layout richiede un ritmo più pulito, una separazione più chiara o spaziature diverse su desktop e mobile. Vedi il Separatore per i dettagli sulle impostazioni.

Per una panoramica più ampia sul funzionamento dei blocchi nell’editor, vedi la documentazione Shopify su sezioni e blocchi

Le impostazioni principali controllano due aspetti: quanto spazio aggiunge il blocco e se quello spazio include una linea visibile.

Imposta l’altezza di desktop e mobile separatamente per mantenere una spaziatura comoda sugli schermi più grandi senza far sembrare quelli più piccoli troppo distesi. Nella maggior parte dei layout, la spaziatura mobile trae vantaggio da un valore inferiore rispetto al desktop.

Lo stile della linea consente di scegliere tra spazio vuoto e un divisore visibile. Usa una linea quando vuoi separare tipi di contenuto diversi o segnalare una transizione più marcata, e usa None quando la sola spaziatura è sufficiente.

Il colore del separatore modifica il colore del divisore quando è abilitato uno stile con linea. Se lasci il colore trasparente, il blocco usa il colore del bordo del tema, che di solito è il modo più semplice per mantenere il separatore visivamente coerente.

Usa i controlli di visibilità per mostrare questo blocco su tutti i dispositivi oppure nasconderlo su desktop o su mobile. Questo è particolarmente utile quando vuoi schemi di spaziatura diversi per gli schermi più piccoli o quando un divisore migliora solo un layout. Vedi le impostazioni di visibilità.

  1. Regola ogni viewport. Controlla il separatore su desktop e mobile, poiché spaziatura, allineamento, visibilità e comportamento relativo ai media possono variare tra le diverse dimensioni dello schermo.
  2. Usa con attenzione la spaziatura mobile. Riduci prima l’altezza su mobile se la pagina sembra troppo ariosa sui dispositivi più piccoli.
  3. Mantieni, quando possibile, lo stile di fallback. Lascia il colore trasparente o usa valori predefiniti quando vuoi che il separatore si integri nello stile standard del tema.
  4. Fai valere le sovrascritture. Usa colori espliciti, gradienti o sovrascritture basate sui media solo quando vuoi che l’area del separatore risalti maggiormente rispetto ai contenuti circostanti.
  5. Usa le linee con intenzione. Aggiungi una linea di separazione solo quando ti serve una pausa visiva più forte di quella che la sola spaziatura può offrire.
  6. Aspettati un gap minimo. Non fare affidamento su un’impostazione di altezza pari a 0 per ottenere una spaziatura completamente a filo tra i blocchi.