O prezentare generală a tipurilor de antet Divi, tutoriale și cadouri gratuite

Publicat: 2020-11-20

De când a apărut Divi Theme Builder, modul în care creăm antetele Divi s-a schimbat pentru cel mai bun. Putem adăuga orice element dorim, îl stilizăm folosind opțiunile de design încorporate ale Divi și putem crea o experiență de reacție perfectă. În ultimele două luni, am urmărit modul în care vă putem ajuta să obțineți cele mai bune rezultate din designurile de antet prin tutoriale și cadouri. La un moment dat, navigarea prin toate aceste tipuri de antet, tutoriale și cadouri gratuite poate deveni puțin confuză, de aceea am creat această postare la care puteți reveni oricând. Această postare va conține diferitele tipuri de antet pe care le puteți crea, care includ și un fișier de descărcare gratuită. Pe lângă descărcarea gratuită, primiți un tutorial pas cu pas care vă ajută să înțelegeți ce creați și cum puteți modifica lucrurile pentru a se potrivi propriilor dvs. nevoi.

A doua parte a acestui post se concentrează pe câteva sfaturi și trucuri care au fost adesea întrebat în comunitatea Divi, vă arătăm cum să rezolvați o anumită problemă sau să realizați un design fără a fi nevoie să pierdeți timp încercând să vă dați seama singur. Nu în ultimul rând, am enumerat toate cadourile gratuite pe care le puteți descărca și utiliza imediat.

Descoperiți tipurile de antet
Descoperiți sfaturi și trucuri pentru antet
Descoperiți Freebies antet

Tipuri de antet

1. Antet regulat

tutoriale antet divi

Primul tutorial de tip antet care a apărut pe blog la lansarea Divi Theme Builder este un antet obișnuit. Acest tutorial se concentrează pe familiarizarea cu mediul Divi Theme Builder și construirea unui antet global. Am inclus o bară de sus cu un logo, pictograme de urmărire socială și un buton. Bara de navigare prezintă în mod dinamic elementele de meniu care pot fi configurate în backend-ul site-ului dvs. WordPress.

Accesați Tutorial

2. Antet lipicios

tutoriale antet divi

Dacă doriți să configurați și un antet care să fie lipicios, veți dori să vă familiarizați cu această postare. Pe lângă faptul că vă arată cum să configurați o structură adecvată a antetului, inclusiv bara superioară, tutorialul vă arată cum să vă întoarceți și antetul lipicios, folosind opțiunile lipicioase încorporate ale Divi. Stilurile elementelor din antet se schimbă și pe scroll, ceea ce conferă antetului un aspect complet nou.

Accesați Tutorial

3. Antet pe ecran complet

tutoriale antet divi

O bară de antet de sus nu este singura modalitate de a permite navigarea pe site-ul dvs. web, desigur, așa că în continuare avem un antet cu ecran complet. În acest tutorial, vă arătăm cum să creați un întreg antet personalizat cu ecran complet cu Divi. Toate elementele din meniul dvs. sunt module și funcția de clic este activată de un cod JQuery care este inclus în tutorial și fișierul de descărcare. Câteva cadouri gratuite care utilizează această abordare similară sunt:

  1. Șablon șablon antet și subsol firmă PR
  2. Șablon antet și subsol restaurant italian
  3. Șablon Freerance Writer Header & Footer
  4. Șablon antet și subsol consilier financiar

Accesați Tutorial

4. Antet glisant

tutoriale antet divi

În continuare, avem un antet care alunecă din partea dreaptă. Și acest tutorial se bazează pe elementele încorporate ale Divi. Puteți plasa orice doriți în meniul dvs. slide-in și puteți crea un mediu complet receptiv cu opțiuni receptive. Funcția de clic și-a luat forma printr-un cod JQuery personalizat care este inclus în tutorial, precum și prin fișierul JSON șablon freebie.

Accesați Tutorial

5. Glisați în jos Push Header

tutoriale antet divi

Un alt tip de antet interesant din lista noastră este un antet cu glisare în jos. Când se face clic pe pictograma hamburger, antetul glisează în jos din partea de sus și împinge conținutul paginii în jos. Acest lucru oferă un efect distractiv și frumos pe toate dimensiunile ecranului.

Accesați Tutorial

6. Navigare verticală

tutoriale antet divi

Un alt mod de a oferi vizitatorilor o navigație fără efort este prin utilizarea unei bare de navigare verticale. Dacă sunteți în căutarea unei modalități de a face acest lucru în Divi Theme Builder, asigurați-vă că verificați acest tutorial. Navigarea verticală ocupă propriul său spațiu în interiorul browserului, care restrânge lățimea conținutului paginii și creează o frumoasă structură a paginii.

Accesați Tutorial

7. Antet plutitor transparent

tutoriale antet divi

