Becsúsztatható fejléc létrehozása Divi-vel.

Written by redzs

2022.04.17.

Kategóriák

Hogyan hozzunk létre érzékeny becsúsztatható menüt a Divi Theme Builder segítségével
Amikor létrehoz egy webhelyet saját ügyfelének, azon kell gondolkodnia, hogy milyen típusú fejlécet készítsen. Az interneten a leggyakrabban használt vízszintes menüsor a tetején, de vannak más lehetőségek is, például egy becsúsztatható menü. A becsúsztatható menük segítenek korlátozni a globális fejléc által elfoglalt helyet. Ahelyett, hogy azonnal megmutatná az összes menüelemet, becsúsztatható menü jelenik meg, amikor a látogatók a jobb felső sarokban lévő hamburger ikonra kattintanak. A becsúsztatható menü segítségével további interakciókat adhat webhelyéhez.A Divi mai használati útmutatójában megmutatjuk, hogyan hozhat létre egyet a Divi Theme Builder, a beépített Divi elemek és néhány további kód segítségével. Ennek a becsúsztatható menünek a kialakítása tökéletesen illeszkedik a Yoga Instructor Layout Pack – hez, de szabadon módosíthatja, hogy illeszkedjen az Ön által készített webhelyekhez. Ingyenesen letöltheti a JSON fájlt is!

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

becsúsztatható menü

Mobil

becsúsztatható menü

Töltse le INGYEN az érzékeny becsúsztatható menü globális fejléc sablonját

Az ingyenes becsúsztatható menü globális fejlécesablonjának 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. 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 azzal, hogy nyissa meg a Divi Theme Buildert a WordPress webhelyének hátterében, és kattintson a „Globális fejléc hozzáadása” gombra.

becsúsztatható menü

Kezdje el a globális fejléc építését

Folytassa a „Globális fejléc készítése” kiválasztásával.

becsúsztatható menü

2. Hozzon létre fejléctervet

szakasz beállításai

Háttérszín

Ha belép a sablonszerkesztőbe, észrevesz egy részt. Nyissa meg ezt a részt, és tegye átlátszóvá a háttérszínt.

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

becsúsztatható menü

Térköz

Lépjen a Tervezés lapra, é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

becsúsztatható menü

Pozíció

Ezután a Speciális fülre lépve és a pozícióbeállítások módosításával javítjuk a szakaszt.

  • Pozíció: Fix
  • Helyszín: Top Center

becsúsztatható menü

1. sor hozzáadása

Oszlop szerkezete

Miután elvégezte a szakaszbeállításokat, adjon hozzá egy új sort a következő oszlopstruktúra használatával:

becsúsztatható menü

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:

  • Szélesség: 97%
  • Max szélesség: 100%

becsúsztatható menü

Térköz

Ezután módosítsa a térköz beállításait.

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

becsúsztatható menü

Fő elem

Ezután lépjen a Speciális lapra, és adjon hozzá két sor CSS-kódot a sor fő eleméhez. Ez segít függőlegesen igazítani az oszlop tartalmát a sorunkban.

01
02
display: flex;
align-items: center;

becsúsztatható menü

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

Logó feltöltése

Ideje modulokat hozzáadni, kezdve az 1. oszlopban található képmodullal. Töltse fel logóját.

becsúsztatható menü

Szövegmodul hozzáadása a 3. oszlophoz

Adjon hozzá 3 feszítést a tartalomdobozhoz

Ezután lépjen a harmadik oszlopra, és adjon hozzá egy szövegmodult. A Szöveg modul szöveg lapját használjuk három HTML-szakasz hozzáadásához, amelyekhez egyéni osztályok vannak hozzárendelve. Az oktatóanyag későbbi részében ezeket a szakaszokat felhasználjuk interaktív hamburger ikonunk létrehozásához.

01
02
03
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

becsúsztatható menü

Háttérszín

Ezután módosítsa a modul háttérszínét.

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

becsúsztatható menü

Szöveg beállítások

Ezután lépjen a Tervezés lapra, és távolítsa el a szövegsor magasságát. Ez segít nekünk teljes ellenőrzést gyakorolni a hozzáadott tartományok felett.

  • Szöveg sor magassága: 0 em

becsúsztatható menü

Méretezés

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

  • Szélesség: 120 képpont
  • Modul igazítás: jobbra

