Come utilizzare gli input CSS personalizzati integrati di Divi per l'editing reattivo avanzato

Divi ha una modifica del design reattiva integrata che rende estremamente facile regolare lo stile del tuo sito Web sul display del desktop, del tablet o del telefono (senza conoscere i CSS). Parte dell'editing reattivo integrato di Divi include un metodo semplificato per apportare modifiche al design reattivo più avanzate utilizzando CSS personalizzati. Questo è molto più conveniente che dover fare affidamento su un foglio di stile esterno con query multimediali. Puoi persino apportare modifiche al CSS visivamente in tempo reale per ciascuno dei display del dispositivo, eliminando gran parte delle congetture dal design reattivo.

In questo tutorial, ti mostrerò come apportare comode modifiche al design reattivo utilizzando CSS personalizzati in modo da poter apportare ritocchi di design avanzati che potrebbero non essere disponibili nelle opzioni di design integrate di Divi.

Iniziamo.

Punti di interruzione integrati di Divi per l'editing reattivo

Divi ha tre breakpoint reattivi generali (punti in cui il design cambia in base alla larghezza del browser) che sono integrati nelle impostazioni di qualsiasi elemento in Divi Builder. Questi tre punti di interruzione hanno principalmente lo scopo di facilitare le impostazioni di progettazione specifiche per i display di desktop, tablet e telefoni.

I tre principali breakpoint reattivi di Divi per desktop, tablet e display del telefono sono i seguenti:

• Desktop: 981 px e oltre
• Tablet: tra 980px e 768px
• Cellulare: 767px e inferiori

Questi tre punti di interruzione sono gli stessi in tutte le schede di progettazione reattiva in tutto il generatore Divi, non solo per CSS personalizzati avanzati. Quindi, ogni volta che distribuisci le schede di progettazione reattiva, qualsiasi stile eseguito in tali schede verrà visualizzato nell'intervallo di quei tre punti di interruzione reattivi principali.

Inoltre, vale la pena ricordare che questi punti di interruzione generali per i display dei dispositivi non sono gli unici punti di interruzione integrati nella struttura del tema Divi. Puoi saperne di più sul nostro articolo sull'identificazione dei breakpoint reattivi di Divi.

Comprensione delle caselle di input CSS personalizzate di Divi

Quando personalizzi un elemento (sezione, riga o modulo) all'interno del Divi builder, ogni opzione di progettazione corrisponde (o prende di mira) una parte specifica di quell'elemento. Ad esempio, quando modifichi un modulo di testo, puoi scegliere come target qualsiasi parte di quel modulo utilizzando le impostazioni integrate (ad es. Carattere titolo 2, riempimento sinistro, ecc...).

Allo stesso modo, quando personalizzi un elemento Divi (sezione, riga o modulo) utilizzando le caselle di input CSS personalizzate avanzate, ciascuna casella di input corrisponderà (o sceglierà come target) l'intero o alcune parti di quell'elemento Divi. Il numero di caselle CSS personalizzate disponibili varia a seconda dell'elemento di cui stai applicando lo stile. Un modulo di testo può avere solo tre caselle di input di elementi CSS personalizzati (prima, principale e dopo), ma un modulo di invito all'azione avrà caselle aggiuntive per titolo, descrizione e pulsante. Questo perché il modulo ha più parti che possono essere scelte come target all'interno di quell'elemento del modulo.

Ecco un'illustrazione delle diverse caselle di input CSS personalizzate disponibili per il modulo Call to Action.

Ogni casella di input CSS personalizzata è destinata a una classe CSS specifica all'interno dell'elemento. Per vedere la classe mirata a un particolare elemento, passa il mouse sopra l'elemento e fai clic sull'icona del punto interrogativo. Lì vedrai la classe CSS presa di mira.

Pertanto, non è necessario aggiungere una classe CSS allo snippet CSS nella casella di input. Se lo fai, il codice non funzionerà.

Invece, aggiungi semplicemente le proprietà CSS direttamente alla casella che desideri applicare alla classe già presa di mira.

