Slajder realizacji — wzór

Slajder realizacji — 4Hand

Shortcode (moduł Tekst):

Realizacja 5 Realizacja 4 Realizacja 3Warszawa Powiśle Realizacja 2 Realizacja szablon1

← →

Zwraca samą karuzelę ze strzałkami. Lewy tekst i tło robisz modułami Divi.
Wtyczka: „4Hand — Realizacje” (autor bbrzeski.pl).

Parametry

• count — ile realizacji (domyślnie 8)
• tag — z którego tagu (domyślnie wybrane); brak otagowanych = najnowsze

Jak zbudować układ

1. Sekcja: tło #2b2b2b, prawe dopełnienie 0.
2. Wiersz: 2 kolumny 1/3 + 2/3, szerokość 100%, max 100%.
3. Lewa kolumna: nadtytuł subtitle-4hand, nagłówek, tekst, przycisk btn-bok.
4. Prawa kolumna: moduł Tekst →
   Realizacja 5 Realizacja 4 Realizacja 3Warszawa Powiśle Realizacja 2 Realizacja szablon1

   ← →
   .
5. Wcięcie z lewej + bleed w prawo — klasa rzs-sekcja na sekcji + CSS:
   .rzs-sekcja{padding-left:max(24px,calc((100vw - 1280px)/2))!important;padding-right:0!important;}

Wybór realizacji na slajder

Realizacje → Tagi realizacji → tag wybrane; przy realizacji zaznacz ten tag. Nazwa tagu nie wyświetla się na froncie.

CSS modułu — do skopiowania

/* =====================================================
   4HAND — MODUŁ: Slajder realizacji     

      

        

                      
                            Realizacja 5
            
                      
                            Realizacja 4
            
                      
                            Realizacja 3Warszawa Powiśle
            
                      
                            Realizacja 2
            
                      
                            Realizacja szablon1
            
                  
      
      

        ←
        →
      
    
    
     (wersja 10)
   SAMA karuzela: wypełnia kolumnę, w której wstawisz shortcode.
   Lewy tekst i tło robisz modułami Divi (sekcja + wiersz 2 kolumny).
   Bleed w prawo = ustawienia wiersza/sekcji w Divi (szer. 100%, prawe dopełnienie 0).
   Wklej do Opcje motywu → Niestandardowy CSS.
   ===================================================== */
.rzs-karuzela{ position:relative; min-width:0; }
.rzs-viewport{ overflow:hidden; padding:24px 0; }
.rzs-track{ display:flex; gap:0; will-change:transform; }

.rzs-kafel{ flex:0 0 calc(100%/3.5); position:relative; overflow:hidden; aspect-ratio:3/4; background:#000;
  text-decoration:none; color:inherit; transition:transform .4s cubic-bezier(.2,0,.2,1); }
.rzs-kafel:hover{ transform:scale(1.06); z-index:5; box-shadow:0 18px 44px rgba(0,0,0,.55); }
.rzs-kafel img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,0,.2,1); }
.rzs-kafel:hover img{ transform:scale(1.1); }
.rzs-kafel::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(15,15,15,.9),rgba(15,15,15,.1) 55%,transparent); }
.rzs-kafel .rzs-rog{ position:absolute; top:0; left:0; z-index:3; width:0; height:0; border-style:solid;
  border-width:60px 20px 0 0; border-color:#F0C609 transparent transparent transparent; }
.rzs-cap{ position:absolute; left:0; bottom:0; z-index:2; width:100%; padding:18px 16px; }
.rzs-tytul{ display:block; font:700 16px/1.25 "Poppins",sans-serif; color:#fff; margin-bottom:3px; }
.rzs-pod{ display:block; font-size:12px; color:#d6d6d6; }

/* strzałki pod karuzelą */
.rzs-arrows{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.rzs-arrows button{ width:58px; height:42px; background:#F0C609; color:#fff; border:0; cursor:pointer;
  font:700 22px/1 "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 .25s ease; }
.rzs-arrows button:hover{ filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }

@media(max-width:900px){ .rzs-kafel{ flex:0 0 calc(100%/2.3); } }
@media(max-width:560px){ .rzs-kafel{ flex:0 0 calc(100%/1.35); } }

CSS wklej do Divi → Opcje motywu → Niestandardowy CSS. Drugi moduł Kod poniżej to tylko styl tego opisu — nie kopiuj go.