Divi: Hogyan lehet testreszabni egy rácselemet a „Szűrhető portfólió” modulban

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

Fontos, hogy a weboldaladon legyen egy külön terület a munkáid bemutatására. Ha stylist vagy, több projektet is létrehozhatsz a WordPress weboldaladon a terveid bemutatására. Ha márkaépítő vagy, portfóliót használhatsz munkáid bemutatására. Sőt, még tovább is mehetünk, és különböző kategóriákat adhatunk hozzá a projektjeinkhez. Itt… itt jön képbe a Divi Szűrhető Portfólió modulja .

Ezzel a modullal egyszerű és szervezett módon tudjuk bemutatni a kemény munkánkat. 

A mai oktatóanyagban a Szűrhető portfólió modul egyes rácselemeit fogjuk testre szabni. Az ingyenes elrendezéscsomagok elrendezéseit fogjuk használni. Divi konferencia et Divi online jógaoktató minden vásárlásakor biztosított Divi . 

Mint minden Divivel kapcsolatos dolog esetében, ezt a modult is testreszabhatjuk igényeink és vágyaink szerint. Mielőtt azonban belemerülnénk a stílusba, tudjunk meg egy kicsit többet magáról a modulról.

Mi a Divi Szűrhető Portfólió modulja?

A projektek egyfajta egyéni bejegyzések, amelyek hasonlóan működnek, mint a hagyományos bejegyzések. Megtalálhatod őket a WordPress irányítópultodban.

Itt hozhatod létre az egyéni projektjeidet, amelyek feltöltik majd a Szűrhető Portfólió modulodat. A modul kétféleképpen mutathatja be a projektjeinket: 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 Divi modul, a Szűrhető portfólió modul is számos olyan funkcióval rendelkezik, amelyek testreszabhatók az igényeinknek és preferenciáinknak megfelelően. A modul legtöbb funkciója módosítható a fülön. Tervezés 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 nem is beszéltünk arról, hogy a CSS milyen mélyebb testreszabási lehetőségeket adott 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.

Az elemek elrendezése a "Divi Konferencia" prezentációban

Az elemek elrendezése a "Divi Online Jóga Oktató" oldalon

Mindkét elrendezést könnyen letöltheti a Divi Builderből. 

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 Pack-ből. Miután létrehoztuk az új oldalt a WordPressben és aktiváltuk a Divi Buildert, belépünk a Divi könyvtárba.

Lépjen be a Divi Layout Libraryba

Kattintson az ikonra "Betöltés a könyvtárból"a Divi elrendezési könyvtár eléréséhez

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

A Divi elrendezési könyvtárának keresési funkciójával, keresés a rendelkezésKonferencia esemény oldala".

Telepítse az elrendezést

Miután kiválasztotta az elrendezést, kattintson a " gombraHasználja ezt az elrendezést"az elrendezés telepítéséhez az oldaladon.

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

El fogjuk távolítani az alább látható Kép modult, hogy helyet csináljunk a Szűrhető Portfólió modulnak, amelyet testreszabunk. Kattintson a " ikonraTörölni "miután az egérmutatót a kép fölé viszed a fotó törléséhez.

Helyezze be a Divi Filterable Portfolio modulját

Miután eltávolítottuk a Kép modult, helyet csinálhatunk a Szűrhető Portfólió modulnak. Kattintsunk a " ikonraModul 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 a projektjeink egy rácsban jelennek meg, linkeljünk össze néhány tervezési elemet a kiválasztott sablonunkból. Ebben az esetben a Divi Conference Layout Pack által biztosított stílust fogjuk használni az új modulunkban.

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

Vigyük egy lépéssel tovább a stílusunkat, és módosítsuk kissé a modulhoz tartozó alapértelmezett átfedést. Megváltoztatjuk a színt és az ikont is, amelyet rögtön az alapértelmezés szerint használunk.

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 az elrendezés márkaszíneit az overlay-höz, valamint megváltoztattuk a Divi által alapértelmezés szerint biztosított ikont az overlay funkcióhoz, amikor az egérmutatót erre a modulra viszi.

A lapozás testreszabása

Most kis CSS kódrészleteket fogunk használni a Szűrhető portfólió modul további testreszabásához. Először a modul oldalszámozását szabjuk testre. Ezután eltávolítjuk a tetején megjelenő egyetlen CSS sorral ellátott szegélyt.

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)

A CSS-ünkhöz átváltunk a fülre Részletes modulunkban. Másodszor, rákattintunk a fülre Egyedi CSS. Ezután a következő kódrészletet fogjuk beírni, hogy eltávolítsuk a lapozás feletti szegélyt, így tisztább megjelenést kölcsönözve neki.

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öveget egy fokkal feljebb fogjuk vinni. CSS-t fogunk használni a háttér és az egérmutató effektek megváltoztatásához. 

