Divi bemutató: A navigációs modul használata cikkekben

Mielőtt cikknavigációs Divi modult adna az oldalához, először be kell ugrania a Divi Builderbe. Egyszer a Divi téma telepítve van a webhelyére, észrevesz egy gombot Használja a Divi Buildert a bejegyzésszerkesztő felett, amikor új oldalt hoz létre. Kattintson erre a gombra a Divi Builder aktiválásához és az összes Divi Builder modul eléréséhez. Ezután kattintson a gombra Használja a Visual Builder alkalmazást hogy a generátort vizuális módban indítsa el. Kattintson a gombra is Használja a Visual Builder alkalmazást amikor az előtérben böngészi a webhelyet, ha csatlakozik a WordPress irányítópultjához.

Miután belépett a Visual Builder programba, a szürke plusz gombra kattintva új modult adhat hozzá az oldalához. Új modulok csak sorok belsejében adhatók hozzá. Ha új oldalt indít, ne felejtse el először hozzáadni egy sort az oldalához.

Keresse meg a navigációs modult a modulok listájában, és kattintson rá, hogy hozzáadja az oldalához. A modulok listája kereshető, ami azt jelenti, hogy beírhatja a "post navigation" szót is, majd az enter gombra kattintva automatikusan megtalálja és hozzáadja a navigációs modult. A modul hozzáadása után a modul opcióinak listája fogadja. Ezeket az opciókat három fő csoportra osztják: Tartalom , Fogamzás et fejlett .

Példa felhasználási esetre: Egyéni navigációs linkek hozzáadása egy blogbejegyzés aljára

Ha a cikk alján találhatók a következő és előző cikkekre mutató navigációs hivatkozások, akkor ez nagyszerű módja annak, hogy megőrizze a cikkét Látogatók foglalkozik a tartalommal. Ebben a példában megmutatom, hogyan használhatja a bejegyzések tényleges címét a navigációs hivatkozásokhoz az általános „előző” és „következő” linknév helyett. Azt is megmutatom, hogyan lehet szegélyt adni a hivatkozások köré, hogy nagyobb hatást érjenek el.

Kezdjük.

Használja a vizuális készítőt egy normál szakasz teljes szélességű (1 oszlopos) elrendezésű hozzáadásához a bejegyzés aljára. Ezután adjon hozzá egy navigációs modult a sor után.

Frissítse a közzétett navigációs beállításokat az alábbiak szerint:

Tartalom lapon

Előző link szövege:% title (ez a változó beszúrja a cikk címét)
A következő link szövege:% title (ez a változó beszúrja a cikk címét)

Tervező lap

Betűtípus linkek: PT Sans
Linkek Betűméret: 20px
Linkek Szöveg színe: # 5e95c1
Használja a szegélyt: YES
Határszín: # 5e95c1
A határ szélessége: 1px
Egyedi kárpitozás: 20px felső, 20px jobb, 20px alsó, 20px bal

Ez minden ! Mostantól vannak bejegyzések címei a navigációs linkeken

A navigációs modul tartalmi beállításai

A Tartalom fülön megtalálja a modul összes tartalmi elemét, például szöveget, képeket és ikonokat. Minden, ami irányít mi jelenik meg a modulban, mindig megtalálható ezen a lapon.

Az előző hivatkozás szövege

Adja meg az előző hivatkozás egyéni szövegét. A% title változóval felveheti a cikk címét. Hagyja üresen az alapértelmezett értéket.

A következő link szövege

Adjon meg egyéni szöveget a következő linkhez. A% title változóval felveheti a bejegyzés címét. Hagyja üresen az alapértelmezett értéket.

Ugyanabban a kategóriában

Itt határozhatja meg, hogy az előző és a következő cikkeknek ugyanabban a taxonómiai kifejezésben kell-e lenniük, mint a jelenlegi cikknek.

A szokásos taxonómia neve

Hagyja ezt az opciót üresen, ha ezt a modult egy projekten vagy cikken használja. Ellenkező esetben írja be a rendszertan nevét az „Ugyanabban a kategóriában” opcióhoz, hogy megfelelően működjön.

Az előző link elrejtése

Itt választhatja el az előző link elrejtését vagy megjelenítését.

A következő link elrejtése

Itt választhatja el a következő link elrejtését vagy megjelenítését.

Admin címke

Ez megváltoztatja a konstruktor modul címkéjét az egyszerű azonosítás érdekében. Amikor a WireFrame nézetet használja a Visual Builder alkalmazásban, ezek a címkék a Divi Builder felület modulblokkjában jelennek meg.

Tervezési lehetőségek a navigáció után

A Tervezés lapon megtalálja a modul összes stíluslehetőségét, például a betűtípusokat, a színeket, a méretezést és a térközt. Ezen a lapon módosíthatja a modul megjelenését. Minden Divi modulnak hosszú a tervezési beállítások listája, amelyek segítségével bármit megváltoztathat.

Linkek fontja

