Függőleges navigáció létrehozása Divi webhelyéhez.

Written by redzs

2022.04.17.

Kategóriák

Függőleges navigációs menü (vagy fejléc) létrehozása Divi webhelyéhez
A függőleges navigációs menük hasznosak lehetnek bizonyos webhelyeken, amelyeknek több menüelemre van szükségük az élen. A vízszintes menükben nehéz lehet minden szükséges menühivatkozást elhelyezni, különösen kisebb böngészőszélességeknél. Ebben az oktatóanyagban bemutatjuk, hogyan hozhat létre egyéni függőleges navigációs menüt a Divi Theme Builder segítségével. Ez több helyet biztosít a WordPress menüelemeinek bemutatásához. Teljes hatalma lesz további Divi modulok hozzáadásához a függőleges fejléchez, és megtervezheti azokat a Divi builderrel.

Kezdjük el!

Bepillantás

Íme egy gyors áttekintés az oktatóanyagban elkészített tervről.

div függőleges navigációs menü és fejléc

div függőleges navigációs menü és fejléc

div függőleges navigációs menü és fejléc

Töltse le az elrendezést INGYEN

Az oktatóanyag terveinek megismeréséhez először le kell töltenie azt az alábbi gomb segítségével. A letöltéshez való hozzáféréshez fel kell iratkoznia Divi Daily e-mail listánkra az alábbi űrlap segítségével. Új előfizetőként minden hétfőn még több Divi jóságot és ingyenes Divi Layout csomagot kapsz! Ha már szerepel a listán, egyszerűen írja be alább az e-mail címét, és kattintson a letöltés gombra. Nem lesz „újra feliratkozva”, és nem kap további e-maileket.

Letöltés ingyen

Letöltés ingyen

Csatlakozzon a Divi hírlevélhez, és e-mailben elküldjük Önnek a végső Divi céloldal-elrendezési csomag másolatát, valamint rengeteg más csodálatos és ingyenes Divi-forrást, tippet és trükköt. Kövesd, és rövid időn belül Divi mester leszel. Ha már előfizetett, egyszerűen írja be e-mail címét alább, és kattintson a letöltésre az elrendezési csomag eléréséhez.

A sablon feltöltéséhez nyissa meg a Divi Theme Builder alkalmazást a WordPress webhely hátterében.

fejléc és lábléc sablon a Divi dietetikus elrendezési csomagjához

Globális alapértelmezett webhelysablon feltöltése

Ezután a jobb felső sarokban megjelenik egy ikon két nyíllal. Kattintson az ikonra.

fejléc és lábléc sablon a Divi dietetikus elrendezési csomagjához

Lépjen az importálás lapra, töltse fel a JSON-fájlt, amelyet ebben a bejegyzésben tudott letölteni, majd kattintson a „Divi témakészítő sablonok importálása” lehetőségre.

fejléc és lábléc sablon a Divi dietetikus elrendezési csomagjához

Mentse a Divi Theme Builder módosításait

Miután feltöltötte a fájlt, új globális fejlécet és láblécet fog látni az alapértelmezett webhelysablonban. Mentse el a Divi Theme Builder módosításait, amint aktiválni szeretné a sablont.

fejléc és lábléc sablon a Divi dietetikus elrendezési csomagjához

Térjünk rá a bemutatóra, jó?

1. rész: Új globális fejléc felépítése

Ebben az oktatóanyagban a függőleges navigációs menüt egy globális fejlécben fogjuk felépíteni a Divi Theme Builder segítségével. A bejegyzés végén azonban megmutatjuk, hogyan adhatja hozzá ugyanazt a menüt egy oldalsablon törzséhez, arra az esetre, ha webhelye főmenüje mellett szeretné használni.

A kezdéshez nyissa meg a WordPress irányítópultját, és keresse meg a Divi > Theme Builder menüpontot.

Ezután kattintson az alapértelmezett webhelysablon „Globális fejléc hozzáadása” területére, és válassza a „Globális fejléc létrehozása” lehetőséget a legördülő menüből.

div függőleges navigációs menü és fejléc

Ezután válassza ki az „Építés a semmiből” lehetőséget.

div függőleges navigációs menü és fejléc

2. rész: A függőleges metszet elrendezésének megtervezése

A Global Header Layout Editorban nyissa meg a már ott lévő normál szakasz beállításait, és frissítse a következőket.

  • Szélesség (asztali): 300 képpont
  • Szélesség (táblagép és telefon): 100%
  • Magasság (asztali): 100 Vh
  • Magasság (táblagép és telefon): auto
  • Padding (asztali): 4vh felül, 0px alul
  • Bélés (táblagép és telefon): 0px felül, 0px alul

div függőleges navigációs menü és fejléc

Folytassa a tervezést egy doboz-árnyék hozzáadásával az alábbiak szerint:

  • Box Shadow: lásd a képernyőképet
  • Doboz árnyék függőleges helyzete: 0 képpont
  • Box Shadow Elmosódás erőssége: 20 képpont
  • Box Shadow Spread Erőssége: -10 képpont
  • Árnyékszín: rgba(0,0,0,0,3)

