O prezentare generală și examinați pachetul de aspect antet de Divi Life

Pachetul de aspect antet de la Divi Life este un set de anteturi pentru Divi Theme Builder care poate fi conceput pentru a se potrivi bine oricărui site web Divi. Anteturile se remarcă din mulțime, cu un stil nou adăugat cu cod. Pachetul de aspect include șase modele de antet cu trei stiluri pentru fiecare. În acest articol, vom analiza pachetul de aspect antet pentru a vă ajuta să decideți dacă se potrivește nevoilor dvs.

Importul pachetului de aspect al antetului Divi Life

Înainte de a utiliza aspectele cu Divi Theme Builder, va trebui să le importați în biblioteca Divi. Din fericire, acesta este un proces simplu și direct:

1. Descărcați și dezarhivați aspectele într-un folder de pe computer.
2. Accesați Divi > Biblioteca Divi din meniul tabloului de bord WordPress.
3. Selectați Import & Export în partea de sus a ecranului.
4. Selectați Import în fereastra pop-up, selectați Alegeți fișierul și navigați la aspectul pe care doriți să îl încărcați (selectați ALL-Divi-Life-Header-Templates dacă doriți să le încărcați simultan.
5. Faceți clic pe Importați schemele Divi Builder și așteptați finalizarea încărcării.

Aspectele vor fi acum disponibile în biblioteca dvs. În exemplul de mai sus, am selectat încărcarea tuturor șabloanelor. Theme Builder are acum acces la toate aspectele. Va trebui să faceți doar ajustări de cod și meniu la antetul 1. Restul funcționează așa cum sunt.

Crearea unui antet global în Divi Theme Builder

Deschideți Divi Theme Builder și faceți clic pentru a adăuga un antet global. Selectați Adăugați din bibliotecă .

Selectați fila numită Aspectele dvs. salvate și alegeți aspectul dorit. Așteptați să se importe.

Faceți clic pe pictograma de editare pentru a personaliza aspectul.

Am selectat Header-1-a. Aceasta arată aspectul în vizualizarea wireframe. Include un modul de cod cu CSS și JS personalizate. Multe dintre module includ ID-uri de clasă pentru CSS personalizat. Este posibil ca unele dintre coduri să nu ruleze în previzualizarea constructorului de teme. Vă recomand să vizualizați antetul pe front-end.

Dacă doriți să faceți modificări și nu doriți ca antetul să fie afișat până când modificările nu sunt făcute, atunci puteți lua în considerare crearea unei pagini de testare și atribuirea antetului acelei pagini înainte de a o transforma într-un antet global.

Schimbarea conținutului și stilului

Apoi, trebuie doar să vă alegeți meniul, să adăugați sigla și să personalizați culorile pentru a se potrivi site-ului dvs. web. Antetul folosește modulele standard, deci funcționează ca orice antet. Mi-am selectat meniul în exemplul de mai sus.

Butonul folosește deja stiluri personalizate. Pur și simplu adăugați culorile și fonturile proiectate. Faceți clic pentru a salva modificările.

De asemenea, asigurați-vă că salvați modificările pe ecranul principal. Am adăugat o versiune a antetului la o anumită postare, astfel încât să pot testa antetul înainte de a-l lăsa în șablonul de site implicit și de a-l face global.

Exemple de antet

Iată o privire asupra aspectului șabloanelor cu site-ul meu de testare. Cele 6 machete au o versiune colorată pre-stilată, deschisă, întunecată și strălucitoare. Acest lucru face mai ușor să alegeți un antet care să se potrivească designului dvs. și apoi să îl modificați în funcție de nevoile dvs. De asemenea, au butoane care își schimbă culoarea la plecare.

Vom analiza o combinație a acestora cu diferite culori de fundal și dimensiuni de ecran. Folosesc aspectele paginii de pornire și ale paginilor de destinație din pachetul de aspect Pizzeria.

Aspectul antetului 1

Antetul 1 include un modul de cod, meniu, căutare și un buton pentru a crea CTA.

Procesul de import nu păstrează valorile corect, deci trei linii din CSS vor trebui modificate.

De asemenea, meniul va trebui redenumit, iar clasa CSS va trebui adăugată la meniu. Din fericire, toate aceste ajustări sunt ușor de făcut. Instrucțiunile sunt în documentație. Aceasta este singura dată când am avut nevoie de documentație în timpul acestei revizuiri.

Rezultatul este un meniu elegant cu linii de despărțire pentru principalele trei elemente de meniu plasate în stânga, restul meniului plasat în dreapta, o casetă de căutare cu o pictogramă în câmpul de căutare și un buton mare CTA. Iată cum arată cu fundalul deschis. O umbră separă antetul de pagină.

Iată fundalul întunecat. Plutesc peste CTA pentru a arăta că își schimbă culoarea.

Antetul se reduce în înălțime pe măsură ce derulați. Elementele rămân de aceeași dimensiune.

Iată vizualizarea tabletei. Elementele de meniu sunt plasate în meniul derulant. Cele trei elemente cu clasa CSS includ un stil care le face să se distingă de restul.

Vizualizarea telefonului stochează CTA sub siglă și, de asemenea, păstrează stilul articolelor din clasa CSS.

Aspectul antetului 2

Antetul 2 folosește un modul de cod cu CSS și JS, blurb, imagine, text, social media, meniu și module de butoane.

Acesta este antetul 2A. Iată cum arată pe o pagină întunecată. Antetul nu acoperă întreaga lățime a site-ului. Meniul de sus este transparent și include butoane sociale. Partea de jos are CTA și informații de contact. Numărul de telefon poate fi făcut clic.

Iată designul pe o pagină ușoară. Îmi place cum iese în evidență acest CTA.

După derulare, meniul de sus derulează cu pagina, iar meniul de jos rămâne în partea de sus.

Iată vizualizarea tabletei. Meniul de sus derulează cu pagina în timp ce meniul de jos rămâne.

Iată vizualizarea telefonului. CTA este stivuit sub meniu. Antetul derulează cu pagina.

Aspectul antetului 3

Modulele pentru antetul 3 includ cod, urmărire pe rețelele sociale, meniu și un buton.

Iată antetul 3B cu un fundal deschis. Secțiunea de sus include butoane sociale și căutare, în timp ce secțiunea de jos adaugă CTA.

Iată cum arată pe un fundal întunecat.

Meniul de sus derulează cu pagina, în timp ce meniul de jos rămâne în partea de sus a ecranului.

Iată vizualizarea tabletei.

Iată cum vizualizarea telefonului stochează elementele.

Aspectul antetului 4

Antetul 3 include cod, mai multe blurbs, un buton, meniu și module de urmărire a rețelelor sociale.

Iată antetul 3C pe un fundal deschis. Partea de sus include informațiile de contact și CTA, în timp ce partea de jos afișează butoanele sociale.

Iată cum arată cu un fundal întunecat. Culorile originale arată excelent cu acest fundal. Plutesc peste CTA în acest exemplu.

Iată cum arată acesta după derulare. Secțiunea de sus se derulează cu site-ul și secțiunea de jos se lipeste.

Aceasta este vizualizarea tabletei.

Vizualizarea telefonului stochează elementele.

Aspectul antetului 5

Antetul 5 include un modul de cod, câteva blurbs, social media follow și module de meniu.

Iată antetul 5C pe un fundal întunecat. Partea de sus include un număr de telefon pe care se poate face clic, butoane sociale și un link către formularul de contact. Roșu și gri închis ies în evidență frumos.

De asemenea, arată frumos pe fundalul deschis. Umbra cutiei este mai vizibilă.

Jumătatea de sus a meniului continuă să deruleze pe măsură ce jumătatea de jos se lipeste de partea de sus a ecranului.

Iată vizualizarea tabletei.

Aceasta este vizualizarea telefonului. Îmi place modul în care se stochează conținutul secțiunii superioare.

Antetul 6 Aspect

Antetul 6 include un modul de cod, 4 blurbs, un modul de urmărire social media și un modul de meniu.

Acesta este antetul 6B pe un fundal întunecat. Aceasta are trei secțiuni: partea de sus include butoane sociale, mijlocul include informații de contact, iar partea de jos are legăturile de meniu.

Iată antetul pe un fundal deschis.

Cele 2 secțiuni superioare ale antetului derulează, iar secțiunea inferioară este lipicioasă. Se adaugă o umbră de casetă în meniul de jos când se lipeste de partea de sus a ecranului.

Iată vizualizarea tabletei. Mută ​​numărul de telefon în partea de sus.

Iată designul din vizualizarea telefonului.

Cumpărare

Pachetul Layout Layout este disponibil de la Divi Life pentru 49 USD (în vânzare cu 5 USD până în restul anului). Pentru utilizare pe site-uri nelimitate pentru dvs. și clienții dvs. și include acces la toate actualizările viitoare. De asemenea, include asistență și documentare.

Gânduri de sfârșit

Pachetul de aspect antet pentru Divi Theme Builder este un set interesant de machete. CSS și JavaScript adaugă stiluri care nu sunt disponibile în mod normal într-un antet. Acest lucru face ca antetul să aibă un aspect mult diferit de cel al antetelor standard. Deoarece fiecare design are mai multe opțiuni pre-stilate, este ușor să găsiți ceva care să se potrivească site-ului dvs. web fără a fi nevoie să faceți multe modificări. Stilul se potrivește deja cu aspectele gratuite Divi de la ET.

Anteturile par concepute profesional și le-am găsit ușor de utilizat. M-am uitat doar la câteva dintre ele. Lucrul cu antetul 1 este singurul aspect care necesită pași complicați. Nu este atât de dificil dacă citiți instrucțiunile (ghiciți cum știu). Rețineți că necesită mai mulți pași decât ceilalți.

Dacă sunteți interesat de antetele proiectate profesional pentru Divi Theme Builder, pachetul de aspect antet de la Divi Life merită aruncat o privire.

Vrem sa auzim de la tine. Ați încercat pachetul de aspect antet de la Divi Life? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin PureSolution / shutterstock.com