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.

by Paulina Kanak

właścicielka domen Canaq.net | Canaq.pl

© Copyright 2014 | Wszelkie prawa zastrzeżone
cq.canaq@gmail.com

Pin It on Pinterest