A Divi teljes képernyős menü modulja megkönnyíti a gyönyörű színes fejlécek hozzáadását az oldalak tetejére (vagy bárhova a webhelyén, ha úgy kívánja). Ezeket a modulokat csak teljes szélességben lehet elhelyezni.

teljes szélességű fejléc modul divi.png

Hogyan lehet hozzáadni a Divi Teljes képernyő menü modult

Mielőtt teljes képernyős menü modult adhatna 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.

használja a divi buildert

Miután belépett a Visual Builder programba, a szürke plusz gombra kattintva új modult adhat hozzá az oldalához. Új teljes képernyős menü modulok csak teljes szélességű szakaszokba adhatók. Ha új oldalt indít, ne felejtse el először hozzáadni a teljes szélességű szakaszt az oldalához.

teljes menü divi.png

Keresse meg a teljes képernyős fejléc 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 "teljes képernyős fejléc" szót is, majd az "Enter" gombra kattintva automatikusan megtalálja és hozzáadja a teljes képernyős fejléc modult! A modul hozzáadása után a modul opcióinak listája fogadja. Ezek az opciók három fő csoportra vannak felosztva: Tartalom , Fogamzás et fejlett .

Példa felhasználási esetre: Teljes képernyős fejléc hozzáadása a Névjegy oldalhoz

Ebben a példában megmutatom, hogyan használhatja a Teljes szélesség fejléc modult az egyéni szöveget és háttérképet tartalmazó fejléc hozzáadásához.

Az összes teljes képernyős modul csak teljes képernyős szakaszok használatakor érhető el. A Visual Builder használatával illesszen be egy új teljes képernyős részt. Ezután adjon hozzá egy személy modult a szakaszhoz.

Frissítse a teljes képernyős fejléc beállításait az alábbiak szerint:

Tartalom opciók

Cím: Rólunk Felirat szövege: Különböző dolgokat csinálunk ... Háttérkép URL: [1920 x 800 kép beillesztése] Háttér átfedése Szín: rgba (0,0,0,0.2 , XNUMX)

Tervezési lehetőségek

Szöveg és logó tájolása: Középső gomb Görgetés lefelé Gomb: IGEN Ikon: [Kiválasztó ikon] Görgetés lefelé ikon Szín: # fcbf00 Görgetés ikon: 50px Szöveg színe: Világos Szöveg színe: # fcbf00 Betűtípus Cím: Nyitva, félkövér, nagybetűvel Cím Betűméret: 60px (asztali), 40px (táblaszámítógép), 30px (telefon)

Speciális beállítások (egyedi CSS)

Fő elem:
kárpitozás: 100px 0;

szakasz tartalma divi modul full screen.png

Ez az!

példa fejléc divi.jpg

A teljes képernyős fejléc tartalmi beállításai

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.

tartalomtartomány divi.png

Cím

Adja meg itt az oldal címét.

Felirat szövege

Ha feliratot szeretnél használni, add ide. A felirat kis címmel jelenik meg a címe alatt.

Button # 1 szöveg

Adja meg a gomb szövegét.

Button # 2 szöveg

Adja meg a gomb szövegét.

Tartalom

Itt definiálhatja azt a tartalmat, amely a fejléc és a cím szövege alá kerül.

Gomb URL 1

Írja be a gomb URL-jét.

Gomb URL 2

Írja be a gomb URL-jét.

Logó kép URL-je

Töltse fel a kívánt képet, vagy írja be a megtekinteni kívánt kép URL-jét.

Fejléc kép URL-je

Töltse fel a kívánt képet, vagy írja be a megtekinteni kívánt kép URL-jét.

Háttérkép URL

Ha be van állítva, akkor ezt a képet fogja használni a modul háttereként. A háttérkép eltávolításához egyszerűen távolítsa el az URL-t a beállítások mezőből. A háttérképek a háttérszínek tetején jelennek meg, ami azt jelenti, hogy a háttérszín nem lesz látható háttérkép alkalmazása esetén.

Háttérszín

Adjon meg egyedi háttérszínt a modulhoz, vagy hagyja üresen az alapértelmezett szín használatához.

Háttérfedeles szín

