fbpx
2008 óta foglalkozom WordPress rendszerek megtervezésével és kialakításával. Ezen idő alatt számtalan sikeres oldal felépítésében vettem részt. Ezt a tapasztalatot szeretném átadni neked. A siker kulcsa a tudás!

Egy kisebb céges oldal vagy egy értékesítői honlap esetében célszerű alkalmazni a horgony linkeket. Ennek a szerepe annyi, hogy nem az adott oldalról navigál el a menünk, hanem az oldalon az adott szekcióra navigál.

Mi a horgony link előnye?

Ha maga az oldalnak a felépítése kevesebb információt tartalmaz, akkor nem szükséges kiépítenünk a szokásos weboldalt az alábbi oldalakkal: rólunk, szolgáltatások, árak, kapcsolat (természetesen az oldalak száma bővíthető). Egyszerűen ezeket a tartalmakat egy oldalon jelenítjük meg.

Előnye, hogy nem navigáljuk el a weboldal látogatót az oldalon különböző oldalakra, hanem ha szeretné, akkor az elejétől a végéig megismerkedhet a márkánkkal, cégünkkel. Viszont a felső menüt használva lehetőséget adunk számára, hogy az oldal adott tartalmi részéhez “ugorjon”.

Mire van szükségünk, hogy használni tudjuk?

Szükségünk van egy elkészült landing vagy egy one page oldalra. Figyelni kell a felépítésénél, hogy tartalmazza azokat a szekciókat, amiket meg szeretnénk jeleníteni a menünkben (erre kitérünk még).

Landing sablon importálása Divi-ben

  • Hozzunk létre egy új oldalt, adjunk neki egy címet és válasszuk ki jobb oldalon található szekcióból a következőt: Oldal tulajdonságok » Sablon » Alapértelmezett sablonminta
  • Kattints az Edit With The Divi Builder gombra, majd válasszuk ki a Browse Layouts lehetőséget. Itt fogjuk kiválasztani a számunkra tetsző landing sablonunkat. Ha a videós formátumot preferálod, akkor javaslom, hogy nézd meg ezt a cikkünket: 15 perc alatt lehetséges weboldalt készíteni? (VIDEÓ) – új oldalon nyílik meg.
  • A Betöltés könyvtárból felugró ablakban válasszuk ki a Premade Layouts lehetőséget (alapból is ez van kiválasztva), majd szemezhetünk a Divi beépített sablonjai közül. Itt jelenleg a cikk megírása pillanatában 117 db különböző kész oldal közül válogathatsz, ami heti szinten folyamatosan bővül.
117 elkészült sablon közül választhatunk
  • kattintsunk egy számunkra megfelelő sablonra. Itt megnézhetjük, hogy jelenleg ez a sablon mennyi kész oldalt tartalmaz. Általában az összes aloldal megtalálható egy-egy sablon esetében. Ezek pedig a következőek: kezdőlap, blog, rólunk, szolgáltatások, portfólió, árak, értékesítési oldal, kapcsolat.
Több aloldal közül választhatunk
  • One page vagy értékesítési oldal esetében válasszuk ki a Landing lehetőséget, ugyanis ennek a terjedelme a leghosszabb, itt fogjuk létrehozni a szakasz azonosítókat a készülő horgony menünkhöz.
  • Nyomjunk rá a Use This Layout gombra, mert ezt az oldalt szeretnénk használni a továbbiakban.
  • Ekkor betöltődik a kiválasztott sablonunk, egy kicsit várnunk kell. Tárhelyünk gyorsaságától függően akár 1-2 percet is várhatunk.

Amint betöltődött a választott sablonunk, akkor nekiláthatunk a sablonnak az átdolgozásához. Kicserélhetjük a képeket, átírhatjuk a címeket, szövegeket, színezhetünk, stb. Szóval mindenképpen szabjuk az oldalunkat egyedire. Ha ezekkel a lépésekkel is megvagyunk, akkor egyszerűen tegyük közzé az oldalunkat, ehhez kattints jobb oldalt alul a kozzététel gombra.

CSS azonosítók létrehozása

Az elkészült, átszerkesztett, átírt oldalunk esetében bontsuk az oldalunkat fejben különböző szakaszokra. Alakítsuk ki az elrendezést olyan módon, amilyen módon szeretnénk majd használni, linkelni a menüben.

Az általam választott oldalon mutatom be, hogyan rendezném el a legegyszerűbben. A kép nagyobb terjedelme miatt ide kattintva érhető el (új oldalon töltődik be). Itt látható, hogy ezeket a részeket kell létrehozni, hogy megfelelően működjön majd a horgony navigációnk: kezdőlap, rólunk, hírlevél, csapat, árak, kapcsolat.

