Custom CSS w Divi — jak dodawać własny CSS?
Choć Divi pozwala stworzyć większość rzeczy bez kodu, czasem chcesz dodać coś bardzo specyficznego — efekt hover, animację, niestandardowy layout. W tym poradniku pokażę 4 sposoby dodawania custom CSS w Divi.
Sposób 1: Theme Options → Custom CSS (globalny)
W Divi → Theme Options → General → Custom CSS wklejasz CSS, który ładuje się na całej stronie. Idealne dla globalnych zmian (typografia, kolory, przyciski).
Sposób 2: Indywidualny moduł → Advanced → Custom CSS
Każdy moduł, sekcja i wiersz Divi ma zakładkę Advanced → Custom CSS. Możesz dodać CSS z konkretnymi selektorami (Before, Main, After). Zmiana dotyczy tylko tego elementu.
Sposób 3: Customizer → Additional CSS
Wbudowane w WordPress narzędzie. Dostęp przez Wygląd → Dostosuj → Dodatkowy CSS. Pozwala podglądać zmiany w czasie rzeczywistym.
Sposób 4: Plik child theme
Najbardziej zaawansowany sposób. Wymaga stworzenia child theme (motywu potomnego). Wpisujesz CSS w pliku style.css child theme. Zaleta: zmiany przeżyją aktualizację motywu.
Najczęściej dodawane snippety CSS dla Divi
Sticky add-to-cart na mobile:
@media (max-width: 768px) {
.single-product .cart {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
}
}
Hover effect na kartach produktów:
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
Więcej snippetów dla Divi znajdziesz w naszym blogu.
Pobierz Divi -10% →
Powiązane
Gdzie dodać własny CSS w Divi?
Masz kilka miejsc: Divi → Theme Options → Custom CSS (globalny CSS dla całej strony), Theme Customizer → Additional CSS (z podglądem na żywo) oraz pole Custom CSS w zaawansowanych ustawieniach każdego modułu (dla pojedynczego elementu). Do większych zmian najlepszy jest motyw potomny (child theme) — przetrwa aktualizacje motywu.
Najczęstsze zastosowania własnego CSS w Divi
- Drobne korekty odstępów — gdy opcje wizualne nie dają dokładnej kontroli.
- Style hover — animacje przycisków i kart.
- Responsywność — poprawki dla konkretnych breakpointów przez media queries.
- Ukrywanie elementów — np. display:none dla zbędnych części na mobile.
Jak pisać CSS, który nie psuje aktualizacji?
Używaj klas CSS (np. dodaj własną klasę w polu „CSS Class” modułu) zamiast targetować wygenerowane przez Divi ID, które zmieniają się przy edycji. Trzymaj cały kod w jednym miejscu (child theme lub Theme Options) i komentuj sekcje, żeby po miesiącach wiedzieć, co robi dany fragment.
Debugowanie własnego CSS
Korzystaj z narzędzi deweloperskich przeglądarki (F12 → Inspect), by sprawdzić, która reguła wygrywa. Jeśli styl nie działa, częstą przyczyną jest specyficzność — czasem trzeba dodać bardziej precyzyjny selektor zamiast !important, który utrudnia późniejsze zmiany.
Responsywny CSS w Divi
Divi pozwala ustawiać różne wartości dla desktopu, tabletu i telefonu bez pisania kodu, ale przy precyzyjnych poprawkach przydaje się własny CSS z media queries. Targetuj breakpointy Divi (np. max-width: 980px dla tabletu, 767px dla telefonu), by dopracować układ tam, gdzie opcje wizualne nie wystarczają.
Organizacja własnego CSS
- Jedno miejsce — Theme Options lub motyw potomny, nie rozrzucone po modułach.
- Komentarze — opisuj sekcje, by łatwo wrócić po miesiącach.
- Klasy zamiast ID — stabilniejsze przy edycji w builderze.
Kiedy CSS to za mało?
Własny CSS zmienia wygląd, ale nie doda nowej funkcjonalności — do tego potrzebny jest JavaScript lub wtyczka. Jeśli łapiesz się na pisaniu setek linii CSS, by obejść ograniczenia, rozważ dodatek rozszerzający Divi (Divi Supreme, Divi Plus) lub motyw potomny z własnymi funkcjami.
