Möchten Sie wissen, wie Sie das Modul "Countdown-Timer" von anpassen können Divi mit einem GIF?
Im heutigen Tutorial zeigen wir Ihnen, wie Sie ein Vollbild-Hintergrundvideo in Ihrem Kurs verwenden. „Countdown-Timer“. Es kann verwendet werden, um auf unterhaltsame und bemerkenswerte Weise "Spannung zu erzeugen".
Lassen Sie uns beginnen!
Übersicht
Bevor wir in dieses Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis, das wir erreichen möchten.
Countdown-Design mit Divi
Vorbereitung von Gestaltungselementen
Der Countdown, den wir entwerfen werden, verwendet ein Video im Hintergrund. Es gibt viele Orte, an denen Sie kostenloses oder Premium-Archivmaterial finden können. Aber für dieses Tutorial werden wir einige kostenlose Videoclips von nutzen Video.
Hier ist der direkte Link zu dem Video, das wir verwenden werden: Fliegende Teilchen.
Designumsetzung mit Divi
Sie können eine vorhandene Seite verwenden. Aber der Einfachheit halber werden wir in einer neuen Seite arbeiten.
Erstellen Sie also eine neue Seite und fügen Sie eine Zeile mit der folgenden Spaltenstruktur hinzu.
Fügen Sie das Modul " Countdown-Timer ».
Modulparameter anpassen
Wähle zuerst ein Datum bis zum Countdown und bearbeite dann:
- Hintergrundfarbe verwenden: NEIN
Klicken Sie nun auf die Registerkarte "Entwurf" und ändern Sie die Einstellungen unten.
- Zahlen Textgröße: 85px
- Beschriftungstextgröße: 15px
ANMERKUNG : es sieht so aus, als gäbe es überhaupt keinen Countdown, weil wir die Hintergrundfarbe entfernt haben. Sobald wir unser Hintergrundvideo in den Anweisungen unten hinzugefügt haben, können wir den Countdown sehen.
Bereichsparameter einstellen
Jetzt müssen wir einige kleinere Änderungen an dem Abschnitt vornehmen. Bewegen Sie den Mauszeiger über den Abschnitt und öffnen Sie die Einstellungen.
In der Registerkarte Inhalt, gehe zu den Einstellungen " Hintergrund Video »und dann Hintergrund Video MP4.
Klicken Sie auf « Hintergrund hinzufügen Video » und fügen Sie das Video hinzu, von dem wir zuvor heruntergeladen haben Video. Sie sollten jetzt das Hintergrundvideo sehen, das hinter unserem Countdown abgespielt wird.
Jetzt müssen wir nur noch eine kleine Anpassung im Reiter vornehmen Fortgeschrittener Parameter des Abschnittsmoduls. Fügen Sie das benutzerdefinierte CSS unten hinzu Hauptelement.
height: 100vh; 
Hier ist, was Sie bisher sehen sollten.
Benutzerdefiniertes CSS hinzugefügt
Das Letzte, was wir tun müssen, ist das benutzerdefinierte CSS hinzuzufügen, um uns den ganzen Weg zu weisen.
Öffnen Sie also die Moduleinstellungen und klicken Sie auf die Registerkarte "Fortschrittlich" und füge die CSS-Klasse hinzu
- CSS-Klasse: benutzerdefinierter Countdown-5
Nachdem unsere benutzerdefinierte Klasse hinzugefügt wurde, können wir unser benutzerdefiniertes CSS hinzufügen.
Gehen Sie dazu zu den Seiteneinstellungen.
Gehen Sie zur Registerkarte Fortgeschrittener und fügen Sie das benutzerdefinierte CSS unten hinzu.
.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;
}
Speichern Sie dann Ihre Änderungen und bewundern Sie Ihre Kreation!
BONUS: zusätzliche Anpassung
Wir können animierte Farbverläufe mit unserem Hintergrundvideo kombinieren, um einen noch einzigartigeren Look zu erzielen. Fügen Sie einfach das CSS unten hinzu (nach dem CSS oben).
.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; }So wird es aussehen:
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Projekte inspirieren wird. Divi. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Siehe auch unseren Leitfaden zu WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
