A Fullwidth Menu modul segítségével navigációs menüt helyezhet el bárhol az oldalon. Ez használható egy másodlagos menü hozzáadására az oldalon, vagy használható az Üres oldal funkcióval együtt, hogy a fő navigációt lefelé mozgassa az oldalon. Például a menüt lejjebb mozgathatja az első szakasz alá, hogy egy nagyméretű splash képpel köszöntse az embereket. Ez lényegében lehetővé teszi, hogy a fejléc-navigáció az építő segítségével mozogjon az oldalon!

Teljes szélességű menümodul hozzáadása az oldalához

Mielőtt teljes szélességű menümodult adna az oldalához, először be kell ugrania a Divi Builderbe. Miután telepítette a Divi témát webhelyére, minden alkalommal, amikor új oldalt készít, megjelenik a Divi Builder használata gomb a bejegyzésszerkesztő felett. Erre a gombra kattintva engedélyezi a Divi Buildert, így hozzáférést biztosít a Divi Builder összes moduljához. Ezután kattintson a Visual Builder használata gombra az építő vizuális módban történő elindításához. Ha be van jelentkezve a WordPress irányítópultjába, kattintson a Visual Builder engedélyezése gombra is, amikor a kezelőfelületen böngészi a webhelyet.

Miután belépett a Visual Builderbe, a szürke plusz gombra kattintva új modult adhat az oldalához. Új teljes szélességű modulok csak a teljes szélességű szakaszokon belül adhatók hozzá. Ha új oldalt indít, először ne felejtsen el egy teljes szélességű részt hozzáadni az oldalához. Van néhány nagyszerű oktatóanyagunk a Divi szekcióelemeinek használatához .

Keresse meg a teljes szélességű menümodult a modulok listájában, és kattintson rá, hogy hozzáadja az oldalához. A modullista kereshető, ami azt jelenti, hogy beírhatja a „teljes szélességű menü” szót, majd kattintson az Enter gombra, hogy automatikusan megtalálja és hozzáadja a teljes szélességű menümodult! A modul hozzáadása után megjelenik a modul opcióinak listája. Ezek a lehetőségek három fő csoportra oszthatók: Tartalom , Tervezés és Speciális .

Használati példa: Teljes szélességű menü hozzáadása az oldalfejléc alá

Ebben a példában megmutatom, hogyan adhat hozzá teljes szélességű menüt az oldal fejléc része alá.

Íme egy példa:

Mivel ez az új teljes szélességű menü felváltja az alapértelmezett elsődleges navigációs menüt, ki kell választani az üres oldalsablont, hogy az alapértelmezett navigációs menü ne jelenjen meg az oldal tetején a teljes szélességű menü mellett. add hozzá.

Az oldalsablon megváltoztatásához lépjen az oldalszerkesztőbe, és válassza ki az „üres oldal” sablont az Oldalattribútumok mezőből a jobb oldalsávon.

Mivel ez a modul egy már létező menüt jelenít meg, fontos, hogy a menüt már létrehozta, mielőtt hozzáadná a Teljes szélességű menümodulhoz.

Miután elkészítette a menüt, a vizuális építő segítségével adjon hozzá egy teljes szélességű szakaszt közvetlenül az oldal fejléce alatt. Ezután adjon hozzá egy teljes szélességű menümodult a szakaszhoz.

Frissítse a Fullwidth menü beállításait az alábbiak szerint:

Tartalombeállítások

Menü: [válaszd ki a modulban használandó menüt]
Háttér: #333333

Tervezési lehetőségek

Szöveg színe: Világos
szöveg tájolása: Középen a menü
betűtípusa: Roboto
menü betűmérete: 20 képpont

Ez az!

Tipp : Érdemes lehet kihasználni a Speciális lap Megjelenítési beállításait, hogy elrejtse ezt a menüt mobilon, és egy másik menüt jelenítsen meg a fejléc felett, így a mobilfelhasználók anélkül lássák a menüt, hogy le kellene görgetniük az oldalon.

Teljes szélességű menütartalom-beállítások