div függőleges navigációs menü és fejléc

Annak érdekében, hogy a függőleges navigációs menü látható maradjon a bal oldalon, miközben a felhasználó görget, frissítse a pozíciót rögzítettre, és frissítse a z indexet az alábbiak szerint:

  • Pozíció: Fix
  • Z Index: 9999

div függőleges navigációs menü és fejléc

Annak érdekében, hogy láthassuk a szakaszon kívülre eső almenü navigációt, adja hozzá a következő egyéni CSS-t a fő elemhez:

01
overflow: visible !important;

div függőleges navigációs menü és fejléc

Most a szakasz függőleges elrendezésben van a sablon bal oldalán.

div függőleges navigációs menü és fejléc

3. rész: A függőleges menü megtervezése

A szekció beépítésével készen állunk a függőleges menü kialakítására. Ehhez egy menümodult használunk néhány egyedi CSS-sel, hogy a navigációt függőlegesen jelenítsük meg.

Használjuk a vh hossz mértékegységet is, hogy a menü szépen méretezhető legyen a különböző böngészőmagasságokkal.

A sor hozzáadása

Kezdésként adjon hozzá egy egyoszlopos sort a szakaszhoz.

div függőleges navigációs menü és fejléc

Ezután frissítse a sorbeállításokat az alábbiak szerint:

Méret és párnázás

  • Ereszcsatorna szélessége: 1
  • Szélesség: 100%
  • Max szélesség: 80%
  • Bélés (asztali): 3 vh felül, 3 vh alul
  • Bélés (táblagép és telefon): 0px felül, 0px alul

div függőleges navigációs menü és fejléc

Határ

  • Szegély szélessége: 1 képpont
  • Szegély színe: #eeeeee

div függőleges navigációs menü és fejléc

Menümodul hozzáadása

Az egyoszlopos sorban adjon hozzá egy új menümodult.

div függőleges navigációs menü és fejléc

Válassza ki a tartalomkapcsoló alatt megjelenítendő menüt.

div függőleges navigációs menü és fejléc

Ezután adja hozzá webhelyemblémáját dinamikus tartalomként a Logo kapcsoló alatt.

div függőleges navigációs menü és fejléc

A Tervezés lapon frissítse a következőket:

  • Stílus: Középre állított
  • Menü betűtípusa: Nunito Sans
  • Menü szövegének színe: #535b7c
  • Menü szöveg mérete: 18px (asztali), 14px (táblagép és telefon)
  • Menüsor magassága: 2em
  • Legördülő menüsor színe: #535b7c
  • Legördülő menü Aktív hivatkozás színe: #535b7c

div függőleges navigációs menü és fejléc

  • Bevásárlókosár ikon színe: #535b7c
  • Keresésikon színe: #535b7c
  • Hamburger menü ikon színe: #535b7c

div függőleges navigációs menü és fejléc

  • Bélés (asztali): 2vh felül, 2vh alul
  • Kitöltés (asztali): 10px felül, 10px alul

div függőleges navigációs menü és fejléc

4. rész: Egyéni CSS hozzáadása a menühöz

A menünek szüksége van némi egyéni CSS-re, hogy elérje a kívánt függőleges navigációt. A kezdéshez lépjen a Speciális lapra, és adja hozzá a következő egyéni CSS-t a Menühivatkozáshoz és a Menü logóhoz.

Menühivatkozás CSS (asztali):

01
02
03
04
05
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Menühivatkozás CSS (táblagép):

01
02
width: auto;
border:none;

Menü logó CSS:

01
margin-bottom: 20px;

div függőleges navigációs menü és fejléc

Ezután adjon hozzá egy egyéni CSS-osztályt a menümodulhoz az alábbiak szerint:

CSS osztály: et-vert-menu

div függőleges navigációs menü és fejléc

Ez az adott menü célzása lesz a külső egyéni CSS-ünkben, amelyet egy kódmodul segítségével adunk hozzá.

Egyéni CSS hozzáadása kódmodullal

A menümodul alatt adjon hozzá egy új kódmodult.

div függőleges navigációs menü és fejléc

Ezután illessze be a következő kódot a kódmezőbe (feltétlenül helyezze el a stíluscímkék közé):

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*Style Vertical Navigation Menu*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
  width: calc(100% - 300px);
  margin-left: 300px;
}
}

div függőleges navigációs menü és fejléc

5. rész: A gomb megtervezése és a közösségi média követési ikonjai

Most, hogy a menü elkészült, hozzáadhatunk egy gombot, és néhány közösségi média linket követ a függőleges fejléc kiegészítéséhez.

A sor hozzáadása

Adjon hozzá egy új egyoszlopos sort az aktuális sor alá.

div függőleges navigációs menü és fejléc

A Gomb hozzáadása

