Globális fejléc létrehozása Divi Theme Builder segítségével.

Written by redzs

2022.04.17.

Kategóriák

Egyéni globális fejléc létrehozása a Divi Theme Builder segítségével
Most, hogy megérkezett a Theme Builder, alig várjuk, hogy belevessük magunkat az új oktatóanyagokba, amelyek segítségével A-tól Z-ig beállíthatja webhelyét. Ide tartozik az egyéni fejlécek létrehozása a Divi beépített opciójával. Ebben az oktatóanyagban egy globális fejléc létrehozására fogunk összpontosítani a Divi Theme Builder segítségével. A globális fejléc mindenhol megjelenik a webhelyen, kivéve, ha más fejlécet rendelt az oldalhoz vagy bejegyzéshez.

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

globális fejléc

Mobil

globális fejléc

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.

 

IRATKOZZ FEL YOUTUBE CSATORNÁNKRA

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.

globális fejléc

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.

globális fejléc

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.

globális fejléc

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)

globális fejléc

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

globális fejléc

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

globális fejléc

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)

globális fejléc

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ó
  • Z Index: 99999

globális fejléc

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:

globális fejléc

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

globális fejléc

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%

globális fejléc

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.

01
display: flex;

globális fejléc

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.

globális fejléc

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

globális fejléc

Méretezés

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

  • Szélesség: 100 képpont

globális fejléc

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)

globális fejléc

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.

globális fejléc

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)

globális fejléc

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ása: Középre

globális fejléc

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)

globális fejléc

Térköz

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

  • Felső margó: 10 képpont

globális fejléc

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.

globális fejléc

Igazítás

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

  • Gombok igazítása: jobbra

globális fejléc

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

globális fejléc

  • 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

globális fejléc

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)

globális fejléc

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:

globális fejléc

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%

globális fejléc

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

globális fejléc

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.

globális fejléc

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é

globális fejléc

Linkek

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

  • Aktív link színe: #ffae25

globális fejléc

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

globális fejléc

Ikonok

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

  • Hamburger menü ikon színe: #ffae25

globális fejléc

Menü szövege

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

  • A menü betűtípusa: Prata
  • Menü szövegének színe: #000000

globális fejléc

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.

globális fejléc

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.

01
02
03
04
position: fixed;
top: 0;
left: 0;
right: 0;

globális fejléc

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, győződjön meg arról, hogy mentette 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!

globális fejléc

globális fejléc

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

egyéni fejléc

Mobil

egyéni fejléc

0 hozzászólás

Egy hozzászólás elküldése

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

Wordpress TutoriálokDiviGlobális fejléc létrehozása Divi Theme Builder segítségével.