Divi: A „Szűrhető portfólió” modulrács egy elemének testreszabása

Szeretné tudni, hogyan szabhatja testre a Szűrhető portfólió moduljának rácselemeit Divi ? Kövessen minket ebben az oktatóanyagban...

Legyen rajtad egy zóna weboldal munkája bemutatása fontos. Ha Ön stylist, több projektet is létrehozhat rajta weboldal WordPress, hogy megmutassa koncepcióit. Ha Ön márkaépítő, portfólió segítségével bemutathatja munkáját. Sőt, még tovább is léphetünk, és különböző kategóriákat adhatunk hozzá projektjeinkhez. Itt van mit csinál a Divi Filterable Portfolio modulja? .

Ezzel a modullal könnyű és szervezett módon tudjuk megjeleníteni kemény munkánkat. 

A mai oktatóanyagban személyre szabjuk a Szűrhető portfólió modul egyes rácselemeit. Az ingyenes elrendezési csomagokból származó elrendezéseket fogjuk használni Divi konferencia et Divi online jógaoktató minden vásárlásakor biztosított Divi . 

Mint mindenben, amiről szól Divi, lehetőségünk van ezt a modult igényeinknek és vágyainknak megfelelően testre szabni. Mielőtt azonban belevágnánk a stílusba, tudjunk meg egy kicsit többet a modulról.

Mi az a Divi Szűrhető portfólió modulja?

A projektek egy egyéni bejegyzéstípus részét képezik, amely ugyanúgy működik, mint a bejegyzések. Megtalálhatja őket a WordPress irányítópultján.

Itt hozhatja létre egyéni projektjeit, amelyek feltöltik a Szűrhető portfólió modult. A modul két módot kínál projektjeink bemutatására: rács formátumban ou teljes szélességű formátumban. Számunkra a rácsformátumot fogjuk használni és testreszabni. 

A Szűrhető portfólió modullal bemutathatjuk majd legújabb projektjeinket. Oldalunk felhasználói egy szűrősávot fognak látni a portfólió rácsának tetején. Innen böngészhetnek a különböző portfóliókategóriák között, amelyek megjelenítését engedélyezzük a modulban.

Íme egy példa a modul rácskonfigurációjára néhány mintaprojekttel:

A Divi szűrhető portfóliójának létrehozásakor figyelembe veendő területek

Mint minden mod Divi, a Szűrhető portfólió modul számos olyan funkcióval rendelkezik, amelyeket igényeinknek és kívánságainknak megfelelően testre szabhatunk. Így a modulhoz tartozó funkciók többsége módosítható a lapon Design a modul beállítások modálisból. A következő területeket és egyebeket szerkeszthetjük:

• Projekt címe
• Projekt kategória
• Címke
• Szöveg szűrése
• Indexkép az egérrel
• Lapszámozás

Ez nem egy teljes lista, és még el sem kezdtünk beszélni arról, hogy a CSS hogyan adott mélyebb testreszabásokat ehhez a modulhoz!

Hogyan szabjuk testre a Divi Szűrhető portfólió modulját

Mint korábban említettük, ebben az oktatóanyagban két elrendezést fogunk használni: Divi konferencia et Divi online jógaoktató. Az alábbiakban áttekintést kaphat az oktatóprogram során elvégzendő munkáról.

A "Divi Conference" elrendezés elemeinek elrendezése

A "Divi Online Yoga Instructor" elrendezés elemeinek elrendezése

Mindkét elrendezést könnyen letöltheti innen Divi Építész. 

Most pedig kezdjük!

Lásd még: Divi: Válasszon a Szűrhető portfólió modul rácsos és teljes szélességű elrendezése között

A Divi szűrhető portfólió moduljának testreszabása: "Divi Conference Edition"

Először telepítenünk kell az eseményoldal sablonját a Divi Conference Layout Packből. Miután létrehozta új oldalát a WordPress-ben, és aktiválta a Divi Buildert, belépünk a Divi Library-be.

Lépjen be a Divi Layout Libraryba

Kattintson az ikonra « Betöltés a könyvtárból hogy belépjen a Divi Layout Library-ba

Keresse meg az elrendezést a Divi Layout Library-ben

A Divi elrendezési könyvtárában található kereső funkció használatával, keresés a beállítottság" Konferencia esemény oldala".

Telepítse az elrendezést

Miután kiválasztotta az elrendezést, kattintson a " Használja ezt az elrendezést hogy telepítse az elrendezést az oldalára.

Távolítsa el és cserélje ki a képmodult

Eltávolítjuk az alábbi képmodult, hogy helyet biztosítsunk az általunk személyre szabott Szűrhető portfólió modulnak. Kattintson a " töröl miután az egérmutatót a kép fölé viszi a fénykép törléséhez.

Helyezze be a Divi Filterable Portfolio modulját

Az Image modul eltávolításával most már helyet tudunk adni a Szűrhető portfólió modulunknak. Az ikonra fogunk kattintani " Modul hozzáadása (a szürke pluszjel), majd válassza ki a modult a megjelenő modul modális mezőben.

A bejegyzések számának és a portfólió elrendezésének beállítása

Alapértelmezés szerint ez a modul egyetlen oszlopban mutatja be a munkáját. Azonban a rács elrendezést fogjuk használni, amely alapértelmezés szerint 4 oszlopból áll. 

Ezért azt javasoljuk, hogy a portfólió bejegyzéseinek számaként 4-es többszörösét (4, 8, 12, 16 stb.) válassza. 

Ebben az oktatóanyagban 12 projektet fogunk használni a rácsunkban.

Kezdje el testreszabni a Divi szűrhető portfólióját: Cím és metaszöveg

Most, hogy projektjeink egy rácsban jelennek meg, kapcsoljuk össze kiválasztott sablonunk néhány tervezési elemét. Ebben az esetben az új modulunkban a Divi Conference Layout Pack stílusát fogjuk használni.

Szöveg stílusa

• Szöveg igazítása: Középre igazítva
• Szöveg színe: sötét

Cím szöveg stílusa

• Cím Címsor szint: H2
• Cím betűtípusa: Krona One
• Szöveg színe: #000000

Meta szöveg stílus

• Meta betűtípus: alapértelmezett (Open Sans)
• Meta szöveg színe: #ff6651

Most, hogy megvan a stílusunk a portfóliórács címeihez, hajtsunk végre néhány változtatást magukon a projektbélyegképek alakján.

A projekt bélyegképének szegélyének és lekerekített sarkainak módosítása

A Divi Conference Layout csomagunkban a lekerekített sarkok egyedi kombinációját használjuk, hogy egyedi formát adjunk a csomagban található kulcskockáknak. Alkalmazzuk ezt a stílust a modulunk bélyegképeire.

Kép

• kép:
  • Lekerekített sarkok: 50px 50px 50px 0px
  • Szegélystílusok: mind
  • Szegély szélessége: 3 képpont
  • Szín: #000000
  • Szegély stílus: tömör

Ezzel a miniatűrök olyan formát kapnak, amely illeszkedik az elrendezési csomag többi képéhez.

A lebegő fedvény testreszabása

Menjünk egy lépéssel tovább a stílusunkkal, és hajtsunk végre egy kis változtatást a modulhoz tartozó alapértelmezett fedvényen. Megváltoztatjuk a színt és a használt ikont közvetlenül a dobozból.

ráhelyezés

• Zoom ikon színe: #bcf5fd
• Lebegő fedvény színe: #ff6651
• Ikonválasztó: Nagyítás

Amint most láthatja, hozzáadtuk ehhez az elrendezéshez a márkaszíneket a fedvényhez, valamint megváltoztattuk azt az ikont, amelyet a Divi alapértelmezés szerint biztosít az ebben a modulban lévő átfedés funkcióhoz.

A lapozás testreszabása

Mostantól kis CSS-részleteket fogunk használni, hogy további testreszabási lehetőségeket adjunk a Szűrhető portfólió modulunkhoz. Először személyre szabjuk ennek a modulnak a lapozását. Ezután eltávolítjuk a felette megjelenő szegélyt egyetlen CSS-sorral

Lapozási szöveg

• Lapszámozás:
  • Betűtípus: Krona One
  • Szöveg igazítása: középre
  • Szöveg színe: #ff6651, #000000 (lebegés)

CSS-ünknél átváltunk a lapra Részletes modulunkból. Másodszor, rákattintunk a fülre Egyedi CSS. Ezután beírjuk a következő kódrészletet, hogy eltávolítsuk az oldalszámozásunk feletti szegélyt, így tisztább megjelenést biztosítunk.

Portfólió oldalszámozás

border-top: 0px;

A Divi beállítások és a CSS használata a szűrőszöveg testreszabásához

A szűrőszövegnél feljebb vesszük. CSS-t fogunk használni a háttér és a lebegési effektusok megváltoztatására. 

Tökéletes folytonosságot szeretnénk elérni az újonnan hozzáadott modul és az elrendezési csomag stílusa között. Először adjuk meg a Divi-beállításainkat a betűtípushoz.

