Custom CSS w Divi – jak dodać własny styl?

maj 5, 2026 | Porady

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