A teljes szélességű navigációs modul használata a Divi Builder eszközön

A Divi teljes szélességű menü moduljának segítségével navigációs menüt helyezhet el az oldalon bárhol. Ezt fel lehet használni egy második oldal menü hozzáadásához az oldalhoz, vagy az Üres oldal funkcióval együtt a fő navigáció az oldal aljára mozgatásához. Például áthelyezheti a menüt az első szakasza alá, hogy befogadja azokat a személyeket, akiknek nagy a kezdő képük. Ez alapvetően lehetővé teszi, hogy a fejléc navigációja az oldalon mozoghasson a készítő segítségével!

Hogyan adhatunk hozzá teljes képernyős menümodult az oldalhoz

Mielőtt teljes szélességű menümodult adna az oldalához, először be kell ugrania a Divi Builderbe. Egyszer a Divi téma telepítve az Önre weboldal, akkor észrevesz egy gombot Használja a Divi Buildert a bejegyzésszerkesztő felett, amikor új oldalt hoz létre. Kattintson erre a gombra a Divi Builder aktiválásához és az összes Divi Builder modul eléréséhez. Ezután kattintson a gombra Használja a Visual Builder alkalmazást hogy a generátort vizuális módban indítsa el. Kattintson a gombra is A Visual Builder engedélyezése amikor böngészi a weboldal az előtérben, ha be van jelentkezve a WordPress irányítópultjába.

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

Keresse meg a teljes szélességű menü modult a modulok listájában, és kattintson rá, hogy hozzáadja az oldalához. A modulok listája kereshető, ami azt jelenti, hogy beírhatja a "Fullwith menu" vagy a "full-width menu" szót is (verziójától függően), majd az Enter gombra kattintva automatikusan megkeresheti és hozzáadhatja a teljes szélességű menümodult ! A modul hozzáadása után a modul opcióinak listája fogadja. Ezeket az opciókat három fő csoportra osztják: Tartalom , Fogamzás et fejlett .

Példa felhasználási esetre: Teljes szélességű menü hozzáadása az oldal fejlécéhez

Ebben a példában megmutatom, hogyan lehet teljes szélességű menüt hozzáadni az oldal fejléc szakaszához.

Íme egy példa:

Mivel ez az új teljes oldal menü helyettesíti az alapértelmezett navigációs főmenüt, ki kell választani az üres oldal sablont, hogy az alapértelmezett navigációs menü ne jelenjen meg az oldal tetején a teljes szélességű menü mellett. hogy hozzáteszem.

Az oldalsablon szerkesztéséhez lépjen az oldalszerkesztőbe, és válassza a jobb oldali sáv Oldalattribútumok területén az "üres oldal" sablont.

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

Miután létrehozta a menüt, használja a vizuális készítőt egy Teljes szélesség szakasz hozzáadásához közvetlenül az oldal fejléc része alatt. Ezután adjon hozzá egy teljes szélességű menü modult a szakaszhoz.

Frissítse a Teljes szélesség menü beállításait az alábbiak szerint:

Tartalom opciók

Menü: [válassza ki a menüt, amelyet használni kell a modulban] Környezet: # 333333

Tervezési lehetőségek

Szöveg színe: Világos Szöveg tájolása: Középmenü betűtípusa: Roboto menü Betűméret: 20px

Ez az!

Trükk : Használhatja a Speciális fül nézetbeállításait, hogy elrejtse ezt a menüt a mobilon, és egy másik menüt jelenítsen meg a fejléc felett, hogy a mobil felhasználók láthassák a menüt anélkül, hogy végig kellene görgetniük az oldalt .

Teljes sávú menü tartalmi 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. Minden, ami irányít mi jelenik meg a modulban, mindig megtalálható ezen a lapon.

Menü

Válassza ki a modulban használni kívánt menüt. Az oldal segítségével új menüket hozhat létre Megjelenések> Menük a WordPress irányítópultról. Minden alkalommal, amikor új menüt hoz létre, a menü választható lesz ebből a legördülő menüből.

Háttérszín

Alapértelmezés szerint a menü modul fehér háttérszínnel rendelkezik. Ha másik színt szeretne használni a menü hátteréhez, itt kiválaszthatja a színválasztóval.

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 színnel rendelkezzenek, akkor a beállítás segítségével választhat egy egyedi színt.

Mobil menü háttérszíne

Mobilon a menümodult átalakítják egy másik kialakítássá és jobban adaptálják a mobilhoz. Szabályozhatja a mobil legördülő menü háttérszínét, függetlenül annak asztali megfelelőjétől.

Adminisztráció címke

Ez megváltoztatja a konstruktor modul címkéjét az egyszerű azonosítás érdekében. Amikor a WireFrame nézetet használja a Visual Builder alkalmazásban, ezek a címkék a Divi Builder felület modulblokkjában jelennek meg.

Teljes szélességű menük tervezési lehetőségei

