Kafel odwracany

Najważniejsza zasada: kolumna się nie rusza

Dlatego tutaj kolumna jest nieruchoma — daje tylko głębię 3D i pełni rolę stabilnego obszaru najechania. Obracają się dwie strony kafla, każda o te same 180 stopni w tę samą stronę: przód z rotateY(0) na rotateY(-180deg), rewers z rotateY(180deg) na rotateY(0). Ponieważ obie mają backface-visibility: hidden, zasłaniają się nawzajem i wygląda to jak obrót jednej bryły.

Tło i cień siedzą na stronach, nie na kolumnie

Gdyby cień został na kolumnie, stałby nieruchomo w trakcie obrotu i zdradzał, że nic się fizycznie nie obraca. Dlatego białe tło z cieniem ma przód, a żółte tło z cieniem ma rewers. Kolumna jest przezroczysta i bez cienia. Cień jedzie razem z obracaną stroną, a najechanie dalej działa na nieruchomym elemencie.

Dlaczego przód to Notka, a nie zdjęcie i tekst osobno

Przód musi być jednym elementem, żeby obracał się w całości razem z tłem i cieniem. Dwa osobne moduły dałyby dwa osobne cienie i dwa niezależne obroty. Moduł Notka ma zdjęcie i tytuł w jednym module, więc pasuje dokładnie.

Notka wymaga przy tym dwóch obejść: jej opakowania obrazka są domyślnie inline-block dopasowane do treści, więc żeby dało się obrazek wyśrodkować, trzeba je zrobić blokowymi na pełną szerokość (.et_pb_main_blurb_image i .et_pb_image_wrap). Wysokości zdjęcia ani dopełnienia samego tytułu Notka nie wystawia w ustawieniach — stąd .et_pb_blurb_container.

W ustawieniach Notki wyłącz też animację obrazka (Projekt › Obrazek › Animacja = Brak). Divi zostawia wtedy klasę et-waypoint, ale jest ona nieszkodliwa — reguła ukrywająca dotyczy tylko animacji fade_in.

Dwie wersje, przełączane widocznością w Divi

Na telefonie nie ma najechania, więc odwracanie tam nie działa. Zamiast kombinować jednym układem, są dwa osobne wiersze, przełączane ustawieniem Divi Zaawansowane › Widoczność:

• Wiersz z kaflami odwracanymi — wyłączony na telefonie i tablecie (disabled_on="on|on|off")
• Wiersze z kaflami zwykłymi — wyłączone na komputerze (disabled_on="off|off|on"): zdjęcie, tytuł, opis pod tytułem na białym tle i strzałka na dole

Kolejność pól to telefon | tablet | komputer, gdzie on znaczy „ukryty”.

Strzałka w rombie

To nie jest grafika — to ::after elementu: znak → na żółtym tle, ścięty przez clip-path w pikselach. Ten sam mechanizm, co w kaflu oferty i w przycisku btn-bok. Na wersji odwracanej klasa kafel-strzalka siedzi na przodzie kafla, żeby strzałka znikała razem z nim; na wersji mobilnej — na kolumnie.

Odnośnik

Link na kolumnie w Divi nie działa — dokłada klasę et_clickable, ale nie wypisuje adresu w kodzie strony. Dlatego odnośnikiem jest moduł Przycisk z klasą kafel-link, rozciągnięty na cały kafel i pozbawiony tła, obramowania i rozmiaru tekstu. Leży na kolumnie, czyli poza obracanymi stronami — dzięki temu nie znika w trakcie obrotu i jest klikalny cały czas. W kodzie powstaje prawdziwy <a href>, a adres ustawia się w Divi.

Ustawienia w Divi

• Wiersz: rynnowy odstęp 2, wyrównaj wysokości kolumn, Widoczność → wyłącz na telefonie i tablecie
• Kolumna: klasy flip-kafel kafel-klik, bez tła, bez cienia, dopełnienie 0
• Notka (przód): klasy flip-przod kafel-strzalka, tło #FFFFFF, cień preset2, dopełnienie 40px | 0 | 70px | 0 (boki na zero — zdjęcie ma iść na całą szerokość), animacja obrazka wyłączona, tytuł H3 Poppins 800 26px do środka
• Tekst (rewers): klasa flip-tyl, cień preset2, tytuł 24px + akapit 16px, oba do środka
• Przycisk: klasa kafel-link, Adres URL = docelowa strona, tekst = tytuł kafla, ikona wyłączona
• Kolejność modułów: Notka → Tekst → Przycisk. Przycisk ostatni, żeby leżał na wierzchu.