Válasszon egy háttérfedvény színét, amely a háttérkép fölé kerül. A félig átlátszó overlay képek jó hatásokat hozhatnak létre, ha a háttérképek tetejére helyezik őket.

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ű fejléc tervezési lehetőségek

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.

szekciómodul teljes szélességű divi.png

Szöveg és logó tájolása

Ez irányítja, hogy a szöveg hogyan igazodjon a modulhoz.

Készítsen egy teljes képernyőt

Itt kiválaszthatja, hogy a fejléc teljes képernyős méretre bővül-e.

Használja a Parallax effektust

Ha engedélyezve van, akkor a háttérképeinek fix helyzete lesz, például a görgetéshez, ami szórakoztató parallaxis hatást kelt.

Parallax módszer

Határozza meg a parallaxishatáshoz használt módszert.

Mutassa a görgetőgombot

Itt kiválaszthatja, hogy megjelenjen-e a görgetés gomb.

ikon

Válasszon egy ikont a megjelenítéshez a görgetés gombhoz.

Görgessen le a Színes ikonra

Alapértelmezés szerint a legördülő ikon örökli a fejléc szövegének színét (fehér vagy szürke). Ezt a színt úgy módosíthatja, hogy a színválasztóval használja az opció színét.

Görgesse lefelé az ikon méretét

Ezzel a beállítással növelheti vagy csökkentheti a fejléc alján megjelenő lefelé görgethető ikon méretét.

igazítás divi modul teljes szélessége head.png

Kép függőleges igazítása

Ez vezérli a kép tájolását a modulban.

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.

A szöveg függőleges igazítása

Ez a beállítás határozza meg a tartalom függőleges igazítását. A tartalma függőlegesen középre vagy alulra igazítható.

Cím betűtípus

A cím szövegének betűtípusát úgy módosíthatja, hogy a legördülő menüből kiválasztja 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.

Cím Betűméret

Itt állíthatja be a cím szövegének 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 cím szövegszíne

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

Címcímek távolsága

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a cím szövegében 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érköz mé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" karaktereket adhat meg az egység típusának megváltoztatásához.

cím szekció design modul fejjel teljes képernyős divi.png

A címsor magassága

A vonalvastagság befolyásolja a cím szövegének minden sora közötti teret. Ha növelni szeretné az egyes sorok 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érköz méretet a beviteli mezőbe 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.

Tartalom betűtípus

A legördülő menüből kiválaszthatja a kívánt betűtípust a tartalom szövegének betűtípusához. 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.

A tartalom betűmérete

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

Tartalom szövegének színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni a tartalom szövegének színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

Tartalmi betűk elkülönítése

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a tartalom szövegében 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" karaktereket adhat meg az egység típusának megváltoztatásához.

A tartalmi vonal magassága

A sor magassága befolyásolja a tartalomszöveg egyes sorai közötti helyet 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" karaktereket adhat meg az egység típusának megváltoztatásához.

Felirat betűtípus

A felirat szövegének betűtípusát úgy módosíthatja, hogy a legördülő menüből kiválasztja 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.

A felirat-betűtípus mérete

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

Felirat szövegének színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni a felirat szövegének színét, ezzel a lehetőséggel válassza ki a kívánt színt a színválasztóból.

Feliratbetűk elosztása

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a felirat szövegében 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" karaktereket adhat meg az egység típusának megváltoztatásához.

A feliratsor magassága

A vonalvastagság befolyásolja a feliratszöveg egyes sorai közötti helyet. Ha növelni kívánja az egyes sorok közötti teret, a tartomány csúszkájával állítsa be a teret, 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" karaktereket adhat meg az egység típusának megváltoztatásához.

Legnagyobb szövegszélesség

Ezzel a beállítással csökkentheti a fejléc modul maximális szövegszélességét. Például egy 50% -os érték biztosítja, hogy a szöveg soha ne haladja meg a teljes fejléc modul szélességének 50% -át.

szelvényezési modul divi head full width.png

Használjon egyedi stílusokat a gombhoz

Ennek az opciónak az engedélyezésével különböző gombok testreszabási beállításai láthatók, amelyek segítségével módosíthatja a modul gombjának megjelenését.

Gomb szövegmérete

