5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Written by redzs

2022.07.17.

Kategóriák

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

A rögzített hivatkozások javíthatják a navigációt és segíthetik a tartalom rendszerezését, különösen a hosszú formátumú tartalommal rendelkező webhelyeken. A horgonyhivatkozások használatának egyik másik fő előnye a navigáción kívül az a tény, hogy nagyszerűek a SEO számára. Bár a horgonyhivatkozások használatának elve nagyon egyszerű, nehéz lehet tudni, hol kezdjem. Valójában ez az egyik első dolog, amire vadászni kezdtem, amikor elkezdtem WordPress-webhelyeket fejleszteni.
Ez a cikk 5 nagyszerű dolgot mutat be, amelyeket a Divi-ban megtehetsz a horgonylinkekkel. Ezekhez a példákhoz csak Divi és tanulási vágy kell.

Gyerünk!

Megtanulod, hogyan kell:

  1. Görgessen le és nyisson meg egy kapcsolót egy horgonyhivatkozással a Divi-ban
  2. Hozzon létre egy egyoldalas navigációs menüt
  3. Ugrás egy oldalszakaszra egy másik oldalról
  4. Használja a Divi Dot Navigációt
  5. Adjon hozzá horgonylinkeket a címsorokhoz

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Görgessen le és nyisson meg egy kapcsolót egy horgonyhivatkozással a Divi-ban

 

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

A kapcsolók egyike azon elemeknek, amelyek javíthatják a felhasználói élményt. Nevezzen lustának (én a hatékony szót használnám), de minél könnyebben hozzájutok az információimhoz, annál jobb. Nagy rajongója vagyok bizonyos típusú tartalmak kapcsolóinak.

A kapcsolók egyik legjobb felhasználási módja a GYIK oldalak. Kiválóan működnek olyan apró információk felfedésére, amelyekre a felhasználó összpontosítani szeretne. Ez mindössze egy percet és néhány soros JavaScriptet vesz igénybe. A módszer egy változatát használhatja fülek vagy harmonikák megnyitására is, és bár ez nehéznek tűnik, valójában nem túl bonyolult.

Először hozzon létre egy új oldalt, és telepítse a vizuális építőt. Ezután válassza a „Válasszon előre elkészített elrendezést” lehetőséget. A Betöltés a könyvtárból előugró ablakban keresse meg a Könyvelő GYIK oldal elrendezését a „gyak.” szó beírásával a keresősávba. Ezután kattintson az elrendezésre, és a megjelenő előnézeten kattintson az Elrendezés használata gombra, hogy telepítse az oldalára.

Most már készen áll a horgonylink funkció hozzáadására. Ebben a példában a felső fejléc részben lévő gombot fogom használni horgonyhivatkozásként, így ha rákattintunk, az oldal egy adott kapcsolóra gördül, amely egyidejűleg automatikusan megnyílik.

Ehhez először nyissa meg a gombbeállításokat, és adja hozzá a következő link URL-címét a gombhoz:

Gomblink URL-je: #toggle3

Ennek a horgonylinknek a „toggle3” azonosítót adtam, hogy segítsen emlékezni arra, hogy az oldal harmadik kapcsolójára szeretnék hivatkozni. Ez az azonosító név korrelálni fog a kapcsoló CSS ​​azonosítójával, amelyet később adunk hozzá, hogy a gomb tudja, melyik kapcsolóhoz kell görgetni.

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Ezután adjon hozzá egy egyedi CSS-osztályt a gombmodulhoz:

CSS osztály: nyitott-váltó

Ezután mentse el a beállításokat.

Ez az osztálynév segít emlékeztetni a váltógomb megnyitásának műveletére, amikor a gombra kattint. Ezt az osztályt fogjuk használni az egyéni jqeury-ban, hogy egy kis idő alatt megkapjuk a kívánt funkcionalitást.

Ezután görgessen le az oldalon a GYIK-hez használt kapcsolómodulok két oszlopát tartalmazó sorig. Nyissa meg a harmadik kapcsolómodul beállítását az első oszlopban. Ezt a modult szeretnénk görgetni és megnyitni, amikor a Gombra (vagy a horgonyhivatkozásra) kattintunk.

A Speciális lapon adja hozzá a következő CSS-azonosítót:

CSS-azonosító: toggle3