Dacă doriți să adăugați un antet în partea de sus a paginii sau să postați conținut, acest tutorial este făcut pentru dvs.! Folosim un antet transparent cu trei elemente diferite; o siglă, un meniu și un buton. Aceste trei elemente sunt plasate deasupra conținutului paginii printr-o poziție CSS absolută. Rezultatul este foarte receptiv și oferă un rezultat coeziv frumos pe site-ul dvs. web.

Accesați Tutorial

8. antet lipicios transparent

tutoriale antet divi

Acest tutorial este ușor similar cu cel anterior, cu o diferență mare; de îndată ce vizitatorii derulează pagina sau postează în jos, bara de navigare devine lipicioasă și schimbă stilurile. Acest lucru vă permite să profitați la maximum de designul secțiunii erou din partea de sus a paginii, menținând în același timp o navigare fără efort în timp ce vizitatorii derulează în jos.

Accesați Tutorial

9. Antet rotit

tutoriale antet divi

Dacă sunteți în căutarea unui design mai ușor de utilizat pentru site-ul dvs. web, vă recomandăm să alegeți un antet transparent rotit. Acest tip de antet este plasat pe partea laterală a site-ului dvs. web și vă urmărește vizitatorii pe parcursul vizitei pe paginile dvs. Oferă un aspect mai sofisticat designului desktopului, păstrând în același timp experiența fără efort a barei superioare pe dimensiuni mai mici de ecran.

Accesați Tutorial

10. Meniul drop-down personalizat pentru comerț electronic

tutoriale antet divi

Cu cât site-ul dvs. web devine mai mare, cu atât este mai greu să găsiți o modalitate bună de a lista toate paginile de pe site-ul dvs. web. Acolo sunt utile mega meniurile. Deși puteți reveni oricând la mega meniul încorporat al Divi, dacă sunteți în căutarea unui mediu mai încorporat Divi în care să adăugați câte module doriți, acesta este tutorialul pentru dvs. Mai ales pentru site-urile de comerț electronic, poate fi util să prezinți diferite categorii de produse într-un mod atractiv și extrem de vizual. Deși acest tutorial este un tip de resursă mai „avansat”, baza de coduri a fost stabilită pentru dvs., ceea ce vă permite să obțineți cât de creativ doriți cu designul. Asigurați-vă că, chiar și atunci când utilizați fișierul șablon JSON pentru acest tutorial, parcurgeți câțiva pași care sunt necesari pentru a da viață acestui mega meniu.

Accesați Tutorial

11. Meniul derulant al temelor elegante personalizate

tutoriale antet divi

De când a apărut Divi Theme Builder, oamenii se întrebau cum să creeze meniurile derulante de navigare fără probleme ale Elegant Themes. Acest tutorial se concentrează pe a vă arăta exact cum să reproduceți meniul drop-down Elegant Themes din Divi Theme Builder. Cu atât mai mult, vă permite să adăugați orice fel de module doriți și să creați propria dvs. variantă unică a meniului.

Accesați Tutorial

Sfaturi si trucuri

În această parte a postării de prezentare generală, împărtășim diferitele sfaturi și trucuri într-un formular de tutorial. Fiecare dintre aceste postări include o experiență de la A la Z. Aceasta înseamnă că nu vă arătăm doar cum să realizați trucul, ci vă ghidăm și pe parcursul întregului proces de construire a antetului, care vă oferă alegerea; vrei să folosești întregul design în scopuri proprii sau să te concentrezi doar pe acel sfat și truc specific.

1. Revelarea și ascunderea antetului pe derulare

tutoriale antet divi

Accesați Tutorial

2. Meniu imbricat de prăbușire mobilă

tutoriale antet divi

Accesați Tutorial

3. Animarea antetului global

tutoriale antet divi

Accesați Tutorial

4. Adăugarea unui formular de conectare în linie la antetul dvs.

tutoriale antet divi

Accesați Tutorial

5. Adăugarea a două butoane side-by-side la antetul dvs.

tutoriale antet divi

Accesați Tutorial

6. Plasarea automată a antetului sub prima secțiune a fiecărei pagini

tutoriale antet divi

Accesați Tutorial

7. Adăugarea unui formular de contact dropdown în antetul dvs.

tutoriale antet divi

Accesați Tutorial

8. Schimbarea antetului pe derulare

tutoriale antet divi

Accesați Tutorial

9. Optimizarea modulului de meniu Divi cu 5 presetări globale

tutoriale antet divi

Accesați Tutorial

10. Adăugarea etichetelor de colț la elementele de meniu din interiorul antetului

tutoriale antet divi

Accesați Tutorial

11. Adăugarea și animarea siglei dvs. SVG în interiorul antetului

tutoriale antet divi

Accesați Tutorial

12. Îmbinarea antetului și a paginilor cu divizoarele de secțiuni Divi

tutoriale antet divi

Accesați Tutorial

13. Adăugarea unui titlu și a unui slogan dinamic la antet

