Előnézet

Először is, itt van egy előnézet a három különböző dizájnról, amelyet elkészítünk.

Asztali előző és következő szöveges hivatkozások

Telefon Előző és Következő szöveges hivatkozások

Előző és Következő gombok az asztalon

Előző és Következő gombok a telefonhoz

Kétoldalas Előző és Következő gomb asztali számítógéphez

Kétoldalas Előző és Következő gomb a telefonhoz

Miért használja a bejegyzések navigációját?

A bejegyzések navigációja nagyszerű módja annak, hogy optimalizálja webhelye navigációját. Elhelyezése cselekvésre ösztönzőként működik. Ez felhívja a figyelmet a tartalomra, és tovább tartja olvasóit webhelyén. Leegyszerűsíti a másik olvasandó bejegyzés keresésének folyamatát.

A Divi Post Navigation modulja lehetővé teszi a felhasználó számára, hogy az előző vagy a következő bejegyzéshez navigáljon. Számos lehetőség közül választhat, hogyan működnek. Minden kategóriában vagy meghatározott kategóriájú bejegyzésekre hivatkozhatnak. Megjeleníthetik az általunk beírt szöveget vagy a bejegyzések nevét. Akár az előző és a következő hivatkozásokat is letilthatjuk egymástól függetlenül.

Hol helyezze el a posta navigációját

A navigációs hivatkozásoknak nem szabad véletlenszerű hivatkozásoknak kinézniük vagy érezniük. Ezeket úgy kell elhelyezni, hogy az olvasók intuitív módon megértsék, miről is van szó. A legjobb hely erre a blogbejegyzés tartalma alatt van.

Amint az olvasó befejezte a blogbejegyzést, egy egyszerű módja annak, hogy megtekinthesse az előző vagy a következő bejegyzést. Ez az az elhelyezés, amely azóta a legtöbbet hozza ki számukra, és ez a leghasznosabb hely a megnövekedett forgalom számára.

Töltsön fel vagy hozzon létre egy blogbejegyzéssablont

A blogbejegyzéssablonhoz létrehozhat egyet a semmiből, vagy letölthet egyet az Elegant Themes blogról. Az ET blogban rengeteg ingyenes blogbejegyzés-sablon található, amelyeket úgy terveztek, hogy megfeleljenek az ingyenes Divi Layout Pack-eknek. Csak keressen rá az „ingyenes blogbejegyzés sablon” kifejezésre. Töltse le és csomagolja ki a sablont.

Példa képernyőképeimhez az ingyenes vállalati blogbejegyzés sablont használom . A bejegyzés-navigáció modult úgy alakítom, hogy illeszkedjen ehhez a blogbejegyzéssablonhoz.

A sablon feltöltéséhez vagy létrehozásához nyissa meg a Divi > Theme Builder menüpontot a WordPress irányítópultján. A feltöltéshez válassza a Hordozhatóság lehetőséget, majd a megnyíló módban kattintson az Importálás gombra. Kattintson a fájl kiválasztásához , majd keresse meg és válassza ki a számítógépén lévő JSON-fájlt. Kattintson a Divi Theme Builder sablonok importálása lehetőségre, és várja meg, amíg a feltöltés befejeződik. Mentse el a beállításokat.

1. Divi
2. Témaépítő
3. Hordozhatóság
4. Importálás
5. Válassz fájlt
6. Divi témakészítő sablonok importálása
7. Megment

Hozzászólás navigáció hozzáadása a Divi bejegyzéssablonhoz

A bejegyzés-navigációt hozzáadjuk a bejegyzés tartalma alatti saját sorához. Ez az elrendezés háttérszíneket használ a sorokon belül, ezért elválasztóval bővítjük a teret. Ugyanazt a sort fogjuk használni mindhárom tervhez.

Átváltottam a drótvázas nézetre, hogy könnyebben látható legyen. Adjon hozzá egy új egyoszlopos sort a bejegyzés tartalmát tartalmazó sor alá.

Adjon hozzá egy elválasztó modult a sorhoz.

Az Elválasztó beállításainál állítsa be a láthatóságot úgy, hogy az elválasztó ne jelenjen meg . Zárja be a Divider beállításait.

• Megjelenítésosztó: Nem

Ezután adjon hozzá egy bejegyzés navigációs modult .

Végül húzza a modult az Elválasztó fölé ugyanabban a sorban. Ezt fogjuk használni az első két tervünkhöz. A harmadik dizájnhoz egy kis módosítást végzünk. Ezután a Post Navigation modul stílusát hozzuk létre három különböző minta létrehozásához.

Első bejegyzés navigációs tervezése: előző és következő szöveges hivatkozások

A legegyszerűbb bejegyzés navigációs lehetőség a szöveges hivatkozások. Ez a Post Navigation modul alapértelmezett beállítása. A szöveget megtartjuk, de módosítjuk a hivatkozások nevét. Alapértelmezés szerint a bejegyzések neve jelenik meg.

Válassza az Asztal lehetőséget, és írja be az Előző bejegyzést az Előző hivatkozás mezőbe , majd a Következő bejegyzést a Következő hivatkozás mezőbe . A többi beállítást az alapértelmezetten hagyjuk ennél a beállításnál.

• Előző link: Előző bejegyzés
• Következő link: Következő bejegyzés

Válassza a Telefon ikont az Előző hivatkozás alatt, és írja be az Előző és a Következő mezőket.

