Okna PVC

Nowoczesne, trwałe i energooszczędne. Doskonała izolacja cieplna oraz akustyczna.

Okna PVC

Okna drewniane

Naturalne piękno drewna połączone z nowoczesną technologią produkcji.

Okna drewniane

Okna aluminiowe

Minimalistyczny design i możliwość wielkogabarytowych przeszkleń.

Okna aluminiowe
← Repozytorium modułów

Kafel oferty — oferta-card

Moduł Divi: to nie moduł, tylko kolumna z modułami w środku

Klasa: oferta-card — na kolumnie, nie na module

Zawartość kolumny: moduł Obrazek + moduł Tekst z tytułem + moduł Tekst z opisem (trzy osobne moduły)

Jak przenieść na inną stronę

  1. Skopiuj sekcję z modułem (prawy klik na sekcji › Kopiuj) i wklej na docelowej stronie, albo zapisz ją do Biblioteki Divi.
  2. Skopiuj moduł Kod z tej strony i wklej na docelowej stronie — w nim siedzi cały CSS, więc moduł działa od razu.
  3. Gdy moduł zostaje na stałe: przenieś CSS z modułu Kod do arkusza motywu, a moduł Kod skasuj.

Ustawienia w Divi

  • Kolumna: tło #FFFFFF, dopełnienie 40px | 20px | 100px | 20px
  • Cień kolumny: preset2, poziomo -6px, pionowo 7px, rozmycie 28px, rozproszenie -9px
  • Hover kolumny: Przekształć › Przesuń → 0px | -7px
  • Link: Zaawansowane › Link › URL — Divi nie renderuje tego linku w HTML, patrz pułapki
  • Obrazek: wysokość 189px, wyrównanie do środka
  • Tytuł: osobny moduł Tekst, H3 wyrównany do środka, dolny margines 6px
  • Opis: osobny moduł Tekst, akapit wyrównany do środka — rozbity od tytułu, żeby każdy miał własne ustawienia
  • Wiersz: własny rynnowy odstęp = 2, „wyrównaj wysokości kolumn” włączone

Pułapki i uwagi

  • Żółta strzałka to ::after kolumny — nie wstawiaj jej jako osobny moduł.
  • Dolne dopełnienie kolumny musi wynosić min. 100px, inaczej tekst wchodzi pod strzałkę (strzałka ma 50px wysokości).
  • min-height: 380px trzyma równą wysokość kafli, gdy opisy mają różną długość.
  • Link na kolumnie nie działa — Divi dodaje kolumnie klasę et_clickable, ale nie wypisuje adresu w HTML. Dlatego odnośnikiem jest moduł Przycisk z klasą kafel-link, rozciągnięty na cały kafel i niewidoczny; kolumna dostaje klasę kafel-klik. Powstaje prawdziwy <a href>, adres ustawia się normalnie w Divi, a przycisk musi być ostatnim modułem w kolumnie. Ten sam mechanizm ma kafel odwracany — źródło w moduly/kafel-klik.css.

Kod CSS — do skopiowania

/* =====================================================
   KAFEL OFERTY — strzałka na dole kolumny
   ===================================================== */

.oferta-card {
  position: relative;
  min-height: 380px;
}

.oferta-card::after {
  content: "→";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 50px;
  background: #F0C609;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  -webkit-clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  transition: filter 0.3s ease;
}

.oferta-card:hover::after {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

Ten sam kod jest w module Kod poniżej (etykieta „CSS modułu”) — dlatego moduł działa na tej stronie samodzielnie. Drugi moduł Kod odpowiada tylko za wygląd tego opisu i nie należy go kopiować.

← Repozytorium modułów