Térjünk rá.
Előnézet
Mielőtt belevágnánk az oktatóanyagba, vessünk egy gyors pillantást a különböző képernyőméreteken elért eredményekre.
Asztali
Mobil
Töltse le a teljes képernyős globális fejléc sablont INGYEN
A teljes képernyős globális fejlécesablon használatához először le kell töltenie 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
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.
1. Nyissa meg a Divi Theme Builder alkalmazást, és kezdje el a globális fejléc építését
Nyissa meg a Divi Theme Builder alkalmazást
Kezdje a Divi Theme Builder megnyitásával.
Kezdje el a globális fejléc építését
Ezután kattintson a „Globális fejléc hozzáadása” gombra, és kattintson a „Globális fejléc készítése” gombra.
2. Az 1. részt szentelje a teljes képernyős navigációnak
szakasz beállításai
Háttérszín
Ideje elkezdeni az alkotást! Nyissa meg a sablonszerkesztőben észrevehető szakasz beállításait, és változtassa meg a háttérszínt teljesen átlátszóvá.
- Háttérszín: rgba(255,255,255,0)
Térköz
Ezután távolítsa el a szakasz alapértelmezett felső és alsó párnázását.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
CSS osztály
Folytassa egy CSS-osztály hozzáadásával a szakaszhoz. A bejegyzés későbbi részében szükségünk lesz erre a CSS-osztályra a menü teljes képernyős megjelenítéséhez.
- CSS osztály: szakasz-transzformáció
Alapértelmezett láthatóság
Ezután lépjen a láthatósági beállításokhoz, és rejtse el a túlcsordulásokat. Ügyeljen arra, hogy növelje a szakasz z indexét is, ez biztosítja, hogy a szakasz az összes oldal tetején maradjon és a tartalom tetején maradjon.
- Vízszintes túlcsordulás: Rejtett
- Függőleges túlcsordulás: Rejtett
- Z Index: 999999
Lebegtetés láthatósága
Miután hozzáadta a z indexet, engedélyezze a hover opciót, és győződjön meg arról, hogy ott is ugyanaz a z index vonatkozik.
- Z Index: 999999
1. sor hozzáadása
Oszlop szerkezete
Folytassa egy első sor hozzáadásával a szakaszhoz a következő oszlopstruktúra használatával:
Méretezés
Modulok hozzáadása nélkül nyissa meg a sorbeállításokat, és hagyja, hogy a sor elfoglalja a képernyő teljes szélességét.
- Egyedi ereszcsatorna-szélesség használata: Igen
- Ereszcsatorna szélessége: 1
- Szélesség: 100%
- Max szélesség: 100%
Térköz
Ezután távolítsa el az összes alapértelmezett felső és alsó párnázást.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
Szövegmodul hozzáadása az oszlophoz
Tartalom hozzáadása elemre
Ebben a sorban az egyetlen modul, amelyre szükségünk van, egy szöveges modul. Adjon hozzá egy tetszőleges menüszimbólumot a tartalomdobozhoz. Ebben az oktatóanyagban a „≡” jelet használjuk.
Szöveg beállítások
Lépjen tovább a modul tervezési lapjára, és módosítsa a szövegbeállításokat az alábbiak szerint:
- Szöveg betűtípusa: Abril Fatface
- Szöveg színe: #000000
- Szövegméret: 3vw (asztali), 5vw (táblagép), 7vw (telefon)
- Szöveg sor magassága: 1 em
Térköz
Ezután módosítsa a különböző képernyőméretek közötti távolságértékeket.
- Felső párnázás: 2vw (asztali), 3,5vw (táblagép), 5vw (telefon)
- Alsó párnázás: 2vw (asztali), 3,5vw (táblagép), 5vw (telefon)
- Bal oldali kitöltés: 3vw (asztali), 4vw (táblagép), 7vw (telefon)
- Jobb oldali kitöltés: 3vw (asztali), 4vw (táblagép), 7vw (telefon)
CSS-azonosító
Ez a szövegmodul a teljes képernyős menü indítójaként szolgál. Ezért kell hozzárendelnünk egy CSS-azonosítót a szöveges modulhoz. Az oktatóanyag későbbi részében a CSS-azonosítót használjuk a kódunkban.
- CSS ID: menü megnyitása
2. sor hozzáadása
Oszlop szerkezete
Folytassa egy második sor hozzáadásával a szakaszhoz a következő oszlopstruktúra használatával:
Méretezés
Nyissa meg a sorbeállításokat, és módosítsa a méretbeállításokat az alábbiak szerint:
- Szélesség: 100%
- Max szélesség: 100%
Térköz
Módosítsa a távolságértékeket is.
- Felső margó: 2vw (asztali számítógép), 4vw (táblagép), 6vw (telefon)
- Alsó margó: 2vw (asztali), 4vw (táblagép), 6vw (telefon)
- Bal párnázás: 19vw
- Jobb párnázás: 19vw
Szövegmodul hozzáadása az oszlophoz
Tartalom hozzáadása elemre
Ezután adjon hozzá egy új szövegmodult az oszlophoz. Ez a szövegmodul az első menüpontot képviseli.
Link hozzáadása
Győződjön meg róla, hogy ezután megfelelő hivatkozást ad hozzá a modulhoz.
- Modullink URL-je: #
Szöveg beállítások
Lépjen tovább a modul tervezési lapjára, és ennek megfelelően módosítsa a szövegbeállításokat:
- Szöveg betűtípusa: Poppins
- Szöveg betűsúlya: félkövér
- Szöveg színe: #000000
- Szövegméret: 3vw (asztali), 7vw (táblagép), 8vw (telefon)
- Szöveg betűköz: -0.1vw
- Szöveg sor magassága: 1 em
Térköz
Ezután módosítsa a modul térköz beállításait.
- Felső margó: 1vw
- Alsó párnázás: 2vw
- Bal párnázás: 3vw
Határ
Adjon hozzá egy alsó szegélyt is.
- Alsó szegély szélessége: 1 képpont
- Alsó szegély színe: #333333
CSS osztály
És egészítse ki a modul beállításait egyéni CSS-osztály hozzáadásával. Ezt a CSS-osztályt hozzá kell adnia minden egyes menüelemhez, amelyet a szakaszban elhelyez.
Szövegmodul háromszori klónozása
Miután befejezte az első szövegmodult, annyiszor klónozhatja, ahányszor csak akarja (attól függően, hogy mely menüpontokat szeretné megjeleníteni a menüben). Ügyeljen azonban arra, hogy a modulok ne haladják meg a képernyő magasságát.
Módosítsa az egyes másolatok tartalmát és hivatkozásait
Módosítania kell minden másolat tartalmát és hivatkozását.
Adja hozzá a közösségi média követési modult
Adja hozzá a választott közösségi hálózatokat
A következő és utolsó modul, amire szükségünk van ebben a sorban, egy Social Media Follow Module. Adja hozzá az összes megjeleníteni kívánt közösségi hálózatot.
Állítsa vissza az egyéni közösségi hálózatok stílusait
Folytassa az egyes közösségi hálózatok stílusának egyenkénti visszaállításával.
Ikonbeállítások
Ezután lépjen a modul tervezési lapjára, és módosítsa az ikonbeállításokat az alábbiak szerint:
- Ikon színe: #000000
- Egyéni ikonméret használata: Igen
- Ikon betűmérete: 1vw (asztali), 2vw (táblagép), 3vw (telefon)
Térköz
Adjon hozzá egy kis bal oldali párnázást is.
- Bal párnázás: 3vw
CSS osztály
Fejezze be a modul beállításait egy CSS-osztály hozzáadásával.
3. sor hozzáadása
Oszlop szerkezete
Ebben a szakaszban az utolsó sor, amelyre szükségünk van, a következő oszlopszerkezetet tartalmazza:
Térköz
Korlátozza a sor által elfoglalt helyet az összes alapértelmezett felső és alsó kitöltés eltávolításával.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
Adjon hozzá kódmodult az oszlophoz
JQuery és CSS kód beszúrása
Ezután adjon hozzá egy kódmodult, és szúrjon be néhány CSS- és JQuery-kódot a teljes képernyős menü működéséhez. Ügyeljen arra, hogy manuálisan helyezze el a JQuery kódot a szkriptcímkék közé, a CSS kódot pedig a stíluscímkék közé, amint azt az alábbi nyomtatási képernyőn láthatja.
|
01
02
03
04
05
06
07
08
|
jQuery(function($){$('#menu-open').click(function() {$('.section-transform').toggleClass('section-transform-active');});$('.menu-item-click').click(function() {$('.section-transform').removeClass('section-transform-active');});}); |
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
.section-transform{cursor: pointer; }.section-transform-active {height: 100% !important;width: 100% !important;z-index: 99999 !important;background-color: #FFFFFF !important; } .section-transform {-webkit-transition: all 0.5s ease !important;-moz-transition: all 0.5s ease !important;-o-transition: all 0.5s ease !important;-ms-transition: all 0.5s ease !important;transition: all 0.5s ease !important;} |
3. Szentelje a 2. részt a jobb felső sarok logójának
szakasz beállításai
Háttérszín
Tovább a következő részhez! Ez a rész a jobb felső sarokban fogja tartalmazni a logót. Nyissa meg a szakasz beállításait, és változtassa meg a háttérszínt egy teljesen átlátszóra.
- Háttérszín: rgba(0,0,0,0)
Térköz
Ezután távolítsa el a szakasz alapértelmezett felső és alsó párnázását.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
Alapértelmezett láthatóság
Növelje a szakasz z indexét is.
- Z Index: 99999
Lebegtetés láthatósága
Engedélyezze a lebegés opciót a z indexen, és győződjön meg arról, hogy ugyanaz az érték érvényes lebegtetéskor is.
- Z Index: 99999
Új sor hozzáadása
Oszlop szerkezete
Folytassa egy új sor hozzáadásával a szakaszhoz a következő oszlopstruktúra használatával:
Méretezés
Nyissa meg a sorbeállításokat, és módosítsa a méretbeállításokat az alábbiak szerint:
- Szélesség: 100%
- Max szélesség: 100%
Térköz
Távolítsa el a sor alapértelmezett felső és alsó párnázását is.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
Képmodul hozzáadása az oszlophoz
Töltse fel a PNG logó képét
Ebben a sorban és részben az egyetlen modul, amelyre szükségünk van, egy képmodul. Töltse fel a félig átlátszó logó képfájlját.
Méretezés
Menjen a modul méretezési beállításaihoz, és állítsa be a teljes szélességet.
- Teljes szélesség kényszerítése: Igen
Térköz
Egészítse ki a modul beállításait egyéni kitöltés hozzáadásával a különböző képernyőméretekhez.
- Felső párnázás: 2.5vw (asztali számítógép), 3.5vw (táblagép), 5vw (telefon)
- Alsó párnázás: 2.5vw (asztali számítógép), 3.5vw (táblagép), 5vw (telefon)
- Bal oldali kitöltés: 3vw (asztali), 4vw (táblagép), 7vw (telefon)
- Jobb oldali kitöltés: 3vw (asztali), 4vw (táblagép), 7vw (telefon)
4. További szakaszbeállítások
1. szakasz
Méretezés
Miután befejezte mindkét részt és az összes modult, itt az ideje, hogy módosítsa a méretüket. Nyissa meg az első részt, és alkalmazza a következő szélességi és magassági értékeket:
- Szélesség: 8vw (asztali), 11vw (táblagép), 18vw (telefon)
- Magasság: 7vw (asztali), 11vw (táblagép), 18vw (telefon)
Alapértelmezett fő elem
Ezután lépjen a szakasz speciális lapjára, és adja hozzá a következő CSS-kódsorokat:
|
01
02
|
position: fixed;top: 0; |
Mutasson rá a fő elemre
Győződjön meg arról, hogy ugyanazok a CSS-kódsorok érvényesek, amikor az egérmutatót ráhelyezi.
|
01
02
|
position: fixed;top: 0; |
2. szakasz
Méretezés
Folytassa a második szakasz beállításainak megnyitásával, és módosítsa a szélességet a különböző képernyőméreteknél.
- Szélesség: 13vw (asztali), 21vw (táblagép), 30vw (telefon)
Alapértelmezett fő elem
Ezután lépjen a Speciális lapra, és adja hozzá a következő CSS-kódsorokat:
|
01
02
03
|
position: fixed;right: 0;top: 0; |
Mutasson rá a fő elemre
Győződjön meg arról, hogy ugyanazok a CSS-kódsorok érvényesek, amikor az egérmutatót ráhelyezi.
|
01
02
03
|
position: fixed;right: 0;top: 0; |
5. Mentse az Builder módosításait és tekintse meg az eredményt
A fenti lépések végrehajtása után elmentheti a globális fejléc sablont, és megtekintheti az eredményt a webhelyén!
Előnézet
Most, hogy az összes lépésen keresztülmentünk, vessünk egy utolsó pillantást a végeredményre a különböző képernyőméreteken.
Asztali
Mobil
0 hozzászólás