Kolumna z teksturą — col-pattern-bg · col-pattern-bg-prawa

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

• Wiersz 1/2 + 1/2, moduł Obrazek w kolumnie ze zdjęciem.
• Wybierz wariant po stronie, na której stoi zdjęcie: zdjęcie po lewej → col-pattern-bg, zdjęcie po prawej → col-pattern-bg-prawa. Wpisanie wariantu lewego na prawej kolumnie wypcha teksturę w złą stronę — pod tekst zamiast poza ekran.
• Obrazek: promień narożników 6px, cień preset3, kolor cienia rgba(0,0,0,0.15)
• Wiersz: „wyrównaj wysokości kolumn” włączone — inaczej tekstura kończy się w losowym miejscu.

Pułapki i uwagi

• Warianty różnią się jedną parą właściwości. Lewy: left: -50vw i right: 0. Prawy odwrotnie: left: 0 i right: -50vw. Reszta reguł jest wspólna.
• Wariant prawy wymaga obcięcia sekcji, lewy nie. Treść wychodząca poza lewą krawędź ekranu nie powiększa obszaru przewijania, ale wychodząca poza prawą — owszem, i na stronie pojawia się poziomy pasek. Dlatego CSS dokłada overflow-x: clip do sekcji z tą kolumną. Użyte jest clip, a nie hidden, bo nie tworzy kontenera przewijania i pozwala zostawić pion widoczny.
• top: 35% ustawia, w którym miejscu kolumny tekstura się zaczyna — to procent wysokości kolumny, nie zdjęcia.
• Poniżej 991px tekstura jest chowana — na telefonie nie ma miejsca na wyjście poza kolumnę.
• Jeśli tekstura jest ucinana, ustaw w sekcji i wierszu Zaawansowane › Widoczność › Przepełnienie poziome i pionowe = Widoczny.
• Adres obrazka w CSS jest bezwzględny i wskazuje na 4hand.uuru.pl — przy przenoszeniu na inną domenę trzeba go podmienić.

Kod CSS — do skopiowania

/* =====================================================
   KOLUMNA Z TEKSTURĄ — dwa warianty, lustrzane odbicia
   -----------------------------------------------------
   col-pattern-bg         kolumna po LEWEJ  — tekstura ucieka w lewo
   col-pattern-bg-prawa   kolumna po PRAWEJ — tekstura ucieka w prawo

   Wariant dobiera się do strony, po której kolumna stoi w wierszu.
   Wszystko poza kierunkiem ucieczki jest wspólne.
   ===================================================== */

.col-pattern-bg,
.col-pattern-bg-prawa {
  position: relative;
  z-index: 1;
}

.col-pattern-bg::before,
.col-pattern-bg-prawa::before {
  content: "";
  position: absolute;
  top: 35%;
  bottom: 0;                  /* kończy się na dole kolumny */
  background-color: #f8f8f8;
  background-image: url("https://4hand.uuru.pl/wp-content/uploads/2026/05/black-twill.png");
  background-repeat: repeat;
  opacity: 0.2;
  z-index: -2;
  pointer-events: none;
}

/* ----- kolumna po LEWEJ: tekstura wychodzi w lewo ----- */
.col-pattern-bg::before {
  left: -50vw;                /* idzie 50vw w lewo, poza ekran */
  right: 0;                   /* zatrzymuje się na prawej krawędzi kolumny */
}

/* ----- kolumna po PRAWEJ: to samo, tylko odbite ----- */
.col-pattern-bg-prawa::before {
  left: 0;                    /* zaczyna się na lewej krawędzi kolumny */
  right: -50vw;               /* idzie 50vw w prawo, poza ekran */
}

/* ⚠️ Wariant prawy MUSI mieć to obcięcie, lewy nie.
   Treść wychodząca poza LEWĄ krawędź ekranu nie powiększa obszaru
   przewijania, ale wychodząca poza PRAWĄ — owszem, i strona dostaje
   poziomy pasek. `clip` zamiast `hidden`, bo nie tworzy kontenera
   przewijania i pozwala zostawić pion widoczny. */
.et_pb_section:has(.col-pattern-bg-prawa) {
  overflow-x: clip;
}

/* Mobile: ukryj */
@media (max-width: 991px) {
  .col-pattern-bg::before,
  .col-pattern-bg-prawa::before {
    content: none;
  }
}

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ć.