Czy chcesz wiedzieć, jak dostosować moduł „Odliczanie czasu”? Divi z GIF-em?
W dzisiejszym samouczku pokażemy, jak używać pełnoekranowego wideo w tle w kursie. „Zegar odliczający”. Może być wykorzystany do "stworzenia napięcia" w zabawny i niebanalny sposób.
Zacznijmy!
badanie
Zanim zagłębimy się w ten samouczek, przyjrzyjmy się rezultatowi, jaki chcemy osiągnąć.
Projekt odliczania z Divi
Przygotowanie elementów projektu
Odliczanie, które zamierzamy zaprojektować, wykorzystuje wideo w tle. Istnieje wiele miejsc, w których można znaleźć bezpłatne lub płatne materiały stockowe. Ale w tym samouczku skorzystamy z kilku darmowych klipów wideo z Wideo.
Oto bezpośredni link do filmu, którego będziemy używać: Latające cząstki.
Wdrożenie projektu z Divi
Możesz użyć istniejącej strony. Ale dla uproszczenia będziemy pracować na nowej stronie.
Stwórz więc nową stronę i dodaj wiersz z następującą strukturą kolumn.
Włóż moduł " Minutnik ».
Ustawianie parametrów modułu
Najpierw wybierz datę do odliczania, a następnie edytuj:
- Użyj koloru tła: NIE
Teraz kliknij na zakładkę "Projekt" i zmień poniższe ustawienia.
- Rozmiar tekstu liczb: 85px
- Rozmiar tekstu etykiety: 15px
UWAGA : będzie wyglądać, jakby w ogóle nie było odliczania, ponieważ usunęliśmy kolor tła. Gdy dodamy nasz film w tle w poniższych instrukcjach, będziemy mogli zobaczyć odliczanie.
Ustawianie parametrów sekcji
Teraz musimy dokonać drobnych zmian w sekcji. Najedź kursorem na sekcję i otwórz ustawienia.
W zakładce Treść, Przejdź do ustawień " Tło Wideo », a następnie Tło Wideo MP4.
Kliknij « Dodaj tło Wideo » i dodaj film, który pobraliśmy wcześniej z Wideo. Powinieneś teraz zobaczyć wideo w tle odtwarzane za naszym odliczaniem.
Teraz musimy dokonać tylko jednej małej korekty w zakładce Zaawansowane parametry modułu sekcji. Dodaj niestandardowy CSS poniżej w Główny element.
height: 100vh; 
Oto, co powinieneś zobaczyć do tej pory.
Dodano niestandardowy CSS
Ostatnią rzeczą, którą musimy zrobić, to dodać niestandardowy CSS, który zabierze nas do końca.
Więc otwórz ustawienia modułu, kliknij zakładkę "Zaawansowany" i dodaj klasę CSS
- Klasa CSS: niestandardowe odliczanie-5
Teraz, gdy nasza klasa niestandardowa została dodana, jesteśmy gotowi do dodania niestandardowego kodu CSS.
Aby to zrobić, przejdź do ustawień strony.
Przejdź do zakładki Zaawansowane i dodaj poniżej niestandardowy CSS.
.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;
}
Następnie zapisz zmiany i podziwiaj swoje dzieło!
BONUS: dodatkowa personalizacja
Możemy połączyć animowany gradient z naszym filmem w tle, aby uzyskać jeszcze bardziej unikalny wygląd. Po prostu dodaj CSS poniżej (po CSS powyżej).
.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; }Oto jak to będzie wyglądać:
Pobierz DIVI teraz !!!
Wnioski
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów. Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Zobacz także nasz przewodnik po Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
