Design Cart Featured Boxes – profesjonalne sekcje usług, opinii i mocnych stron firmy dla WordPress

Featured Boxes (nazywane też kartami wyróżniającymi lub sekcjami boxów) to jeden z najpopularniejszych i najbardziej skutecznych sposobów prezentacji treści na stronach internetowych.

To siatka kart, z których każda zawiera zdjęcie/ikonę, tytuł, krótki opis, opcjonalne gwiazdki ocen oraz przycisk CTA. Dzięki nim można elegancko przedstawić usługi, mocne strony firmy, opinie klientów, cechy produktu czy kategorie oferty.

 

Jakie problemy rozwiązuje wtyczka?

Tworzenie takich sekcji w WordPressie często wiąże się z frustracją. Korzystając z klasycznych bloków Gutenberga (kolumny + grupy + boxy), szybko natrafiamy na ściany:

• Brak spójnego, zaawansowanego stylizowania wszystkich kart naraz
• Słabe możliwości responsywności (szczególnie przy niestandardowych układach)
• Brak efektów premium (overlap, animowana fala, „co drugi box obniżony”, blur na hover itp.)
• Uciążliwe zarządzanie wieloma sekcjami na jednej stronie
• Trudności w utrzymaniu konsekwentnego designu przy większej liczbie sekcji

...a instalacja "pagebuilderów" do stron wizytówek to zbrodnia wydajnościowa.

W efekcie wielu użytkowników instaluje kilka różnych wtyczek — jedną do usług, drugą do opinii, trzecią do cech produktu. To prowadzi do obciążenia strony, konfliktów i bałaganu w kodzie.

Design Cart Featured Boxes rozwiązuje ten problem kompleksowo. Jedna wtyczka pozwala budować dowolną liczbę różnorodnych sekcji kart — wszystkie zarządzane w tym samym, wygodnym interfejsie, z identycznymi możliwościami stylizacji i efektami.

 

Skąd wziął się pomysł na wtyczkę?

Pracując nad wieloma projektami tworzenia stron firmowych, wielokrotnie spotykałem się z potrzebą uniwersalnego, potężnego modułu do kart.

W jednej z ostatnich realizacji za pomocą jednego modułu udało mi się stworzyć:

• listę kategorii produktowych ze zdjęciami,
• sekcję z najważniejszymi cechami produktu,
• sekcję z opiniami klientów.

Każda z tych sekcji wyglądała wyjątkowo, miała inny układ i charakter, a jednocześnie była zarządzana w identyczny, prosty sposób.

To doświadczenie utwierdziło mnie w przekonaniu, że przy tworzeniu stron WWW WordPress potrzebujemy jednego, naprawdę elastycznego narzędzia, zamiast kilku różnych rozwiązań.

Wtyczka Design Cart Featured Boxes ma swoje inspiracyjne źródło w mod_dc_featuredboxes, który od kilku lat rozwijam i ulepszam dla Joomla 5/6. 

Jeśli korzystasz z Joomla, możesz zapoznać się z oryginalnym modułem tutaj: → DC Featured Boxes dla Joomla 5/6 – jak stworzyć efektowne sekcje usług i mocnych stron firmy.

 

Przykłady zastosowania modułu

Design Cart Featured Boxes wyróżnia się ogromną uniwersalnością. Dzięki bogatym opcjom konfiguracji (układ, kształt zdjęć, efekty hover, animowana fala, gwiazdki, różne liczby kolumn) jedną wtyczką możesz zbudować niemal dowolny rodzaj sekcji kart — od klasycznych usług po bardziej kreatywne rozwiązania.

Moduł doskonale sprawdza się zarówno przy prostych stronach firmowych, jak i przy rozbudowanych witrynach e-commerce czy landing page’ach.

 

Przykłady rzeczywistych zastosowań:

1. Prezentacja kategorii produktów w sklepie internetowym Idealny sposób na atrakcyjne wyświetlenie kategorii lub kolekcji produktów. Każdy box może zawierać zdjęcie kategorii, tytuł i przycisk prowadzący do listy produktów.

2. Sekcja opinii klientów Karty z zdjęciem klienta, gwiazdkami oceny i tekstem opinii — bardzo przekonujące i budujące zaufanie.

3. Prezentacja usług / „Dlaczego my?” / Cechy produktu Klasyczne i jednocześnie najbardziej efektowne zastosowania modułu.

