Filtrovateľné portfólio v Divi vám umožňuje zobraziť vaše posledné projekty v mriežke alebo štandardnom režime. Filtrovateľné portfólio vyzerá ako normálny modul portfólia, až na to, že načítava nové projekty pomocou požiadavky Ajaxu a obsahuje možnosti filtrovania zoznamu projektov podľa kategórií. Keď je vybratá konkrétna kategória, zoznam projektov sa okamžite vygeneruje novým zoznamom projektov z vybranej kategórie.

portfólio s celkovou šírkou divi.png

Ako pridať filtrovateľný portfólio modul na svoju stránku

Pred pridaním filtrovateľného modulu portfólia na svoju stránku musíte najskôr prejsť do Divi Builder. Raz Divi téma nainštalovaný na vašom webové stránky, všimnete si tlačidlo Použite nástroj Divi Builder nad editorom príspevkov vždy, keď vytvoríte novú stránku. Kliknutím na toto tlačidlo aktivujete program Divi Builder a získate prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime. Môžete tiež kliknúť na tlačidlo Povoliť Visual Builder keď si prezeráte svoje webové stránky v popredí, ak ste prihlásení do svojho hlavného panela WordPress.

použite divi builder

Po zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju stránku nový modul. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok.

peňaženka na celú obrazovku divi.png

Vyhľadajte filtrovateľný portfóliový modul v zozname modulov a kliknutím naň ho pridajte na svoju stránku. Zoznam modulov je prehľadávateľný, čo znamená, že môžete tiež napísať slovo „portfólio na celú obrazovku“ a potom kliknúť na „Enter“, aby ste automaticky našli a pridali filtrovateľný portfóliový modul! Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .

Príklad prípadu použitia: Pridanie filtrovateľného modulu portfólia na stránku portfólia

V tomto príklade vám ukážem, ako pridať filtrovateľný portfóliový modul na stránku portfólia.

rozdeliteľné portfólio divi builder.jpg

Začnime.

Pomocou vizuálneho nástroja na pridanie bežnej sekcie s riadkom s plnou šírkou (1 stĺpec) pod hlavičkou stránky. Potom do riadku pridajte filtrovateľný portfóliový modul.

Aktualizujte nastavenia portfólia, ktoré je možné filtrovať, nasledovne:

Možnosti obsahu

Počet článkov: 8

Možnosti návrhu

Rozloženie: Mriežka Zväčšenie Farba ikony: #ffffff Farba prekrytia kurzora: rgba (224,153,0,0.58 14) Písmo nadpisu: Predvolené, tučné, veľké písmeno Nadpis Veľkosť písma: 1 pixelov Rozstup písmen nadpisu: 14 pixel Filtr písma: Predvolené, Tučné, veľké písmená Filter Veľkosť písma: 1 pixelov Medzery medzi písmenami filtra: 12 pixel Meta Veľkosť písma: 1 pixelov Meta vzdialenosť medzi písmenami: XNUMX pixel

Rozšírené možnosti (vlastné CSS)

Filter aktívneho portfólia: farba: # e09900; Názov portfólia: text-align: center; Portfóliová správa Meta: text-align: center; Aktívna stránka stránkovania: farba: # e09900! Dôležité;

portfóliový modul fullwith divi.png

A je to!

Filtrovateľné možnosti obsahu portfólia

Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo vo vašom module sa vždy nájde na tejto karte.

modul divi filtrovateľné portfólio full screen.png

Počet správ

Vyberte, ako si chcete zobraziť príspevky, ktoré chcete zobraziť, skôr ako sa zobrazí zoznam.

Zahrnúť kategórie

Vyberte kategórie, ktoré chcete zobraziť. Príspevky v kategóriách, ktoré nie sú vybraté, sa nezobrazia v zozname vygenerovaných príspevkov.

Zobraziť titul

V prípade potreby zadajte názov, ktorý bude umiestnený nad zoznamom projektov.

Zobraziť kategórie

Vyberte, či sa má zobraziť kategória podľa každého článku v oblasti metadát.

Zobraziť stránkovanie

Táto voľba povolí / zakáže stránkovanie. Ak je stránkovanie zakázané, pre každú kategóriu sa zobrazí iba jedna stránka projektu.

Farba pozadia

Definujte pre svoj modul vlastnú farbu pozadia alebo nechajte predvolenú farbu prázdnu.

