Kunne du tænke dig at vide, hvordan du tilpasser modulet "Countdown Timer" af Divi med en GIF?
I dagens selvstudie viser vi dig, hvordan du bruger en baggrundsvideo i fuld skærm i dit kursus. "Nedtællingstimer". Det kan bruges til at "skabe spænding" på en sjov og bemærkelsesværdig måde.
Lad os starte!
undersøgelse
Før vi dykker ned i denne tutorial, lad os tage et kig på det resultat, vi ønsker at opnå.
Nedtællingsdesign med Divi
Udarbejdelse af designelementer
Nedtællingen, som vi skal designe, bruger en video i baggrunden. Der er mange steder at finde gratis eller premium stock-optagelser. Men til denne tutorial vil vi drage fordel af nogle gratis videoklip fra videezy.
Her er det direkte link til den video, vi skal bruge: Flyvende partikler.
Design implementering med Divi
Du kan bruge en eksisterende side. Men for nemhedens skyld vil vi arbejde i en ny side.
Så opret en ny side og tilføj en række med følgende kolonnestruktur.
Indsæt modulet " Nedtællingstimer ».
Indstilling af modulparametre
Vælg først en dato indtil nedtællingen, og rediger derefter:
- Brug baggrundsfarve: NEJ
Klik nu på fanen "Design" og ændre indstillingerne nedenfor.
- Tal tekststørrelse: 85px
- Etikettekststørrelse: 15px
BEMÆRKNING: det vil se ud som om der slet ikke er nogen nedtælling, fordi vi har fjernet baggrundsfarven. Når vi har tilføjet vores baggrundsvideo i instruktionerne nedenfor, vil vi være i stand til at se nedtællingen.
Indstilling af sektionsparametre
Nu skal vi lave nogle mindre ændringer i afsnittet. Hold markøren over sektionen, og åbn indstillingerne.
I fanen Indhold, gå til indstillinger " Baggrund video »og så Baggrund video MP4.
Klik « Tilføj baggrund video » og tilføje videoen, vi downloadede tidligere fra videezy. Du skulle nu se baggrundsvideoen, der afspilles bag vores nedtælling.
Vi skal nu kun foretage en lille justering i fanen Avanceret sektionsmodulets parametre. Tilføj den tilpassede CSS nedenfor Hovedelement.
height: 100vh; 
Her er hvad du bør se indtil videre.
Tilføjet brugerdefineret CSS
Den sidste ting, vi skal gøre, er at tilføje den brugerdefinerede CSS for at tage os hele vejen.
Så åbn modulindstillingerne, klik på fanen "Fremskreden" og tilføj CSS-klassen
- CSS klasse: tilpasset-nedtælling-5
Nu hvor vores tilpassede klasse er blevet tilføjet, er vi klar til at tilføje vores tilpassede CSS.
For at gøre dette skal du gå til sideindstillingerne.
Gå til fanen Avanceret og tilføj den tilpassede CSS nedenfor.
.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;
}
Gem derefter dine ændringer og beundre din kreation!
BONUS: yderligere tilpasning
Vi kan kombinere animeret gradient til vores baggrundsvideo for et endnu mere unikt look. Bare tilføj CSS nedenfor (efter CSS ovenfor).
.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; }Sådan ser det ud:
Download DIVI nu!!!
Konklusion
Vi håber, at denne vejledning vil inspirere dig til dine næste projekter. Divi. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Se også vores guide til WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
