Divi: Hogyan használjuk a Fullwidth Header modult Hero szakasz létrehozásához

Szeretne Hero Divi szekciót létrehozni a Fullwidth Header modullal, vagy saját maga tervezne egyet?

Építs egy hős részt weboldal a semmiből vagy a Divi Fullwidth Header modul használatával kétféleképpen hozhat létre szemet gyönyörködtető dizájnt. weboldal. 

Ebben a cikkben megvizsgáljuk a Fullwidth Header modul használatának előnyeit és hátrányait, szemben a saját hős rész létrehozásával a Divi segítségével.

Menjünk!

A Website Hero szakaszok jelentősége

A Hero szakasz a legelső szakasz, amelyet az Ön számára Látogatók nézze meg, mikor érkeznek a tiédre weboldal. Ez gyakran egy teljes szélességű szalaghirdetés, és hősfejlécnek is nevezhető. Kiemelkedő hely a webhelyén, mert képes maradandó első benyomást hagyni.

Olvassa el: Divi: A Fullwidth Header modul teljes képernyős megjelenítése

Ezért fontos, hogy úgy legyen megtervezve, hogy könnyen olvasható legyen, ugyanakkor figyelemfelkeltő és lenyűgöző legyen. A Website Hero szakaszok azért fontosak, mert felkeltik a potenciális ügyfelek figyelmét, gyorsan leírhatják az oldalt, és további elköteleződéshez és potenciális leadekhez vezethetnek. A Hero szakaszokat márkajelzéssel kell ellátni, tartalmazniuk kell egy H1 címet és CTA-t.

Hozzon létre egy Hero részt a semmiből

A Hero szakasz megtervezése a semmiből lehetővé teszi a teljes ellenőrzést a tervezés és a tartalom. Helyzetétől és igényeitől függően ez nagyszerű megoldás lehet webhelye számára. 

Nézzük meg ennek a megközelítésnek az előnyeit és hátrányait.

Ennek a megközelítésnek az előnyei

Először is nézzük meg, milyen előnyökkel jár a weboldal Hero szakaszának a semmiből történő felépítése a Divi használatával.

• Teljes tervezési ellenőrzés
• Használjon bármilyen Divi modult

Ennek a megközelítésnek a hátrányai

Most nézzük meg a hősszekció létrehozásának árnyoldalait a semmiből.

• A semmiből kell építeni
• Több modot igényel

Hozzon létre egy Hero szakaszt a Divi Fullwidth Header modullal

A Divi Fullwidth Header modul segítségével hősszakasz létrehozása megkönnyíti a szemet gyönyörködtető, mobilra érzékeny dizájn létrehozását percek alatt. 

Nézzük meg ennek a megközelítésnek az előnyeit és hátrányait.

Ennek a megközelítésnek az előnyei

Vessünk egy pillantást a Hero szakasz felépítésének előnyeire a Divi Fullwidth Header modullal.

• Mind a tied tartalom egyetlen modulban található
• A tervezés már optimalizálva

Ennek a megközelítésnek a hátrányai

Most pedig értékeljük a Hero szakasz tervezésének hátrányait a Divi Fullwidth Header modullal.

• Kevesebb rugalmasság a tervezéssel

A Divi Fullwidth Header modul a következő opciókkal rendelkezik tartalom előre meghatározott, míg sok korlátozható, ha olyan tartalmat szeretne hozzáadni, amely nem érhető el a modulban. Ez azt jelenti, hogy kevésbé lesz rugalmas az általános kialakításban.

A két hős rész felépítése lépésről lépésre

Most, hogy megértette mindkét megközelítés előnyeit és hátrányait, építsük fel az egyes Hero szakaszokat, hogy pontosan láthassa az egyes megközelítések működését.

Hozzon létre egy új oldalt a Divi Builder segítségével

A kezdéshez a következőket kell tennie:

1. Telepítse a Divi-t  a WordPress webhelyén.
2. Adjon hozzá egy oldalt, és adjon neki címet.
3. Vizuális építő engedélyezése

Hozd létre a Hero szakaszt a semmiből

Most, hogy az oldalunk elkészült, kezdjük el a hősszekció létrehozását a nulláról.

Töltse le a DIVI-t most!!!

A "Divi Builder" aktiválása

A Divi drag and drop építőjének használatához aktiválnunk kell a Visual Buildert a gombra kattintva „A DiviBuilder használata”. Ezzel újra betölti az oldalt a Divi Visual Builder segítségével.

Válasszon: Építsen a semmiből

Most, hogy az oldal újratöltötte a vizuális építőt, kattintson az opciókra " ÉPÍTHETŐ A KÁRPOZÁSBÓL hogy legyen egy üres oldalunk a tervezéskor.

Sorok hozzáadása és oszlopok konfigurálása

Hozzon létre egy sort a következő oszlopszerkezettel.

Adjon hozzá modokat

Most adjuk hozzá a szükséges tartalmi modulokat.

• 2 Szövegmodul, elválasztó, egy gomb a bal oszlopban
• 1 Képmodul a középső oszlopban
• 1 Képmodul a jobb oldali oszlopban

Stílus szakasz

Most konfiguráljuk a szakasz beállításait.

Adjon hozzá egy szakaszt, majd adja meg a következő beállításokat:

• Háttér: #1d1d25

Fejléc szövegstílusa

A fejléc szövegének testreszabása:

