Come implementare una modalità oscura nel tuo sito Divi
Pubblicato: 2020-05-21La modalità oscura continua a crescere in popolarità come opzione conveniente per consentire agli utenti di vivere il Web con meno sforzo per gli occhi. Ammettiamolo, tutti tendiamo a passare più tempo a guardare gli schermi di quanto probabilmente dovremmo, quindi qualsiasi comfort aggiuntivo all'esperienza dell'utente (come la modalità oscura) può fare molto. I sistemi operativi, i programmi e i browser di solito includono funzionalità di modalità oscura integrate, ma alcuni sviluppatori lo stanno portando a un altro livello includendo un'esperienza in modalità oscura personalizzata per il loro sito Web. L'idea è quella di avere un maggiore controllo sull'aspetto del loro sito Web in modalità oscura senza dover scendere a compromessi sul marchio e/o sul design.
In questo tutorial, ti mostreremo come creare da zero una modalità oscura personalizzata in Divi senza un plug-in. Con questa funzionalità di commutazione della modalità oscura, avrai il controllo sul design della modalità oscura e avrai una migliore esperienza utente su misura per il tuo marchio.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Ecco l'interruttore personalizzato della modalità oscura che creeremo.
Ed ecco il prima e il dopo per la modalità oscura applicata a uno dei nostri layout prefabbricati.
Ed ecco l'interruttore della modalità oscura aggiunto a un'intestazione globale. Nota come rimane la modalità chiaro/scuro mentre navighi nel sito.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.
Fare clic sul pulsante Importa.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Parte 1: Costruire l'interruttore della modalità oscura
In questa prima parte del tutorial, costruiremo una modalità oscura con una pagina in Divi. Una volta creato l'interruttore con il codice, sarai in grado di salvarlo nella libreria Divi e aggiungerlo in qualsiasi punto del tuo sito web.
Per iniziare, aggiungi una riga a una colonna alla sezione predefinita mentre costruisci da zero con Divi sul front-end.
Aggiungi Blurb
Per creare l'interruttore personalizzato, progetteremo un modulo blurb con un po' di CSS personalizzato.
Aggiungi un nuovo modulo blurb alla riga.
Contenuto
Elimina il contenuto fittizio predefinito per il titolo e il corpo. Quindi aggiungi l'icona quadrata al posto dell'immagine.
Design
Passa alle impostazioni di progettazione e aggiorna quanto segue:
- Colore icona: #666666
- Allineamento immagine/icona: a sinistra
- Dimensione carattere icona: 22 px
- Larghezza: 50px
- Allineamento del modulo: centro
- Altezza: 25px
- Margine: 0px in basso
- Angoli arrotondati: 4px
- Larghezza bordo: 2px
- Colore bordo: #666666
CSS personalizzato
Una volta che il design è a posto, passa alla scheda Avanzate. Sotto il CSS personalizzato, aggiungi il seguente CSS personalizzato all'elemento principale per assicurarti che l'overflow non sia nascosto dallo stile degli angoli arrotondati.
overflow: visible !important;
Quindi aggiungi il seguente CSS personalizzato all'elemento After:
content: "light"; position: absolute; left: -35px; top:0px;
Questo aggiunge un'etichetta al modulo blurb che cambieremo da "chiaro" a "scuro" al clic.
Design del testo del corpo
Poiché il testo nello pseudo-elemento after eredita gli stili del testo del corpo, possiamo aggiungere gli stili del testo del corpo usando le opzioni Divi come segue:
- Carattere del corpo: Roboto
- Colore del testo del corpo: #666666
- Dimensione del testo del corpo: 13px
- Spaziatura delle lettere del corpo: 1px
Aggiunta di codice personalizzato con un modulo di codice
Per aggiungere il codice necessario (CSS/JQuery) per far funzionare la modalità oscura, utilizzeremo un modulo di codice.
Crea un nuovo modulo di codice sotto il modulo blurb nella stessa colonna.
Quindi incolla il seguente codice nella casella del codice:
<style>
/**
* Dark Mode Toggle Styles
*/
.et-dark-mode {
transition: all .5s;
}
.et-dark-toggle {
cursor: pointer;
transition: all .5s;
}
body.et-dark-mode .et-dark-toggle {
border-color: #666666;
}
body.et-dark-mode .et-dark-toggle:after {
content:"dark";
color: #666666;
left: 54px;
}
body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {
text-align:right;
}
body.et-dark-mode .et-dark-toggle .et-pb-icon {
color: #666666;
}
/**
* Body Dark Mode Style
*/
body.et-dark-mode {
background-color: #23282d !important;
}
/**
* Divi Element Dark Mode Styles
*
* Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".
*/
/* Section with dark mode */
.et_pb_section.et-dark-mode-capable.et-dark-mode {
background-color: #23282d !important;
background-blend-mode: overlay;
transition: opacity .5s ease-in-out;
color: #dddddd !important;
}
/* Row with dark mode */
.et_pb_row.et-dark-mode-capable.et-dark-mode {
background-color: #23282d !important;
color: #dddddd !important;
}
/* Column with dark mode */
.et_pb_column.et-dark-mode-capable.et-dark-mode {
background-color: #23282d !important;
color: #dddddd !important;
}
/* Module with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode {
background-color: transparent !important;
color: #dddddd !important;
}
/* Text Headings with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,
.et_pb_module.et-dark-mode-capable.et-dark-mode h1,
.et_pb_module.et-dark-mode-capable.et-dark-mode h2,
.et_pb_module.et-dark-mode-capable.et-dark-mode h3,
.et_pb_module.et-dark-mode-capable.et-dark-mode h4,
.et_pb_module.et-dark-mode-capable.et-dark-mode h5,
.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {
color: #dddddd !important;
}
</style>
<script>
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
}
jQuery(document).ready(function($) {
var storageAvailable = window.storageAvailable('sessionStorage');
$(".et-dark-toggle").click(function() {
$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
if ( storageAvailable ) {
$("body").hasClass("et-dark-mode") ?
sessionStorage.setItem('etDarkModeEnabled','1'):
sessionStorage.removeItem('etDarkModeEnabled');
}
});
if (storageAvailable) {
'1' == sessionStorage.getItem('etDarkModeEnabled') ?
$(".et-dark-mode-capable,body").addClass("et-dark-mode"):
$(".et-dark-mode-capable,body").removeClass("et-dark-mode");
}
});
</script>
Aggiunta delle classi CSS personalizzate
Il codice personalizzato richiede l'aggiunta di una classe CSS personalizzata al modulo blurb o all'interruttore. Ciò consentirà al blurb di attivare l'interruttore della modalità oscura e la funzionalità al clic.
Classe modulo Blurb
Apri le impostazioni del modulo blurb e aggiungi una classe CSS personalizzata come segue:
- Classe CSS: et-dark-toggle
Classe capace di modalità oscura
Abbiamo anche bisogno di aggiungere una classe CSS personalizzata a ogni elemento Divi che vogliamo avere la capacità della modalità oscura. Una volta che l'elemento ha la classe CSS, quell'elemento erediterà il CSS personalizzato "modalità oscura" nel codice che abbiamo aggiunto una volta che la modalità oscura è stata attivata. Questo metodo ci offre un maggiore controllo sul nostro design in modalità oscura poiché alcuni elementi potrebbero non richiedere alcuno stile in modalità oscura.
Per iniziare, possiamo aggiungere la modalità oscura alla sezione contenente il nostro interruttore della modalità oscura.
Apri le impostazioni della sezione e aggiungi la seguente classe CSS:
- Classe CSS: et-dark-mode-capable
Parte 2: aggiunta della funzionalità Dark Mode a una pagina Divi
Ora che abbiamo il codice e le classi CSS a posto, siamo pronti per applicare la funzionalità e il design della modalità oscura a un'intera pagina in Divi. Per fare ciò, utilizzeremo il layout predefinito della pagina di destinazione dell'app mobile.
Per aggiungere il layout, apri il menu delle impostazioni nella parte inferiore del visual builder e fai clic sull'icona Aggiungi nuovo layout.
Quindi seleziona il layout della pagina di destinazione dell'app mobile dalla scheda dei layout predefiniti.
Assicurati che l'opzione "Sostituisci contenuto esistente" NON sia selezionata. Non vuoi cancellare la sezione con l'interruttore della modalità oscura.
Poiché lo stile della modalità oscura si applica solo agli elementi con la classe CSS "et-dark-mode-capable", possiamo scegliere di aggiungere alla pagina alcuni modi diversi.
- Possiamo aggiungere la classe CSS a ciascun elemento della pagina individualmente.
- Potremmo estendere la classe CSS agli elementi in tutta la pagina (sarebbe più veloce che eseguirli manualmente). Ad esempio, potremmo aprire le impostazioni della sezione per la sezione superiore ed estendere la Classe CSS per quella sezione a tutte le sezioni della pagina.
- Possiamo aggiungere la classe CSS ai valori predefiniti globali dell'elemento. Ciò applicherà la classe CSS a tutti gli elementi dell'intero sito, aggiungendo la funzionalità della modalità oscura in tutto il sito. Ad esempio, potremmo aprire le impostazioni della sezione e fare clic sull'icona predefinita globale per modificare le impostazioni predefinite globali della sezione. Quindi possiamo aggiungere la classe CSS e salvarla come classe CSS per tutte le sezioni dell'intero sito.
Aggiunta della classe CSS agli elementi della pagina
Per questo esempio, aggiorneremo gli elementi della pagina aggiungendo la classe CSS ai valori predefiniti globali delle sezioni e dei moduli di testo. E faremo anche alcune aggiunte agli altri elementi della pagina man mano che procediamo.
Tutte le sezioni
Per aggiungere la classe CSS a tutte le sezioni, apri le impostazioni per la sezione superiore che contiene l'interruttore della modalità oscura. Quindi modifica i valori predefiniti globali per la sezione e aggiungi la seguente classe CSS ai valori predefiniti globali della sezione:
- Classe CSS: et-dark-mode-capable
Tutte le sezioni speciali
Aggiungi anche la classe CSS alle impostazioni predefinite globali della sezione specialità.
Moduli di testo
Quindi, apri le impostazioni per uno dei moduli di testo sulla pagina e aggiungi la stessa classe CSS ai valori predefiniti globali di testo.
Blurbs
Quindi, apri le impostazioni per uno dei blurb nel layout di pagina e aggiungi la classe CSS ai Blurb Global Defaults.
Colonne di testimonianza
Più in basso nel layout di pagina, ci sono alcune testimonianze, ciascuna all'interno di una colonna con uno sfondo bianco personalizzato. Per sovrascrivere gli stili di colonna in modalità oscura, aggiungi la classe CSS a una delle colonne ed estendila alle altre colonne all'interno della riga.
NOTA: nonèuna buona idea aggiungere la classe CSS ai valori predefiniti globali della colonna perché ciò interromperà alcuni degli elementi di progettazione (cioè nonèuna buona idea dare a tutte le colonne uno sfondo scuro quando la maggior parte delle volte gli sfondi delle colonne sono trasparenti).
Per testare il risultato, passa alla pagina live e fai clic sull'interruttore della modalità oscura nella parte superiore della pagina.
Ecco come dovrebbe apparire la pagina in modalità light.
Ed ecco come dovrebbe apparire la pagina in modalità oscura.
Parte 3: aggiunta della modalità oscura a un'intestazione globale
Se desideri estendere la funzionalità della modalità oscura a tutto il sito, sarebbe una buona idea aggiungere l'interruttore della modalità oscura al tuo Divi Global Header. In questo modo sarà disponibile per gli utenti in tutto il sito in un unico posto conveniente.
Salvataggio dell'interruttore e del codice della modalità oscura nella libreria Divi
Ma prima di farlo, dobbiamo salvare l'interruttore della modalità oscura e il codice nella libreria Divi. Ciò semplificherà l'aggiunta ad altre aree del nostro sito, inclusa l'intestazione globale.
Torna al layout che abbiamo creato con Divi distribuito sul front-end. Quindi apri il menu per il modulo blurb utilizzato per creare l'interruttore della modalità oscura e seleziona Salva nella libreria. Assegna un nome al layout e salvalo nella libreria.
Quindi, salva anche il modulo di codice nella libreria Divi.
Importazione di un modello di intestazione globale predefinito
Se non disponi già di un'intestazione globale, dovrai crearne una tua o utilizzare uno dei nostri pacchetti per la creazione di temi predefiniti.
Per questo tutorial, utilizzeremo l'intestazione globale inclusa nel quinto pacchetto di creazione di temi. Per aggiungere l'intestazione globale utilizzando il generatore di temi, dovrai scaricare il pacchetto generatore di temi e quindi utilizzare le opzioni di portabilità per importare il file JSON chiamato "divi-theme-builder-pack-5-default-website-template.json" .
Una volta che il modello è stato caricato, fare clic per modificare l'intestazione globale.
Quindi aggiungi l'interruttore della modalità oscura dalla libreria alla colonna 1 nella seconda riga dell'intestazione.
Sotto il modulo di attivazione/disattivazione della modalità oscura, aggiungi il modulo di codice che hai salvato nella libreria direttamente sotto l'interruttore della modalità oscura.
Poiché abbiamo la classe CSS "et-dark-mode-capable" come predefinita per tutte le sezioni, anche le sezioni all'interno dell'intestazione la avranno per impostazione predefinita. Per disabilitarlo, assegnagli semplicemente una classe CSS prioritaria.
Risultati finali
Ecco i risultati finali della nostra pagina di attivazione della modalità oscura.
Ed ecco l'interruttore della modalità oscura sull'intestazione. La modalità selezionata (scuro o chiaro) rimarrà mentre navighi verso altre pagine del sito.
Regolazione degli stili personalizzati della modalità scura CSS
Se desideri regolare lo stile della modalità oscura dell'interruttore o degli elementi Divi, dovrai farlo all'interno del codice all'interno del modulo di codice.
Il codice ha attualmente solo uno stile di base in modalità oscura applicato a ciascuno degli elementi una volta in modalità oscura. Questo è costituito da un colore di sfondo scuro e un colore del testo chiaro.
Pensieri finali
Dotare il tuo sito Divi di un interruttore Dark Mode personalizzato può essere un ottimo modo per potenziare la UX e creare un design completamente nuovo che piaccia e allo stesso tempo rallegri l'occhio. Spero che ti sia utile.
Non vedo l'ora di sentirti nei commenti.
Saluti!