Regulacja

• Szybkość obrotu: transition: transform 0.6s ease w regule dla obu stron
• Głębia perspektywy: perspective: 1200px na kolumnie — mniejsza wartość daje mocniejszy efekt 3D
• Wysokość kafla: min-height: 380px na przodzie

Ile kafli w wierszu

Moduł jest ten sam, zmienia się struktura wiersza. Im węższy kafel, tym więcej trzeba dostroić — bo nadwyżka wysokości ląduje nad zdjęciem (treść przodu jest dosunięta do dołu, żeby tytuł trzymał się blisko strzałki).

Przy nieparzystej liczbie kafli ostatni wiersz uzupełnij pustą kolumną, inaczej samotny kafel rozciągnie się na całą szerokość wiersza.

Moduł jest ten sam, zmienia się tylko struktura wiersza. Im węższy kafel, tym więcej trzeba dostroić:

• Dwa w wierszu (ok. 500 px) — działa na ustawieniach domyślnych, opisy mieszczą się z dużym zapasem, tytuły nie łamią się.
• Trzy w wierszu (ok. 317 px) — też bez zmian, to układ podstawowy.
• Cztery w wierszu (ok. 230 px) — wymaga korekt opisanych niżej.

Przy nieparzystej liczbie kafli ostatni wiersz uzupełnij pustą kolumną, inaczej samotny kafel rozciągnie się na całą szerokość wiersza.

Kafel w węższej kolumnie — co trzeba wtedy poprawić

Powyższy podgląd to trzy kafle w wierszu, czyli ok. 317 px szerokości. Na stronie głównej stoją cztery w wierszu i mają ok. 230 px — przy tej szerokości wyszły dwa problemy, oba zmierzone:

• Opis nie mieści się na rewersie. Przy 15 px i dopełnieniu 32/26 px dwa z czterech opisów wychodziły poza kafel (o 54 px i o 6 px). Poprawka: tekst rewersu 14px, dopełnienie 24px 18px, min-height przodu podniesione z 380 na 415px.
• Tytuły łamały się na dwa wiersze i przez to zdjęcia stały na różnych wysokościach (różnica 31 px). Poprawka: tytuł 22px zamiast 24px i boczne dopełnienie tytułu 12px zamiast 20px — razem dają 206 px na tekst, więc wszystkie tytuły mieszczą się w jednym wierszu i zdjęcia wyrównują się same, bez narzucania wysokości.

Kod CSS — do skopiowania

/* =====================================================
   KAFEL ODWRACANY — wariant kafla oferty
   -----------------------------------------------------
   ZASADA: kolumna się NIE rusza. Obracają się dwie strony
   kafla, i to one niosą tło oraz cień. Dzięki temu
   najechanie jest sprawdzane na nieruchomym elemencie
   i obrót się nie zapętla.

   Klasy na KOLUMNIE:  flip-kafel  kafel-klik
   Klasy na MODUŁACH:  flip-przod (Notka: zdjęcie + tytuł)
                       flip-tyl   (Tekst: tytuł + opis)
                       kafel-link (Przycisk: odnośnik)
                       kafel-strzalka (romb ze strzałką)
   ===================================================== */

/* ----- Kolumna: nieruchoma, daje tylko głębię 3D ----- */
.flip-kafel {
  position: relative;
  perspective: 1200px;
}

/* ----- Obie strony obracają się o te same 180 stopni ----- */
.flip-kafel .flip-przod,
.flip-kafel .flip-tyl {
  backface-visibility: hidden;
  transform-origin: center center;
  transition: transform 0.6s ease;
  margin: 0 !important;
}

