Collegare le sezioni e riusare gli stili con le classi.

Impara DXPR BuilderCrea le pagineDai stile agli elementi

Dai a una sezione un ID HTML così un pulsante può saltare a essa. Aggiungi Classi HTML per nascondere un elemento sui telefoni, per impostare spaziatura per dimensione schermo, o per riusare un aspetto definito dal tuo tema. Trovi entrambi i campi in fondo al pannello Generale di ogni elemento. Una classe mantiene coerente un aspetto: quando la sua regola CSS cambia, ogni elemento con quella classe segue.

Il video segue il primo esempio pratico qui sotto: fa saltare un pulsante a una sezione più in basso nella pagina.

Prima di iniziare

  • Apri la pagina in DXPR Builder; puntando a un elemento si mostra la sua barra di controllo con Altro. Nuovo del builder? Vedi La tua prima pagina.
  • Salva nella finestra conserva una modifica nell’editor. Salva nella barra del builder sopra il contenuto conserva la pagina e mostra “Campo salvato”.
  • Usa un ID HTML per una destinazione di salto. Un pulsante “Prenota una visita” può scorrere al modulo di prenotazione. Un elenco di link in cima a una pagina lunga può portare a ogni parte.
  • Usa una classe per un aspetto che si ripete. Il tuo webmaster scrive il CSS una volta, e tu aggiungi la classe dove serve. Il pannello Stile copia invece i valori in ogni elemento, che col tempo divergono.
  • Usa una classe per ciò che il pannello Stile non sa fare, come nascondere un elemento sui telefoni o cambiare spaziatura per dimensione schermo.

Esempio pratico: un pulsante che salta a una sezione

  1. Passa sopra la Sezione di destinazione, fai clic su Altro, poi su Impostazioni.
  2. Nel pannello Generale, digita un nome corto, come programmes, in ID HTML. Fai clic su Salva.
  3. Apri le impostazioni del Pulsante. In Link, digita # seguito da esattamente lo stesso nome: #programmes. Fai clic su Salva.
  4. Fai clic su Salva nella barra del builder.
  5. Scegli Anteprima nel menu vista (l’icona dell’occhio) e fai clic sul pulsante.

Prova con la sezione più in basso nella pagina rispetto al pulsante, così vedi lo scorrimento. Se la destinazione sta dentro un pannello pieghevole, una tab o una diapositiva del carosello, il link prima lo apre.

Pannello Generale di un Pulsante con Titolo Vedi i nostri programmi e Link #programmes, accanto a quel pulsante nella pagina

Esempio pratico: nascondere un elemento sui telefoni

  1. Passa sopra l’elemento, fai clic su Altro, poi su Impostazioni.
  2. Nel pannello Generale, fai clic sul riquadro Classi HTML.
  3. Scegli Nascosto su dispositivi extra piccoli, telefoni (<576px). Sta nel gruppo Visibilità responsive.
  4. Fai clic su Salva nella finestra, poi su Salva nella barra.

L’elemento ora sparisce sugli schermi più stretti di 576 px, anche nell’editor. Per controllarlo, apri la pagina su un telefono.

Campo Classi HTML di un elemento Testo con il chip Nascosto su dispositivi extra piccoli, telefoni (<576px), accanto al riquadro grigio Pianifica la tua visita, ancora mostrato a larghezza desktop

Esempio pratico: digitare le tue classi

Il riquadro Classi HTML lascia solo scegliere dal suo elenco. Per digitare un nome di classe, prima passalo a testo.

  1. Passa sopra l’elemento, fai clic su Altro, poi su Impostazioni.
  2. Sotto Classi HTML, fai clic su Modifica come testo. Il riquadro diventa un campo di testo semplice che elenca le classi che l’elemento ha già.
  3. Aggiungi i tuoi nomi di classe dopo, separati da spazi, per esempio brand-card py-3 py-lg-5. Ometti il punto: .brand-card nel CSS del tuo team qui è brand-card.
  4. Fai clic su Salva nella finestra, poi su Salva nella barra.

L’elemento prende l’aspetto definito dal tuo team web.

Classi HTML in modalità Modifica come testo, un campo semplice con brand-card py-3 py-lg-5, accanto al riquadro grigio Collabora con noi con il padding della classe sopra e sotto il testo

Cosa vedi

Pannello Generale di una Sezione con ID HTML open-day e tre chip di classe, accanto a quella sezione con sfondo grigio e testo centrato