A tartalom fülön megtalálja a modul összes tartalmi elemét, például szöveget, képeket és ikonokat. Bármi, ami szabályozza , hogy mi jelenjen meg a modulban, mindig megtalálható ezen a lapon.

Menü

Válassza ki a modulban használni kívánt menüt. Új menüket a WordPress irányítópultjának Megjelenés > Menük oldalán hozhat létre . Minden alkalommal, amikor új menüt hoz létre, a menü kiválasztható lesz ebben a legördülő menüben.

Háttérszín

Alapértelmezés szerint a menümodul háttérszíne fehér. Ha más színt szeretne használni a menü hátterében, itt választhatja ki a színválasztó segítségével.

Legördülő menü háttérszíne

Alapértelmezés szerint a menümodul legördülő menüi öröklik az előző beállításban meghatározott háttérszínt. Ha azt szeretné, hogy a legördülő menük saját egyedi színt kapjanak, ezzel a beállítással egyéni színt választhat.

Mobil menü háttérszíne

Mobilon a menümodul egy másik és mobilbarátabb kialakítássá válik. A mobil legördülő menü háttérszínét az asztali megfelelőjétől függetlenül szabályozhatja.

Admin címke

Ez megváltoztatja a modul címkéjét az építőben az egyszerű azonosítás érdekében. Ha WireFrame nézetet használ a Visual Builderben, ezek a címkék a Divi Builder felület modulblokkjában jelennek meg.

Teljes szélességű menükialakítási lehetőségek

A tervezés fülön megtalálja a modul összes stílusbeállítását, mint például a betűtípusok, színek, méretezés és térköz. Ez az a lap, amellyel módosíthatja a modul megjelenését. Minden Divi modulnak van egy hosszú listája a tervezési beállításokról, amelyek segítségével szinte bármit megváltoztathat.

Almenük nyitva

Alapértelmezés szerint az összes almenü a főmenüsor alatti legördülő menüben nyílik meg. Ha a menüt az oldal alja felé helyezi el, és a menüje hosszú legördülő menüket tartalmaz, érdemes lehet ezeket a menüket a menümodul felett megnyitni, hogy a menü ne nyúljon túl a böngésző nézetén.

Menühivatkozások létrehozása teljes szélességben

Alapértelmezés szerint a menümodul legfelső szintű hivatkozásai az alapértelmezett tartalomszélesség határain belül helyezkednek el. Ha el szeretné távolítani ezt a korlátozást, és a hivatkozásokat az oldal teljes szélességére kiterjeszteni, a képernyő bal szélétől kezdve, akkor engedélyezheti ezt az opciót.

Legördülő menüsor színe

A legördülő menükben a hivatkozásokat 1 pixeles vonal választja el. Ha szeretné személyre szabni ennek a sornak a színét, kiválaszthat egy egyéni színt a színválasztó segítségével ebben a beállításban.

Szöveg szín

Itt választhatja ki a szöveg értékét. Ha sötét háttérrel dolgozik, akkor a szöveget világosra kell állítani. Ha világos háttérrel dolgozik, akkor a szövegnek sötétnek kell lennie.

Szöveg tájolása

Ez szabályozza, hogy a szöveg hogyan legyen igazítva a modulon belül. Választhat a Bal, a Jobb és a Középre helyezett közül.

Aktív hivatkozás színe

Az aktív hivatkozás színei kiemelve jelennek meg a menümodulban, hogy a felhasználó aktuális tartózkodási helyét mutassák. Ezzel a beállítással módosíthatja az aktív hivatkozásokhoz használt kiemelés színét.

Legördülő menü szövegének színe

Alapértelmezés szerint a modul legördülő menüiben lévő szöveg örökli a főmenü szövegének színét. Lehetséges azonban, hogy módosítsa ezt a színt, ha egyéni legördülő menü háttérszínét definiálta.

Mobil menü szövegének színe

Alapértelmezés szerint a modul legördülő menüiben lévő szöveg örökli a főmenü szövegének színét. Lehetséges azonban, hogy módosítsa ezt a színt, ha egyéni mobilmenü háttérszínt definiált.