/* Treść przodu jest wyrównana do GÓRY. Dzięki temu odstęp nad zdjęciem
   równa się dokładnie dopełnieniu górnemu Notki — zawsze, niezależnie
   od wysokości kafla.

   Przy wyrównaniu do dołu (flex-end) było odwrotnie: nad zdjęciem
   lądowało to, co zbywało po odjęciu treści, więc dopełnienie nie
   miało widocznego wpływu, a zmiana na jednym kaflu przesuwała
   zdjęcia we wszystkich (bo „Wyrównaj wysokości kolumn" ciągnie
   wszystkie do najwyższego). Nadmiar miejsca ląduje teraz na dole,
   nad strzałką. */
.flip-kafel .flip-przod {
  position: relative;
  transform: rotateY(0deg);
  min-height: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flip-kafel .flip-tyl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotateY(180deg);
  padding: 32px 26px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #F0C609;
}

.flip-kafel:hover .flip-przod {
  transform: rotateY(-180deg);
}

.flip-kafel:hover .flip-tyl {
  transform: rotateY(0deg);
}

/* Zdjęcie w Notce — tak samo jak w kaflu oferty: stała wysokość 189 px,
   naturalna szerokość, wyśrodkowane, BEZ przycinania. Zdjęcia produktowe
   są pionowe, więc rozciąganie na szerokość ucinałoby górę i dół.
   Opakowania muszą być blokowe na pełną szerokość, żeby dało się
   wyśrodkować obrazek; wysokości Notka nie wystawia w ustawieniach. */
.flip-przod .et_pb_main_blurb_image,
.flip-przod .et_pb_image_wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;
}

.flip-przod .et_pb_main_blurb_image img {
  display: inline-block;
  width: auto;
  height: 189px;
  max-width: 100%;
  object-fit: initial;
}

/* Odstęp tytułu od zdjęcia — Notka nie ma osobnego dopełnienia tytułu */
.flip-przod .et_pb_blurb_container {
  padding: 13px 20px 0;
}

/* ----- Wariant: CZTERY kafle w wierszu (klasa flip-4 na WIERSZU) -----
   Przy ok. 230 px kafel jest za wąski na ustawienia domyślne:
   opis nie mieścił się na rewersie, a tytuł łamał się na dwa wiersze.
   Nadwyżka wysokości ląduje NAD zdjęciem (treść jest dosunięta do dołu),
   więc min-height musi być równa realnej wysokości treści. ----- */

.flip-4 .flip-przod {
  min-height: 325px;
}

.flip-4 .flip-przod .et_pb_blurb_container {
  padding: 13px 12px 0;
}

.flip-4 .flip-tyl {
  padding: 20px 16px !important;
}

.flip-4 .flip-tyl p {
  font-size: 14px;
  line-height: 1.55em;
}

/* ----- Żółty romb ze strzałką (to samo, co w kaflu oferty) ----- */
.kafel-strzalka::after {
  content: "→";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 50px;
  background: #F0C609;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 700;
  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%);
  z-index: 2;
}


/* =====================================================
   4HAND — MECHANIZM: odnośnik na całym kaflu
   Klasy: kafel-klik (na kolumnie) + kafel-link (na module Przycisk)
   Używany przez: kafel oferty, kafel odwracany
   -----------------------------------------------------
   Po co: link ustawiony w Divi na kolumnie NIE DZIAŁA —
   dokłada kolumnie klasę et_clickable, ale nie wypisuje
   adresu w kodzie strony. Kafel wygląda na klikalny,
   a odnośnika nie ma ani dla użytkownika, ani dla Google.

   Rozwiązanie: odnośnikiem jest moduł Przycisk rozciągnięty
   na cały kafel i pozbawiony tła, obramowania oraz rozmiaru
   tekstu. Powstaje prawdziwy <a href>, adres ustawia się
   normalnie w Divi, a tekst przycisku zostaje w kodzie jako
   opis odnośnika dla czytników ekranu.

   Moduł Przycisk musi być OSTATNI w kolumnie.
   ===================================================== */

.kafel-klik {
  position: relative;
}

.kafel-klik .et_pb_button_module_wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 !important;
  z-index: 6;
}

.kafel-klik .kafel-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.kafel-klik .kafel-link::after {
  display: none !important;
}

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