A linkek szövegének betűtípusát úgy módosíthatja, hogy a legördülő menüből kiválasztja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts szolgáltat. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűs és aláhúzási lehetőségek használatával is.

Link betűméret

Itt módosíthatja a link szövegének méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

A hivatkozások szövegszíne

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni a linkek szövegének színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

A linkek betűinek elosztása

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a linkek szövegében az egyes betűk közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt távolságméretet a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

A vonalvonal magassága

A vonal magassága befolyásolja a hivatkozás szövegének minden sora közötti teret. Ha növelni szeretné az egyes sorok közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt térköz méretet a mezőbe. bejegyzés a kurzor jobb oldalán. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

Használja a határt

Ennek az opciónak az engedélyezésével szegély kerül a modul köré. Ez a határ testreszabható a következő feltételes paraméterekkel.

A határ színe

Ez az opció befolyásolja a szegély színét. Válasszon ki egy egyéni színt a színválasztóból, hogy alkalmazza a határára.

A határ szélessége

Alapértelmezés szerint a szegélyek 1 pixel szélesek. Növelheti ezt az értéket a tartomány csúszkájának húzásával vagy egy egyéni érték megadásával a csúszka jobb oldalán található beviteli mezőben. Támogatott egyedi mértékegységek, ami azt jelenti, hogy megváltoztathatja az alapértelmezett egységet "px" értékről valami másra, például em, vh, vw stb.

Határtípus

A szegélyek nyolc különböző stílust támogatnak: szilárd, pontozott, pöttyös, dupla, barázda, csúcs, átfedés és kezdet. Válassza ki a kívánt stílust a legördülő menüből, hogy alkalmazza azt a szegélyén.

Egyéni margó

A margó a modul külső részén, a modul és a következő elem felett, alatt, illetve annak bal és jobb oldalán hozzáadott hely. Hozzáadhat egyedi margóértékeket a modul négy oldalához. Az egyéni margó eltávolításához távolítsa el a hozzáadott értéket a beviteli mezőből. Alapértelmezés szerint ezek az értékek pixelben vannak megadva, de a beviteli mezőkbe egyéni mértékegységeket adhat meg.

Egyéni párnázás

A kitöltés a modul belsejében, a modul éle és a belső elemei között hozzáadott hely. Hozzáadhat egyedi kitöltési értékeket a modul négy oldalához. Az egyéni margó eltávolításához távolítsa el a hozzáadott értéket a beviteli mezőből. Alapértelmezés szerint ezek az értékek pixelben vannak megadva, de a beviteli mezőkbe egyéni mértékegységeket adhat meg.

Speciális lehetőségek a navigációs modulhoz

A Haladó lapon olyan lehetőségeket talál, amelyeket a tapasztaltabb webtervezők hasznosnak találhatnak, például egyéni CSS és HTML attribútumokat. Itt alkalmazhat egyedi CSS-t a modul számos elemére. Alkalmazhat egyedi CSS osztályokat és azonosítókat is a modulra, amelyek felhasználásával testreszabhatja a modult a gyermek téma style.css fájljában.

CSS azonosító

Adjon meg egy opcionális CSS azonosítót, amelyet ehhez a modulhoz használ. Az azonosító felhasználható egyedi CSS-stílus létrehozására vagy az oldal egyes szakaszaira történő hivatkozásokra.

CSS osztály

Adja meg az ehhez a modulhoz használandó opcionális CSS osztályokat. Egy CSS osztály felhasználható egyedi CSS stílus készítéséhez. Több osztályt is felvehet, szóközzel elválasztva. Ezeket az osztályokat fel lehet használni a Divi gyermek témában, vagy az egyéni CSS stíluslapban, amelyet hozzáad az oldalához vagy a webhelyéhez a Divi téma beállításai vagy a Divi Builder oldal beállításai segítségével.

Egyéni CSS

Az egyedi CSS alkalmazható a modulra és a modul bármely belső elemére is. Az Egyéni CSS részben talál egy szövegmezőt, ahol egyedi CSS stíluslapokat adhat hozzá minden elemhez. Az ezekben a beállításokban található CSS bejegyzések már stíluscímkékbe vannak csomagolva. Tehát csak pontosvesszővel elválasztva adja meg a CSS-szabályokat.

láthatóság

Ez az opció lehetővé teszi azoknak az eszközöknek a vezérlését, amelyeken a modul megjelenik. Választhatja a modul deaktiválását táblagépeken, okostelefonokon vagy asztali számítógépeken egyenként. Ez akkor hasznos, ha különböző modokat szeretne használni különböző eszközökön, vagy ha le akarja egyszerűsíteni a mobil tervezését bizonyos elemek eltávolításával az oldalról.

[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”]DIVI TÉMA LETÖLTÉSE [/vcex_button][/vc_column][vc_colum /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”]LETÖLTÉS TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Divi bemutató: A navigációs modul használata cikkekben

Példa felhasználási esetre: Egyéni navigációs linkek hozzáadása egy blogbejegyzés aljára