Ezzel a beállítással növelhető vagy csökkenthető a gomb szövegének mérete. A gomb alkalmazkodik a szöveg méretének növekedésével és csökkenésével.

A gomb szövegének színe

Alapértelmezés szerint a gombok átveszik a téma kiemelő színét, a téma testreszabásban meghatározottak szerint. Ezzel az opcióval egyedi szövegszínt rendelhet a modul gombjához. Válassza ki az egyéni színt a színválasztóval a gomb színének megváltoztatásához.

Gomb háttérszíne

Alapértelmezés szerint a gombok átlátszó háttérszínnel rendelkeznek. Ez megváltoztatható a kívánt háttérszín kiválasztásával a színválasztóból.

Szélesség szélesség gomb

Az összes Divi gomb alapértelmezés szerint 2 képpontos szegéllyel rendelkezik. Ez a határ növelhető vagy csökkenthető ezzel a beállítással. A határok eltávolíthatók 0 érték megadásával.

Gomb szegély színe

Alapértelmezés szerint a gomb szegélyek átveszik a téma kiemelő színét, a téma testreszabásban meghatározottak szerint. Ez az opció lehetővé teszi, hogy egyedi szegélyszínt rendeljen ennek a modulnak a gombjára. Válassza ki az egyéni színt a színválasztóval a gomb szegélyének megváltoztatásához.

Gombkeret sugara

A határ sugara befolyásolja a gombok sarkainak kerekségét. Alapértelmezés szerint a Divi gombjainak kis szegélysugara van, amely 3 pixellel kerekíti a sarkokat. Ezt az értéket csökkentheti 0-ra egy négyzet alakú gomb létrehozásához, vagy jelentősen megnövelheti a kör alakú élű gombok létrehozásához.

A nyomógombok távolsága

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg akarja növelni a gomb szövegében 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 módosításához.

Gomb 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űk és aláhúzási lehetőségek használatával is.

Adjon hozzá egy gomb ikont

Letiltva, ez a beállítás eltávolítja az ikonokat a gombodból. Alapértelmezés szerint az összes Divi gomb nyíl ikont jelenít meg az egérrel.

Gomb ikonra

Ha az ikonok engedélyezve vannak, akkor ezzel a beállítással kiválaszthatja, hogy melyik ikont használja a gombjában. Divi különböző ikonok közül választhat.

Színes ikon gombra

A beállítás módosítása megváltoztatja a gombon megjelenő ikon színét. Alapértelmezés szerint az ikon színe megegyezik a gomb szövegének színével, de ez a beállítás lehetővé teszi a szín független beállítását.

Ikon elhelyezés gomb

Dönthet úgy, hogy a gomb ikonját balra vagy jobbra jeleníti meg.

Az ikon megjelenítése csak akkor, ha a gomb fölé viszi az egeret

Alapértelmezés szerint a gombok ikonjai csak lebegés közben jelennek meg. Ha azt szeretné, hogy az ikon mindig megjelenjen, kapcsolja ki ezt a beállítást.

Gomb Hover szöveg színe

Amikor a látogató egere fölé viszi a gombot, akkor ezt a színt használják. A szín megváltozik az előző beállításokban meghatározott alapszíntől.

Hover gomb háttérszíne (lebegés gomb szín)

Amikor a látogató egere fölé viszi a gombot, akkor ezt a színt használják. A szín megváltozik az előző beállításokban meghatározott alapszíntől.

Hover Border Colour gomb (lebegési határszín)

Amikor a látogató egere fölé viszi a gombot, akkor ezt a színt használják. A szín megváltozik az előző beállításokban meghatározott alapszíntől.

Hover Border Radius gomb

Amikor a látogató egere fölé viszi a gombot, ez az érték lesz felhasználva. Az érték megváltozik az előző beállításokban meghatározott alapértékhez képest.

Mutatósávközlő gomb

Amikor a látogató egere fölé viszi a gombot, ez az érték lesz felhasználva. Az érték megváltozik az előző beállításokban meghatározott alapértékhez képest.

Speciális teljes szélességű fejlécopciók

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.

modul címsor divi section advance.png

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.

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]

Egyéb Divi oktatóanyagok