4HAND
Repozytorium modułów Divi
Biblioteka gotowych modułów użytych na stronie 4Hand. Każdy moduł ma własną stronę, na której jest działający podgląd, pełna instrukcja oraz cały potrzebny CSS — widoczny do skopiowania i jednocześnie wklejony w moduł Kod, dzięki czemu moduł działa samodzielnie.
Dzięki temu przeniesienie modułu na inną stronę, także na zupełnie inny serwis, nie wymaga szukania stylów po ustawieniach.
Moduły
Slajder hero
hero-4hand
Pełnoszerokościowy slajder z żółtym panelem po lewej, numerowaną paginacją w rogu i skośnym przyciskiem.
Otwórz →
Przyciski
btn-bok
Skośny przycisk z cieniem pojawiającym się po najechaniu. Trzy warianty: podstawowy, z ikoną, na ciemnym tle.
Otwórz →
Kafel oferty
oferta-card
Kolumna ze zdjęciem, tytułem i opisem, z żółtą strzałką przyklejoną do dolnej krawędzi.
Otwórz →
Nagłówek 4HAND
subtitle-4hand
Żółty nadtytuł z poziomą kreską obok tekstu. Działa tak samo na jasnym i ciemnym tle.
Otwórz →
Listy z ptaszkiem
list-checks · list-checks-clean
Lista z żółtym ptaszkiem zrobionym w czystym CSS, bez Font Awesome. Dwa warianty: z kreską i bez.
Otwórz →
Kolumna z teksturą
col-pattern-bg
Szara tekstura w skośne prążki wychodząca spod zdjęcia w lewo, poza krawędź ekranu.
Otwórz →
Kafel odwracany
flip-kafel
Wariant kafla oferty: opis pojawia się dopiero po najechaniu, kafel odwraca się na żółte tło. Cały kafel jest linkiem.
Otwórz →
Kafel odwracany v2
flip2-kafel
Wariant elastyczny: kafel dopasowuje wysokość do treści, a typografia skaluje się jego szerokością. Pod strony wielojęzyczne.
Otwórz →
Pasek statystyk
stats-divi
Duże liczby z podpisami, rozdzielone pionowymi kreskami. Zwykły wiersz Divi — CSS tylko na kreskę.
Otwórz →
Slajder realizacji
[realizacje_slajder]
Płynąca karuzela „wybranych” realizacji z tagu — kafle z żółtym rogiem, hover i strzałki. Dynamiczny shortcode z wtyczki.
Otwórz →
Narożnik zdjęcia
zolty-rog / sciety-rog
Żółty trójkąt albo ścięty róg zdjęcia — kąt 1:3 jak przycisk. Klasa na module Obraz.
Otwórz →
Efekt hover — kwadrat + plus
hover-plus
Najazd: żółty kwadrat i plus z kresek wjeżdżających od krawędzi, plus zoom zdjęcia bez powiększania kafla.
Otwórz →
Slajder produktów
sp-karuzela + sp-zrodlo
Samoprzesuwający się pasek zdjęć produktów. Zdjęcia dokładasz w module Galeria, podpis bierze się z tytułu zdjęcia. Powiększenie po kliknięciu.
Otwórz →
Slajder produktów v2
sp2-slajder
To samo co v1, ale slajderem jest sam moduł Galeria — zostaje widoczny i edytowalny w kreatorze. Dwa warianty powiększenia do porównania.
Otwórz →
Slajder produktów v3
sp3-slajder
Wariant C: wspolna wysokosc kafli, szerokosc z proporcji zdjecia. Nic nie jest kadrowane, bez napisu z boku.
Otwórz →
Slajder produktów v4
sp3-slajder sp3-strona
Wariant D: to samo co C, ale przesuw strona po stronie zamiast o jeden kafel. Przełącza jedna klasa.
Otwórz →
Okruszki
[okruszki]
Ścieżka nawigacji ze skrótu we wtyczce. Nazwy ogniw bierze z menu, nie z tytułów stron. Wypisuje dane strukturalne dla Google.
Otwórz →
Galeria produktów
g4h-profile
Moduł Galeria Divi w trybie Slajder. Wszystkie slajdy tej samej wysokości niezależnie od proporcji zdjęcia, kropki nawigacji pod zdjęciem, naprawiona animacja powiększenia.
Otwórz →
Galeria kolorów
g4h-kolory
Moduł Galeria Divi w trybie Siatka. Sześć kwadratowych próbek w rzędzie zamiast dwóch kafli, odstęp 10 px, wielkość liczona w procentach kolumny.
Otwórz →
Jak przenieść moduł na inną stronę
- Skopiuj sekcję z modułem — prawy klik na sekcji w builderze › Kopiuj, a na stronie docelowej Wklej. Można też zapisać sekcję do Biblioteki Divi.
- Skopiuj moduł Kod z dołu strony modułu i wklej obok. W nim siedzi cały CSS, więc moduł działa od razu, bez żadnej dodatkowej konfiguracji.
- Gdy moduł zostaje na stałe — przenieś CSS z modułu Kod do arkusza motywu, a sam moduł Kod skasuj.
Zasada
Style nie są zbierane w jeden wspólny plik — każdy moduł ma własny zestaw, żeby było wiadomo, który styl należy do którego modułu. Scalenie nastąpi dopiero po ukończeniu wszystkich podstron serwisu.