becsúsztatható menü

Térköz

A modul beállításait pedig úgy fejezzük be, hogy a modult négyzet alakúvá alakítjuk a térközbeállítások egyéni kitöltési értékeivel.

  • Felső kitöltés: 40 képpont
  • Alsó párnázás: 60 képpont
  • Bal oldali kitöltés: 40 képpont
  • Jobb oldali kitöltés: 40 képpont

becsúsztatható menü

2. sor hozzáadása

Oszlop szerkezete

Tovább a következő sorba! Ezt a sort fogjuk használni a teljes becsúsztatható menü megtervezéséhez. Használja a következő oszlopszerkezetet:

becsúsztatható menü

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 az alábbiak szerint:

  • Háttérszín: #e7e0e2

becsúsztatható menü

Háttérkép

Mintás háttérképet is használunk. Az általunk használt képet abban a letöltési mappában találhatja meg, amelyet az oktatóanyag elején letölthetett, de nyugodtan használhat bármilyen más, választott háttérmintát.

  • Háttérkép mérete: Valós méret
  • Háttérkép helyzete: Középen
  • Háttérkép Ismétlés: Ismétlés

becsúsztatható menü

Méretezés

Ezután lépjen a Tervezés lapra, és ennek megfelelően módosítsa a méretbeállításokat:

  • Egyedi ereszcsatorna-szélesség használata: Igen
  • Ereszcsatorna szélessége: 1
  • Szélesség: 20% (asztali számítógép), 40% (táblagép), 60% (telefon)
  • Magasság: 100vh

becsúsztatható menü

Térköz

Módosítsa a térközbeállításokat a különböző képernyőméreteknél is.

  • Felső párnázás: 10vw (asztali), 30vw (táblagép), 40vw (telefon)

becsúsztatható menü

Határ

És fejezze be a sorbeállításokat egy bal oldali szegély hozzáadásával.

  • Bal oldali szegély szélessége: 10 képpont
  • Bal oldali szegély színe: #24394a
  • Bal szegély stílusa: Dupla

becsúsztatható menü

Szövegmodul hozzáadása az oszlophoz

Tartalom hozzáadása elemre

Ideje hozzáadni az első Szöveg modul menüpontot! Adja hozzá a másolatot a tartalommezőhöz.

becsúsztatható menü

Link hozzáadása

Folytassa a megfelelő hivatkozás hozzáadásával a menüponthoz.

  • Modullink URL-je: #

becsúsztatható menü

Háttérszín

Ezután módosítsa a háttérszínt.

  • Háttérszín: rgba(216,210,212,0,35)

becsúsztatható menü

Szöveg beállítások

Ezután lépjen a Tervezés lapra, és módosítsa a szövegbeállításokat az alábbiak szerint:

  • Szöveg betűtípusa: Domine
  • Szöveg betűmérete: félkövér
  • Szöveg színe: #000000
  • Szövegméret: 1vw (asztali), 2vw (táblagép), 3vw (telefon)
  • Szöveg igazítása: középre

becsúsztatható menü

Térköz

Fejezze be a modul beállításait úgy, hogy adjon hozzá egyéni távolságértékeket a különböző képernyőméretekhez.

  • Alsó margó: 1vw (asztali számítógép), 2vw (táblagép), 3vw (telefon)
  • Felső párnázás: 1vw
  • Alsó párnázás: 1vw

becsúsztatható menü

Szövegmodul klónozása (menüpontonként 1 modul)

Ha elkészült az első Szöveg modul menüponttal, annyiszor klónozhatja, ahányszor szükséges. Csak ügyeljen arra, hogy a modulok ne lépjék túl a nézetablak magasságát.

becsúsztatható menü

Az ismétlődő szövegmodulok tartalmának és hivatkozásainak módosítása

Módosítsa az egyes ismétlődő szövegmodulok tartalmát és hivatkozásait.

becsúsztatható menü

becsúsztatható menü

Gombmodul hozzáadása az oszlophoz

Másolás hozzáadása

Az utolsó modul, amire szükségünk van ebben a sorban, egy gombmodul. Adjon hozzá egy tetszőleges példányt.

becsúsztatható menü

Link hozzáadása

Adj hozzá linket is.

  • Gomblink URL-je: #

becsúsztatható menü

