Vuoi sapere come personalizzare il modulo Countdown Timer di Divi con una GIF?
Nel tutorial di oggi, ti mostreremo come utilizzare un video di sfondo a schermo intero nel tuo corso. "Conto alla rovescia". Può essere utilizzato per "creare suspense" in un modo divertente e straordinario.
Cominciamo!
Panoramica
Prima di immergerci in questo tutorial, diamo un'occhiata al risultato che vogliamo ottenere.
Design del conto alla rovescia con Divi
Preparazione di elementi di design
Il conto alla rovescia che andremo a progettare utilizza un video in background. Ci sono molti posti dove trovare filmati d'archivio gratuiti o premium. Ma per questo tutorial, sfrutteremo alcuni video clip gratuiti da Videzy.
Ecco il link diretto al video che utilizzeremo: Particelle volanti.
Realizzazione del progetto con Divi
Puoi utilizzare una pagina esistente. Ma per semplicità, lavoreremo in una nuova pagina.
Quindi crea una nuova pagina e aggiungi una riga con la seguente struttura a colonne.
Inserisci il modulo " Conto alla rovescia ".
Impostazione dei parametri del modulo
Innanzitutto, scegli una data fino al conto alla rovescia, quindi modifica:
- Usa colore di sfondo: NO
Ora fai clic sulla scheda "Disegno" e modificare le impostazioni di seguito.
- Numeri Dimensione testo: 85px
- Dimensione testo etichetta: 15px
NOTA : sembrerà che non ci sia alcun conto alla rovescia, perché abbiamo rimosso il colore di sfondo. Una volta aggiunto il nostro video di sfondo nelle istruzioni seguenti, saremo in grado di vedere il conto alla rovescia.
Impostazione dei parametri della sezione
Ora dobbiamo apportare alcune piccole modifiche alla sezione. Passa il mouse sopra la sezione e apri le impostazioni.
Nella scheda Contenuti, vai alle impostazioni "Video di sfondo"poi Video di sfondo MP4.
Fare clic "Aggiungi video di sfondo" e aggiungi il video da cui abbiamo scaricato in precedenza Videzy. Ora dovresti vedere il video di sfondo riprodotto dietro il nostro conto alla rovescia.
Ora dobbiamo apportare solo una piccola regolazione nella scheda Filtri parametri del modulo di sezione. Aggiungi il CSS personalizzato di seguito in Elemento principale.
height: 100vh; 
Ecco cosa dovresti vedere finora.
Aggiunto CSS personalizzato
L'ultima cosa che dobbiamo fare è aggiungere il CSS personalizzato per portarci fino in fondo.
Quindi, apri le impostazioni del modulo, fai clic sulla scheda "Avanzate" e aggiungi la classe CSS
- Classe CSS: conto alla rovescia personalizzato-5
Ora che la nostra classe personalizzata è stata aggiunta, siamo pronti per aggiungere il nostro CSS personalizzato.
Per fare ciò, vai alle impostazioni della pagina.
Vai alla scheda Filtri e aggiungi il CSS personalizzato di seguito.
.custom-countdown-5.et_pb_countdown_timer .sep {
display: none;
}
.custom-countdown-5.et_pb_countdown_timer .section.values {
border-left: 1px solid #808080;
}
.custom-countdown-5 .days {
border-left: none !important;
margin-right: 16px;
}
Quindi salva le modifiche e ammira la tua creazione!
BONUS: personalizzazione aggiuntiva
Possiamo combinare il gradiente animato al nostro video di sfondo per un look ancora più unico. Basta aggiungere il CSS di seguito (dopo il CSS sopra).
.et_pb_section:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
-o-animation: colorcycle 20s ease infinite;
-moz-animation:
colorcycle 20s ease infinite;
-webkit-animation: colorcycle 20s ease infinite; animation: colorcycle 20s ease infinite;
background: linear-gradient(270deg, #a253e0, #f15b4f, #2ea3f2);
background-size: 600% 600%;
}
@-webkit-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes colorcycle { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.et_pb_section_video_bg { opacity: .9; }Ecco come sarà:
Scarica DIVI ora!!!
Conclusione
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Vedi anche la nostra guida a Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...