Menü Betűtípus

Megváltoztathatja a menü betűtípusát, ha kiválasztja a kívánt betűtípust a legördülő menüből. A Divi tucatnyi nagyszerű betűtípust kínál a Google Fonts segítségével. Alapértelmezés szerint a Divi az Open Sans betűtípust használja az oldalon lévő összes szöveghez. A szöveg stílusát személyre szabhatja a félkövér, dőlt, csupa nagybetűvel és aláhúzással.

Menü Betűméret

Itt állíthatja be a menü betűtípusának méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy beírhatja a kívánt szövegméretet közvetlenül a csúszkától jobbra található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértéket követően megadhatja a „px” vagy „em” értéket a mértékegység típusának megváltoztatásához.

Menü szövegének színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke színben jelenik meg. Ha módosítani szeretné a számszöveg színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

Menü Betűköz<

A betűköz befolyásolja az egyes betűk közötti távolságot. Ha meg szeretné növelni a szóközt a számszöveg egyes betűi között, a tartomány csúszkával állítsa be a szóközt, vagy írja be a kívánt távolságméretet a csúszkától jobbra található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértéket követően megadhatja a „px” vagy „em” értéket a mértékegység típusának megváltoztatásához.

Menüsor magassága

A sormagasság befolyásolja a számszöveg egyes sorai közötti távolságot Ha növelni szeretné az egyes sorok közötti távolságot, a tartomány csúszkával állítsa be a szóközt, vagy adja meg a kívánt távolságméretet a csúszkától jobbra található beviteli mezőben. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértéket követően megadhatja a „px” vagy „em” értéket a mértékegység típusának megváltoztatásához.

Teljes szélességű menü Speciális beállítások

A Speciális lapon olyan lehetőségeket talál, amelyeket a tapasztaltabb webtervezők hasznosnak találhatnak, például egyéni CSS- és HTML-attribútumokat. Itt alkalmazhatja az egyéni CSS-t a modul számos elemére. Egyéni CSS-osztályokat és azonosítókat is alkalmazhat a modulra, amelyek segítségével személyre szabhatja a modult a gyermektéma style.css fájljában.

CSS-azonosító

Adja meg a modulhoz használandó opcionális CSS-azonosítót. Az azonosító használható egyéni CSS-stílus létrehozására, vagy az oldal bizonyos szakaszaira mutató hivatkozások létrehozására.

CSS osztály

Adja meg az ehhez a modulhoz használandó opcionális CSS-osztályokat. Egy CSS-osztály használható egyéni CSS-stílus létrehozására. Több osztályt is hozzáadhat, szóközzel elválasztva. Ezeket az osztályokat használhatja a Divi Child témában vagy az egyéni CSS-ben, amelyet hozzáad az oldalához vagy webhelyéhez a Divi téma beállításai vagy a Divi Builder oldalbeállításai segítségével.

Egyedi CSS

Egyéni CSS is alkalmazható a modulra és a modul bármely belső elemére. Az Egyéni CSS részben talál egy szövegmezőt, ahol az egyes elemekhez közvetlenül hozzáadhat egyéni CSS-t. Az ezekhez a beállításokhoz tartozó CSS-bevitel már stíluscímkékbe van csomagolva, ezért csak a pontosvesszővel elválasztott CSS-szabályokat kell megadnia.

Legördülő menü animációja

Választhat a legördülő menü aktiválásakor használandó különféle animációk közül. Alapértelmezés szerint az animáció elhalványul, de ezt módosíthatja a következőre: kibontás, elcsúsztatás vagy megfordítás.

Láthatóság

Ezzel az opcióval szabályozhatja, hogy mely eszközökön jelenjen meg a modul. Dönthet úgy, hogy egyenként letiltja a modult táblagépeken, okostelefonokon vagy asztali számítógépeken. Ez akkor hasznos, ha különböző modulokat szeretne használni különböző eszközökön, vagy ha le szeretné egyszerűsíteni a mobil kialakítást bizonyos elemek eltávolításával az oldalról.