Gdy zaczniesz uczyć się więcej o metodologii projektowania, którą WordPress zintegrował z Divi, przekonasz się, że możesz dodać animowane tło gradientowe do swojej witryny.
Ten popularny motyw WordPress działa poprzez sekcje lub sekcje pomiędzy to może podziel zawartość strony i dodaj projekt do każdej ten
Dzięki tej funkcji będziesz w stanie odkryć sposób na uniknięcie monotonii monochromatycznego tła stron internetowych lub obrazów pobranych z sieci.
Chociaż Divi daje Ci możliwość zaprojektowania własnej strony internetowej, jeśli chcesz, możesz pobieranie gotowych projektów.
Dlatego wyjaśniamy, jak stworzyć ten konkretny wzór na swoim modelu WordPress aby poprawić wygląd Twojej witryny.
Czym są sekcje Divi i jak możesz je wstawić do swojej witryny?
To tylko poziome bloki, które są uważane za największe części konstruktora Divi.
Charakteryzują się stosem służącym do uszeregowania treści, które zostaną zintegrowane z projektem witryny, tak aby można je było uznać za „” zawinąć ”.
Wśród parametrów zawartych w tych blokach można ręcznie dodać animowane tło do „ Opcje projektowania ”.
Kroki tworzenia bloku modułu i dostępu do jego parametrów
Po upewnieniu się, że aktywowałeś konstruktor optyczny Divi, musisz kliknąć przycisk kolor « + Aby dodać sekcję. Pojawi się okno, w którym możesz dodać trzy rodzaje opcji: ” Szablon „,” Pełna szerokość „ORAZ” konkretny ”.
Po wybraniu jednego z nich będziesz mógł wybrać strukturę kolumn dla wierszy, które będzie zawierać sekcja.
Na koniec możesz wprowadzić sekcje i wybrać „ Ustawienia sekcji „Pojawi się tam, gdzie możesz zobaczyć dziennik zmian” Zawartość „,” Sens „ORAZ” zaawansowane ”.
Jak dodać animowane tło gradientowe w Divi? Krok po kroku
Metodą, której należy użyć, jest utworzenie żądanego tła gradientowego poprzez dostosowanie tła zawierającego konstruktor Divi za pomocą fragmentów CSS. Zacznij więc od utworzenia nowej strony WordPress i użyj Kreatora Divi, aby wybrać opcję „ Buduj od podstaw ”.
Zanim to zrobisz, będziesz miał puste płótno. Tutaj dodasz wiersz kolumny, jak wyjaśniono powyżej.
W konfiguracji sekcji musisz skonfigurować zawartość ” Materiał do farszu „W wysoki 12vw i dodał ” Światło: 40vw „W szarym polu pokazanym poniżej” Główne elementy CSS ”.
Stamtąd zaczniesz konfigurować tło gradientowe, w którym będziesz miał dostęp do opcji ” Nagrywać ” rodzaj guziki ” Zdegradowany ”.
Poniżej możesz wybrać kolory stoków, rodzaj stoku i kierunek.
Robiąc to, zmień rozmiar bloku do 100% szerokości i wysokości, aby rozpocząć tworzenie żądanej animacji.
Zostanie to zrobione poprzez niestandardową modyfikację CSS, więc musisz dodać konkretną klasę do edytowanej sekcji. dlatego musisz wejść w zakładkę ” zaawansowane „I odłóż nazwę animacji” Klasa CSS ”.
Codener, aby dodać animowane tło do Divi
Po dodaniu tej klasy możesz dodać sekcję kodu i umieścić następujące elementy w Obudowa ” Kod „Wewnątrz tagów.
Najlżejszy stok {
Rozmiar dolny: 400% 400%.
Animacja: nieskończona łatwość gradientu 5s.
}
Gradient @klatki kluczowe {
0% {
Pozycja kapitałowa: 0% 50%.
}
pięćdziesiąt% {
Pozycja kapitałowa: 100% 50%.
}
100% {
Pozycja kapitałowa: 0% 50%.
}
}
W ten sposób udało ci się ustawić tło gradientowe o szerokości 400% w stosunku do oryginalnego rozmiaru, a jego ruch jest ruchem po obu stronach.
Oprócz zalet projektowych, które oferuje Divi, ma również wiele narzędzi, które sprawią, że Twoja witryna będzie ulubiona wśród surferów, takich jak moc używaj bułki tartej aby poprawić SEO witryny lub wejdź do menu rozwijanego do jego użytku. a obsługa jest łatwiejsza.