Gyerünk!
Megtanulod, hogyan kell:
- Görgessen le és nyisson meg egy kapcsolót egy horgonyhivatkozással a Divi-ban
- Hozzon létre egy egyoldalas navigációs menüt
- Ugrás egy oldalszakaszra egy másik oldalról
- Használja a Divi Dot Navigációt
- 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
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.
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.
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.
Most kipróbálhatja az oldalt, hogy megnézze, működik-e.
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
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.
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
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
És adja hozzá a következő CSS-azonosítót a „Rólunk” részhez is:
CSS-azonosító: kb
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
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á .
Ha további ihletet szeretne kapni a gyilkos egyoldalas stílusú webhelyek létrehozásához, tekintse meg ezeket a bejegyzéseket:
- Hogyan készítsünk érzékeny, rögzített oldalsávot horgonylinkekkel
- Teljes képernyős szakaszok létrehozása felső és alsó görgetőhivatkozásokkal a Divi segítségével
- Aktív hivatkozások létrehozása a Scrollon egyoldalas Divi webhelyekhez
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.
További információért van egy nagyszerű bejegyzés arról, hogyan adhat hozzá címkéket a pontnavigációhoz .
Adjon hozzá horgonylinkeket a címsorokhoz
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.
0 hozzászólás