In Anteprima, il pulsante scorre la pagina in modo fluido fino alla sezione e lascia spazio per un’intestazione fissa; la barra degli indirizzi finisce in #programmes. Sotto i 576 px di larghezza, l’elemento nascosto non c’è. Le classi digitate appaiono come chip la prossima volta che apri la finestra, tra virgolette quando non sono nell’elenco, come “brand-card”.

Come funzionano i campi

ID HTML

Un ID deve iniziare con una lettera. Dopo può contenere lettere, numeri, trattini e underscore, ma senza spazi. Un ID sbagliato mostra un errore sotto il campo, e Salva non fa niente finché non lo sistemi.

Se lasci il campo vuoto, l’elemento conserva un ID creato da DXPR Builder. Il campo vuoto lo mostra in grigio. Usa ogni ID una volta per pagina: quando due elementi ne condividono uno, i link saltano al primo.

Classi HTML

L’elenco contiene classi per le ombre e classi Bootstrap 5, raggruppate per lavoro, come Margini, Padding, Visibilità responsive e Angoli arrotondati. Il tuo tema può aggiungere un suo gruppo alla fine.

Scorri l’elenco aperto, oppure digita parte di un nome come padding, py-5 o circular per restringerlo. Digitare filtra solo l’elenco; per una classe che non c’è, usa Modifica come testo.

L’elenco Classi HTML filtrato con la parola padding, che mostra il gruppo Padding con Dimensione padding da 1 a 5 e Nessun padding, accanto al testo Tasse del corso che stilizzerà

Le classi di Bootstrap funzionano solo quando la pagina carica Bootstrap 5. Viene dal tuo tema, oppure da Impostazioni generali > Bootstrap (/admin/dxpr_studio/dxpr_builder/settings), dove File Bootstrap esterni è impostato su Bootstrap 5.

Le classi di utilità di Bootstrap, come quelle di colore e spaziatura, sono marcate !important. Battono il pannello Stile sulla stessa proprietà. Sfondo primario batte Sfondo, e Margine superiore dimensione 3 (mt-3) batte il Margine superiore.

Una classe con una dimensione schermo nel nome vale da quella larghezza in su:

Nel nome della classe Vale da
sm 576 px
md 768 px
lg 992 px
xl 1200 px
xxl 1400 px

Così py-3 py-lg-5 dà 16 px di padding in alto e in basso sugli schermi più piccoli, e 48 px da 992 px di larghezza.

Per il tuo sviluppatore del tema

Una classe ha bisogno di una regola CSS nel tema, per esempio:

.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

Per mostrare la classe nell’elenco Classi HTML per i redattori, registrala nel .info.yml del tema; vedi Classi di utilità. Per stili su tutto il sito, vedi CSS personalizzato.

Se non lo vedi

  • Salva non fa niente e ID HTML dice “L’ID deve iniziare con una lettera”. L’ID viola le regole sopra. Inizialo con una lettera, e usa solo lettere, numeri, trattini e underscore.
  • Non puoi digitare una nuova classe. Il riquadro filtra solo il suo elenco. Fai prima clic su Modifica come testo.
  • Una classe attesa manca nell’elenco. L’elenco contiene solo le classi definite da DXPR Builder e dal tuo tema. Fai clic su Modifica come testo e digitala.
  • Il pulsante non scorre per niente. Link deve essere # seguito da esattamente l’ID HTML, con le stesse maiuscole. Controlla entrambi i campi, e prova in Anteprima.
  • Una classe non ha effetto. Il nome è scritto male, il tema non ha una regola per essa, oppure Bootstrap 5 non è caricato. Controlla l’ortografia, poi chiedi al tuo webmaster della regola o di File Bootstrap esterni.
  • La classe del tuo team cambia solo alcune cose. Un valore del pannello Stile sulla stessa proprietà batte una classe del tema. Azzera quel valore nel pannello Stile.
  • Il pulsante salta al posto sbagliato. Due elementi condividono l’ID, e vince il primo. Dai a ogni elemento il suo ID.
  • Il titolo della sezione si nasconde sotto l’intestazione fissa. DXPR Builder non riconosce il tuo header. Un webmaster imposta Selettore di offset scorrimento sotto Impostazioni generali > Impostazioni avanzate (/admin/dxpr_studio/dxpr_builder/settings) sul selettore CSS dell’header.

Passi successivi