tutoriale antet divi

Accesați Tutorial

14. Optimizarea siglei site-ului dvs. Divi cu presetări globale

tutoriale antet divi

Accesați Tutorial

15. Adăugarea unei bare audio fixe „Ultimul episod” în antetul dvs.

tutoriale antet divi

Accesați Tutorial

16. Adăugarea animațiilor cu butoane întârziate la antetul CTA

tutoriale antet divi

Accesați Tutorial

17. Schimbarea siglei lipicioase pe scroll

tutoriale antet divi

Accesați Tutorial

Gratuit antet

Nu în ultimul rând, listăm, de asemenea, diferitele cadouri gratuite de antet pe blogul Elegant Themes. Inițiativa de proiectare a antetului freebie a început cu primele pachete de generatoare de teme pe care le-am împărtășit în decembrie 2019, dar nu acolo se oprește. Am distribuit în mod continuu și vom continua să împărtășim cadouri gratuite de antet și subsol care se potrivesc pachetelor de layout Divi. Deși stilul se bazează în cea mai mare parte pe pachetul de aspect în cauză, acestea pot fi utilizate cu ușurință și pentru alte site-uri web.

1. Teme Builder Packs

Tema Builder Pack # 1

tutoriale antet divi

Accesați Tutorial

Tema Builder Pack # 2

tutoriale antet divi

Accesați Tutorial

Tema Builder Pack # 3

tutoriale antet divi

Accesați Tutorial

Tema Builder Pack # 4

tutoriale antet divi

Accesați Tutorial

Tema Builder Pack # 5

tutoriale antet divi

Accesați Tutorial

Tema Builder Pack # 6

tutoriale antet divi

Accesați Tutorial

2. Gratuit pentru antet și subsol pentru pachetul de machete

Pachet de amenajare a restaurantului italian

Accesați Tutorial

Pachetul de Asistență Virtuală

Accesați Tutorial

Pachet de amenajare a spațiului de lucru

Accesați Tutorial

Pachetul de aspect pentru curățarea geamurilor

Accesați Tutorial

Pachet de amenajare a tarotului

Accesați Tutorial

Pachetul de aspect pictor

tutoriale antet divi

Accesați Tutorial

Pachet de amenajare a aprovizionării pentru animale de companie

Accesați Tutorial

Pachet de machetare a produselor de frumusețe

Accesați Tutorial

Pachet de amenajare a școlii de gătit

Accesați Tutorial

Pachet de amenajare a parfumurilor

Accesați Tutorial

Pachet de amenajare a restaurantelor sushi

Accesați Tutorial

Pachet de amenajare pe bază de plante

Accesați Tutorial

Renovation Layout Pack

Accesați Tutorial

Pachet de machetare robotică

Accesați Tutorial

Pachet de amenajare a vindecătorului holistic

Accesați Tutorial

Pachet de amenajare a magazinului de mirodenii

Accesați Tutorial

Pachetul de amenajare a tapițeriei

Accesați Tutorial

PR Firm Layout Pack

Accesați Tutorial

Pachet de amenajare a antrenorului de fitness

Accesați Tutorial

Pachet de machete pentru fotografii de nuntă

Accesați Tutorial

Pachet de amenajare dietetician

Accesați Tutorial

Pachet de machetare freelance Writer

Accesați Tutorial

Pachet de machete pentru interpret

Accesați Tutorial

Pachetul de aspect al consilierului financiar

Accesați Tutorial

Pachet de amenajare a salonului de unghii

Accesați Tutorial

Influencer Layout Pack

Accesați Tutorial

Pachet de machetare pentru compania de piele

Accesați Tutorial

Acupuncture Layout Pack

tutoriale antet divi

Accesați Tutorial

3. Altele

Combo minim antet și subsol

Accesați Tutorial

Căutarea de noi antete pe blogul nostru

Lansăm în mod regulat noi cadouri gratuite și tutoriale pe blogul nostru. Vom continua să actualizăm această postare de-a lungul timpului, dar dacă doriți să rămâneți la curent cu lucrurile noi, nu ezitați să căutați în bara de căutare a blogului folosind cuvinte cheie precum „antet” și „meniu”!

Gânduri finale

În această postare, am oferit o prezentare clară a tipurilor de antet Divi, tutoriale și cadouri gratuite pe care le puteți găsi pe blogul nostru! Sperăm că această postare vă va ajuta să stabiliți fundația antetului înainte de a începe un nou proiect. Puteți decide tipul de antet pe care doriți să îl creați, accesați postarea de pe blog care vă arată cum să o faceți sau descărcați fișierul JSON pentru a avea totul gata de utilizare! Am împărtășit câteva sfaturi și trucuri de aplicat și la antetul dvs., care, sperăm, vă vor ajuta să rezolvați rapid problemele și să vă concentrați asupra a ceea ce este cu adevărat important: să aveți în vedere un site web echilibrat. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.