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 az egyéni fejléctervezést INGYEN

Az ingyenes egyéni globális fejléc kialakításá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.

1. Állítsa be az elsődleges menüt

Kezdje a menü létrehozásával a WordPress webhely megjelenési beállításaiban.

2. Lépjen a Témakészítő beállításaihoz

Ezután navigáljon a Témakészítőhöz a Divi témabeállításaiban. Ha ott van, észrevesz egy üres alapértelmezett webhelysablont.

3. Globális fejléc hozzáadása és létrehozása

Az alapértelmezett webhelysablon az, ahol elkezdheti az egyéni globális fejléc, a globális törzs és a globális lábléc létrehozását. Kattintson a „Globális fejléc hozzáadása” gombra, és folytassa a „Globális fejléc készítése” lehetőségre kattintva a folyamat megkezdéséhez.

szakasz beállításai

Méretezés

Nyissa meg az oldalon észrevehető részt, lépjen tovább a Tervezés lapra, és módosítsa a szélességet a különböző képernyőméreteken.

• Szélesség: 100%
• Max. szélesség: 1280 képpont (asztali számítógép), 100% (táblagép és telefon)

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

Határ

Adjon hozzá néhány szegélysugárt a szakasz bal és jobb alsó sarkához.

• Balra lent: 50 képpont
• Jobbra lent: 50 képpont

Box Shadow

Hozzáadunk egy finom doboz árnyékot is.

• Box Shadow Elmosódás erőssége: 60 képpont
• Árnyékszín: rgba(0,0,0,0,13)

Láthatóság

Ezután lépjen a Speciális lapra, és rejtse el a túlcsordulásokat. Növelje a z indexet is, ez segít abban, hogy a szakasz az oldal teljes tartalmának tetején maradjon.

• Vízszintes túlcsordulás: látható
• Függőleges túlcsordulás: Látható
• Indexről: 99999

4. Új sort jelöljön ki a fejlécnek

Most, hogy elvégeztük az általános szakaszbeállításokat, megkezdhetjük a sorok hozzáadását. Összesen két sorra lesz szükségünk; egy, amelyik a fejlécnek van dedikálva, és egy, amely lehetővé teszi a menüelemek megjelenítését. A fejléccel kezdjük egy új sor hozzáadásával a következő oszlopstruktúra használatával:

Sorbeállítások

Háttérszín

Modulok hozzáadása nélkül nyissa meg a sorbeállításokat, és módosítsa a háttérszínt.

• Háttérszín: #38383f

Méretezés

Ezután módosítsa a sor méretezési beállításait.

• Egyedi ereszcsatorna-szélesség használata: Igen
• Ereszcsatorna szélessége: 1
• Szélesség: 100%
• Max szélesség: 100%

Kijelző

És ügyeljen arra, hogy az oszlopok egymás mellett jelenjenek meg kisebb képernyőméreteken is, ha egyetlen sor CSS-kódot ad hozzá a sor fő eleméhez.

Képmodul hozzáadása az 1. oszlophoz

Logó feltöltése

Miután befejezte a sorbeállításokat, ideje elkezdeni a modulok hozzáadását. Adjon hozzá egy képmodult az 1. oszlophoz, és töltse fel logóját.

Igazítás

Lépjen a Tervezés lapra, és győződjön meg arról, hogy bal oldali igazítást használ.

• Képigazítás: balra

Méretezés

Módosítsa a modul szélességét is.

• Szélesség: 100 képpont

Térköz

És adjon hozzá néhány egyéni margóértéket a különböző képernyőméretekhez.

• Felső margó: 5 képpont
• Bal margó: 50 képpont (asztali számítógép), 20 képpont (táblagép és telefon)

Adja hozzá a közösségi média követési modult a 2. oszlophoz

Közösségi hálózatok hozzáadása

Tovább a második oszlopra. Ott szükségünk lesz egy közösségi média követési modulra. Adja hozzá a választott közösségi hálózatokat.

Social Network Háttérszín

Ezután nyissa meg az egyes közösségi hálózatokat egyenként, és változtassa meg a háttérszínt teljesen átlátszóvá.