Szeretnénk megőrizni a tökéletes folytonosságot az újonnan hozzáadott modul és az elrendezéscsomag stílusa között. Először is, nézzük meg a Divi betűtípus-beállításait.

Szűrési feltételek szövege

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

Jelenlegi állapotában a szűrőnk eltűntnek tűnik. Valójában az alapértelmezett állapotában egyszerűen fehér szöveg látható fehér háttéren. Ezt azonban két helyen is módosítani fogjuk 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övegéhez. Másodszor, a fül segítségével testreszabjuk az aktív portfólió szűrőt. Részletes du modul.

Hozzáférni Az oldalbeállítások eléréséhez kattintson a képernyő közepén található három pontra. majd válaszd a fogaskerék ikont amely megnyitja az oldal beállításait. Aztán te Lépjen az Egyéni CSS fülre é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 kódrészletben a szűrő háttérszínét célozzuk meg. Emellett a lebegési állapotát is meghatározzuk és stílusosítjuk. Ezután adjunk hozzá további CSS-t a modulhoz, és jelöljü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;
}

A portfóliószűrő aktív lapjának stílusa

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

Megyünk a laphoz 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

Ha az egér fölé viszed az egeret, a háttér feketére változik.

color: #000000!important;

A Divi szűrhető portfóliójának végleges kinézete a "Divi Konferencia" 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 jógaoktató”

A Divi Konferencia kiadáshoz hasonlóan az elrendezést a Divi Builder online jógaoktatói elrendezéscsomagjában találod. 

Ehhez az oktatóanyaghoz a Landing Page Layout (Látogatóoldal elrendezése) beállítást fogjuk használni. Görgess le a Szakasz osztályok részhez, amelynek címe Szakasz. 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 három ponttal ellátott lila ikonra . 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 egyetlen oszloppal helyettesítjük őket a belső sorban. Ezután hozzáadjuk a Szűrhető portfólió modult.

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

Most pedig tegyünk valami kicsit mást a térképen megjelenített információkkal. 

A lapon 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 Portfólió modul csak a projekt nevét jeleníti meg a kategória neve nélkül, amelyben található.

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ő pénztárca modulunk. Nem sok, de lassan haladunk afelé!

Áttetsző réteg létrehozása lebegés közben

Merítsünk ihletet a különböző modulokból és a gyönyörű színátmenetekből ebben az elrendezésben. Ehhez létrehozunk egy áttetsző lebegő réteget, és testreszabjuk az ikont, amely szintén megjelenik lebegéskor.

• Zoom ikon színe: #323741
• Lebegő fedvény színe: rgba (255 201 165, 0,85)
• Mutató ikonválasztó: keressen rá egy munkalapra, és tekintse meg a fenti ikont

Szegély hozzáadása a portfólió rács elemeihez egyéni CSS használatával

Az első példánkhoz hasonlóan most CSS-t fogunk használni, hogy érdekesebbé tegyük a Szűrhető Portfólió modulunkat. 

Most minden egyes elem köré szegélyt adunk a portfóliórácsban. Használd az alábbi CSS kódrészletet az oldalbeállítások egyéni CSS szakaszában a szegély hozzáadásához. 

A modulhoz a "border" CSS osztályt is használni fogjuk.

• CSS osztály: keret

Egyéni CSS

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

Itt van most a Szűrhető Portfólió modulunk, szép szegéllyel – és kitöltésszel – 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ó. 

Itt látható a CSS, amit az egyéni CSS szakaszunkba fogunk hozzáadni, hogy a szűrősáv hátterét és fölé mutató elemeket jelenítsük meg.

/* 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;

Távolítsa el a modul animációját

A letisztultabb é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 oldalbeállításokhoz, és hozzá kell adnunk a portfóliórács elemeit célzó CSS-t, majd el kell távolítanunk 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

Ehhez az utolsó kivonathoz hozzáadjuk a CSS azonosítót #háromoszlopos-rács a modulunkhoz. Mindig megtartjuk az előző CSS osztályunkat.

/* 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!!!

Összegzés

A legtöbb Divi modulhoz hasonlóan a Divi beállításai is továbbfejleszthetők CSS segítségével. A munkád prezentálása fontos eleme egy vállalkozás, blog vagy online márka kezelésének. 

Éppen ezért elengedhetetlen, hogy szervezetten mutasd be a munkáidat. Használd ki a ma megosztott tippeket, hogy elindulhass a saját tervezési utadon a Divi Szűrhető Portfólió moduljával.

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.

...