Chceli by ste vedieť, ako prispôsobiť prvky mriežky modulu Filtrovateľné portfólio divi ? Sledujte nás v tomto návode...
Majte na sebe zónu webové stránky prezentovať svoju prácu je dôležité. Ak ste stylista, môžete vytvoriť niekoľko projektov webové stránky WordPress, aby ste ukázali svoje koncepty. Ak ste tvorcom značky, môžete použiť portfólio na prezentáciu svojej práce. Navyše môžeme ísť ešte ďalej a pridať rôzne kategórie pre naše projekty. Je to tu čo robí Divi's Filterable Portfolio modul? .
S týmto modulom sme schopní ukázať našu tvrdú prácu jednoduchým a organizovaným spôsobom.
V dnešnom návode si prispôsobíme jednotlivé prvky mriežky modulu Filtrovateľné portfólio. Použijeme rozloženia z bezplatných balíkov rozloženia Konferencia Divi et Divi Online inštruktor jogy poskytnuté pri každom nákupe divi .
Ako pri všetkom o divi, máme možnosť prispôsobiť tento modul tak, aby vyhovoval našim potrebám a želaniam. Kým sa však pustíme do stylingu, pozrime sa na modul trochu viac.
Čo je modul filtrovateľného portfólia Divi?
Projekty sú súčasťou vlastného typu príspevku, ktorý funguje rovnako ako príspevky. Nájdete ich na hlavnom paneli WordPress.
Tu vytvoríte svoje individuálne projekty, ktoré naplnia váš modul Filtrovateľné portfólio. Modul nám ponúka dva spôsoby, ako ukázať naše projekty: vo formáte mriežky ou vo formáte s plnou šírkou. Pre nás použijeme a prispôsobíme formát mriežky.
S modulom Filterable Portfolio budeme môcť prezentovať naše najnovšie projekty. Používateľom našej stránky sa v hornej časti mriežky nášho portfólia zobrazí panel filtra. Odtiaľ môžu prechádzať rôznymi kategóriami portfólia, ktoré im umožňujeme zobraziť v module.
Tu je príklad konfigurácie mriežky modulu s niekoľkými vzorovými projektmi:
Oblasti, ktoré treba zvážiť pri vytváraní filtrovateľného portfólia Divi
Ako všetky mody divi, modul Filtrovateľné portfólio prichádza s množstvom funkcií, ktoré môžeme prispôsobiť našim potrebám a želaniam. Väčšinu funkcií, ktoré sú súčasťou modulu, je teda možné upraviť na karte dizajn z modálu nastavenia modulu. Môžeme upraviť nasledujúce oblasti a ďalšie:
- Názov projektu
- Kategória projektu
- Medailónik
- Filtrovať text
- Po umiestnení kurzora myši na miniatúru
- Stránkovanie
Toto nie je úplný zoznam a ešte sme ani nezačali hovoriť o tom, ako CSS pridalo do tohto modulu hlbšie prispôsobenia!
Ako prispôsobíme Divi's Filterable Portfolio modul
Ako už bolo spomenuté, v tomto návode budeme používať dve rozloženia: Konferencia Divi et Divi Online inštruktor jogy. Nižšie môžete získať prehľad o práci, ktorú budeme robiť počas tohto tutoriálu.
Usporiadanie prvkov usporiadania „Divi Conference“.
Usporiadanie prvkov rozloženia "Divi Online Yoga Instructor".
Obe rozloženia si môžete jednoducho stiahnuť z divi Staviteľ.
Teraz začnime!
Pozri tiež: Divi: Vyberte si medzi mriežkou a rozložením na celú šírku modulu Filtrovateľné portfólio
Prispôsobenie modulu Divi Filterable Portfolio: "Divi Conference Edition"
Najprv budeme musieť nainštalovať šablónu stránky udalosti z Divi Conference Layout Pack. Po vytvorení vašej novej stránky vo WordPresse a aktivácii Divi Buildera vstúpime do Divi Library.
Vstúpte do Divi Layout Library
Kliknite na ikonu « Načítať z knižnice pre vstup do Divi Layout Library
Nájdite rozloženie v knižnici rozloženia Divi
Pomocou funkcie vyhľadávania v knižnici rozložení Divi, Vyhľadávanie dispozícia" Stránka udalosti konferencie„.
Nainštalujte rozloženie
Po výbere rozloženia kliknite na tlačidlo " Použite toto rozloženie na inštaláciu rozloženia na vašu stránku.
Odstráňte a vymeňte obrazový modul
Odstránime modul Obrázok zobrazený nižšie, aby sme uvoľnili miesto pre modul Filtrovateľné portfólio, ktorý budeme prispôsobovať. Klikni na " vymazať po umiestnení kurzora myši nad obrázok fotografiu odstránite.
Vložte modul Divi's Filterable Portfolio
Po odstránení modulu Image teraz môžeme uvoľniť miesto pre náš modul Filterable Portfolio. Klikneme na ikonu „ Pridať modul (sivé znamienko plus), potom vyberte modul v zobrazenom modálnom poli modulu.
Nastavenie počtu príspevkov a rozloženia portfólia
Štandardne bude tento modul prezentovať vašu prácu v jednom stĺpci. Použijeme však rozloženie mriežky, ktoré sa štandardne dodáva so 4 stĺpcami.
Preto odporúčame ako počet príspevkov pre vaše portfólio zvoliť násobok 4 (4, 8, 12, 16 atď.).
Pre tento tutoriál použijeme 12 projektov v našej mriežke.
Začnite prispôsobovať filtrovateľné portfólio Divi: Názov a Meta Text
Teraz, keď sú naše projekty zobrazené v mriežke, prepojme niektoré prvky dizajnu našej vybranej šablóny. V tomto prípade použijeme štýl poskytnutý s Divi Conference Layout Pack v našom novom module.
Štýl textu
- Zarovnanie textu: na stred
- Farba textu: Tmavá
Štýl textu nadpisu
- Úroveň nadpisu: H2
- Písmo názvu : Krona One
- Farba textu: #000000
Meta štýl textu
- Meta Font: Predvolené (Open Sans)
- Farba meta textu: #ff6651
Teraz, keď máme svoj štýl pre tituly v mriežke portfólia, urobme nejaké zmeny v skutočnom tvare samotných miniatúr projektov.
Zmeňte okraj miniatúry projektu a zaoblené rohy
V našom balíku Divi Conference Layout používame jedinečnú kombináciu zaoblených rohov, aby sme niektorým kľúčovým rámom v balení poskytli jedinečný tvar. Aplikujme tento štýl na miniatúry nášho modulu.
Obraz
- obrázok:
- Zaoblené rohy: 50px 50px 50px 0px
- Štýly okrajov: všetky
- Šírka orámovania: 3px
- Farba: #000000
- Štýl okraja: pevný
Vďaka tomu získajú naše miniatúry tvar, ktorý sa zhoduje so zvyškom ostatných obrázkov v balíku rozloženia.
Prispôsobenie prekrytia po umiestnení kurzora myši
Poďme ešte o krok ďalej s naším štýlom a urobme malú zmenu predvoleného prekrytia, ktoré sa dodáva s týmto modulom. Hneď po vybalení zmeníme farbu, ako aj ikonu, ktorá sa používa.
superpozície
- Farba ikony priblíženia: #bcf5fd
- Farba prekrytia kurzorom myši: #ff6651
- Výber ikony po umiestnení kurzora myši: Priblíženie
Ako teraz môžete vidieť, pridali sme farby značky pre toto rozloženie do prekrytia, ako aj zmenili ikonu, ktorú Divi predvolene poskytuje pre funkciu prekrytia pri umiestnení kurzora myši v tomto module.
Prispôsobenie stránkovania
Teraz začneme používať malé úryvky CSS na pridanie ďalšieho prispôsobenia do nášho modulu Filtrovateľné portfólio. Najprv prispôsobíme stránkovanie tohto modulu. Ďalej odstránime okraj, ktorý sa zobrazí nad ním, pomocou jedného riadku CSS
Text stránkovania
- Stránkovanie:
- Písmo: Krona One
- Zarovnanie textu: na stred
- Farba textu: #ff6651, #000000 (umiestnenie kurzora myši)
Pre náš CSS sa prepneme na kartu pokročilý nášho modulu. Po druhé, klikneme na kartu Vlastné CSS. Ďalej zadáme nasledujúci útržok kódu, aby sme odstránili orámovanie nad stránkovaním, čím získame čistejší vzhľad.
Stránkovanie portfólia
border-top: 0px;
Použitie nastavení Divi a CSS na prispôsobenie textu filtra
Čo sa týka textu filtra, pozdvihneme ho. Na zmenu pozadia, ako aj efektov vznášania použijeme CSS.
Chceme mať dokonalú kontinuitu medzi novo pridaným modulom a štýlom balíka rozloženia. Najprv zadajte naše nastavenia Divi pre písmo.
Text kritérií filtra
- Kritériá filtra:
- Písmo: Krona One
- Farba písma: #ffffff, #000000 (umiestnenie kurzora myši)
Ako to stojí, zdá sa, že náš filter je preč. V predvolenom stave je to biely text na bielom pozadí. To však zmeníme pomocou vlastného CSS na dvoch miestach.
Najprv v nastaveniach stránky pridáme útržok CSS, ktorý pridá pozadie k textu filtra. Po druhé, prispôsobíme aktívny filter portfólia pomocou karty pokročilý du modul.
Pristúpiť nastavenia stránky, kliknite na tri bodky v strede obrazovky. potom vyberte ikonu ozubeného kolieska ktorý otvorí nastavenia stránky. Potom ty prejdite na kartu Custom CSS a zadajte nasledujúce, aby ste k textu filtra pridali pozadie.
Vlastné CSS
V tomto úryvku CSS sa zameriavame na farbu pozadia filtra. Zacieľujeme a upravujeme aj jeho stav vznášania. Ďalej na programe, pridajme do modulu ďalšie CSS a zvýraznite našu kartu Aktívny filter.
/* 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;
}
Štýl aktívnej karty s filtrom portfólia
Aktívna záložka fportfóliový filter upozorňuje používateľov na aktuálnu kategóriu portfólia, ktorú navštevujú. V súčasnosti má tento filter biely text a svetlé pozadie.
Prejdeme na kartu pokročilý modulu Filtrovateľné portfólio a pridajte text k predvoleným stavom a stavom kurzora tejto funkcie. Tu sú vlastnosti CSS, ktoré pridáme v predvolenom stave:
background: #ff6651;
color: #ffffff !important;
Stav vznášania
Po umiestnení kurzora myši zmeníme pozadie na čierne.
color: #000000!important;
Konečný vzhľad dizajnu filtrovateľného portfólia Divi s "Divi Conference"
Tu je konečný vzhľad!
A teraz, tu je to, ako to vyzerá, keď sa vznášate!
Prispôsobenie modulu Divi Filterable Portfolio: "Divi Online Yoga Instructor"
Rovnako ako v prípade Divi Conference Edition, nájdite svoje rozloženie v balíku rozloženia online inštruktora jogy v Divi Builder.
V tomto návode budeme používať rozloženie vstupnej stránky. Prejdite nadol do sekcie Triedy sekcií s názvom Sekcia Všetky nadchádzajúce kurzy.
Vloženie modulu Filtrovateľné portfólio
Odtiaľto odstránime riadky s triedami. Kliknite na fialovú ikonu s tromi bodkami . Potom, vyberte zobrazenie drôtového modelu. Nakoniec vymažete dva riadky obsahujúce tri stĺpce.
Potom ich nahradíme jedným stĺpcom v riadku vo vnútri. Potom pridáme náš modul Filtrovateľné portfólio.
Rovnako ako v predchádzajúcom príklade použijeme pre tento modul rozloženie mriežky s násobkom 4 pre počet príspevkov.
Teraz urobme niečo trochu inak s informáciami, ktoré prezentujeme na mape.
Na karte obsah, prejdite na Položky a zrušte výber Zobraziť kategórie . To znamená, že modul Portfólio zobrazí iba názov projektu bez názvu kategórie, v ktorej sa nachádza.
Prispôsobenie textu filtračných kritérií, názvu projektu a textu stránkovania
Definujme základ štýlu pre textové časti nášho modulu. Hlavný text tohto rozloženia je Otvorené Sans a písmo použité pre hlavné nadpisy je Sekáč. Preto budeme počas procesu stylingu používať kombináciu týchto dvoch písiem.
Texty
- Zarovnanie textu: na stred
- Farba textu: Svetlá
Názov textu
- Písmo názvu : Cinzel
- Farba textu nadpisu: #ffffff
Text kritérií filtra
- Hrúbka písma kritérií filtra: tučné
- Farba textu kritérií filtra: #ffffff
Text stránkovania
- Hmotnosť písma stránkovania: tučné
Takto vyzerá náš modul filtrovateľného portfólia práve teraz. Nie je to veľa, ale pomaly sa k tomu dostávame!
Vytvorte priesvitné prekrytie umiestnením kurzora myši
Poďme sa inšpirovať rôznymi modulmi a krásnymi prechodmi v tomto rozložení. Na tento účel vytvoríme priesvitné prekrytie po umiestnení kurzora myši a prispôsobíme ikonu, ktorá sa zobrazí aj pri umiestnení kurzora myši.
- Farba ikony priblíženia: #323741
- Farba prekrytia kurzorom myši: rgba (255 201 165, 0,85)
- Výber ikony po umiestnení kurzora myši: vyhľadajte hárok a pozrite si ikonu vyššie
Pridanie okraja k prvkom mriežky portfólia pomocou vlastného CSS
Podobne ako v našom prvom príklade teraz použijeme CSS na zvýšenie záujmu o náš modul Filtrovateľné portfólio.
Teraz pridáme orámovanie okolo každej jednotlivej položky v mriežke portfólia. Na pridanie nášho orámovania použite útržok CSS uvedený nižšie vo vlastnej časti CSS v nastaveniach stránky.
Pre tento modul použijeme aj „border“ ako triedu CSS.
- CSS Trieda: border
Vlastné CSS
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
Teraz tu máme náš modul Filtrovateľné portfólio s pekným okrajom – a výplňou – okolo každej položky mriežky.
Pridané CSS k okraju stránkovania štýlu
Na rozdiel od nášho predchádzajúceho príkladu pridajme farbu k okraju nášho stránkovania pomocou CSS. To pôjde aj v oblasti Nastavenia > Vlastná stránka CSS .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}Štýl textu kritérií filtra
Podobne ako v štýle nášho modulu Divi Conference Portfolio, chceme do našich filtrov kategórií pridať jazz. Opäť chceme čerpať zo štýlu, ktorý je už prítomný v predloženej šablóne.
Tu je CSS, ktorý pridáme do našej vlastnej sekcie CSS, aby sme zacielili na pozadie a kurzor myši na náš panel filtra.
/* 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;
}Vďaka týmto dvom novým prírastkom do nášho vlastného CSS takto vyzerá náš modul Filtrovateľné portfólio.
Všimnite si však, ako sa stráca aktívny portfóliový filter. Vždy má svetlé pozadie s bielym textom. Poďme do nastavení modulu a pridajte nejaké CSS, aby ste to zmenili.
Vlastné CSS
Filter aktívneho portfólia:
background: #ffffff;
color: #323741 !important;
Odstráňte animáciu modulu
Aby sme zabezpečili čistejší zážitok, odstránime predvolenú animáciu, ktorá sa dodáva s modulom Filtrovateľné portfólio. Najprv sa budeme musieť vrátiť do nastavení našej stránky a pridať nejaké CSS, ktoré zacielia na prvky mriežky portfólia a odstránia posuvný prechod to sa deje mimo krabice.
Vlastné 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;
}Čítajte tiež: Divi: Ako zmeniť počet stĺpcov v blogu
Zmeňte mriežku portfólia zo štyroch stĺpcov na tri
Náš najnovší doplnok CSS bude transformovať náš modul Filtrovateľné portfólio zo štyroch stĺpcov na tri. To nám poskytne viac priestoru na zobrazenie našich projektov.
Do nášho modulu tiež pridáme ďalší riadok. Nájdete tu aj najnovší úryvok CSS, ktorý môžete použiť na konverziu stĺpcov.
Vlastné CSS
Pre tento posledný úryvok pridáme CSS ID #trojstĺpcová-mriežka do nášho modulu. Stále zachováme našu triedu CSS z predchádzajúceho obdobia nedotknutú.
/* 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;
}
}
Stiahnite si DIVI teraz!!!
záver
Rovnako ako u väčšiny modulov Divi, nastavenia dodávané s Divi možno ďalej rozvíjať pomocou CSS. Prezentácia vašej práce je dôležitou súčasťou prevádzkovania online obchodu, blogu alebo značky.
Preto je nevyhnutné mať organizovaný spôsob zobrazenia vašej práce. Získajte tipy, ktoré boli dnes zdieľané, aby ste sa mohli zúčastniť na svojej vlastnej dizajnovej ceste modulu Divi's Filterable Portfolio.
Dúfajme, že táto technika pridá ďalšiu užitočnú dizajnérsku zručnosť pre budúce projekty.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