Igazítás

Lépjen tovább a tervezés fülre, és módosítsa a gombok igazítását.

  • Gombigazítás: Középen

becsúsztatható menü

Gomb beállítások

Folytassa a gombmodul stílusának kialakításával a következőképpen:

  • Egyéni stílusok használata a gombhoz: Igen
  • Gombszöveg mérete: 0.7vw (asztali számítógép), 1.5vw (táblagép), 2.5vw (telefon)
  • Gomb szöveg színe: #000000
  • Gomb háttérszíne: rgba(0,0,0,0)
  • Gombszegély színe: #24394a
  • A gomb szegélyének sugara: 0 képpont
  • A gombok betűköze: 4 képpont

becsúsztatható menü

  • Gomb betűtípusa: Open Sans
  • Gomb betűsúlya: félkövér
  • Gomb betűstílusa: nagybetűk

becsúsztatható menü

Térköz

Végezze el a modul beállításait egyéni térközértékek hozzáadásával a különböző képernyőméretekhez.

  • Felső margó: 5vw
  • Felső párnázás: 1vw (asztali), 2vw (táblagép), 3vw (telefon)
  • Alsó párnázás: 1vw (asztali), 2vw (táblagép), 3vw (telefon)
  • Bal oldali kitöltés: 1.8vw (asztali), 3vw (táblagép), 4vw (telefon)
  • Jobb oldali kitöltés: 1.8vw (asztali), 3vw (táblagép), 4vw (telefon)

becsúsztatható menü

3. Adja hozzá a becsúsztatható funkciót

Adja hozzá a CSS-azonosítót a menüikonszöveg-modulhoz

Most, hogy minden elem a helyén van, ideje létrehozni a reszponzív becsúsztatható menü effektust! Először nyissa meg a Szövegmodult (amely tartalmazza az íveket) az első sor harmadik oszlopában, és használjon egyéni CSS-azonosítót a Speciális lapon. Ezt a CSS-azonosítót használjuk egy kattintási funkció létrehozásához a kódunkban.

  • CSS ID: becsúsztatható

becsúsztatható menü

Adja hozzá a CSS-osztályt a 2. sorhoz

Ezután nyissa meg a második sort, lépjen a Speciális lapra, és adjon hozzá egy egyéni CSS-osztályt. Kattintásra engedélyezzük a sor becsúszását.

  • CSS osztály: becsúsztatható menü-tároló

becsúsztatható menü

Módosítsa a 2. sor elhelyezését

Ezt a sort is áthelyezzük. Figyelje meg, hogy a vízszintes eltolás hogyan illeszkedik a sor szélességéhez a különböző képernyőméreteknél a méretbeállításoknál.

  • Pozíció: Abszolút
  • Helyszín: Jobbra fent
  • Vízszintes eltolás: -20% (asztali számítógép), -40% (táblagép), -60% (telefon)

becsúsztatható menü

Módosítsa a 2. sor átlátszatlanságát

És állítsa az átlátszatlanságot 0-ra alapértelmezett állapotban.

01
opacity: 0;

becsúsztatható menü

Adja hozzá a kódmodult az első sor második oszlopához

CSS kód beszúrása

A kattintási funkció effektusának létrehozásához és a hamburger ikon hosszának stílusához szükségünk lesz néhány CSS-kódra. Adjon hozzá egy kódmodult az első sor második oszlopához, és helyezze el a következő CSS-kódsorokat 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
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2 {
display: none;
}
#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}
.slide-in-menu-container {
-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;
}

becsúsztatható menü

Helyezze be a JQuery kódot

A kattintás funkcióhoz is hozzá kell adnunk néhány JQuery-t. Ügyeljen arra, hogy a kódot a szkriptcímkék közé helyezze, amint azt az alábbi nyomtatási képernyőn láthatja:

01
02
03
04
05
06
jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

becsúsztatható menü

4. Mentse a Theme Builder módosításait és tekintse meg az eredményt a webhelyen

Miután kitöltötte a globális fejléc összes elemét, már csak az összes változtatást kell mentenie, és megtekintheti az eredményt a webhelyén!

becsúsztatható menü

becsúsztatható menü

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

becsúsztatható menü

Mobil

becsúsztatható menü

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álokDiviBecsúsztatható fejléc létrehozása Divi-vel.