4. Inne możliwości:

• Przedstawienie zespołu
• Proces współpracy krok po kroku
• Pakiety cenowe / oferty
• Sekcje na landing page’ach

Poniżej przykłady, jak moduł został wykorzystany w rzeczywistych projektach:

 

 

 

Najważniejsze możliwości wtyczki

Design Cart Featured Boxes oferuje bogaty zestaw funkcji, dzięki którym stworzysz naprawdę efektowne i funkcjonalne sekcje kart bez konieczności kodowania czy korzystania z ciężkich page builderów.

Kluczowe funkcje:

• Nielimitowana liczba boxów — możesz dodać tyle kart, ile potrzebujesz w jednej sekcji
• Zaawansowane zarządzanie obrazami — wybór z biblioteki mediów, drag & drop upload, różne kształty (koło / kwadrat), pozycje (góra / lewo / prawo) oraz efekt overlap
• Przyciski CTA — indywidualny tekst i link w każdym boxie (obsługuje kotwice i linki zewnętrzne)
• System gwiazdek (Rating) — od 0 do 5 gwiazdek na box, z możliwością globalnego ustawienia koloru i rozmiaru
• Animowana fala SVG (Wave Border) — piękny, organiczny efekt animowanej obwódki wokół okrągłych zdjęć z wieloma parametrami (amplituda, prędkość, organic intensity)
• W pełni responsywne układy — niezależne ustawienia liczby kolumn dla desktopu, tabletu i telefonu + efekt „Lower every second” (co drugi box obniżony)
• Shortcode — [designcart_featuredboxes id="123"] — łatwe wstawianie na dowolnej stronie lub wpisie
• Widget WordPress — możliwość dodania sekcji w dowolnym miejscu widgetów (sidebar, stopka itp.)
• Własne klasy CSS — pole „Extra CSS class” pozwalające na precyzyjne stylowanie każdej instancji
• Intuicyjny drag & drop — sortowanie boxów, dodawanie i usuwanie w panelu administracyjnym

Dodatkowo wtyczka oferuje bogate opcje stylizacji (kolory, rozmiary czcionek, efekty hover, blur, uppercase, wyśrodkowanie itp.), co pozwala dopasować wygląd sekcji do każdego projektu.

Zobacz na poniższym wideo efekty Wave Border

 

 

Jak działa architektura modułu?

Design Cart Featured Boxes został zaprojektowany w sposób prosty, ale bardzo elastyczny — zgodnie z najlepszymi praktykami WordPress.

 

Kluczowe elementy architektury:

• Niestandardowy typ treści (CPT) Każda sekcja Featured Boxes to osobny wpis w niestandardowym typie treści o nazwie designcart_fbox. Dzięki temu wszystkie sekcje są dobrze zorganizowane w panelu administracyjnym i można je łatwo zarządzać (edycja, duplikacja, publikacja/szkic).
• Osobne instancje sekcji Każda utworzona sekcja jest niezależną instancją. Możesz mieć dowolną liczbę sekcji (np. „Usługi”, „Opinie”, „Cechy produktu”, „Zespół”), a każda z nich ma własne ustawienia, własne boxy i własny design.
• Shortcode Po opublikowaniu sekcji otrzymujesz gotowy shortcode: shortcode

  [designcart_featuredboxes id="123"]

  Możesz go wkleić w dowolnym miejscu strony, wpisu lub bloku Gutenberg. Istnieje też możliwość dodania dodatkowej klasy CSS: shortcode 

  [designcart_featuredboxes id="123" class="moja-sekcja"]

• Widget WordPress Wtyczka dodaje dedykowany widget DC Featured Boxes, który możesz umieścić w dowolnym obszarze widgetów (sidebar, stopka, obszary widgetów w builderze motywu itp.).
• Możliwość tworzenia wielu sekcji na jednej stronie Na jednej stronie możesz bez problemu umieścić wiele różnych instancji modułu (np. sekcję usług + sekcję opinii + sekcję zespołu). Każda sekcja renderuje się niezależnie, z własnymi stylami CSS i JavaScriptem, co zapobiega konfliktom.

---

Dodatkowe zalety architektury:

