Layout a riquadro/linea/colonna

In WebAcappella, l’organizzazione degli elementi segue una struttura precisa:

  • I riquadri sono i contenitori principali che strutturano la pagina.

  • Le linee si inseriscono direttamente nelle caselle, consentendo un’organizzazione orizzontale.

  • Le colonne sono elementi come tutti gli altri (testo, immagine, pulsante) e devono essere trascinate in una riga per organizzare il contenuto in verticale.

Questa gerarchia consente di progettare layout di pagina flessibili e adattivi.

Legenda colori

Nell’interfaccia di WebAcappella, ogni elemento che struttura la pagina è rappresentato da un colore specifico:

  • Marrone per le scatole.

  • Rosa per le linee.

  • Verde per le colonne.

Quando un elemento viene selezionato, è circondato da un bordo dello stesso colore.

Cattura che illustra i colori degli elementi e la loro inquadratura sulla selezione

Creare una nuova pagina

  1. Creare una nuova pagina in WebAcappella.

  2. Una casella contenente una linea viene posizionata automaticamente.

    ../../_images/step_10.png

Aggiungere colonne a una riga

  1. Ogni riga è suddivisa in 12 tacche, che consentono di regolare facilmente la larghezza delle colonne.

  2. Trascinare una o più colonne nella riga.

  3. Ripetere l’operazione per aggiungere più colonne affiancate.

  4. Ridimensionare le colonne regolandone le proporzioni.

  5. In ciascuna delle colonne create, trascinare gli elementi desiderati (testo, immagine, pulsante, ecc.) per occupare la larghezza della colonna.

    ../../_images/step_20.png

Aggiunta di caselle e linee

  1. È possibile trascinare tutte le caselle necessarie nella stessa pagina.

    ../../_images/step_30.png

Consigli pratici

  • Favorire una struttura chiara utilizzando diverse caselle per organizzare la pagina.

  • Utilizzate le colonne per bilanciare il layout della pagina, ma evitate di usarne troppe per non sovraccaricare il display mobile.

  • Testate regolarmente la modalità responsive per assicurarvi che venga visualizzata correttamente su tutti gli schermi.