Flux web: Cum să faci un buton CTA în afara meniului?

Crearea unui buton de îndemn la acțiune (CTA) eficient este unul dintre cele mai importante elemente în design web. Un buton CTA îi solicită vizitatorilor să întreprindă acțiuni specifice, cum ar fi înscrierea la un buletin informativ, efectuarea unei achiziții sau contactarea companiei dvs. În timp ce multe site-uri web au butoane CTA în meniul de navigare, plasarea unui buton CTA în afara meniului îl poate ajuta să iasă mai mult în evidență și să genereze mai multe conversii. În acest articol, vă vom ghida prin pașii modului de proiectare și poziționare a unui buton CTA în afara meniului în Webflow.

De ce să plasați un buton CTA în afara meniului?

Plasarea unui buton CTA în afara meniului de navigare principal îl poate face mai vizibil pentru vizitatori. Când este plasat strategic în zone cu trafic intens, cum ar fi antetul sau în partea de sus a paginii, acest buton poate atrage rapid atenția utilizatorilor. Scopul este de a face CTA mai accesibil și de a se asigura că este observat imediat, fără a solicita utilizatorilor să navigheze prin site.

Avantajele plasării unui buton CTA în afara meniului includ:

• Vizibilitate sporită : poziționându-l într-o locație proeminentă, cum ar fi în antet sau plutind în lateral, utilizatorii îl pot observa cu ușurință.
• Rate de conversie îmbunătățite : un CTA care iese în evidență are mai multe șanse de a primi clic, crescând conversiile.
• Experiență îmbunătățită a utilizatorului : oferă utilizatorilor o modalitate intuitivă de a acționa rapid, fără a naviga prin diferite secțiuni.

Pași pentru a crea un buton CTA în afara meniului în Webflow

Webflow oferă o interfață ușor de utilizat pentru a construi site-uri web fără a fi nevoie să scrieți niciun cod. Urmați acești pași pentru a adăuga un buton CTA în afara meniului proiectului dvs. Webflow:

1. Configurați proiectul dvs. Webflow

Înainte de a începe, asigurați-vă că aveți un proiect Webflow configurat și că vă aflați în vizualizarea Designer.

• Pasul 1.1 : Deschideți proiectul Webflow și accesați pagina în care doriți să adăugați butonul CTA.
• Pasul 1.2 : În modul Designer, asigurați-vă că aspectul paginii este gata, cu meniul de navigare la locul său (sau oriunde doriți să adăugați butonul).

2. Creați un nou buton CTA

Pentru a crea un nou buton CTA în afara meniului, va trebui să-l poziționați strategic pe pagină.

• Pasul 2.1 : Din panoul din stânga, trageți și plasați un element Button din Adăugare panou pe pânză.
• Pasul 2.2 : Personalizați textul butonului pentru a se potrivi cu acțiunea pe care doriți să o întreprindă utilizatorul (de exemplu, „Începeți”, „Înscrieți-vă”, „Aflați mai multe”).
• Pasul 2.3 : stilați butonul în funcție de preferințele dvs. de design. Puteți ajusta fontul, dimensiunea, culoarea, fundalul și raza chenarului pentru a se potrivi cu estetica mărcii dvs.

3. Poziționați butonul CTA în afara meniului

Acum că aveți butonul dvs., este timpul să îl poziționați în afara meniului. Există câteva modalități de a face acest lucru, în funcție de locul în care doriți să apară butonul.

Opțiunea 1: Buton CTA plutitor

Un buton CTA plutitor este o alegere populară pentru vizibilitate. Se lipește de partea laterală sau de jos a paginii, chiar și atunci când utilizatorul derulează.

• Pasul 3.1 : Selectați butonul pe care l-ați creat și accesați setările Position din panoul Stil din dreapta.
• Pasul 3.2 : Setați poziția la Fixed . Acest lucru asigură că butonul rămâne în poziție pe ecran pe măsură ce utilizatorul derulează.
• Pasul 3.3 : Ajustați poziția setând valorile Top , Right , Bottom sau Left pentru a plasa butonul unde doriți pe ecran (de exemplu, colțul din dreapta jos sau colțul din stânga sus).
• Pasul 3.4 : Adăugați o valoare z-index pentru a vă asigura că butonul apare deasupra altor elemente, cum ar fi meniul. Puteți seta indexul z la o valoare mai mare, cum ar fi 10 sau 100 , pentru a vă asigura că este în partea de sus.

