4HAND

Jasne tło

Kolor H4 nieustawiony w module — działa wartość awaryjna z CSS.

Okna – Drzwi

Ciemne tło

Kolor H4 ustawiony w module na biały. Kreska zbielała razem z tekstem.

4HAND

Żółte tło

Kolor H4 ustawiony w module na ciemny. Ta sama klasa, inny kolor.

← Repozytorium modułów

Nadtytuł z kreską — subtitle-4hand

Moduł Divi: Tekst
Klasa: subtitle-4hand — wpisywana w kodzie HTML, nie w polu klasy modułu
Użycie: <h4 class="subtitle-4hand">4HAND</h4>

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

  • Wpisz w treść modułu Tekst nagłówek h4, a pod nim właściwy h2.
  • Kolor nadtytułu ustawiasz w Divi: Tekst → Nagłówek H4 → Kolor. Kreska przyjmuje ten sam kolor sama — nie ma osobnego ustawienia.
  • Typografia H4 w module: Poppins 700, 20–21px, odstęp liter 3px
  • Typografia H2: Poppins 800, 40px, kolor #323232 (na ciemnym tle: #ffffff)
  • Treść nadtytułu jest dowolna — na stronie głównej używane jest 4HAND oraz Okna - Drzwi.

Pułapki i uwagi

  • Kreska to ::after, więc nie da się jej zaznaczyć ani skopiować — i dobrze, bo nie trafia do treści.
  • Klasa idzie na znacznik HTML wewnątrz modułu. Wpisanie jej w „Klasa CSS” modułu Tekst nie zadziała — ostyluje wtedy cały moduł, nie sam nagłówek.
  • display: inline-flex wymusza układ tekst + kreska w jednej linii. Przy bardzo długim nadtytule kreska ucieka na drugą linię — nadtytuł ma być krótki.
  • Dlaczego kolor działa z Divi: kreska ma background: currentColor, czyli „kolor tekstu tego elementu”. Divi wypisuje kolor jako .et_pb_text_N h4 { color: … !important } — selektor mocniejszy od samej klasy, więc ustawienie z buildera wygrywa. Dlatego kolor w CSS jest bez !important: działa tylko wtedy, gdy w module nic nie ustawiono.
  • Historia: do 25.08.2026 klasa miała kolor wpisany na sztywno z !important i były trzy warianty (subtitle-4hand-bialy, subtitle-4hand-czarny). Zastąpiła je jedna klasa sterowana z Divi — warianty skasowane.

Kod CSS — do skopiowania

/* =====================================================
   NAGŁÓWEK 4HAND — tekst z kreską obok
   -----------------------------------------------------
   KOLOR USTAWIA SIĘ W DIVI: moduł Tekst -> Tekst -> Nagłówek H4 -> Kolor.
   Kreska bierze ten sam kolor, bo ma `background: currentColor`.
   Jedna klasa obsługuje wszystkie tła — jasne, ciemne i żółte.
   Kolor niżej jest AWARYJNY (bez !important) i działa tylko wtedy,
   gdy w module nic nie ustawiono.
   ===================================================== */

.subtitle-4hand {
  display: inline-flex !important;
  align-items: center;
  gap: 1em;
  letter-spacing: 0.3em;
  font-weight: 700;
  font-size: 0.9em;
  text-transform: uppercase;
  margin: 0 0 0.75em;
  padding: 0 !important;
  color: #F0C609;
}

.subtitle-4hand::after {
  content: "";
  display: inline-block;
  width: 3em;
  height: 1px;
  background: currentColor;
}

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