Adaugă și configurează conținut vizual
În editorul temei construiești conținutul vizual al paginilor folosind secțiuni. Alegi tipul de secțiune potrivit, adaugi imaginile și textele, apoi verifici cum se afișează pe desktop și mobil.
Această opțiune este disponibilă pentru temele V5. Poți verifica versiunea în Website > Design & Temă, la nivelul instalării temei. Dacă nu vezi opțiunea, magazinul poate folosi o temă mai veche sau o temă care nu include această funcționalitate.
Alege secțiunea potrivită
| Obiectiv | Secțiune potrivită |
|---|---|
| Un mesaj principal cu imagine, titlu și acțiune | Hero |
| Mai multe mesaje care rulează în aceeași zonă | Slider Hero |
| Mai multe imagini sau destinații prezentate împreună | Grid de imagini |
| Un banner cu video MP4 sau WebM | Hero sau Slider Hero |
| Un clip găzduit pe YouTube | Video YouTube |
| Un mesaj scurt, vizibil în partea de sus | Bara anunt |
| Beneficii precum livrare rapidă sau retur simplu | Trust badges, cu imagini și texte scurte |
| Informații explicate prin paragrafe, liste și linkuri | Continut complex |
Numele și lista exactă a secțiunilor pot varia în funcție de temă și de zona paginii. Pentru un banner pe homepage folosește, de regulă, un Hero sau un Slider Hero în zona Main a paginii principale.
Adaugă un hero, slider sau grid
- Accesează Website > Design & Temă și apasă Editează designul.
- În fila Pagini, selectează pagina și zona în care vrei să adaugi conținutul.
- Apasă Adauga sectiune și alege tipul dorit: hero, slider, grid sau altă secțiune disponibilă.
- Adaugă imaginile și completează titlul, textul și butonul, dacă secțiunea include aceste opțiuni.
- Adaugă pentru fiecare imagine un text alternativ (ALT) scurt și relevant, dacă există acest câmp.
- Completează linkurile pentru butoane sau imagini și verifică dacă duc la destinația corectă.
- Ajustează dimensiunea, încadrarea imaginilor și setările pentru desktop sau mobil, apoi verifică rezultatul în previzualizare.
- Revino la lista secțiunilor folosind săgeata înapoi și apasă Salveaza.
Pentru un slider, asigură-te că fiecare cadru transmite un mesaj clar și evită să pui informații esențiale doar într-un cadru care se schimbă automat.
Nu există o singură dimensiune corectă pentru toate temele și secțiunile. Pornește de la imagini clare, păstrează subiectul important departe de margini și verifică decuparea în secțiunea aleasă, pe desktop și mobil.
Poți folosi imagini deja disponibile în biblioteca editorului sau poți încărca imagini noi. Pentru alte tipuri de fișiere sau pentru linkuri de descărcare, folosește Manager fișiere. După încărcare, copiază adresa publică a fișierului și adaug-o în câmpul de link disponibil în secțiune.
Configurează un Hero sau Slider Hero
Hero afișează un singur mesaj principal. Slider Hero grupează mai multe bannere în aceeași zonă; fiecare cadru are propriul conținut, propriile linkuri și propria încadrare a imaginii.
La Inaltime, alegi cât spațiu ocupă bannerul. Latime stabilește dacă bannerul se aliniază la lățimea paginii sau folosește întreaga lățime disponibilă. O înălțime mai mare poate schimba decuparea imaginii și poate împinge restul conținutului mai jos, mai ales pe mobil.
La Comportament imagine, cele două opțiuni au efecte diferite:
- Cover umple zona bannerului, dar poate decupa marginile imaginii;
- Contain păstrează imaginea întreagă, dar poate lăsa spațiu liber în jurul ei.
Aliniere imagine stabilește ce parte rămâne în zona vizibilă. De exemplu, dacă subiectul important este în dreapta, testează alinierea la dreapta și verifică rezultatul pe mobil. Nu pune texte esențiale la marginea imaginii: pot fi tăiate prin decupare. Folosește titlul și subtitlul secțiunii pentru mesajul campaniei.
Afiseaza overlay adaugă un strat colorat peste imagine pentru a face textul mai ușor de citit. Ajustează Opacitate overlay fără să ascunzi imaginea. Panou fundal adaugă un fundal în zona textului; este util când contrastul variază mult între părțile imaginii. Acest strat din banner este diferit de overlay-urile globale, precum ferestrele de bun venit.
Link imagine face imaginea accesibilă printr-un link. Pentru acțiunea principală, completează separat Eticheta buton principal și URL buton principal. Dacă folosești și un buton secundar, dă-i un scop diferit, de exemplu „Vezi colecția” și „Află detalii”. Testează atât imaginea, cât și butoanele: destinațiile lor nu se completează automat una din cealaltă.
Pentru Slider Hero, configurează și săgețile, punctele de paginare sau redarea automată, conform setărilor comune ale sliderelor. Aceste controale nu sunt disponibile dacă activezi Slider CSS-only.
Folosește un video în banner
În câmpul Imagine al unui Hero sau al unui cadru Slider Hero, poți selecta și un fișier video MP4 sau WebM. Acesta este redat automat, fără sunet și în buclă, ca fundal vizual al mesajului; nu este un player video cu controale de redare pentru client.
Alege un clip scurt și verifică încărcarea și lizibilitatea textului pe mobil. Redarea în buclă a videoclipului și redarea automată a sliderului sunt comportamente separate: prima repetă clipul, a doua schimbă bannerul.
Alege layoutul unui grid de imagini
Grid de imagini poate prezenta destinații precum categorii sau campanii, dar și o galerie de imagini. În Layout, câmpul Stil galerie oferă:
| Ce vrei să obții | Alege |
|---|---|
| Imagini aliniate într-o grilă regulată | Grid |
| O galerie cu imagini de înălțimi diferite | Masonry |
| O imagine dominantă lângă imaginile secundare | Colaj |
Pentru Grid, Raport imagine stabilește forma imaginilor: de exemplu Patrat, Portret sau Peisaj. Adapteaza la imagine folosește proporțiile imaginii. La Incadrare imagine, Decupare umple spațiul și poate tăia marginile, iar Incadrare păstrează imaginea întreagă.
Pentru Colaj, prima imagine din listă este imaginea dominantă. Poți alege poziția ei din Pozitia imaginii dominante. Reordonează imaginile dacă vrei să evidențiezi alta.
În Layout mobil, alegi separat Stil galerie mobil: Grid, O coloana sau Swipe, cu derulare orizontală. Verifică și Raport imagine mobil și Incadrare imagine mobil: prezentarea de pe telefon poate avea alte proporții decât cea de pe desktop.
Completează Link pentru imaginile care trebuie să deschidă o pagină de produs, categorie sau campanie. Dacă activezi Deschide imaginile intr-o galerie, imaginile fără link se deschid mărite la apăsare; imaginile cu link duc la destinația completată. Legenda este un text afișat împreună cu imaginea când activezi Afiseaza legendele; textul alternativ descrie imaginea pentru accesibilitate.
Adaugă un video YouTube
- Adaugă secțiunea Video YouTube.
- În câmpul URL YouTube sau ID video, introdu adresa completă a clipului sau doar ID-ul lui.
- Configurează imaginea de copertă și opțiunile de afișare disponibile.
- Verifică redarea fără autentificare, pe desktop și mobil.
- Salvează modificările.
Secțiunea Video YouTube poate afișa doar videoclipuri găzduite pe YouTube. Nu poți încărca aici un fișier video din calculator sau un clip găzduit pe alt serviciu. Încărcarea unui videoclip în Manager fișiere nu îl face disponibil pentru această secțiune.
Prezintă beneficii cu Trust badges
Trust badges afișează beneficii sau informații scurte, de exemplu asistență pentru alegerea produsului, opțiuni de livrare sau informații despre retur. Aceste elemente sunt diferite de badge-urile produselor, precum marcajele pentru produse noi.
- Accesează Website > Design & Temă și apasă Editează designul pentru instalarea dorită.
- În Pagini, alege pagina și folosește Adauga sectiune pentru a adăuga Trust badges în zona dorită.
- În Continut, verifică lista Elemente, inclusiv textele deja completate la adăugarea secțiunii. Editează elementele sau adaugă altele pentru beneficiile pe care vrei să le prezinți.
- Pentru fiecare element, completează Titlu. Adaugă o Imagine și un Subtitlu scurt pentru explicație, dacă sunt utile.
- Completează Link când vrei ca întregul element să ducă la o pagină cu detalii.
- Verifică aspectul și destinațiile, apoi apasă Salveaza.
De exemplu, pentru un element cu titlul „Ai nevoie de ajutor?”, adaugă o imagine relevantă, un subtitlu precum „Contactează echipa magazinului” și linkul către pagina de contact. Fără link, elementul rămâne informativ.
La Afisare, alege Galerie pentru elemente dispuse în rânduri sau Carusel pentru derulare orizontală. În Layout, ajustează coloanele și Format element: Orizontal pentru imagine lângă text sau Vertical pentru imagine deasupra textului. Pentru carusel, consultă setările comune ale sliderelor.
În Aspect, Dimensiune imagine schimbă mărimea imaginilor din elemente. Folosește imagini cu proporții și spațiu liber comparabile. Pe mobil, verifică dacă titlul și subtitlul rămân lizibile; redu coloanele înainte să micșorezi prea mult textul.
Mesajele trebuie să corespundă serviciilor magazinului. Textul despre livrare sau retur din această secțiune nu modifică regulile și condițiile aferente. Pentru un mesaj principal de campanie, folosește Hero sau Slider Hero.
Adaugă explicații cu Conținut complex
Continut complex este util pentru informații care necesită mai mult decât un titlu și un subtitlu: prezentarea magazinului, instrucțiuni sau explicații despre o colecție.
- Accesează Website > Design & Temă și apasă Editează designul pentru instalarea dorită.
- În Pagini, alege pagina și folosește Adauga sectiune pentru a adăuga Continut complex în zona dorită.
- În câmpul Continut, scrie și formatează textul. Folosește paragrafe scurte, subtitluri și liste pentru a-l face ușor de parcurs.
- Adaugă linkuri descriptive către paginile relevante. Poți include și imagini din editorul de conținut.
- Verifică formatarea și linkurile pe desktop și mobil, apoi apasă Salveaza.
Pentru spațierea și fundalul blocului, folosește setările comune ale secțiunii. Această secțiune păstrează textul introdus în editor; pentru descrierea și detaliile diferite ale fiecărui produs, configurează taburile paginii de produs.
De exemplu, pe o pagină cu produse de îngrijire poți adăuga o explicație scurtă și un link către instrucțiunile complete. Dacă vrei răspunsuri individuale care se deschid la apăsare, folosește Întrebări frecvente.
Folosește anunțuri și acțiuni clare
Pentru mesaje scurte, folosește Bara anunt, dacă este disponibilă în tema ta. Pentru campanii vizuale, folosește un titlu scurt și un singur buton principal, care să trimită către o pagină relevantă și accesibilă clienților.
Unele secțiuni pot include opțiuni de generare cu AI. Dacă sunt disponibile, descrie rezultatul dorit, apoi verifică textele, imaginile și linkurile propuse înainte să salvezi.
Dacă nu ai instalată aplicația AI Generator, funcțiile AI consumă mai întâi cota gratuită a magazinului, apoi credite MerchantPro. Dacă ai aplicația activă, se consumă mai întâi cota inclusă în aplicație, apoi creditele MerchantPro.
Pentru modificări avansate care necesită HTML, Twig sau cod personalizat, consultă documentația pentru dezvoltarea temelor. Aceste personalizări depășesc opțiunile standard ale editorului și este recomandat să fie realizate de un dezvoltator.
Dacă imaginea sau secțiunea nu se afișează corect
- Verifică dacă ai adăugat secțiunea în pagina și zona corecte și dacă este poziționată unde te aștepți.
- Confirmă că secțiunea este vizibilă și verifică dacă are setări diferite pentru desktop sau mobil.
- Ajustează încadrarea imaginii sau înlocuiește-o cu una care are proporții mai potrivite.
- Dacă ai înlocuit imaginea, verifică din nou textul ALT și linkul asociat.
- Asigură-te că ai salvat modificările. Dacă lucrezi într-o temă separată, folosește Aplică tema pentru ca modificările să devină vizibile clienților.
Pentru un banner care trebuie să apară doar într-o categorie, într-o limbă sau pe un anumit dispozitiv, folosește regulile de vizibilitate ale secțiunii.