Come aggiungere CSS personalizzati ai punti di interruzione del design reattivo

Per accedere ai tre principali breakpoint di responsive design per una qualsiasi delle caselle di input CSS, passa semplicemente il mouse sopra l'elemento e fai clic sull'icona del tablet. Quindi vedrai le tre schede di design reattivo.

Ora tutto ciò che devi fare è utilizzare le schede per aggiungere CSS a uno qualsiasi dei tre display del dispositivo (desktop, tablet e telefono).

Ad esempio, supponiamo che tu voglia che il pulsante promozionale per un invito all'azione occupi l'intera larghezza del modulo su tablet e telefono ma non sul desktop. Dovresti selezionare la scheda tablet sotto la casella di input del pulsante promozionale e aggiungere "display: block;".

Nota che quando selezioni la scheda tablet, la modalità di visualizzazione di Divi Builder passa alla modalità di visualizzazione tablet (una larghezza di 768 px) per una migliore visione di come apparirà il tuo design in tempo reale.

Dispositivo più piccolo eredita il CSS di dispositivi più grandi per impostazione predefinita

Per impostazione predefinita, il codice applicato alla scheda del tablet verrà ereditato anche dal display del telefono. Per ricordarcelo, Divi aggiunge il codice segnaposto grigio alla casella di input con lo stesso codice che è stato aggiunto al display del tablet.

Il motivo per cui il display del telefono eredita il display del tablet è perché il punto di interruzione effettivo (query multimediale) per il display del tablet sul back-end è impostato su "max-width: 980px;" il che significa che il codice aggiunto al tablet verrà applicato anche al telefono perché il display del telefono è largo meno di 980 px. Quindi, se desideri applicare uno stile diverso al telefono, dovrai aggiungere un codice aggiuntivo alla casella di input della scheda del telefono.

NOTA: se aggiungi anche CSS personalizzato al display del telefono, Divi cambierà in modo intelligente la query multimediale per il tablet sul backend nell'intervallo più preciso tra 768 px e 980 px (o larghezza massima: 980 px e larghezza minima: 768 px).

Cosa viene applicato il CSS personalizzato al backend

Supponiamo di aggiungere CSS personalizzati a tutte e tre le schede reattive (desktop, tablet e telefono).

Sul desktop posizioniamo il pulsante in basso a destra del modulo.

Su tablet, sovrascriviamo il codice desktop e semplicemente espandiamo il pulsante per l'intera larghezza del modulo.

Sul telefono, sovrascriviamo il CSS del tablet e riportiamo il display alla normalità.

Se esaminiamo il CSS sul backend, puoi vedere che Divi organizza il codice con le seguenti query multimediali in modo da non dover:

Scrivania:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Tavoletta:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Telefono

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

Come viene archiviato il CSS in Divi?

Come parte delle ottimizzazioni della velocità integrate di Divi, tutti gli stili all'interno di Divi Builder (incluso il CSS personalizzato) verranno combinati, minimizzati e archiviati come file CSS statico per un caricamento più rapido della pagina. Quindi, se vuoi evitare la necessità di aggiungere CSS personalizzati tramite un tema figlio, puoi sfruttare gli input CSS reattivi integrati senza doversi preoccupare di rallentare il tuo sito.

Per ulteriori informazioni, consulta il nostro post su come velocizzare il tuo sito Divi.

Pensieri finali

Si spera che questo post ti aiuti a capire un po' meglio come sfruttare le caselle di input CSS personalizzate integrate di Divi per apportare comode modifiche al design reattivo al tuo sito web.

Per la maggior parte delle persone, non sarà necessario avventurarsi nella scheda Avanzate per aggiungere CSS personalizzati al proprio progetto. Divi ha così tante opzioni integrate che anche gli utenti avanzati raramente troveranno la necessità di utilizzare CSS personalizzati. Tuttavia, se arriva il momento in cui hai bisogno di uno stile avanzato, è utile sapere quanto è facile farlo in Divi.

Qual è stata la tua esperienza con gli input CSS personalizzati di Divi?