• Ustawienia każdej sekcji przechowywane są w jednym polu meta (_designcart_fbox_settings)
• Wtyczka jest lekka i ładuje assety (CSS/JS) tylko tam, gdzie jest używana
• Pełna kompatybilność z cache’ami i optymalizatorami stron

Dzięki takiemu podejściu masz pełną kontrolę nad każdą sekcją i możesz swobodnie budować nawet bardzo rozbudowane strony.

 

Konfiguracja modułu

Zakładka Intro – tworzenie nagłówka sekcji

Zakładka Intro pozwala dodać nagłówek i lead tekst nad całą siatką boxów.

Pole	Opis
Intro title	Główny nagłówek sekcji (np. „Nasze usługi”, „Opinie klientów”)
Intro description	Krótki tekst wprowadzający (obsługuje podstawowy HTML)

Ustawienia wyglądu (tag H1–H6, kolory, rozmiary, wyrównanie) znajdują się w zakładce Design → Intro Appearance.

---

 

Zakładka Featured Boxes – budowanie kart

To serce wtyczki — tutaj tworzysz indywidualne karty.

Pole	Opis
Title	Tytuł boxa
Text	Treść boxa (HTML)
Rating (stars)	Liczba gwiazdek 0–5
Image	Zdjęcie/ikona z Media Library
Button text	Tekst przycisku CTA
Button link	Link (URL, ścieżka względna lub kotwica)

Dodatkowe funkcje repeatera:

• Drag & Drop do zmiany kolejności boxów
• Dodawanie i usuwanie kart
• Przeciągnij i upuść plik obrazu bezpośrednio na pole (auto-upload)

---

 

Zakładka Design – pełna kontrola nad wyglądem

Najważniejsza zakładka odpowiedzialna za wygląd całej sekcji.

Intro Appearance

Opcja	Możliwości
Intro heading tag	H1 – H6
Intro title colour/size	Kolor + rozmiar w px
Intro description colour/size	Kolor + rozmiar w px
Intro alignment	Left / Center

 

Layout

Opcja	Opis
Lower every second	Włącza efekt obniżenia co 2., 4., 6. boxa
Columns per row (desktop)	1–5 kolumn
Columns per row (tablet)	1–5 kolumn
Columns per row (mobile)	1–5 kolumn

 

Image

Opcja	Opis
Show image	Włącz/wyłącz obrazy globalnie
Image shape	Circle / Square
Image position	Top / Left / Right
Image layout at top	Overlap (nachodzenie) / Inside
Blur on hover	Efekt rozmycia przy najechaniu
Image linked	Obraz klikalny (link do CTA)
Image border	Włącz obramowanie + kolor i grubość

 

Content Block

Opcja	Opis
Background colour	Kolor tła boxa
Background opacity	0–100% (przezroczystość)
Border colour/width	Obramowanie boxa
Centre content	Wyśrodkowanie tekstu i przycisku

 

Box Title

Opcja	Opis
Show title	Włącz/wyłącz
Display title on image	Tytuł na obrazie (tylko przy Top)
Heading tag	H1 – H6
Colour / Size / Uppercase	Kolor, rozmiar, wielkie litery
Title on image – offset / alignment	Pozycjonowanie tytułu na obrazie
Centre title on image hover	Animacja centrowania przy hover

Box Text

Opcja	Opis
Show text	Włącz/wyłącz
Colour / Size	Kolor i rozmiar
Uppercase	Wielkie litery

Button

Opcja	Opis
Show button	Włącz/wyłącz
Text colour / Background	Kolory normalne
Hover text / Hover background	Kolory przy najechaniu
Size	Rozmiar czcionki

Stars

Opcja	Opis
Colour	Globalny kolor gwiazdek
Size	Rozmiar w px
Centre stars	Wyśrodkowanie

---

 

Zakładka Wave Border – animowana organiczna obwódka SVG

Efekt premium wyróżniający tę wtyczkę.

Opcja	Opis
Enable wave border	Włączenie efektu
Wave amplitude	Wysokość fali (2–16 px)
Waves around circle	Liczba grzbietów (4–20)
Animation speed	Prędkość animacji
Organic intensity	Siła naturalnego pulsowania
Organic drift speed	Tempo zmian organicznych
Stroke width	Grubość widocznej obwódki
Stroke colour	Kolor obwódki
Organic waves	Losowe skalowanie fali

