Aggiunta di una sezione.

Learn DXPR BuilderBuild pagesAdd contentLay-out

Una sezione è una banda della tua pagina, come una hero in alto o una banda grigia di funzionalità sotto. Dai a ogni sezione il suo sfondo, colore del testo, spaziatura e altezza, poi riempila con righe o contenuti. Leggi questa pagina per aggiungere e configurare le sezioni; per dividerne una in colonne, vedi Righe e colonne.

La pagina della clinica come la vedono i visitatori: una sezione blu scuro da bordo a bordo con il titolo centrato Prenota il tuo controllo, una riga sugli appuntamenti in settimana e un pulsante bianco Prenota online, sopra una sezione grigio chiaro con tre colonne, Visite in settimana, Medici esperti e Risultati online

Aggiungi una sezione

L’esempio crea una hero blu scuro per una clinica. Sotto segue una sezione grigio chiaro con tre colonne.

  1. Fai clic su Add Elements su una pagina vuota e scegli Section dalla scheda Layout. Sotto una sezione esistente, fai clic su Add Section Below, il più rotondo sotto di essa.
  2. Passa sopra alla sezione, apri More e scegli Settings.
  3. Configura tutta la sezione: qui Align text center in HTML classes, uno sfondo blu scuro in Background e un bianco in Font color. Fai clic su Save.
  4. Fai clic su + sulla sezione per aggiungervi contenuti direttamente, oppure aggiungi una Row per dividerla in colonne.
  5. Fai clic su Save nella barra degli strumenti per salvare la pagina.

Background e Font color sono nel pannello Style della finestra. I nuovi elementi arrivano in cima alla sezione, quindi aggiungi prima quello più in basso: nel video, il pulsante entra prima del titolo.

Cosa vedi

La banda blu scuro riempie la finestra da bordo a bordo. Il suo titolo e il suo pulsante restano in un riquadro centrato, il contenitore interno della sezione. La sezione grigia inizia subito sotto, con le sue tre colonne di funzionalità nello stesso riquadro centrato.

Ogni nuova sezione porta già la classe Vertical padding size 5 (py-5) in HTML classes. Quella classe le dà lo spazio sopra e sotto il suo contenuto.

Configura la tua sezione

La finestra delle impostazioni ha cinque pannelli: General, Background effects, Animation, Style e Hover style. Solo le sezioni hanno Background effects.

Impostazione Pannello Cosa fa Valore predefinito
Full width General Le righe vanno da bordo a bordo invece che dentro il contenitore centrato Off
100% height General La sezione è alta almeno quanto la finestra del browser Off
Vertical centering General Il contenuto sta al centro verticale di una sezione più alta di lui Off
HTML ID General Un nome ancora, così un link a #name salta a questa sezione Empty
HTML classes General Classi di utilità, come Align text center o una dimensione di padding Vertical padding size 5 (py-5)
Background effect Background effects Simple image, Fixed image, Parallax image, Gradient o YouTube video Simple image
Background, Font color Style Il colore dietro la sezione e il colore del suo testo None: decide il tema

Lo sfondo copre sempre tutta la sezione, qualunque cosa dica Full width. Gli effetti immagine muovono la Background image scelta nel pannello Style; Sfondi mostra ogni effetto.

Per più o meno spazio, sostituisci Vertical padding size 5 (py-5) con una dimensione minore o No vertical padding (py-0). Per pixel esatti, usa il box model nel pannello Style, come spiega Spaziatura.

Ricette di sezione

Sezione Impostazioni per crearla
Hero 100% height e Vertical centering attivi, un effetto Parallax image, un titolo e un pulsante
Funzionalità Un Background chiaro, un titolo, poi una riga di tre colonne
Invito all’azione Un Background forte, Align text center, una riga breve e un pulsante
Testimonianze Un Background chiaro e una riga di tre colonne, ciascuna con un Block quote

Progetta una hero section costruisce la prima passo passo.

Se non lo vedi

  • La pagina vuota non ha il pulsante Add Elements. L’assistente di creazione pagina è spento, quindi la pagina vuota offre solo Choose a template. Fai clic sull’area vuota per aprire il selettore di elementi, oppure attiva Enable page creation assistant in /admin/dxpr_studio/dxpr_builder/ai_settings.
  • Non c’è il pulsante Add Section Below. Solo le sezioni messe direttamente sulla pagina ce l’hanno, non una sezione dentro una colonna o una scheda. Fai clic su + sulla colonna.
  • La centratura verticale non cambia nulla. La sezione è alta solo quanto il suo contenuto, quindi non c’è spazio in cui centrare. Attiva anche 100% height.
  • Full width sembra non fare nulla. Lo sfondo copre già tutta la sezione; Full width sposta solo le righe verso i suoi bordi. Con un testo corto in una colonna, il cambiamento è difficile da notare.
  • È comparsa una sezione che non hai aggiunto. Hai scelto una Row o un elemento di contenuto su una pagina vuota, e ogni elemento ha bisogno di una sezione intorno. DXPR Builder ne ha aggiunta una per te; apri le sue impostazioni come qualsiasi altra.

E adesso?