Obrázok pozadia

Ak je nastavený, tento obrázok sa použije ako pozadie pre tento modul. Ak chcete odstrániť obrázok na pozadí, stačí odstrániť adresu URL z poľa nastavení. Na pozadí farieb pozadia sa zobrazia obrázky pozadia, čo znamená, že pri použití obrázka pozadia nebude farba pozadia viditeľná.

Štítok správy

Toto zmení štítok modulu v konštruktore na ľahšiu identifikáciu. Keď použijete zobrazenie WireFrame v programe Visual Builder, tieto štítky sa zobrazia v bloku modulu rozhrania Divi Builder.

Filtrovateľné možnosti návrhu portfólia

Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Toto je karta, ktorú použijete na zmenu vzhľadu vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete čokoľvek meniť.

portfóliový modul fullwidth divi section design.png

dispozície

Vyberte štýl rozloženia pre svoje portfólio. Položka „Fullwidth“ zobrazuje jednu správu na riadok, zatiaľ čo „Grid“ zobrazuje vaše projekty v dlaždicovej mriežke s viacerými projektmi na riadok.

Farba textu

Tu môžete zvoliť, či má byť text svetlý alebo tmavý. Ak pracujete na tmavom pozadí, text by mal byť svetlý. Ak je vaše pozadie svetlé, text by mal byť tmavý.

Písmo názvu

Písmo textu nadpisu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Veľkosť písma názvu

Tu môžete upraviť veľkosť textu nadpisu. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadajte požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu titulu

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu svojho nadpisu, zvoľte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Rozmiestnenie hlavných písmen

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte nadpisu, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

portfóliový modul divi.png

Výška riadku názvu

Výška riadku ovplyvňuje medzeru medzi každým riadkom textu nadpisu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Filter font

Písmo filtračného textu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Filtrovanie veľkosti písma

Tu môžete upraviť veľkosť textu filtra. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Filtrovať farbu textu

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu filtra, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Medzery medzi písmenami filtra

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami vo svojom texte filtra, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška filtračnej línie

Výška riadku ovplyvňuje medzeru medzi každým riadkom textu filtra. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Meta písmo

Písmo meta textu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Veľkosť písma Meta

Tu môžete upraviť veľkosť svojho meta textu. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu meta

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu svojho meta textu, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Rozpísanie medailových písmen

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v meta-texte, pomocou posúvača rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška metálnej čiary

Výška riadku ovplyvňuje medzeru medzi každým riadkom meta-textu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

meta portfóliový modul na plnej obrazovke divi.png

Použite okraj

Povolenie tejto možnosti umiestni orámovanie okolo vášho modulu. Túto hranicu je možné prispôsobiť pomocou nasledujúcich podmienených parametrov.

Farba hranice

Táto možnosť ovplyvňuje farbu vášho orámovania. Vyberte vlastnú farbu z výberu farieb a použite ju na svoje orámovanie.

Šírka hranice

V predvolenom nastavení sú okraje široké 1 pixel. Túto hodnotu môžete zvýšiť presunutím jazdca rozsahu alebo zadaním vlastnej hodnoty do vstupného poľa vpravo od jazdca. Podporované vlastné merné jednotky, čo znamená, že môžete zmeniť predvolenú jednotku z „px“ na inú, napríklad em, vh, vw atď.

Štýl hraníc

Okraje podporujú osem rôznych štýlov: plný, bodkovaný, bodkovaný, dvojitý, drážka, hrebeň, prekrytie a štart. Z rozbaľovacej ponuky vyberte požadovaný štýl a aplikujte ho na svoje orámovanie.

Rozšírené možnosti filtrovania portfólia

Na karte rozšírené nájdete možnosti, ktoré by sa mohli hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.

sekcia rozšírené portfólio modulu fullwidth.png

CSS ID

Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.

Triedu CSS

Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS možno použiť triedu CSS. Môžete pridať viacero tried oddelených medzerou. Tieto triedy možno použiť vo vašej podradenej téme Divi alebo vo vlastnej šablóne so štýlmi CSS, ktorú pridáte na svoju stránku alebo web. webové stránky pomocou možností témy Divi alebo nastavení stránky Divi Builder.

Vlastné CSS

Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.

viditeľnosť

Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ďalšie výukové programy spoločnosti Divi