Ezután adjon hozzá egy új gombmodult a sorhoz.

div függőleges navigációs menü és fejléc

Frissítse a gombbeállításokat az alábbiak szerint:

  • Gombigazítás: középen
  • Gomb szöveg mérete: 18px (asztali), 14px (táblagép és telefon)
  • Gombszöveg színe: #ffffff
  • Gomb háttérszíne: #535b7c
  • Gombszegély szélessége: 0 képpont

div függőleges navigációs menü és fejléc

Ezután lépjen a Speciális lapra, és illessze be a következő egyéni CSS-t a fő elembe:

Fő elem CSS (asztali)

01
02
display:block;
width: 100%;

Fő elem CSS (táblagép)

01
display:inherit;

div függőleges navigációs menü és fejléc

A közösségi média követési ikonjainak hozzáadása

A gomb alatt adjon hozzá egy Social Media Follow modult.

div függőleges navigációs menü és fejléc

Adja hozzá a kívánt közösségi hálózatokat a tartalom lapon.

div függőleges navigációs menü és fejléc

A Tervezés lapon frissítse a következőket:

  • Modul igazítása: Középre
  • Ikon színe: #535b7c

div függőleges navigációs menü és fejlécEzután nyissa meg az egyes hálózatok beállításait, és törölje a háttérszínt.

div függőleges navigációs menü és fejléc

Ezután adjon hozzá egy kis felső margót az alábbiak szerint:

  • Margó: 3vh felső

div függőleges navigációs menü és fejléc

Frissítse a sorbeállításokat

A közösségi média követési ikonjainak befejezése után nyissa meg a sorbeállításokat, és módosítsa a következőket:

  • Ereszcsatorna szélessége: 1
  • Kitöltés (asztali): 3vh felül, 0px alul
  • Bélés (táblagép és telefon): 10px felül

div függőleges navigációs menü és fejléc

Mentse az elrendezést és a sablont

Ha elkészült, mentse el az elrendezést és a sablont.

div függőleges navigációs menü és fejléc

Végeredmény

Íme a végeredmény élő oldalon.

div függőleges navigációs menü és fejléc

div függőleges navigációs menü és fejléc

div függőleges navigációs menü és fejléc

A függőleges navigációs menü hozzáadása az oldalsablon törzséhez

Ha hozzá szeretné adni a függőleges navigációs menüt egy oldalelrendezéshez (a globális fejléc helyett), először el kell mentenie a szakaszelrendezést a Divi Library-ba.

Ehhez nyissa meg a Global Header Layout Editor alkalmazást, és mentse el a függőleges részt (amely a menüt tartalmazza) a Divi Library-ba.

div függőleges navigációs menü és fejléc

Ezután lépjen ki az elrendezésszerkesztőből, hozzon létre egy új sablont, és rendelje hozzá a kívánt oldal(ok)hoz. Egyéni törzs létrehozása az oldalsablonhoz.

div függőleges navigációs menü és fejléc

Válassza ki, hogy a semmiből építse fel.

div függőleges navigációs menü és fejléc

Adjon hozzá egy új teljes szélességű részt az elrendezéshez.

div függőleges navigációs menü és fejléc

Ezután adjon hozzá egy teljes szélességű bejegyzéstartalom modult a szakaszhoz.

div függőleges navigációs menü és fejléc

Törölje az alapértelmezett normál részt az oldal tetején, majd nyissa meg a teljes szélességű szakasz beállításait, és adja hozzá a következő egyéni CSS-t a fő elemhez:

Fő elem CSS (asztali)

01
02
width: calc(100% - 300px);
margin-left:300px !important;

Fő elem CSS (táblagép)

01
width: 100%;

A normál rész alatt kattintson a gombra új szakasz hozzáadásához, és a Hozzáadás a könyvtárból lapon válassza ki azt a függőleges menürészt, amelyet korábban a könyvtárba mentett.

div függőleges navigációs menü és fejléc

Mivel nem szeretnénk, hogy a szakasz megjelenjen mobilon, nyissa meg a panel beállításait, és tiltsa le a szakasz láthatóságát táblagépen és telefonon.

div függőleges navigációs menü és fejléc

Ezután nyissa meg a kódmodult a szakaszelrendezésen belül, és cserélje ki ezt a kódrészletet…

01
02
03
04
#et-main-area {
width: calc(100% - 300px);
margin-left: 300px;
}

Ezzel…

01
02
03
04
#main-header, #main-footer {
width: calc(100% - 300px);
margin-left: 300px;
}

div függőleges navigációs menü és fejléc

Ez áthelyezi a fő fejlécet és láblécet, hogy illeszkedjen az oldalsablon bal oldalán lévő rögzített függőleges menühöz. Így néz ki egy élő oldalon a Divi alapértelmezett fejlécével és láblécével.

div függőleges navigációs menü és fejléc

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

n/a
Wordpress TutoriálokDiviFüggőleges navigáció létrehozása Divi webhelyéhez.