Dzisiaj pokaże Wam jak zwykłe filtrowane portfolio zamienić w pionowe, z zakładek zrobić coś na wzór kategorii, obrazy przesunąć do góry, i dodać małą animację i cień po najechaniu na kafelek portfolio kursorem. Gotowi? Będzie dużo kodów CSS! Zacznijmy od tego, jak wygląda filtrowane portfolio. Na górze znajdują się zakładki z nazwami kategorii, pod spodem znajdują się kafelki ze zdjęciami, które prowadzą do konkretnego już projektu:
W dzisiejszym wpisie dowiesz się, jak standardowe filtrowane portfolio zamienić w poniższy układ widoczny na filmie.
Ustawienia modułu i sekcji filtrowanego portfolio
Dodaj nową sekcję standardową, dodaj wiersz z jedną kolumną, wybierz moduł Filtrowane portfolio.
W ustawieniach wiersza na zakładce Design wybierz:
- Wyrównanie do środka
- Wymuś pełną szerokość dla tego wiersza: TAK
- Niestandardowy margines do prawej: 250 px
W ustawieniach modułu filtrowane portfolio na zakładce Zawartość wybierz:
- Liczba postów: dowolna
- Włącz kategorie: wybierz, te które chcesz pokazać w portfolio
- Pokaż tytuł: TAK
- Pokaż kategorie: NIE
- Pokaż paginacje: dowolnie
W ustawieniach modułu filtrowane portfolio na zakładce Design wybierz:
- Układ graficzny: siatka
- Tytuł heading Level H2
- Czcionka tytuł: Oswald
- Tytuł rozmiar tekstu: 16px
W ustawieniach modułu filtrowane portfolio na zakładce Zaawansowane dodaj kody CSS i ustaw klasę CSS:
- Klasa CSS: wpisz dowolne hasło, moje to cq_filterport
- W polu Nakładka oraz w polu Ikona nakładki wpis: display: none;
- W polu Tytuł portfolio wpisz: padding: 10px; margin-bottom: 10px;
Zapisz wprowadzane zmiany i przejdź do ustawień strony. W polu Niestandardowy CSS wklej następujący kod CSS:
/*Przesunięcie zakładek kategorii na prawą stronę i ustawienie kafelków kategorii u góry*/ .cq_filterport .et_pb_portfolio_filters.clearfix { width: 18%; position: absolute; left: 8%; } /*Dodanie lewego marginesu dla kafelków portfolio*/ .cq_filterport .et_pb_portfolio_items_wrapper { margin-left: 15%; } /*Ustawienie szerokości zakładek*/ .cq_filterport .et_pb_filterable_portfolio .et_pb_portfolio_filters li { width: 100%; } /*Ustawienie szerokości pola z kafelkami i dodanie marginesu wewnętrznego*/ .cq_filterport .et_pb_filterable_portfolio .et_pb_portfolio_items, .et_pb_filterable_portfolio .et_pb_portfolio_items_wrapper { width: 100%; padding-left: 3%; } /*Dostosowanie widoku dla urządzeń o minimalnej rozdzielczości 981px*/ @media only screen and ( min-width: 981px ){ .cq_filterport .et_pb_portfolio_item { margin-right: 3% !important; width: 25% !important; } /*Zamiana 4 kolumn portfolio na 3*/ .cq_filterport .et_pb_filterable_portfolio_grid .et_pb_portfolio_item.et_pb_grid_item:nth-child(4n+1) { clear: none !important; } .cq_filterport .et_pb_filterable_portfolio_grid .et_pb_portfolio_item.et_pb_grid_item:nth-child(3n+1) { clear: left !important; margin-right: 3% !important; } /*Dostosowanie kafelków portfolio po najechaniu na nie kursorem*/ .cq_filterport .et_pb_filterable_portfolio_grid .et_pb_portfolio_item:hover { border:none; box-shadow: 2px 5px 41px 7px rgba(0,0,0,0.3); border-radius: 10px; transform: scale3d(1.01, 1.01, 1.01); } /*Dodanie cienia i obramowania dla kafelków portfolio*/ .cq_filterport .et_pb_filterable_portfolio_grid .et_pb_portfolio_item { box-shadow: 0px 1px 15px -4px rgba(0,0,0,0.3); border: 2px solid #000000; } /*Dostosowanie widoku dla smartfonów*/ @media only screen and ( max-width: 767px ) { .cq_filterport .et_pb_portfolio_filters.clearfix { width: 100%; position: relative; left: 13%; }} @media only screen and ( max-width: 767px ) { .cq_filterport .et_pb_portfolio_items_wrapper { margin-left: 10%; }} /*Dostosowanie widoku dla urządzeń o minimalnej rozdzielczości 981px*/ @media (min-width: 981px){ .cq_filterport .et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active { font-weight: bold; background: none !important; }} @media (min-width: 981px){ .cq_filterport .et_pb_filterable_portfolio .et_pb_portfolio_filters li a { border: none !important; }}
Powyższy kod CSS możesz również wkleić w Ustawieniach motywu: Divi > Ustawienia szablonów graficznych > Zakładka Ogólne > pole Niestandardowy CSS u dołu strony. Jeżeli chcesz aby każde filtrowane portfolio, które dodasz do swojej strony wyglądało właśnie w taki sposób, to nie musisz ustawiać Klasy CSS, o której pisałam wcześniej.
NAJNOWSZE KOMENTARZE