Fontos, hogy ez pontosan korreláljon a korábban használt gomblink URL-lel. Az egyetlen különbség itt az, hogy ki kell hagynia a „#”-t.

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Az utolsó lépés egy egyéni kód hozzáadása az oldalunk törzséhez. Ehhez navigáljon a Divi téma beállításaihoz , nyissa meg az Integráció lapot, majd illessze be a következőket a törzsrészbe az alábbi GIF-en látható módon.

01
02
03
04
05
06
jQuery(function ($) {
    //open toggle on button click
    $('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
    });
});

Ne felejtse el becsomagolni a kódot a megfelelő szkriptcímkébe.

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Most kipróbálhatja az oldalt, hogy megnézze, működik-e.

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Egy kicsit megérteni, mit csinál ez a kód. Nézzük meg közelebbről. Ismét itt a részlet:

01
02
03
04
05
06
jQuery(function ($) {
    //open toggle on button click
    $('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
    });
});

A kódban az „a.open-toggle” választó az egyéni osztályunkkal rendelkező gombra utal. A „#toggle3.et_pb_toggle_2 .et_pb_toggle_title” választó a „toggle3” azonosítójú kapcsoló címére és az „et_pb_toggle_2” osztályra utal.

Az „et_pb_toggle_2” osztály valójában a harmadik kapcsolóhoz társított osztály. Ennek az az oka, hogy a Divi az első kapcsolóhoz az „et-pb_toggle_0” osztályt adja, a második kapcsolóhoz az „et-pb_toggle_1” osztályt és így tovább.

Tehát ha tudni szeretné, hogy mi az osztály az oldala egy adott kapcsolójához, egyszerűen számolhat 0-tól az oldal első kapcsolójával kezdve, és haladhat lefelé. Vagy mindig ellenőrizheti a html kódot, hogy megtalálja az osztályt.

Ezt fontos tudni, hogy ennek megfelelően frissíthesse kódját. Például, ha azt szeretném, hogy a gombom megnyitja a második kapcsolót az oldalon, akkor a „#toggle3.et_pb_toggle_2 .et_pb_toggle_title” szöveget a „#toggle3.et_pb_toggle_1 .et_pb_toggle_title” szövegre cserélném.

Ez a kódrészlet a következő fogalom változata . Igyekeztem a lehető legegyszerűbbé tenni.

Ez a klassz technika füles és harmonika esetén is bevált. A trükk az, hogy azonosítsa a megfelelő css osztályokat a harmonika elemhez vagy tabulátorhoz, hogy felhasználhassa a kódban.

Hozzon létre egy egyoldalas navigációs menüt

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Ez a fajta menükialakítás népszerű az egyoldalas webhelyeken. Hasznos lehet hivatkozásokat létrehozni a menüben, amelyek segítségével szakaszról szakaszra ugorhat az oldalon. Ez különösen akkor hasznos, ha egyoldalas webhelyet vagy céloldalt hoz létre. A folyamattal kapcsolatos további információkért tekintse meg az egyoldalas webhelyek Divi segítségével történő létrehozásának dokumentációját.

Íme egy gyors áttekintés ennek módjáról.

Ez minden előre elkészített elrendezéshez működik, de ebben a példában a Web Freelancer Home Page Layoutot fogom használni. Hozzon létre egy új oldalt, helyezze üzembe a vizuális építőt, válassza az „Előre elkészített elrendezés kiválasztása” lehetőséget, majd telepítse a szabadúszó kezdőlap elrendezését az oldalára.

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Most hozzá kell adnia a CSS-azonosítókat minden olyan szakaszhoz, amelyhez csatolni kíván (vagy görgetni szeretne). Keresse meg a „Szolgáltatásaim” részt. Nyissa meg a szakasz beállításait, kattintson a Speciális fülre, és adja hozzá a következő CSS-azonosítót:

CSS ID: szolgáltatások

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Ezután keresse meg a „Kiemelt munka” részt, és adjon neki egy CSS-azonosítót az alábbiak szerint:

CSS azonosító: munka

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

És adja hozzá a következő CSS-azonosítót a „Rólunk” részhez is:

CSS-azonosító: kb

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Ha ez a három rész megfelelően van beállítva egyedi CSS azonosítójukkal, akkor tudjuk létrehozni a menü horgonyhivatkozásait.

Az Irányítópulton lépjen a Megjelenés > Menük elemre , és hozzon létre egy új elsődleges menüt . Ezután hozzon létre három egyéni hivatkozást a következő URL-lel és linkszöveggel:

1. egyéni
hivatkozás URL: #services
Hivatkozás szövege: Szolgáltatások

2. egyéni
hivatkozás URL-je: #work
Linkszöveg: Munka