• Háttérszín: rgba(0,0,0,0)

Igazítás

Menjen vissza a modul normál beállításaihoz, és ezután módosítsa a teljes modul-igazítást.

• Modul igazítás: Középre

Ikon

Módosítsa az ikonbeállításokat is.

• Ikon színe: #ffffff
• Egyéni ikonméret használata: Igen
• Ikon betűmérete: 16 képpont (asztali és táblagép), 12 képpont (telefon)

Térköz

És adjunk hozzá egy kis felső margót.

• Felső margó: 10 képpont

Gombmodul hozzáadása a 3. oszlophoz

Másolás hozzáadása

Lépjen tovább a harmadik oszlopra, és adjon hozzá egy gombmodult az Ön által választott másolattal.

Igazítás

Módosítsa a gombok igazítását a tervezés lapon.

• Gombok igazítása: jobbra

Gomb beállítások

Állítsa be a gombbeállításokat ennek megfelelően:

• Egyéni stílusok használata a gombhoz: Igen
• Gombszöveg mérete: 12px (asztali), 10px (táblagép), 8px (telefon)
• Gombszöveg színe: #ffffff
• Gomb háttérszíne: #ffae25
• Gombszegély szélessége: 0 képpont

• A gomb szegélyének sugara: 0 képpont
• A gombok betűköze: 5 képpont (asztali számítógépen), 3 képpont (táblagépen és telefonon)
• Gomb betűtípusa: Open Sans
• Gomb betűsúlya: félkövér
• Gomb betűstílusa: nagybetűk

Térköz

És adjon hozzá néhány egyéni kitöltési értéket a különböző képernyőméretekhez.

• Felső kitöltés: 20 képpont
• Alsó párnázás: 20 képpont
• Bal oldali kitöltés: 50 képpont (asztali és táblagép), 15 képpont (telefon)
• Jobb oldali kitöltés: 50 képpont (asztali és táblagép), 15 képpont (telefon)

5. Szenteljen új sort a menüsornak

Miután kitöltötte a globális fejléchez rendelt sort, közvetlenül alatta adhat hozzá egy másik sort a következő oszlopstruktúra segítségével:

Sorbeállítások

Méretezés

Modulok hozzáadása nélkül nyissa meg a sorbeállításokat, és módosítsa a méretezési beállításokat a Tervezés lapon.

• 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

Menümodul hozzáadása az oszlophoz

Válassza a Menü lehetőséget

Ezután adjon hozzá egy menümodult az oszlophoz, és válassza ki az oktatóanyag első részében létrehozott menüt.

Elrendezés

Lépjen tovább a Tervezés lapra, és módosítsa az elrendezés beállításait az alábbiak szerint:

• Stílus: Középre állított
• Legördülő menü iránya: lefelé

Linkek

Módosítsa az aktív hivatkozás színét a Tervezés lapon is.

• Aktív link színe: #ffae25

Legördülő menü

Tegye ugyanezt a legördülő menü sorszínével a legördülő menü beállításaiban.

• Legördülő menüsor színe: #ffae25

Ikonok

Ezután módosítsa a hamburger menü ikonjának színét.

• Hamburger menü ikon színe: #ffae25

Menü szövege

A menü szöveges beállításaival együtt.

• Betűtípus menü: Prata
• Menü szövegének színe: #000000

6. A fejléc és a menüsor ragaszkodjon a tetejéhez

Nyissa meg a szakasz beállításait

Miután kitöltötte a második sort, már csak az a teendő, hogy a részt az oldalaink és bejegyzéseink tetejére ragadja. Ehhez újra megnyitjuk a szakasz beállításait.

Adja hozzá az egyéni CSS-t a fő elemhez

Ezután a Speciális lapra lépünk, és néhány sor CSS-kódot adunk a szakasz fő eleméhez.

7. Mentse el a Globális fejléc- és témakészítő opciókat

Miután elkészült a teljes globális fejléctervvel, mindenképpen mentse el a tervet, mielőtt kilép a sablon elrendezéséből. Ha már kívül van a sablonelrendezésen, mentse el a teljes témakészítő módosításait, és kész!

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