Anteturile transparente sunt în tendințe în zilele noastre și sunt utilizate de un număr din ce în ce mai mare de site-uri web. Aceste tipuri de anteturi fac ca pagina să arate competentă și încurajează utilizatorii să fie pe pagină pentru o perioadă mai lungă de timp.
Deasupra pliului, Beaver Builder Transparent Header se referă la zona de pe pagina web care este văzută de utilizatori la prima vedere, adică ceea ce văd utilizatorii fără a derula pagina.
Sunteți curios despre Beaver Builder, nu vă faceți griji că v-am acoperit al nostru Revizuirea detaliată a Beaver Builder.
Voi răspunde la aceste întrebări pe blog, aruncați o privire:
- Ce este un antet de pagină?
- Care este semnificația unui antet transparent?
- Ce face adăugarea unui antet transparent pe site-ul dvs. web?
- Care sunt caracteristicile Beaver Builder?
- Cum să setați antetul transparent cu Beaver Builder?
- Care sunt pașii pentru ca antetul paginii dvs. web să fie transparent?
- Ce termeni importanți ai codului trebuie să cunoașteți?
- Care este prețul Beaver Builder?
Cuprins
Ce este un antet de pagină?
Un antet de pagină este denumit secțiunea de sus a oricărei pagini web prezente pe site-ul dvs. web. Anteturile sunt adesea interpretate greșit doar cu banda de sus, care are sigla companiei/site-ului dvs. și o bară de meniu.
Dar acesta nu este cazul, antetul paginii este întregul conținut pe care un utilizator îl vede când ajunge pe pagina dvs. și care se numește conținut deasupra paginii, așa cum s-a menționat mai sus.
Există diverse caracteristici pe care antetul dvs. le poate avea, pe care le puteți adăuga în funcție de cerințele dvs.
Acestea sunt:
- Sigla companiei sau site-ului dvs
- Orice tip de îndemn la acțiune care ar duce utilizatorii către pagina dvs. de destinație
- Titlu sau un slogan care vă reprezintă pe dumneavoastră și marca dvs
- Bara de meniu pentru ușurință în utilizare
- O opțiune de căutare pentru a naviga pe site-ul dvs. cu ușurință.
Ce înseamnă antet transparent?
Antetele normale au un dreptunghi asemănător unei benzi în partea de sus a paginii dvs. web, care împarte conținutul antetului și conținutul paginii, în unele cazuri, unul de celălalt.
În cazul în care utilizați un antet transparent, vă ajută să îmbinați conținutul paginii cu antetul, precum și cu banda dreptunghiulară de sus, care ar putea avea sigla site-ului dvs., îndemnul și meniul.
Caracteristicile Beaver Builder
Mai multe caracteristici vin cu Constructor de castori. Să discutăm câteva dintre caracteristicile importante.
1. Șabloane de pagină
Șablonul de pagină este un tip de temă pe care îl puteți seta pentru paginile dvs. web. Cu un constructor de castori, puteți avea un șablon de pagină diferit pentru fiecare pagină web diferită sau puteți avea unul comun.
Depinde de tine. Aceste șabloane sunt creative, unice, ușor de utilizat și, cel mai important, sunt adaptabile la dispozitive mobile.
2. Plasarea conținutului
Puteți redimensiona, muta și decupa imaginile în modul în care aveți nevoie, doar făcând clic. Puneți îndemnul, simbolurile atrăgătoare și anteturile din tabloul de bord simplificat al temei Beaver Builder pe care o selectați.
De asemenea, vă puteți separa pagina în segmente pentru a pune mai mult conținut pe pagina dvs. și a arăta oarecum redus, cu scopul de a avea un impact memorabil asupra clienților.
3. Powerpack Beaver Builder
Acesta este un supliment pe care îl puteți integra cu un constructor de castori și puteți obține un număr mare de integrări pentru a vă îmbunătăți performanța site-ului și pentru a înfrumuseța paginile web.
Trebuie să vă scrieți conținutul pe interfața WordPress? Nu vă faceți griji, cu Beaver Builder vă puteți compune conținutul pe interfața obișnuită a WordPress și îl puteți importa pe toate împreună pe tema Beaver Builder pe care decideți să o utilizați pentru pagina dvs.
În cazul în care alegeți să nu mai utilizați Beaver Builder, puteți exporta paginile create de șablon Beaver Builder în interfața obișnuită a paginii WordPress fără a pierde și conținutul.
De asemenea, ți-ar putea plăcea:
Cum să setați antetul transparent cu Beaver Builder?
Există un singur instrument necesar pentru a seta un antet transparent pe oricare dintre paginile web de pe site-ul dvs., The Beaver Themer. Să discutăm despre Beaver Themer în detaliu.
Beaver Themer
Beaver Themer te va ajuta face atractiv și optimizat pagini web cu doar un clic prin tabloul de bord ușor de utilizat.
Vă permite să aveți caracteristica prin care puteți crea anteturi și subsol, Pagina de eroare 404, și împreună cu el și paginile pe care le-ați arhivat. De asemenea, vă permite să creați antetul și subsolul pentru fiecare pagină web, ceea ce ajută utilizatorul să navigheze cu ușurință prin site-ul dvs.
DESCRIERE
- Diferite teme pentru a alege
Puteți decide tema pentru fiecare pagină de pe site-ul dvs. și toate pot fi și ele diferite.
Folosind aceste teme, puteți crea blog și pagini de destinație, precum și modifica paginile cu erori 404, astfel încât aceste pagini să vă ajute utilizatorii să vină pe site-ul web pe pagina potrivită.
- Piese tematice
Aceste părți sunt o caracteristică foarte unică și sunt rare de găsit în orice alt instrument de aspect al temei.
Vă ajută să creați machete parțiale, de exemplu, un antet sau un subsol poate fi creat cu ajutorul acestor părți pe oricare dintre paginile dvs., indiferent de faptul că pagina este realizată cu o temă Beaver sau nu. Nu este uimitor!
- Conexiuni de câmp
Puteți să integrați tema Beaver cu oricare dintre paginile dvs. existente și să aveți conținutul securizat în timp ce efectuați acest proces.
Cu alte instrumente de aspect al temei, există pericolul de a pierde conținut în timp ce conectați instrumentul la pagina creată în mod normal sau la o pagină creată cu orice alt instrument de aspect al temei.
- Post Grile
Puteți alege o temă care să vă seteze blogurile în grile și puteți edita fiecare grilă în funcție de nevoile dvs. Vă va ajuta să navigați ușor în pagina dvs. și să-i dea un aspect minunat.
- Conținut comun
Doriți ca un mic fragment de conținut dinamic să fie comun și afișat pe toate paginile? Dacă da, tema castor este soluția dvs., cu tema castor veți obține cu totul un tablou de bord diferit pentru a crea conținut care să fie afișat pe fiecare pagină a site-ului dvs.
Puteți alege dacă doriți ca conținutul să fie dinamic, glisant sau pur și simplu să îl mențineți static. Rețineți doar să nu puneți conținut lung la fel de comun, deoarece poate duce la duplicarea conținutului pe toate paginile dvs.
Puteți crea următoarele forme de conținut - text, imagini, link-uri și câmpuri personalizate, odată create, leagă-le către toate paginile pe care doriți să fie afișat conținutul respectiv.
Pași pentru a face antetul paginii dvs. web transparent
Iată câțiva pași cheie de urmat:
Etapa 1: Descărcați Beaver și începeți să creați o pagină pentru site-ul dvs. utilizând Beaver Builder
Primul și cel mai important lucru de făcut este producerea paginii castor constructor.
În WordPress, după introducerea modulului producător beaver, mai degrabă decât a face o pagină prin WordPress, pur și simplu deschideți pagina, adăugați un titlu paginii folosind WordPress și apoi faceți clic pe Alter with beaver developer și începeți-vă munca.
Pasul 2: Adăugarea conținutului
După ce ați creat un aspect de bază al paginii, decideți asupra conținutului pe care doriți să îl adăugați în partea de sus a paginii, adică deasupra conținutului pliului, care ar putea fi un titlu urmat de o propoziție, un titlu, un subtitlu sau orice îndemn la acțiune sau doar un logo și o imagine.
Acum, creați un rând cu ajutorul unui constructor de castori și adăugați conținutul planificat la rând. Sub rând, adăugați imaginea de fundal dorită pentru ca antetul transparent să apară deasupra acestuia.
Pasul 3: Adăugarea clasei
Trebuie să accesați butonul cheie de pe rândul de sus pentru adăugarea clasei. Apoi adăugați o clasă CSS accesând opțiunea Avansat. Nu uitați să faceți clic pe butonul Salvare.
Pasul 4: Faceți antetul transparent
Deci, acum, intenționăm să mutăm coloana Banner de sus sub antet. Mai presus de toate, trebuie să facem antetul simplu.
Facem acest lucru acum cu scopul de a vedea unde se închide capul coloanei Banner de sus atunci când folosim CSS pentru a-l poziționa sub antetul site-ului.
Adăugați fișierul CSS în style.css sau conectați-l direct la Beaver Builder.
Câțiva termeni importanți ai codului pe care trebuie să îi cunoașteți:
- Corp. fl-page-header-primary:
Fragmentul CSS de mai sus este cel folosit de un constructor de castori pentru codificarea antetului din partea de sus a paginii de pe site-ul dvs. web.
Adăugăm corpul paginii în față pentru a crește specificul paginii. Un alt motiv pentru a viza fragmentul de cod de mai sus este acela de a crea o copie a codului primar folosit de constructorul de castori pentru antet și apoi de a face modificarea.
Acest lucru vă salvează antetul de a fi distrus definitiv în cazul în care ceva nu merge bine cu codul.
- Fundal: transparent:
Acest fragment CSS este folosit pentru a elimina fundalul care este setat în mod implicit atunci când începeți să utilizați un constructor Beaver dacă pagina dvs. nu este realizată prin constructorul Beaver, puteți în continuare să faceți antetul transparent exportând fișierul CSS în opțiunea avansată care vi se oferă la rândul de sus.
Dar culoarea de fundal trebuie eliminată în oricare dintre cazuri prin fragmentul CSS de mai sus.
- Poziție: relativă și indicele z:10:
Pentru a asigura alinierea antetului nostru transparent, adică banner-ul de sus, cu antetul fix existent și cu antetul de fundal, utilizați fragmentul CSS menționat.
Pasul 5: Alinierea rândului de banner de sus
Un alt cod CSS trebuie adăugat în același loc în care ați adăugat fragmentele CSS de mai sus.
Termeni CSS importanți pe care i-ați întâlni în cod:
Ecran @media și (lățime minimă 660px): Utilizarea acestui cod este doar alinierea bannerului de sus cu antetul existent. Valoarea px menționată, care este 660 în acest caz, este foarte importantă. Valoarea poate veni împreună cu codul în mod implicit sau ar putea fi necesar să-l adăugați manual.
Valoarea px implicită sau medie pe care va trebui să o setați ar putea fi în intervalul 990-995 px, în funcție de configurația sistemului dvs.
.top-banner .fl-row-content-wrap: Acest fragment de CSS vă ajută să ajustați umplutura în funcție de cerințele dvs.
margin-top:-100px: Acest fragment vă ajută să ajustați marginea antetului pe toate cele patru laturi în funcție de cerințele dvs.
Pasul 6:
Personalizați și înfrumusețați antetul transparent pentru a vă configura logo-ul și meniul într-un mod care să arate bine și să se îmbine cu transparența antetului.
Faceți antetul transparent la nivel global
cu castor constructor, aveți caracteristica de a salva bannerul de sus creat și de a-l folosi pe alte pagini web ale site-ului dvs.
Probleme frecvente apărute când faceți antetul transparent
- Antetul poate fi văzut doar pe computere desktop, dar nu și pe telefoane mobile și tablete.
Această problemă este ușor de rezolvat. Trebuie doar să accesați Aspect > Personalizare > General > Fundal și ar trebui să setați culoarea astfel încât să contrasteze cu antetul, astfel încât să iasă în evidență și să fie lizibilă.
- Bara de sus a antetului nu este vizibilă.
Problemele aici sunt cu Fragment CSS a codului pe care l-ați copiat și lipit sau pe care l-ați scris singur, care include corpul. fl-page-bar.
Prețul Beaver Builder
Pentru a adăuga un antet transparent, aveți nevoie de o temă beaver care vine cu versiunea plătită a pachetului de beaver builder.
Va trebui să plătiți 149 USD pentru un an de castor constructor serviciu care va include teme Beaver care vă vor ajuta să adăugați cu ușurință anteturi transparente pe site-ul dvs.
Avantaje și dezavantaje ale Antet transparent Beaver Builder
Pro-uri
- Dacă doriți o pagină atrăgătoare din punct de vedere vizual, atunci tema Beaver este o temă obligatorie
- Puteți schimba aspectul pentru fiecare dispozitiv separat, adică pentru telefoane mobile, tablete și desktop-uri. De asemenea, le puteți crea pe toate împreună cu o pagină de destinație diferită sau o pagină normală pentru toate cele trei dispozitive.
Contra
- Singurul lucru negativ despre tema Beaver este că prețul pentru planurile plătite este puțin ridicat. Dar, privind caracteristicile pe care le oferă, merită cu siguranță.
Opiniile clienților Beaver Builder
Link-uri rapide:
- Coduri promoționale și cupon Beaver Builder
- Beaver Builder vs Divi
- Beaver Builder vs Elementor
- Beaver Builder vs Visual Composer
Întrebări frecvente | Antet transparent Beaver Builder
De unde iau codul CSS?
Puteți contacta asistența pentru clienți Beaver Builder și ei vor răspunde rapid la întrebarea dvs. și vă vor oferi soluția, sau puteți utiliza platforme precum git hub și copiați codul direct de pe acele platforme, deoarece acestea sunt libere de utilizat.
Ce este antetul transparent în WP?
În WordPress, un antet transparent are opacitatea culorii de fundal setată la 0, făcându-l transparent. Acest efect poate oferi site-ului dvs. un aspect contemporan și minimalist, permițând în același timp vizualizarea conținutului prin antet.
Cum pot personaliza designul antetului meu transparent?
Puteți modifica opțiunile de stil în generatorul de pagini pentru a personaliza aspectul antetului translucid. În setările modulului antet din Beaver Builder, de exemplu, puteți modifica fontul, dimensiunea fontului, culoarea fontului și alinierea textului. De asemenea, puteți adăuga componente sau module de antet suplimentare, cum ar fi un logo sau un meniu de navigare, și să le modificați parametrii stilistici. De asemenea, puteți utiliza CSS personalizat pentru a personaliza și mai mult aspectul antetului translucid.
Cum să începeți cu Beaver Builder?
Secțiunea de conținut a WordPress este diferită de antet, subsol și bara laterală. Pluginul Beaver Builder permite crearea de machete în funcție de zona de conținut. În plus, puteți utiliza pluginul Beaver Themer pentru a crea machete în locuri dincolo de zona de conținut.
Cum activez un antet transparent?
Navigați la Aspect > Personalizare > Antet pentru a activa opțiunea Antet transparent. Opțiunea „Afișează antet transparent numai pe pagina de pornire” va deveni disponibilă după ce se va face acest lucru. Dacă îl dezactivați, antetul va deveni translucid pe fiecare pagină.
Cum fac un antet transparent în Beaver Builder?
Pentru a face un antet transparent în Beaver Builder, puteți urma acești pași: Deschideți Editorul Beaver Builder și faceți clic pe modulul antet pe care doriți să îl editați. În setările modulului, navigați la fila Stil. Sub secțiunea Fundal, faceți clic pe instrumentul de selectare a culorilor de lângă opțiunea Culoare de fundal. În selectorul de culori, glisați bara de opacitate spre stânga până când opacitatea este setată la 0. Acest lucru va face antetul transparent. Salvați modificările și publicați pagina pentru a vedea antetul transparent.
Cum schimb antetul în Beaver Builder?
Pentru a schimba antetul în Beaver Builder, puteți urma acești pași: Deschideți Editorul Beaver Builder și navigați la pagina în care doriți să schimbați antetul. Faceți clic pe modulul antet pe care doriți să îl editați. În setările modulului, puteți modifica aspectul, stilul și conținutul antetului. Pentru a adăuga elemente sau module noi la antet, puteți utiliza interfața de glisare și plasare din Beaver Builder. După ce ați făcut modificările dorite, salvați și publicați pagina pentru a vedea antetul actualizat.
Concluzie: construiți un antet personalizat cu Beaver Builder 2024
Anteturi transparente sunt o caracteristică foarte importantă pe care trebuie să o aveți pe un site web dacă doriți ca acestea să fie atrăgătoare, elegante și moderne.
Îți ajută chiar să iasă în evidență îndemnul la acțiune de pe bannerul de sus sau de conținutul de deasupra paginii. Cu un constructor de castori, este ușor să creați un antet transparent.
Pașii de mai sus pot fi confuzi sau pot părea dificili, dar singurul lucru pe care trebuie să-l faceți este să copiați și să inserați codul într-un spațiu și să vedeți modificările și să îl faceți global dacă doriți.
