Disponi i contenuti in colonne.

Impara DXPR BuilderCrea le pagineSegui un tutorial

Qui crei un’unica pagina con i quattro layout di colonna che userai di più: contenuto con barra laterale, due metà uguali, tre terzi e quattro quarti. Ciascuno riceve un’intestazione sopra. Usala per imparare quale preset si adatta a quale contenuto. Per ogni impostazione di riga, vedi Righe e colonne.

Il video crea la pagina di raccolta rifiuti di un comune.

Prima di iniziare

  • Il tuo ruolo ha il permesso Edit with DXPR Builder.
  • La pagina è aperta nel builder. Per una nuova, vai in Content > Add content > Landing Page (/node/add/landing_page) e fai clic su Save.
  • I nuovi elementi arrivano in cima alla loro sezione. Ecco perché ogni intestazione va inserita dopo la sua riga: arriva sopra di essa.

Scegli un layout

Layout Ideale per Preset
Contenuto con barra laterale articoli con link correlati 2/3 + 1/3
Due metà uguali confronti, prima e dopo il valore predefinito della riga
Tre terzi uguali punti di forza, servizi 1/3 + 1/3 + 1/3
Quattro quarti uguali statistiche, piccole card 1/4 + 1/4 + 1/4 + 1/4

Una nuova Row arriva con due colonne uguali. Ogni altro layout viene dall’icona griglia della riga (Column layout).

Passaggio 1: contenuto con barra laterale

  1. Fai clic su Add Elements sulla pagina vuota e scegli Section dalla scheda Layout.
  2. Fai clic su + sulla sezione e scegli Row. Fai clic sulla sua icona griglia (Column layout), scegli il preset 2/3 + 1/3 e fai clic su Save.
  3. Fai clic su + nella colonna larga e scegli Text dalla scheda Content. Digita l’articolo, imposta la prima riga su Heading 3 e fai clic su Save.
  4. Fai clic su + nella colonna stretta e scegli Text. Digita "Related" come Heading 4, aggiungi una riga per pagina correlata e fai clic su Save.
  5. Fai clic su + sulla sezione e scegli Text; arriva sopra la riga. Digita "Content with a sidebar" come Heading 2 e fai clic su Save.

Passaggio 2: due metà uguali

  1. Passa sopra alla sezione e fai clic su Add Section Below. Apri il More > Settings della nuova sezione, scegli un Background grigio chiaro nel pannello Style e fai clic su Save.
  2. Fai clic su + sulla sezione e scegli Row. Due colonne uguali è il valore predefinito, quindi non c’è nulla da cambiare.
  3. Aggiungi un elemento Text in ogni colonna: "Before" e "After" come Heading 4 con una riga ciascuna.
  4. Aggiungi l’intestazione "Two equal halves" come nel passaggio 1.

Passaggio 3: tre terzi uguali

  1. Aggiungi una terza sezione con Add Section Below e dagli la classe Align text center.
  2. Aggiungi una Row, fai clic sulla sua icona griglia (Column layout), scegli il preset 1/3 + 1/3 + 1/3 e fai clic su Save.
  3. Aggiungi un elemento Text in ogni colonna: "Paper", "Glass" e "Organic" come Heading 4 con una riga ciascuna.
  4. Aggiungi l’intestazione "Three equal thirds".

Passaggio 4: quattro quarti uguali

  1. Aggiungi una quarta sezione con un Background grigio chiaro e la classe Align text center.
  2. Aggiungi una Row, fai clic sulla sua icona griglia (Column layout), scegli il preset 1/4 + 1/4 + 1/4 + 1/4 e fai clic su Save.
  3. Aggiungi un elemento Text in ogni colonna: il giorno come Heading 4 e cosa si raccoglie.
  4. Aggiungi l’intestazione "Four equal quarters".

Passaggio 5: salva e vedi l’anteprima

  1. Fai clic su Save nella barra degli strumenti del builder.
  2. Apri il menu vista (l’icona occhio) e scegli Preview.

Sugli schermi più piccoli

Le colonne stanno fianco a fianco da 768 pixel di larghezza, quindi i tablet mostrano lo stesso layout dei desktop. Sui telefoni ogni colonna prende tutta la larghezza e le colonne si impilano nel loro ordine. Per un altro layout sui tablet, fai clic sull’icona griglia della riga (Column layout) e scegli Add screen size.

Per approfondire

Non mostrato nel video:

  • Stretta, larga, stretta: il preset 1/4 + 1/2 + 1/4 mantiene leggibile il testo lungo con margini vuoti.
  • Mirror row: attivalo nelle impostazioni della riga per scambiare le colonne su tablet e desktop. I telefoni conservano l’ordine originale, quindi la prima colonna viene comunque prima lì.

Cosa vedi

Quattro bande si susseguono, ciascuna con la sua intestazione in cima. L’articolo e i suoi link correlati condividono la prima, due metà stanno sul grigio, e seguono tre terzi centrati. Quattro quarti centrati su grigio chiudono la pagina.

Se non vedi le colonne come mostrate

  • La riga ha il numero sbagliato di colonne. Il preset si applica solo quando fai clic su Save nella finestra di layout. Fai di nuovo clic sull’icona griglia della riga (Column layout), scegli il preset e fai clic su Save.
  • Un’intestazione sta sotto la sua riga. L’intestazione è entrata prima della riga e i nuovi elementi arrivano in cima alla loro sezione. Trascina l’intestazione sopra la riga dalla maniglia di trascinamento sulla sua barra dei controlli.
  • Le colonne si impilano su un tablet. Il tablet è più stretto di 768 pixel, come un piccolo tablet in verticale. Aggiungi un layout per quella larghezza con Add screen size nella finestra di layout della riga.
  • Le tue modifiche non ci sono più dopo un ricaricamento. Hai lasciato la pagina prima di fare clic su Save nella barra degli strumenti del builder. Se Save mostra un errore, vedi Le modifiche non si salvano.

E adesso?