• 1. címsor:
  • Betűsúly: félkövér
  • Szöveg színe: #ffffff
  • Szöveg mérete: 90 képpont
  • Vonalmagasság: 1,1 em

szétválasztó

Konfigurálja az elválasztó beállításait:

• Vonal színe: rgba (255,255,255,0.3)
• Elválasztó súlya: 10 képpont
• Maximális szélesség: 260 képpont

törzsszöveg

Törzsszöveg testreszabása:

• Szöveg színe: rgba(255,255,255,0.7)
• Szöveg mérete: 13 képpont
• Vonalmagasság: 1,8 em

gomb

Most szabjuk testre a gombot.

A Gomb lapon:

• Egyéni stílusok használata a gombhoz: Igen
• Gomb szöveg mérete: 14 képpont
• Szöveg színe: #ffffff
• Gomb háttér:
• Szegély szélessége: 0 képpont
• Szegély sugara: 0 képpont

A Térköz lapon:

• Felül és alul: 40 képpont
• Bal és jobb: 20 képpont

Képek hozzáadása

Adja hozzá a képeket a képmodulokhoz.

Módosítsa a vonalbeállításokat

Soron belüli paraméterek:

• Margó (bal): 15 VW

Állítsa be a 2. oszlopot

A második oszlopban adja meg a következő beállításokat:

Egyéni CSS

Illessze be a következő kódot a fő elem kódrészébe:

argin-right: -15vw!important;
z-index: 100!important;

térköz

Adjon hozzá 100 pixeles felső párnázást.

Így ! Most már van egy teljesen megtervezett egyéni hős részleged.

Töltse le a DIVI-t most!!!

Hozd létre a Hero szakaszt a Divi Fullwidth Header moduljával

Most pedig nézzük meg, hogyan lehet újra létrehozni ezt a Hero részt a Divi Fullwidth Header moduljával.

Töltse le a DIVI-t most!!!

Adjon hozzá egy oldalt, és válassza a Build From Scratch lehetőséget

Adjon hozzá egy új oldalt, adjon neki címet, majd kattintson a „Divi Builder használata”, majd válassza a Build From Scratch lehetőséget.

Szúrjon be egy teljes szélességű szakaszt és egy teljes szélességű fejlécet

Szakasz beszúrása Teljes szélesség, majd válassza a lehetőséget Teljes szélességű fejléc a modulkönyvtárban.

Tartalom

Adja hozzá a szöveges tartalmat a modulhoz a Szöveg lapon.

képek

Adja hozzá a képeket a Kép laphoz.

Háttérszín módosítása

A háttér lapon konfigurálja a következő beállításokat:

• Háttér: #1D1D25

Fejléc

Állítsa be a fejléc szövegének beállításait:

• Cím Betűsúly: Félkövér
• Szöveg mérete: 90 képpont

törzsszöveg

A törzsszöveg beállításainak konfigurálása:

• Törzsszöveg színe: rgba(255,255,255,0.55)

Felirat szövege

Adja meg a felirat szövegének beállításait:

• A felirat betűtípusának súlya: félkövér
• Szöveg színe: #4C594C
• Betűtávolság: 3 képpont

gombok

Most szabjuk testre a két gombot.

az egyik gomb

A Button One lapon adja meg a következő beállításokat:

• Egyéni stílusok használata az XNUMX. gombhoz: Igen
• Első gomb
  • Háttér: #4c594c
  • Szegély szélessége: 0 képpont
  • Szegély sugara: 0 képpont
  • Ikon megjelenítése: IGEN
  • Csak az ikon megjelenítése lebegve: Nem
  • Kitöltés: 25 pixel (felső és alsó); 25 képpont (bal), 50 képpont (jobb)

Második gomb

A Második gomb lapon adja meg a következő beállításokat:

• Egyéni stílusok használata a második gombhoz: IGEN
• Két gomb szegély szélessége: 0 pixel
• Szegély sugara: 0 képpont
• Kitöltés: 25 képpont (fent, lent, bal és jobb)
• Gombdoboz árnyéka: Válassza a 4-et
• Box Shadow vízszintes helyzete: 0 képpont
• Doboz árnyék függőleges helyzete: 2 képpont
• Árnyék színe: #ffffff

Így ! Most már van egy teljesen megtervezett Hero szakasz a Divi Fullwidth Header modul segítségével.

Lásd még: Divi: Hogyan hozzunk létre háttérátmeneteket az elemek között

Töltse le a DIVI-t most!!!

Következtetés

A Divi segítségével a Hero szakasz felépítése egyszerű, akár a semmiből építkezel, akár a Fullwidth Header modult használod. Mindkét lehetőség lehetővé teszi, hogy lenyűgöző fejlécterveket készítsen, amelyek felkeltik érdeklődését Látogatók. 

Egyedi szükségleteitől függően bármelyik opciót érdemes figyelembe venni a Hero szakasz stílusának kialakításakor. 

Miután elolvasta mindkettő előnyeit és hátrányait, hogyan tervezné meg a Hero szekciót?

Reméljük, hogy ez az oktatóanyag inspirációt ad a következő Divi projektjeihez. Ha bármilyen aggálya vagy javaslata van, keressen minket a megjegyzések szakasz hogy megbeszéljük.

Konzultálhat is forrásaink, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához.

Ne habozzon, tekintse meg útmutatónkat is a WordPress blog létrehozása vagy az egyiket Divi: minden idők legjobb WordPress témája.

De időközben ossza meg ezt a cikket a különböző közösségi hálózatokon.

...