Vill du veta hur man anpassar modulen "Countdown Timer" för Divi med en GIF?
I dagens handledning visar vi dig hur du använder en bakgrundsvideo i helskärmsläge i din kurs. "Nedräkning". Den kan användas för att "skapa spänning" på ett roligt och anmärkningsvärt sätt.
Låt oss börja!
undersökningen
Innan vi dyker in i den här handledningen, låt oss ta en titt på resultatet vi vill uppnå.
Nedräkningsdesign med Divi
Förberedelse av designelement
Nedräkningen som vi ska designa använder en video i bakgrunden. Det finns många ställen att hitta gratis eller premiummaterial. Men för den här handledningen kommer vi att dra nytta av några gratis videoklipp från videezy.
Här är direktlänken till videon vi kommer att använda: Flygande partiklar.
Designimplementering med Divi
Du kan använda en befintlig sida. Men för enkelhetens skull kommer vi att arbeta i en ny sida.
Så skapa en ny sida och lägg till en rad med följande kolumnstruktur.
Sätt in modulen " Nedräkning ".
Ställa in modulparametrar
Välj först ett datum fram till nedräkningen och redigera sedan:
- Använd bakgrundsfärg: NEJ
Klicka nu på fliken "Design" och ändra inställningarna nedan.
- Siffror Textstorlek: 85px
- Etiketttextstorlek: 15px
ANMÄRKNING: det kommer att se ut som om det inte finns någon nedräkning alls, eftersom vi tog bort bakgrundsfärgen. När vi har lagt till vår bakgrundsvideo i instruktionerna nedan kommer vi att kunna se nedräkningen.
Ställa in sektionsparametrar
Nu måste vi göra några mindre ändringar i avsnittet. Håll muspekaren över avsnittet och öppna inställningarna.
På fliken Innehåll, gå till Inställningar « Bakgrund Video »och sedan Bakgrund Video MP4.
Klicka på « Lägg till bakgrund Video » och lägg till videon vi laddade ner tidigare från videezy. Du bör nu se bakgrundsvideon spelas bakom vår nedräkning.
Vi behöver nu bara göra en liten justering i fliken Advanced Open water sektionsmodulens parametrar. Lägg till den anpassade CSS nedan i Huvudelementet.
height: 100vh; 
Här är vad du bör se hittills.
Lagt till anpassad CSS
Det sista vi behöver göra är att lägga till den anpassade CSS för att ta oss hela vägen.
Så öppna modulinställningarna, klicka på fliken "Avancerad" och lägg till CSS-klassen
- CSS-klass: anpassad-nedräkning-5
Nu när vår anpassade klass har lagts till är vi redo att lägga till vår anpassade CSS.
För att göra detta, gå till sidinställningarna.
Gå till fliken Advanced Open water och lägg till den anpassade CSS nedan.
.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;
}
Spara sedan dina ändringar och beundra din skapelse!
BONUS: ytterligare anpassning
Vi kan kombinera animerad gradient till vår bakgrundsvideo för ett ännu mer unikt utseende. Lägg bara till CSS nedan (efter CSS ovan).
.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å här kommer det att se ut:
Ladda ner DIVI nu!!!
Slutsats
Vi hoppas att den här handledningen kommer att inspirera dig för dina nästa projekt. Divi. Om du har några funderingar eller förslag, hitta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Se även vår guide till WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