Visual Builder szerkesztés esetén csupán annyit kell tegyünk, hogy megkeressük az adott választott szakasznak a beállítás ikonját és rákattintunk. Itt tudjuk bővebben állítani az adott szakaszt.

Szakasz szerkesztése

Amint rákattintunk a szakasz beállításai részre, navigáljunk a következő helyre: Haladó » CSS Azonosító és Osztályok » CSS azonosító mezőbe írjuk az adott szekciónknak a nevét (a példa esetében ez a “kezdolap” lesz), amilyen menüt szeretnénk létrehozni. Ne használj ékezetet, a könnyebb munka miatt pedig érdemes csak egy szót használni azonosítónak, de természetesen használható a kötőjel is ebben a formában.

CSS azonosító beírása

Ezt a műveletet minden szakasz esetében végezzük el, szóval a rólunk, hírlevél, csapat, árak és kapcsolat esetében is.

Menü létrehozása

Ahhoz, hogy működjenek ezek a horgony linkek, szükségünk lesz még egy menünek a létrehozásához. Ha minden CSS azonosítót létrehoztál, akkor utána természetesen mentsd el a változtatásaidat az oldal alján található X-re kattintva felugró Mentés gombra kattintva. Utána a vezérlőpulton keresztül keresd meg a Megjelenés » Menük oldalt, majd hozzunk létre egy új menü szerkezetet.

Menü létrehozása

A Menü neve: részhez írjuk a következőt: Fejléc menü. Később innen fogjuk tudni beazonosítani, ha több menüvel rendelkezünk, hogy milyen menüterületeket hoztunk létre. Az oldal kötelező elemeit tartalmazó oldalakat érdemes az oldal aljára tenni, így ott ebben az esetben Lábléc menüt kell írni, de ebben a cikkben ebben nem térünk ki rá. Kattintsunk a menü létrehozása gombra, majd pipáljuk be a hely megjelenítésénél, hogy elsődleges menü legyen, majd ismét nyomjunk a menü mentése gombra.

Horgony link létrehozása

Van már menünk, most már csak létre kell hoznunk a Diviben a horgonymenüket és be kell állítanunk az adott szekciókhoz, amiket az előbbi lépésekben beállítottunk. Még mindig a menüknél maradunk, bal oldalt adunk hozzá új egyéni hivatkozásokat. URL-nek írjuk pontosan ezt: #kezdolap és a hivatkozási szöveghez pedig ezt: Kezdőlap és kattintsunk a Hozzáadás a menühöz gombra.

Horgony menü létrehozása
Horgony menü létrehozva

Ezt a lépést a többi szekcióval is meg kell ismételni, érdemes sorban haladni, hogy a sorrend a végén stimmeljen, de egyébként ez később is változtatható, szóval nem probléma, ha véletlenül más sorrendben hozod létre a menüket.

Létrehozott horgony menük

Sikeresen létrehoztuk a menüket, viszont el kell végeznünk még egy fontos beállítást. Azt szeretnénk, hogy a domain címünket beírva a kezdőlap, azaz pontosan az az oldal jelenjen meg, amit létrehoztunk, ehhez pedig keressük fel a következő menüpontot szintén a vezérlőpulton maradva: Beállítások » Olvasás. az első opciónál a kezdőlap megjelenése résznél állítsuk át a második lehetőségre: egy statikus oldalra. A kezdőlapnál pedig válasszuk ki az elkészített oldalunkat.

Kezdőlapunk kiválasztása

Ha ezzel a lépéssel is megvagyunk, akkor egyszerűen kattintsunk alul a Módosítások mentése gombra és készen is vagyunk a nehezével, innentől kezdve csupán annyi dolgunk van, hogy a fejléc menünket személyre szabjuk a Divi » Téma testreszabása » Fejléc és navigáció » Elsődleges menüsor oldalon. Itt lényegében mindent átállíthatunk amit szeretnénk, legyen az a menü háttere, betűtípusa, betű színe, hivatkozás színe, egyszóval tényleg mindent.

Fejléc teljes testreszabása

Szükséges még beállítanunk a saját logónkat is, ezt pedig a Divi » Sablon beállítások menüpont oldalon tudjuk megtenni. Érdemes ezen az oldalon végigmenni a beállításokon, mert itt tudjuk beállítani a social lehetőségeket, stb.

Természetesen nem beszélhetünk teljesen kész oldalról, mert rengeteg elem hiányzik még az oldalunkról, ilyen az ÁSZF, impresszum, adatkezelési tájékoztató, de úgy gondolom, hogy nagyszerű alapot hoztunk létre.

Nincs még meg a saját Divi-d?

Ez esetben ajánlom a WordPress+Divi kurzusunkat lifetime licenc kulccsal, kedvezményes áron 14 950 Ft-ért.

Most elérhető

50% kedvezménnyel

yoast seo

tovább a fizetéshez

December 12-ig