4HAND

Wariant podstawowy — trzy kolumny

500+

zrealizowanych inwestycji

15

lat na rynku stolarki

10

lat gwarancji na montaż

Wariant dwóch kolumn — podpis w dwóch wierszach

0,7

współczynnik Uw
W/m²K

45

dB redukcji hałasu

← Repozytorium modułów

Pasek statystyk

Budowa: zwykły wiersz Divi z kolumnami — bez HTML-a w treści
Klasa: stats-divi na wierszu (Zaawansowane › Klasa CSS)
W każdej kolumnie: jeden moduł Tekst z nagłówkiem H3 (liczba) i akapitem (podpis)
Komponent nigdy nie trafił na stronę. Powstał 8 czerwca 2026 pod rozbudowę strony Okna, razem z process-grid, compare-table i hero-overlay — cały plik okna-new-styles.css nie został wklejony do Divi. Pierwotna wersja była zbudowana z ręcznie pisanego HTML-a i CSS-owego flexboksa; tutaj jest przepisana na natywny wiersz Divi.

Jak przenieść na inną stronę

  1. Skopiuj wiersz (prawy klik na wierszu › Kopiuj) i wklej na docelowej stronie.
  2. Skopiuj moduł Kod z etykietą „CSS modułu” — to sześć linijek odpowiadających za kreskę.
  3. Gdy pasek zostaje na stałe: przenieś CSS do arkusza motywu, moduł Kod skasuj.

Ustawienia w Divi

Wiersz:

  • Struktura: 3 kolumny (albo 2, albo 4 — dowolnie)
  • Zaawansowane › Klasa CSS: stats-divi
  • Projekt › Rozmiary › Wyrównaj wysokości kolumn: TAK
  • Projekt › Rozmiary › Własny rynnowy odstęp: 2

Moduł Tekst w kolumnie — liczba (H3):

  • Poppins, grubość 800, 56px, wysokość linii 1em, wyrównanie do środka
  • Kolor #F0C609
  • Zakładka telefonu: 40px

Moduł Tekst w kolumnie — podpis (akapit):

  • Poppins, 14px, odstęp liter 1.4px, wysokość linii 1.4em, wyrównanie do środka
  • Kolor #777777
  • Styl czcionki: wersaliki (przycisk TT w typografii)

Dlaczego tak, a nie HTML-em

  • Wiersz Divi sam układa kolumny jedna pod drugą poniżej 980 px — nie trzeba pisać żadnego flexboksa ani reguł zawijania.
  • Liczby i podpisy edytuje się klikając w moduł, a nie grzebiąc w kodzie.
  • Rozmiary na tablet i telefon ustawia się w zakładkach urządzeń w Divi.
  • Zostaje sześć linijek CSS zamiast pięćdziesięciu.

Uwagi

  • Liczby są przykładowe — 500+ / 15 / 10. Przed użyciem podmień na dane potwierdzone przez klienta.
  • Kreska jest ::after kolumny i siedzi przy jej prawej krawędzi. Przy dużym rynnowym odstępie będzie wyglądać na przesuniętą w lewo — stąd odstęp 2.
  • Podpis w dwóch wierszach: wstaw <br /> w treści modułu.
  • Kolor podpisu #777777 pochodzi z pierwotnego projektu. Reszta serwisu używa #323232.

Kod CSS — do skopiowania

/* =====================================================
   PASEK STATYSTYK — klasa stats-divi na WIERSZU
   -----------------------------------------------------
   To jedyne, czego Divi nie potrafi: krótka, wyśrodkowana
   kreska między kolumnami. Obramowanie kolumny w Divi
   rysuje linię na pełną wysokość, a tu ma być krótsza.

   Cała reszta — typografia, kolory, wyrównanie, rozmiary
   na tablet i telefon, równe wysokości kolumn — jest
   ustawiona w Divi w modułach, nie tutaj.
   ===================================================== */

.stats-divi .et_pb_column {
  position: relative;
}

.stats-divi .et_pb_column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* Divi układa kolumny jedna pod drugą poniżej 980 px — wtedy kreska znika */
@media (max-width: 980px) {
  .stats-divi .et_pb_column::after {
    display: none;
  }
}

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

← Repozytorium modułów