3. egyéni link
URL: #about
Linkszöveg: Névjegy

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Ne felejtse el kiválasztani, hogy állítsa be a kijelző helyét az Elsődleges menüre. Ezután mentse el a menüt.

Most, amikor felkeresi az oldalt, kipróbálhatja. Észreveheti, hogy sima görgetés. Ennek az az oka, hogy a Divi téma automatikusan hozzáadja a sima görgetést – ezt a funkciót a Divi 2.4-es verziójában adták hozzá .

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

Ha további ihletet szeretne kapni a gyilkos egyoldalas stílusú webhelyek létrehozásához, tekintse meg ezeket a bejegyzéseket:

Ugrás egy oldalszakaszra egy másik oldalról

Ennek bemutatására használhatjuk a fenti példát. Mivel az oldal három szakaszához (szolgáltatások, munka, névjegy) adtunk hozzá egy CSS-azonosítót, nem csak a menühorgonyhivatkozások segítségével ugorhatunk ezekre a szakaszokra, hanem egy teljesen más oldalról is ugorhatunk azokra a szakaszokra.

Mindössze annyit kell tennie, hogy használja a horgonyhivatkozás URL-jét, amikor egy másik oldalon hoz létre hivatkozást. Ha egy linket szeretne elhelyezni a szolgáltatások szakaszra a „szolgáltatások” azonosítóval, akkor az valahogy így nézne ki:  www.yourdomain.com/page/#services .

Íme egy példa arra, hogyan töltődik be az oldal, és hogyan görgessen a „Szolgáltatásaim” szakaszhoz, amikor egy másik oldalról hivatkozik erre a részre.

Ez nagyszerűen működik számos különböző cselekvésre való felhívás esetén (pl. tudjon meg többet, szerezze be a Divi-t, szavazzon rám, stb.), amelyekre webhelye különböző oldalairól szeretne ugrani.

Használja a Divi Dot Navigációt

Technikailag ezek beépített rögzítő linkek. Nem kell hozzáadnia saját CSS-szakaszazonosítóit. A Dot Navigation funkció automatikusan horgonyhivatkozásokat hoz létre a szakaszokból. Ha be szeretné kapcsolni a pontnavigációt az oldalon, az oldal szerkesztésekor egyszerűen állítsa a Dot Navigation opciót „BE” értékre a képernyő jobb felső sarkában található Divi Page Settings alatt. A Dot Navigáció bekapcsolása után a Divi automatikusan hozzáad egy átlátszó menüt az oldalához. Minden pont az oldal szakaszaihoz gördül, ha rákattint.

5 nagyszerű dolog, amit Diviban megtehetsz a horgonylinkekkel

További információért van egy nagyszerű bejegyzés arról, hogyan adhat hozzá címkéket a pontnavigációhoz .

Mindig jó ötlet horgonylinkek hozzáadása a címsorokhoz. Ez egy nagyszerű módja a hosszabb, sok tartalommal rendelkező oldalak indexelésének, lehetővé téve, hogy könnyedén navigáljon ugyanazon az oldalon belül az egyes címsorokhoz, vagy hivatkozásokat hozzon létre webhelye más oldalairól. Segít a keresőmotoroknak a webhely feltérképezésében is.

Ha CSS-azonosítót szeretne hozzáadni a fejlécekhez a Divi Builder segítségével, nyissa meg a címsor szövegét tartalmazó modult. Győződjön meg arról, hogy a szöveg fül nyitva van. Keresse meg a fejléccímkét (h1, h2, h3 stb.), majd írjon be egy azonosítót a kezdeti fejléccímke zárójelébe. Íme egy példa a „webdesign” azonosítójú h3 címsorra:

01
<h3 id="webdesign">Website Design</h3>

Mostantól bárhonnan linkelhetek erre a fejlécre, ha a megfelelő horgonylink URL-jét használom. Ennek a példának a következőképpen kell kinéznie:

www.yourdomain.com/page/#webdesign

Ez hasznos lesz olyan oldalakon vagy bejegyzéseknél is, amelyek nem használják a Divi buildert. Ha horgonyhivatkozásokat szeretne hozzáadni az oldalak vagy bejegyzések fejlécéhez, nyissa meg a Szöveg lapot a WordPress szövegszerkesztőben. Egyszerűen keresse meg a kívánt címsort, és adja hozzá az azonosítót a címsor címkéjéhez az alábbiak szerint.

Nagyon klassz cucc.

FORRÁS

0 hozzászólás

Egy hozzászólás elküldése

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük