Ragadós fejléc létrehozása Divi ragadós beállításaival

Written by redzs

2022.04.17.

Kategóriák

Hogyan készítsünk ragadós fejlécet a Divi ragadós beállításaival
Az, ahogyan a Divi Theme Builder-t használjuk a webhely létrehozásakor, felgyorsította munkafolyamatunkat, és mindent könnyebbé tett. Bár a Divi Theme Builder megjelenése óta az első naptól kezdve tudtunk személyre szabott fejléceket készíteni, egy dolgot folyamatosan kértek, mégpedig az, hogy további kód használata nélkül készítsünk ragadós fejlécet. A Divi új ragadós opcióival a ragadós fejléc létrehozása egyszerűbbé vált, mint valaha. A Divi által biztosított ragacsos beállítások könnyedén segítenek bármilyen designelem ragacsossá alakításában, és egyedi stílusokat hozzárendelnek ragadós állapothoz, ami végtelen tervezési és felhasználói élményt eredményez.

Ebben az oktatóanyagban bemutatjuk, hogyan hozhat létre ragadós fejlécet, amely a következőket tartalmazza:

  • Az általunk létrehozott fejlécnek van egy felső fejlécsávja + egy menüsor
  • A menüsort tartalmazó részt ragacsossá változtatjuk, ha elhalad mellette, amint visszamész a tetejére, újra megjelenik a fejléc
  • Módosítjuk a ragadós rész (és elemeinek) tervezési stílusát, miután a szakasz ragadóssá vált

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

ragadós fejléc

Mobil

ragadós fejléc

Töltse le a Globális fejléc sablont INGYEN

Az ingyenes 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

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. A fejléc elem szerkezetének felépítése egy új fejléc sablonon belül

Hozzon létre új globális fejléc sablont

Nyissa meg a Divi Theme Builder alkalmazást, és kezdjen el új globális vagy egyéni fejlécet építeni.

ragadós fejléc

ragadós fejléc

1. szakasz Beállítások

Színátmenetes háttér

Miután beléptünk a sablonszerkesztőbe, kezdjük fejlécünk elemszerkezetének felépítésével. Ennek az oktatóanyagnak a második részében a különböző ragadós beállítások alkalmazására fogunk összpontosítani, hogy befejezzük a ragadós fejléc kialakítását. A sablonszerkesztőben egy szakaszt fog látni. Nyissa meg ezt a részt, és alkalmazzon színátmenetes hátteret.

  • 1. szín: #ffba60
  • 2. szín: #ffd6a0
  • Lejtési irány: 90 fok
  • Kezdő pozíció: 50%
  • Végpozíció: 50%

ragadós 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

ragadós fejléc

Új sor hozzáadása

Oszlop szerkezete

A felső fejlécsor létrehozásához új sort adunk a szakaszunkhoz a következő oszlopstruktúra használatával:

ragadós fejléc

Méretezés

Modulok hozzáadása nélkül nyissa meg a sorbeállításokat, és módosítsa a méretbeállításokat az alábbiak szerint:

  • Egyedi ereszcsatorna-szélesség használata: Igen
  • Ereszcsatorna szélessége: 1
  • Szélesség: 95%
  • Maximális szélesség: 2580 képpont

ragadós fejléc

Térköz

Adjon hozzá egyéni felső és alsó párnázást is.

  • Felső bélés: 15 képpont
  • Alsó párnázás: 15 képpont

ragadós fejléc

Fő elem CSS

Annak érdekében, hogy az oszlopok egymás mellett maradjanak a kisebb képernyőméreteken, egy sor CSS-kódot adunk a sor fő eleméhez a speciális lapon.

01
display: flex;

ragadós fejléc

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

Adja hozzá a választott közösségi hálózatokat

Ideje modulokat hozzáadni, kezdve a közösségi média követési modullal az 1. oszlopban. Adja hozzá a választott közösségi hálózatokat a megfelelő hivatkozásokkal együtt.

ragadós fejléc

Távolítsa el az egyes közösségi hálózatok háttérszíneit

Folytassa a közösségi hálózat minden háttérszínének egyenkénti eltávolításával.

ragadós fejléc

ragadós fejléc

Ikonbeállítások

Ezután térjen vissza az általános modulbeállításokhoz, és módosítsa az ikon színét a tervezés lapon.

  • Ikon színe: #26333a

ragadós fejléc

Térköz

Adjon hozzá egy kis felső margót is.

  • Felső margó: 5 képpont

ragadós fejléc

Gombmodul hozzáadása a 2. oszlophoz

Másolás hozzáadása

A 2. oszlopban az egyetlen modul, amire szükségünk van, egy gombmodul. Adjon hozzá egy tetszőleges példányt.

ragadós fejléc

Link hozzáadása

Ezután adjon hozzá egy linket.

ragadós fejléc

Gomb igazítás

Ezután lépjen a Tervezés lapra, és módosítsa a gombok igazítását.

  • Gombok igazítása: jobbra

ragadós fejléc

Gomb beállítások

A gombot is formázzuk.

  • Egyéni stílusok használata a gombhoz: Igen
  • Gomb szöveg mérete: 14 képpont
  • Gomb szöveg színe: #26333a
  • Gombszegély szélessége: 2 képpont
  • Gombszegély színe: #26333a
  • A gomb szegélyének sugara: 0 képpont

ragadós fejléc

  • A gombok betűköze: 4 képpont
  • Gomb betűsúlya: félkövér
  • Gomb betűstílusa: nagybetűk
  • Gomb megjelenítése: Igen

ragadós fejléc

Térköz

A modulbeállításokat pedig úgy végezzük, hogy néhány felső és alsó párnázást adunk a térközbeállításokhoz.

  • Felső kitöltés: 10 képpont
  • Alsó párnázás: 10 képpont

ragadós fejléc

2. szakasz hozzáadása

Színátmenetes háttér

Adjon hozzá egy másik szokásos részt közvetlenül az előző alá. Ez a rész az étlapunknak lesz szentelve, és az oktatóanyag második részében ragadóssá válik. A szakasz hozzáadása után alkalmazzon színátmenetes hátteret.

  • 1. szín: #ffffff
  • 2. szín: #f7f7f7
  • Gradiens típusa: Lineáris
  • Lejtési irány: 90 fok
  • Kiinduló pozíció: 25%
  • Végpozíció: 25%

ragadós fejléc

Térköz

Lépjen tovább a szakasz tervezési lapjára, és 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

ragadós fejléc

Ú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:

ragadós fejléc

Méretezés

Lépjen tovább a sor tervezési lapjára, és módosítsa a méretbeállításokat az alábbiak szerint:

  • Egyedi ereszcsatorna-szélesség használata: Igen
  • Ereszcsatorna szélessége: 1
  • Maximális szélesség: 2580 képpont

ragadós 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: 10 képpont
  • Alsó párnázás: 10 képpont

ragadós fejléc

Menümodul hozzáadása az oszlophoz

Válassza a Menü lehetőséget

Ezután adjon hozzá egy menümodult a sor oszlopához, és válasszon egy tetszőleges dinamikus menüt.

ragadós fejléc

Logó feltöltése

Ezután töltsön fel egy logót.

ragadós fejléc

Távolítsa el a háttérszínt

Ezután távolítsa el a modul alapértelmezett fehér háttérszínét.

ragadós fejléc

Menü Szöveg beállítások

Lépjen tovább a tervezés lapra, és stílusozza a menü szövegének beállításait is.

  • Menü Betűsúly: Félkövér
  • Menü szövegének színe: #002d4c
  • Menü szöveg mérete: 15 képpont
  • A menü betűköze: 4 képpont
  • Szöveg igazítása: jobbra

ragadós fejléc

Legördülő menü Szöveg beállításai

Ezután hajtson végre néhány módosítást a legördülő menü beállításain.

  • Legördülő menü háttérszíne: #ffffff
  • Legördülő menüsor színe: #002d4c

ragadós fejléc

Ikonok Beállítások

Az ikonok beállításaival együtt.

  • Bevásárlókosár ikon színe: #002d4c
  • Keresésikon színe: #002d4c
  • Hamburger menü ikon színe: #002d4c

ragadós fejléc

Méretezés

És fejezze be a modul beállításait úgy, hogy a méretbeállításokhoz adjon hozzá egy maximális logót.

  • Embléma maximális magassága: 60 képpont

ragadós fejléc

2. Alkalmazza az egyéni ragadós effektusokat

Turn Section #2 Sticky

Most, hogy elkészítettük fejlécünk elemstruktúráját, itt az ideje, hogy a második szakaszunkat ragacsossá tegyük, és ragacsos állapotban változtassuk meg annak és elemeinek tervezési stílusát. Nyissa meg a második szakasz beállításait, és lépjen tovább a Speciális lapra. Ott lépjen a görgetőeffektus-beállításokhoz, és alkalmazza a következő ragadós beállításokat:

  • Ragadó pozíció: Ragaszkodjon a tetejéhez
  • Ragadós felső eltolás: 0 képpont
  • Alsó ragadós határ: nincs
  • Eltolás a környező ragadós elemektől: Igen
  • Átmeneti alapértelmezett és ragadós stílusok: Igen

ragadós fejléc

Módosítsa a szakasz gradiens hátterét ragadós állapotban

Most, hogy a szakaszunk ragadóssá vált, egy további lehetőség jelenik meg a szakasz-, sor- és modulbeállításainkon belül; a ragadós opció. Ha erre az ikonra kattint, alternatív stílust hozhat létre a ragadós állapotban kiválasztott elemhez. Néhány ilyen ragadós tervezési beállítást kombinálunk, hogy testreszabhassuk a görgetéskor megjelenő ragadós fejlécünk megjelenését. Kezdje a második szakasz háttérbeállításaival, és alkalmazza a következő ragadós színátmenetes hátteret:

  • 1. szín: #26333a
  • 2. szín: #1e272f

ragadós fejléc

Stretch Row ragadós állapotban

Ezután megnyitjuk a Menü modult tartalmazó sort, és ragadós állapotban módosítjuk a szélességet.

  • Szélesség: 95%

ragadós fejléc

Távolítsa el a sorkitöltést ragadós állapotban

A sorunk felső és alsó párnázatát is eltávolítjuk.

  • Felső kitöltés: 0 képpont
  • Alsó kitöltés: 0 képpont

ragadós fejléc

Módosítsa a menü szövegének színét ragadós állapotban

Ezután a menü szövegének színét ragadós állapotban módosítjuk.

  • A menü szövegének színe: #ffbd68

ragadós fejléc

Módosítsa a menüikon színeit ragadós állapotban

Az ikon színeivel együtt.

  • Bevásárlókosár ikon színe: #ffffff
  • Keresésikon színe: #ffffff
  • Hamburger menü ikon színe: #ffffff

ragadós fejléc

Távolítsa el a logó magasságát ragadós állapotban

És végül, de nem utolsósorban a logó maximális magasságát nullára változtatjuk ragadós állapotban. Ez teljesen eltávolítja az emblémát a fejlécünkből, amint a szakasz ragadós beállításai engedélyezve vannak. Ez az! Győződjön meg róla, hogy a Divi Theme Builder összes módosítását elmentette, miután elkészült a fejléc kialakításával, és tekintse meg az előnézetet a webhelyén.

  • Logó maximális magassága: 0 képpont

ragadós 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

ragadós fejléc

Mobil

ragadós 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

n/a
Wordpress TutoriálokDiviRagadós fejléc létrehozása Divi ragadós beállításaival