A Tervezés lapon megtalálja a modul összes stíluslehetőségét, például a betűtípusokat, a színeket, a méretezést és a térközt. Ezen a lapon módosíthatja a modul megjelenését. Minden Divi modulnak hosszú a tervezési beállítások listája, amelyek segítségével bármit megváltoztathat.

Nyissa meg az almenüket

Alapértelmezés szerint az összes almenü legördülő menüben nyílik meg a fő menüsáv alatt. Ha a menüt az oldal alja közelében helyezi el, és a menüben hosszú legördülő menük találhatók, érdemes ezeket a menüket a menümodul felett megnyitni, hogy a menü ne lépjen túl a böngésző ablakán.

Teljes szélességű menühivatkozások létrehozása

Alapértelmezés szerint a legfelső szintű hivatkozások a menümodullal az alapértelmezett tartalomszélességen belül helyezkednek el. Ha el akarja távolítani ezt a korlátozást, és a linkek az oldal teljes szélességében futnak, a képernyő bal szélétől kezdve, engedélyezheti ezt a lehetőséget.

A legördülő menü sorának színe

A legördülő menükben a hivatkozásokat 1 pixeles vonal választja el. Ha testre szeretné szabni ennek a sornak a színét, kiválaszthatja az egyéni színt a beállítás színválasztójával.

Szöveg színe

Itt választhatja ki a szövege értékét. Ha sötét háttérrel dolgozik, a szövegnek be kell kapcsolnia. Ha világos háttérrel dolgozik, akkor a szövegének sötétnek kell lennie.

Szövegorientáció

Ez szabályozza, hogy a szöveg hogyan illeszkedjen a modulba. Választhat Bal, Jobb és Közép között.

Aktív kapcsolat színe

Az aktív linkek színeit a menü modul kiemeli, hogy a felhasználó megmutassa az aktuális tartózkodási helyét. Ezzel a beállítással módosíthatja az aktív linkek kiemelésének színét.

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

Alapértelmezés szerint a modul legördülő menüinek szövege örökli a főmenü szövegének színét. Érdemes azonban megváltoztatni ezt a színt, ha egyéni legördülő menü háttérszínét definiálta.

A mobil menü szövegének színe

Alapértelmezés szerint a modul legördülő menüinek szövege örökli a főmenü szövegének színét. Érdemes azonban megváltoztatni ezt a színt, ha egyéni mobil menü háttérszínt állított be.

Menü betűtípus

A legördülő menüből kiválaszthatja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts szolgáltat. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűs és aláhúzási lehetőségek használatával is.

Betűméret menü

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 közvetlenül beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán 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ékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

A menü szövegének színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha módosítani szeretné a digitális szö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 helyet. Ha meg akarja növelni a numerikus szövegben az egyes betűk közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt távolságméretet a csúszka jobb oldalán 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ékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

A menüsor magassága

A vonalvastagság befolyásolja a numerikus szöveg egyes sorai közötti teret a kurzortól jobbra található. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

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

A Haladó 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 alkalmazhat egyedi CSS-t a modul számos elemére. Alkalmazhat egyedi CSS osztályokat és azonosítókat is a modulra, amelyek felhasználásával testreszabhatja a modult a gyermek téma style.css fájljában.

CSS azonosító

Adjon meg egy opcionális CSS azonosítót, amelyet ehhez a modulhoz használ. Az azonosító felhasználható egyedi CSS-stílus létrehozására vagy az oldal egyes szakaszaira történő hivatkozásokra.

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 felvehet, szóközzel elválasztva. Ezek az osztályok használhatók a Divi gyermektémában vagy az oldalához vagy webhelyéhez hozzáadott egyéni CSS-stíluslapban. weboldal a Divi témabeállítások vagy a Divi Builder oldalbeállítások használatával.

Egyéni CSS

Az egyedi CSS alkalmazható a modulra és a modul bármely belső elemére is. Az Egyéni CSS részben talál egy szövegmezőt, ahol egyedi CSS stíluslapokat adhat hozzá minden elemhez. Az ezekben a beállításokban található CSS bejegyzések már stíluscímkékbe vannak csomagolva. Tehát csak pontosvesszővel elválasztva adja meg a CSS-szabályokat.

A legördülő menü animációja

Választhat a különféle animációk között, amelyeket a legördülő menü engedélyezése esetén használhat. Alapértelmezés szerint az animáció elhalványul, de ezt megváltoztatja: kibontás, húzás vagy flip.

láthatóság

Ez az opció lehetővé teszi azoknak az eszközöknek a vezérlését, amelyeken a modul megjelenik. Választhatja a modul deaktiválását táblagépeken, okostelefonokon vagy asztali számítógépeken egyenként. Ez akkor hasznos, ha különböző modokat szeretne használni különböző eszközökön, vagy ha le akarja egyszerűsíteni a mobil tervezését bizonyos elemek eltávolításával az oldalról.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TÉMA LETÖLTÉSE [/vcex_button][/vc_column][vc_colum /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]LETÖLTÉS TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

A Divi Builder teljes szélességű navigációs moduljának használata