Szűrési feltételek szövege

• Szűrési feltételek:
  • Betűtípus: Krona One
  • Betűszín: #ffffff, #000000 (Hover)

Jelenleg úgy tűnik, hogy a szűrőnk eltűnt. Valójában az alapértelmezett állapotában fehér szöveg fehér alapon. Ezt azonban két helyen módosítjuk egyéni CSS-sel. 

Először is hozzáadunk egy CSS-kódrészletet az oldalbeállításokhoz, amely hátteret ad a szűrőszöveghez. Másodszor, testre szabjuk az aktív portfóliószűrőt a fül segítségével Részletes du modul.

Hozzáférni oldal beállításait, kattintson a három pontra a képernyő közepén. majd válassza ki a fogaskerék ikont amely megnyitja az oldal beállításait. Aztán te lépjen az Egyéni CSS lapra és írja be a következőket a háttér hozzáadásához a szűrőszöveghez.

Egyéni CSS

Ebben a CSS-részletben a szűrő háttérszínét célozzuk meg. A lebegő állapotot is megcélozzuk és stílusozzuk. A napirend következő lépéseként adjunk hozzá még néhány CSS-t a modulhoz, és emeljük ki az Aktív szűrő fület.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

Portfóliószűrő aktív lapstílus

Az f aktív füleportfólió ilter felhívja a felhasználók figyelmét az éppen meglátogatott portfóliókategóriára. Jelenleg ez a szűrő fehér szöveggel és világos háttérrel rendelkezik. 

A lapra lépünk Részletes a Szűrhető portfólió modulban, és adjon hozzá szöveget ennek a funkciónak az alapértelmezett és lebegtető állapotához. Itt vannak a CSS-tulajdonságok, amelyeket alapértelmezett állapotban adunk hozzá:

background: #ff6651;
color: #ffffff !important;

Állapot lebegve

Lebegtetés közben a hátteret feketére cseréljük.

color: #000000!important;

A Divi szűrhető portfóliójának dizájnjának végleges megjelenése a "Divi Conference" segítségével

Íme a végső megjelenés!

És most így néz ki, ha lebeg!

A Divi szűrhető portfólió moduljának testreszabása: "Divi Online Yoga Instructor"

Akárcsak a Divi Conference Edition esetében, megtalálja az elrendezést a Divi Builderben található Online Yoga Instructor Layout Packben. 

Ebben az oktatóanyagban a céloldal elrendezését fogjuk használni. Görgessen le a Szekcióosztályok szakaszhoz a Szakasz címmel Minden közelgő osztály.

A Szűrhető portfólió modul beillesztése

Innentől eltávolítjuk az osztályokat tartalmazó sorokat. Kattintson a lila ikonra, amelyen három pont található . Akkor, válassza ki a drótváz nézetet. Végül törölje a három oszlopot tartalmazó két sort.

Ezután a belső sorban egyetlen oszlopra cseréljük őket. Ezután hozzáadjuk a Szűrhető portfólió modult.

Az előző példához hasonlóan ehhez a modulhoz a rácsos elrendezést fogjuk használni, a bejegyzések számának 4-es többszörösével. 

Most tegyünk valami mást a térképen bemutatott információkkal. 

A fülön Tartalom, navigáljon ide Éléments és törölje a kijelölést Kategóriák megjelenítése . Ez azt jelenti, hogy a Portfolio modul csak a projekt nevét jeleníti meg a kategória neve nélkül.

Szűrési feltételek szövegének, projektcímének és oldalszámozási szövegének testreszabása

Határozzuk meg modulunk szövegrészeinek stílusalapját. Ennek az elrendezésnek a törzsszövege a Open Sans a fő címsorokhoz használt betűtípus pedig az Véső. Ezért e két betűtípus kombinációját fogjuk használni a stílusozási folyamat során.

szövegek

• Szöveg igazítása: Középre igazítva
• Szöveg színe: világos

Címszöveg

• Cím betűtípusa : Cinzel
• Cím szövegének színe: #ffffff

Szűrési feltételek szövege

• Szűrési feltételek Betűsúly: Félkövér
• Szűrési feltételek szövege Szín: #ffffff

Lapozási szöveg

• Lapozás betűsúlya: félkövér

Így néz ki jelenleg a szűrhető portfólió modulunk. Nem sok, de lassan odaérünk!

Hozzon létre egy áttetsző lebegő fedvényt

