Estendi una sezione da bordo a bordo.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Puoi lasciare che il contenuto di una sezione corra da bordo a bordo, oppure tenerlo in un riquadro centrato mentre lo sfondo riempie la finestra. Decide un toggle sulla sezione: Full width. L’esempio costruisce una sezione grigia con tre colonne, poi attiva Full width così le colonne si allungano. Per riempimenti di colore e foto, vedi Sfondi.

Il video costruisce una sezione grigia con 3 colonne, poi ne lascia correre il contenuto da bordo a bordo.

Costruisci una sezione in riquadro

  1. Fai clic su Add Elements nell’area di contenuto vuota e scegli Section nella scheda Layout.
  2. Passa sopra la sezione con il mouse, apri More e scegli Settings.
  3. Apri il pannello Style e scegli un Background grigio chiaro.
  4. Fai clic su Save. Il grigio copre già la finestra.
  5. Fai clic su + sulla sezione e scegli Row.
  6. Fai clic sull’icona griglia sulla riga, scegli il riquadro con tre colonne uguali e fai clic su Save.
  7. In ogni colonna, fai clic su +, scegli Text nella scheda Content, digita un Titolo 4 e una riga, e fai clic su Save.

Le tre colonne ora stanno in un riquadro centrato sulla banda grigia.

Attiva Full width

  1. Apri More sulla sezione e scegli Settings.
  2. Nel pannello General, attiva Full width.
  3. Fai clic su Save.
  4. Fai clic su Save nella barra di DXPR Builder.
  5. Apri il menu vista, l’icona occhio sulla barra, e scegli Preview.

Cosa vedrai

La banda grigia sembra come prima. È cambiato solo il riquadro di contenuto: la prima colonna ora inizia dal bordo sinistro della sezione e l’ultima finisce al bordo destro.

Ogni sezione ha due parti: un elemento esterno che porta lo sfondo e un riquadro interno che contiene le righe. Full width cambia solo il riquadro interno. Spento, è centrato con una larghezza massima; acceso, si allunga fino ai bordi della sezione.

Impostazioni

Il pannello General della sezione contiene tre toggle di layout, tutti spenti per impostazione predefinita:

Impostazione Cosa fa
Full width Le righe riempiono la sezione da bordo a bordo invece di un riquadro centrato
100% height La sezione è alta almeno quanto la finestra del browser
Vertical centering Le righe stanno al centro verticale della sezione

Le righe non hanno una propria impostazione di larghezza; decide la sezione.

Due schemi

  • Sfondo da bordo a bordo, testo in riquadro: l’hero classico. Lascia Full width spento e imposta lo sfondo nel pannello Style o Background effects.
  • Contenuto da bordo a bordo: una striscia di card o immagini. Accendi Full width e dai alle colonne un po’ di Padding se il testo è troppo vicino al bordo della finestra.

Se non vedi la modifica

  • Niente cambia quando accendi Full width. Su uno schermo stretto, come un telefono, la versione in riquadro riempie già la larghezza. Allarga la finestra del browser e guarda di nuovo.
  • Lo sfondo si ferma prima dei bordi della finestra. Il tuo tema mette il contenuto della pagina in una regione in riquadro, e la sezione può riempire solo quella regione. Scegli un layout di pagina o una regione a larghezza intera nel tuo tema.
  • Il testo tocca il bordo della finestra. È ciò che fa Full width. Aggiungi Padding nel pannello Style delle colonne, oppure lascia Full width spento.

Prossimi passi