• Előző link: Előző
• Következő link: Következő

Ezután lépjen a Tervezés lapra. Módosítsa a betűtípust Open Sans-ra, legyen félkövér, csupa nagybetűs, és módosítsa a színt #1d1d25-re.

• Linkek betűtípusa: Open Sans
• Betűsúly: félkövér
• Betűstílus: csupa nagybetű
• Szín: #1d1d25

Változás a levél térköz a 2px és Vonalmagasság a 1.2em. Zárja be a modált, és mentse el a beállításokat.

• Betűköz: 2 képpont
• Vonalmagasság: 1,2 em

Második bejegyzés navigációs tervezése: Előző és Következő gombok

A Post Navigation Content beállításoknál görgessen le a Háttér elemre, és állítsa be #4c594c értékre (vagy egy másik színre az elrendezésből). A Tartalom lap többi beállítását az alapértelmezett értékükön hagyjuk. Ez lehetővé teszi a modul számára, hogy megjelenítse a bejegyzések nevét.

• Háttérszín: #4c594c

Válassza a Tervezés lapot . A Hivatkozások betűtípusához válassza az Open Sans, Bold lehetőséget, és módosítsa a színét fehérre. Állítsa a betűközt 2 képpontra, a sor magasságát pedig 1,2 em-re.

• Linkek betűtípusa: Open Sans
• Betűsúly: félkövér
• Szín: #ffffff
• Betűköz: 2 képpont
• Vonalmagasság: 1,2 em

Görgessen le a Térköz ponthoz . Adjon hozzá 40 képpontos kitöltést a felső és alsó részhez, és 20 képpontos kitöltést a bal és jobb oldalhoz. Zárja be a Beállításokat, és mentse el.

• Kitöltés: 40 képpont (fent, lent), 20 képpont (bal, jobb)

Harmadik bejegyzés navigációs kialakítása: Kétoldalas Előző és Következő gomb

Először hozzon létre egy új sort a sor alatt, amely tartalmazza a bejegyzés navigációs modult, és húzza rá az elválasztót.

Most nyissa meg a sor beállításait a Post Navigation modullal.

Sorbeállítások

Görgessen le a Háttérbeállításokhoz , és állítsa a színt #1d1d25-re (vagy bármely más színre az elrendezésben).

• Háttérszín: #1d1d25

Lépjen a Tervezés lapra. A Méretezés alatt állítsa a Width értéket 90%-ra, a Max Width értéket pedig 500 képpontra.

• szélesség: 90%
• Maximális szélesség: 500 képpont

Görgessen a Térköz elemhez, és adjon hozzá 20 képpontos kitöltést a felső és alsó részhez, valamint a 30 képpontos kitöltést a bal és jobb oldalhoz.

• Kitöltés: 20 képpont (fent, lent), 30 képpont (bal, jobb)

Görgessen a Szegély beállításokhoz, és adja hozzá a px-t a Lekerekített sarkok mind a négy oldalához. Zárja be a Sor beállításait.

• Lekerekített sarkok: 30 képpont

Hozzászólás navigációs modul beállításai

Nyissa meg a Post Navigation modult , és válassza a Tervezés lapot. Ezúttal a Tartalom beállítást végezzük el utoljára. Állítsa a betűtípust Open Sans-ra, a Weight-ot félkövérre, a stílust csupa nagybetűre, a színt pedig fehérre. Módosítsa a betűközt 2 képpontra, a sor magasságát pedig 1,2 em-re.

• Linkek betűtípusa: Open Sans
• Betűsúly: félkövér
• Betűstílus: csupa nagybetű
• Szín: #ffffff
• Betűköz: 2 képpont
• Vonalmagasság: 1,2 em

Lépjen a Tartalom lapra. Görgessen a Kategóriák elemhez, és engedélyezze a Navigálást az aktuális kategórián belül. Ez csak az azonos kategóriába tartozó bejegyzéseket jeleníti meg. A mezőt üresen hagyjuk, de ha akarja, megadhatja a taxonómia nevét. A bejegyzések nevének használatához a Szöveg mezőket is üresen hagyjuk. Zárja be a beállításokat, és mentse el.

• Navigálás az aktuális kategórián belül: IGEN

Hozzászólás navigációs eredményei

Íme mindhárom terv eredménye.

Asztali előző és következő szöveges hivatkozások

Telefon Előző és Következő szöveges hivatkozások

Előző és Következő gombok az asztalon

Előző és Következő gombok a telefonhoz

Kétoldalas Előző és Következő gomb asztali számítógéphez

Kétoldalas Előző és Következő gomb a telefonhoz

Befejező gondolatok

Így nézzük meg, hogyan és hol adhat hozzá bejegyzés navigációt a Divi blogbejegyzéssablonhoz. Ez a fajta navigáció remekül működik a bejegyzés tartalma alatt, hogy felhívja a figyelmet a hasonló tartalmakra. Ez segít az olvasóknak hosszabb ideig a webhelyén maradni, így több megosztást, több olvasót stb. érhet el. A Divi Theme Builder segítségével a bejegyzések navigációja egyszerűen hozzáadható és stílusos.

Szeretnénk hallani önről. Hozzáadta a bejegyzésnavigációt a Divi blogbejegyzéssablonhoz? Tudassa velünk a megjegyzésekben.