Efekt działa najlepiej z okrągłymi zdjęciami i układem Top + Overlap.

---

 

Zakładka Advanced – własne klasy CSS

Pole	Opis
Extra CSS class	Dodatkowe klasy CSS na wrapper sekcji (np. moja-sekcja ciemny)

Działa podobnie jak Class Suffix w Joomla. Umożliwia precyzyjne stylowanie konkretnych instancji za pomocą własnego kodu CSS.

 

Wydajność i technologie

Design Cart Featured Boxes został stworzony z myślą o maksymalnej wydajności i czystości kodu. Wtyczka jest wyjątkowo lekka i nie obciąża strony niepotrzebnymi zależnościami.

 

Główne zalety technologiczne:

• Brak Bootstrapa i innych frameworków CSS — cała siatka oparta jest na czystym Flexboxie, dzięki czemu kod CSS jest zminimalizowany i bardzo szybki.
• Brak zależności frontendowych — na froncie nie ładuje się jQuery ani żadna inna biblioteka JavaScript. Wszystko działa na Vanilla JS (czystym JavaScripcie).
• CSS Custom Properties (CSS Variables) — wszystkie kolory, rozmiary, liczba kolumn i inne parametry są ustawiane dynamicznie inline za pomocą zmiennych CSS. Dzięki temu każda instancja sekcji ma własne style, bez konfliktów.
• Nowoczesne API JavaScript:
  • requestAnimationFrame — płynna animacja fali SVG (Wave Border) przy 60 fps bez obciążania procesora.
  • ResizeObserver — inteligentne przeliczanie paddingu przy układzie overlap podczas zmiany rozmiaru okna przeglądarki.
• SVG — animowana fala tworzona jest w pełni wektorowo, co gwarantuje idealną ostrość na dowolnym ekranie i urządzeniu.

Wynik? Sekcje ładują się błyskawicznie, nawet przy wielu instancjach na jednej stronie. Wtyczka jest w pełni kompatybilna z cache’ami (WP Rocket, LiteSpeed, Cloudflare) i nie spowalnia Core Web Vitals.

Dzięki takiemu podejściu Design Cart Featured Boxes jest jedną z najlżejszych i najbardziej nowoczesnych wtyczek tego typu dostępnych na rynku.

 

Jak pobrać moduł?

Design Cart Featured Boxes jest w pełni darmowy i dostępny w dwóch oficjalnych źródłach:

Strona Design Cart 

1

 

GitHub 

 

Dla kogo powstał Design Cart Featured Boxes?

Wtyczka powstała z myślą o profesjonalistach i firmach, które potrzebują szybkiego, efektownego i łatwego w obsłudze narzędzia do tworzenia sekcji kart.

Najlepiej sprawdza się u:

• Agencji interaktywnych i webdevelooperów — którzy budują wiele stron dla klientów
• Freelancerów tworzących strony WWW
• Właścicieli stron firmowych i usługowych
• Twórców landing page’y — gdzie efektowne sekcje mają ogromne znaczenie
• Sklepów internetowych — do prezentacji kategorii, cech produktów czy opinii
• Firm oferujących usługi (marketing, remonty, szkolenia, beauty, IT itp.)

Jednym słowem — dla każdego, kto chce nowoczesnych, konwertujących sekcji bez tracenia czasu na kodowanie lub ciężkie page buildery.

 

Podsumowanie

Design Cart Featured Boxes to dojrzała, bardzo konfigurowalna wtyczka, która pozwala w kilka minut tworzyć naprawdę efektowne sekcje kart na WordPressie.

Główne zalety:

• Ogromne możliwości konfiguracji (układy, kolory, efekty, animacje)
• Brak konieczności kodowania — wszystko za pomocą wygodnego panelu
• Możliwość dodawania wielu różnych sekcji na jednej stronie
• Nowoczesne efekty wizualne (Overlap, Wave Border, Blur, Lower every second)
• Pełna responsywność z niezależnymi ustawieniami dla desktopu, tabletu i telefonu
• Lekki, czysty kod zgodny ze standardami WordPress.org

Jeśli szukasz lekkiego, ale potężnego narzędzia do tworzenia sekcji usług, opinii, cech produktu czy zespołu — ta wtyczka jest strzałem w dziesiątkę.

Gotowy do testów? Pobierz za darmo i zbuduj pierwszą sekcję już dziś!