Opțiunea 2: Poziționat în secțiunea antet

Dacă preferați ca butonul CTA să fie într-un loc mai tradițional, fix în afara meniului, îl puteți plasa în secțiunea antet.

• Pasul 3.1 : Accesați panoul Navigator și găsiți secțiunea antet.
• Pasul 3.2 : Creați un nou Div Block care să servească drept container pentru butonul CTA. Acest lucru va ajuta la poziționarea butonului față de alte elemente.
• Pasul 3.3 : Trageți butonul în containerul Div Block .
• Pasul 3.4 : Utilizați setările Margin sau Padding din panoul Stil pentru a muta butonul în locația dorită din antet (de exemplu, în afara meniului principal, dar încă aliniat cu antetul).

Opțiunea 3: Butonul CTA pe o bară de navigare lipicioasă

O altă opțiune este să plasați butonul CTA pe o bară de navigare lipicioasă. Aceasta înseamnă că butonul va urmări utilizatorul pe măsură ce acesta derulează în jos pe pagină, dar va rămâne în afara meniului principal.

• Pasul 3.1 : Selectați elementul barei de navigare și setați-i Position la Sticky în panoul Stil.
• Pasul 3.2 : Adăugați un nou Div Block lângă elementele de meniu în care doriți să apară butonul.
• Pasul 3.3 : Plasați butonul în interiorul acestui Div Block și ajustați-i poziția folosind marginea sau umplutura.

4. Faceți butonul interactiv

Odată ce butonul este poziționat, puteți adăuga interacțiune pentru a-l face mai captivant.

• Pasul 4.1 : Selectați butonul și accesați panoul Interactions din Webflow.
• Pasul 4.2 : adăugați o interacțiune de trecere cu mouse-ul, cum ar fi schimbarea culorii de fundal sau scalarea ușor a butonului atunci când utilizatorul trece cu mouse-ul peste el.
• Pasul 4.3 : Configurați un link pentru buton. Îl puteți conecta la o altă pagină sau la o adresă URL externă sau puteți configura o acțiune precum deschiderea unui modal sau a unui formular.

5. Previzualizați și publicați

După configurarea butonului CTA, este important să previzualizați modul în care se comportă pe pagină.

• Pasul 5.1 : Faceți clic pe butonul Preview din colțul din dreapta sus pentru a vedea cum arată și cum se comportă butonul pe pagină.
• Pasul 5.2 : Testați capacitatea de răspuns pe diferite dimensiuni de ecran pentru a vă asigura că este poziționat corect.
• Pasul 5.3 : Odată ce sunteți mulțumit de rezultat, faceți clic pe Publish pentru a activa butonul pe site-ul dvs. web.

Cele mai bune practici pentru butoanele CTA din afara meniului

Deși plasarea unui buton CTA în afara meniului poate fi extrem de eficientă, este esențial să urmați câteva bune practici pentru a vă asigura că funcționează bine:

1. Păstrați-l simplu : nu supraaglomerați pagina cu prea multe butoane CTA. Concentrați-vă pe o acțiune principală pentru cele mai bune rezultate.
2. Asigurați o bună vizibilitate : asigurați-vă că butonul contrastează bine cu fundalul pentru a atrage atenția utilizatorului.
3. Poziționați-l strategic : plasați butonul într-o zonă în care utilizatorii ar putea să-l observe, cum ar fi colțul din dreapta sus sau plutind în lateral.
4. Testați pe diferite dispozitive : asigurați-vă că butonul CTA arată grozav pe dispozitive mobile, tablete și desktop.

Concluzie

Adăugarea unui buton CTA în afara meniului în Webflow poate fi o strategie puternică pentru îmbunătățirea vizibilității și creșterea conversiilor. Urmând pașii menționați mai sus, puteți crea și poziționa cu ușurință un buton CTA care iese în evidență de restul conținutului paginii dvs. Indiferent dacă optați pentru un buton plutitor, o bară de navigare lipicioasă sau o poziție tradițională a antetului, cheia este să vă asigurați că CTA este plasat acolo unde utilizatorii îl vor observa și vor fi încurajați să ia măsuri. Cu instrumentele de design intuitive ale Webflow, realizarea acestui lucru este mai simplă ca niciodată!