Merítsünk ihletet az elrendezés különböző moduljaiból és gyönyörű színátmeneteiből. Ehhez létrehozunk egy áttetsző lebegtető fedvényt, és személyre szabjuk a lebegtetéskor is megjelenő ikont.

• Zoom ikon színe: #323741
• Lebegő fedvény színe: rgba (255 201 165, 0,85)
• Ikonválasztó: keressen egy lapot, és nézze meg a fenti ikont

Szegély hozzáadása a portfólió rácselemeihez egyéni CSS-sel

Az első példához hasonlóan most is CSS-t fogunk használni, hogy nagyobb érdeklődést kölcsönözzünk Szűrhető portfólió modulunknak. 

Most a portfólió rácsának minden egyes eleme köré szegélyt adunk. A keret hozzáadásához használja az alábbi CSS-kódrészletet az oldalbeállítások egyéni CSS-részében. 

Ehhez a modulhoz a „border”-t is használjuk CSS-osztályként.

• CSS osztály: keret

Egyéni CSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

Most itt van a Szűrhető portfólió modulunk, szép szegéllyel – és kitöméssel – minden rácselem körül.

CSS hozzáadva a lapozási szegély stílusához

Az előző példánkkal ellentétben a lapozásunk szegélyét színezzük CSS-sel. Ez is megy a környéken Beállítások > Egyéni CSS oldal .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

Szűrési feltételek szövegstílusa

A Divi Conference Portfolio modulunk stílusához hasonlóan a jazzt szeretnénk hozzáadni kategóriaszűrőinkhez. Ismét abból a stílusból akarunk meríteni, amely a rendelkezésünkre bocsátott sablonban már megtalálható. 

Íme a CSS, amelyet az egyéni CSS-szakaszban adunk hozzá, hogy megcélozzuk a szűrősáv hátterét és az egérmutatót.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

Az egyéni CSS-ünk két új kiegészítésével a Szűrhető portfólió modulunk így fog kinézni.

Figyelje meg azonban, hogyan veszett el az aktív portfóliószűrő. Mindig világos háttér van rajta fehér szöveggel. Menjünk a modul beállításaihoz, és adjunk hozzá néhány CSS-t, hogy ezt módosítsuk.

Egyéni CSS

Aktív portfóliószűrő:

background: #ffffff;
color: #323741 !important;

Modulanimáció eltávolítása

A tisztább élmény érdekében eltávolítjuk a Szűrhető portfólió modulhoz tartozó alapértelmezett animációt. Ehhez először vissza kell térnünk az oldalunk beállításaihoz, és hozzá kell adnunk néhány CSS-t, amely megcélozza a portfólió rácselemeit, és eltávolítja a csúszó átmenet ez a dobozon kívül történik.

Egyéni CSS

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

Olvassa el: Divi: Hogyan lehet megváltoztatni az oszlopok számát egy blogban

Módosítsa a portfóliórácsot négy oszlopról háromra

Legújabb CSS-kiegészítésünk az lesz, hogy a Szűrhető portfólió modult négy oszlopról háromra alakítjuk. Ez több teret ad a projektjeink megtekintésére. 

Ezenkívül egy extra sort is hozzáadunk a modulunkhoz. Megtalálja a legújabb CSS-kódrészletet is, amelyet az oszlopok konvertálására használhat.

Egyéni CSS

Az utolsó részlethez hozzáadjuk a CSS-azonosítót #háromoszlopos-rács modulunkhoz. A korábbi CSS-osztályunkat továbbra is érintetlenül hagyjuk.

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

Töltse le a DIVI-t most!!!

Következtetés

A legtöbb Divi modulhoz hasonlóan a Divi-hoz tartozó beállítások CSS segítségével továbbfejleszthetők. Munkájának bemutatása fontos része egy online vállalkozás, blog vagy márka működtetésének. 

Emiatt elengedhetetlen, hogy a munkája szervezett módon mutassa be. Szerezzen ma megosztott tippeket, hogy részt vegyen a Divi Szűrhető portfólió moduljának tervezési útjában.

Remélhetőleg ez a technika további hasznos tervezési készségeket ad a jövőbeli projektekhez.

Reméljük, hogy ez az oktatóanyag inspirációt ad a következő Divi projektjeihez. Ha bármilyen aggálya vagy javaslata van, keressen minket a megjegyzések szakasz hogy megbeszéljük.

Konzultálhat is forrásaink, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához.

Ne habozzon, tekintse meg útmutatónkat is a WordPress blog létrehozása vagy az egyiket Divi: minden idők legjobb WordPress témája.

De időközben ossza meg ezt a cikket a különböző közösségi hálózatokon.

...