Hero este un banner mare cu o imagine sau un videoclip în spatele textului și al butoanelor. Stă pe pagina principală și este adesea primul lucru pe care îl văd cumpărătorii.
Adaugă un hero
- Deschide the builder și alege Home page în fila Pages.
- În fila Sections, apasă Add new section și alege Hero din grupul Content.
- Alege media, scrie textul și apasă Publish.
Hero-ul este oferit doar pe pagina principală și poți adăuga unul pe pagină. Ca să-l muți, să-l copiezi sau să-l ascunzi, vezi Secțiuni și blocuri
Media și înălțimea
- Mode: Single arată o imagine sau un videoclip. Split arată două, setate în Media 1 și Media 2. Stau una lângă alta când Direction a conținutului este Vertical și una deasupra celeilalte când este Horizontal. Pe telefoane sunt mereu una sub alta.
- Media 1 și Media 2: o imagine sau un videoclip din biblioteca media. Un videoclip rulează fără sunet, în buclă, ca fundal în mișcare.
- Height: Small, Medium, Large, Fullscreen (umple ecranul), Image (urmează forma primei imagini, ca nimic să nu fie tăiat) sau Custom. Cu Custom, Custom height setează înălțimea ca parte din înălțimea ecranului. Hero-urile noi pornesc pe Image.
Text și butoane deasupra
Selectează hero-ul și apasă Add new block ca să adaugi conținut peste media: până la 2 blocuri Text, 2 Button, 2 Group și 2 Divider. Setările lor proprii sunt în Blocurile Group, Text, Button și Divider: cum funcționează setările componentelor de aranjare?
În Layout așezi acest conținut:
- Direction: Vertical pune blocurile unul sub altul, Horizontal le pune unul lângă altul. Cu Horizontal, Stack vertically on mobile le pune unul sub altul pe telefoane.
- Position și Alignment: mută conținutul în sus sau în jos și la stânga sau la dreapta, de exemplu jos în stânga sau în centru. Space between depărtează blocurile.
- Content width: Page păstrează conținutul în lățimea paginii, Full îl lasă să ajungă la marginile ecranului. Media umple mereu toată lățimea.
Gap (în Spacing) setează spațiul dintre blocuri, iar Padding spațiul din jurul lor.
Culori și strat de culoare
- Color scheme: culorile textului și ale butoanelor din hero. Vezi Scheme de culori.
- Media overlay: adaugă un strat de culoare peste media, ca textul să se citească mai ușor. Apoi setează Overlay color și Overlay style: Solid acoperă media uniform, Gradient estompează treptat culoarea. Gradient direction (Up sau Down) stabilește în ce parte se estompează.
Fila Custom CSS îți permite să adaugi propriul CSS doar pentru acest hero.
Sarcini frecvente
- Antet peste hero: pornește Transparent header în setările antetului. Funcționează doar când hero-ul stă direct sub antet. Vezi Setările antetului.
- Titlu și buton centrate: Direction pe Vertical, apoi Position și Alignment pe Center.
- Text alb pe o fotografie luminoasă: pornește Media overlay cu o Overlay color închisă și stilul Gradient.
Bine de știut
- Dacă un videoclip hero nu se mișcă, verifică Autoplay Videos în fila de setări Automations. Când este oprită, videoclipurile de fundal rămân nemișcate. Vezi Setările de automatizări.
- Dacă dimensiunea primei imagini nu este cunoscută, înălțimea Image folosește Medium.
- Ai nevoie de un banner pe altă pagină? Hero-ul este doar pentru pagina principală, dar secțiunea Image funcționează pe orice pagină. Vezi Secțiunile text, imagine și separator.