Adăugarea și mutarea secțiunilor, ajustarea dimensiunilor prin tragere

Modulul 3: Texte, fotografii și secțiuni · Timp de citire: 10 minute

Obiectivul lecției: După această lecție veți putea construi o pagină din secțiuni: să adăugați o secțiune prin selector sau prin chat, să o mutați, să o copiați și să o ștergeți, să ajustați spațierea și dimensiunile prin tragere și să alegeți pentru fiecare secțiune coloanele, colțurile, fundalul și vizibilitatea pe mobil.

Concepte cheie: secțiune, Blocuri, Adăugați un bloc, formă, Secțiune dedesubt, trei modele, Creați cu AI, Editați secțiunea, Spațiere, Spațiu între elemente, Coloane, Colțuri, Ascunde pe mobil, mâner, HTML personalizat

O pagină este un șir de secțiuni

Fiecare pagină a site-ului dumneavoastră este alcătuită din secțiuni: benzi orizontale așezate una sub alta. Sus se află de obicei un Hero (deschiderea mare, cu titlu, text și buton), dedesubt de exemplu Carduri cu serviciile dumneavoastră, Recenzii, Program și jos Contact. Generatorul are 35 de tipuri, fiecare în una sau mai multe forme: același conținut, aranjat diferit.

Cine gândește astfel construiește o pagină mai bună. Puneți informațiile cele mai importante sus, un singur subiect pe secțiune, și încheiați cu ceea ce trebuie să facă vizitatorul (să sune, să trimită un e-mail, să ceară o ofertă). La Schildersbedrijf Example, pagina principală arată așa: Hero cu „Cereți o ofertă”, Carduri cu trei servicii, Fotografie și text despre modul de lucru, Recenzii, Întrebări și Contact.

Adăugarea unei secțiuni: trei căi

1. Alegeți singur în selector (gratuit)

Deschideți panoul Blocuri din bara laterală sau faceți clic în previzualizare pe Secțiune dedesubt: acest buton se află în bara de instrumente a secțiunii selectate și pe linia cu + care apare când treceți cu mouse-ul între două secțiuni. Sub previzualizare găsiți și Adăugați un bloc.

Selectorul afișează tipurile pe grupe: Populare, Deschidere și antet, Text și poveste, Servicii și produse, Prețuri și oferte, Încredere și echipă, Foto și video, Informații practice, Contact și îndemn la acțiune și Personalizat și widgeturi. Există un câmp de căutare („Căutați, de exemplu recenzii, prețuri sau echipă”). Fiecare tip este afișat ca exemplu în identitatea dumneavoastră vizuală. Faceți clic pe un tip pentru a vedea formele și alegeți una cu Adăugați. Dacă nu ați ajuns acolo dintr-o anumită secțiune, generatorul vă întreabă „Unde trebuie să apară ...?”: faceți clic pe o linie verde din pagină sau alegeți Sus ori Jos. Puteți de asemenea să trageți un bloc direct din panou în pagină.

Acest lucru nu costă nimic. Secțiunea nouă vine cu texte provizorii, pe care apoi le modificați singur (lecția 3.2) sau le lăsați completate de AI (lecția 3.1). Important: cât timp pe site-ul dumneavoastră mai există astfel de text provizoriu, generatorul nu publică site-ul. Veți primi mesajul „Pe site-ul dumneavoastră există încă text de exemplu. Completați-l mai întâi sau eliminați secțiunea.”

2. Cereți în chat: trei modele

Dacă scrieți în chat „Vreau o secțiune cu modul nostru de lucru în patru pași”, AI-ul vă arată mai întâi trei modele potrivite din biblioteca de secțiuni, în identitatea dumneavoastră vizuală. Alegeți cu Acest model sau faceți clic pe Lăsați AI-ul să aleagă. Apoi AI-ul completează secțiunea cu conținut, sub formă de propunere. Deoarece se adaugă o secțiune, acest lucru costă 2 editări.

Dacă spuneți că ceva trebuie pus într-o secțiune existentă („puneți programul în blocul de contact”) sau numiți un serviciu precum Spotify sau Calendly împreună cu un link, generatorul sare peste cele trei modele: atunci este clar ce doriți.

3. Lăsați să fie creat un bloc propriu

Nu găsiți ceea ce căutați? În partea de sus a selectorului se află Creați propriul bloc cu AI. Descrieți ce trebuie să poată face vizitatorii, de exemplu un calculator de prețuri sau un scurt chestionar, și faceți clic pe Creați cu AI. Acest lucru costă 2 editări, deoarece se adaugă un bloc nou.

Mutarea, copierea și ștergerea

Treceți cu mouse-ul peste o secțiune. Apare o bară de instrumente cu Modificați cu AI, Mutați în sus, Mutați în jos, Duplicați, Secțiune dedesubt și Ștergeți, plus un mâner pentru a trage secțiunea („Trageți această secțiune în alt loc”). La Ștergeți, generatorul vă întreabă mai întâi „Sigur?”. Și elementele individuale dintr-un rând, de exemplu un card sau o recenzie, pot fi trase, duplicate și șterse.

Toate aceste butoane sunt gratuite. Fiecare acțiune creează o versiune nouă („Secțiune mutată (versiunea ...)”), așa că o secțiune ștearsă din greșeală o puteți readuce prin Versiuni (lecția 3.5). Ștergerea printr-o instrucțiune în chat costă însă o editare: folosiți deci butonul.

Ajustarea dimensiunilor prin tragere

Treceți cu mouse-ul în previzualizare peste o secțiune, o fotografie sau un text și vor apărea mânere. Tragerea este gratuită și fără AI:

• Marginea de jos a unei secțiuni: mai mult sau mai puțin spațiu deasupra și dedesubtul secțiunii.
• Hero: mai înalt sau mai scund.
• Fotografie: mai lată sau mai îngustă, mai înaltă sau mai plată (forma), colțuri mai rotunjite sau mai drepte și punctul de focalizare (lecția 3.3).
• Bloc de text: mai lat sau mai îngust (marginea din dreapta).
• Titlu: mai mare sau mai mic, plus spațiul de sub el.
• Rând de carduri sau coloane: lățimea întregului rând.

Faceți dublu clic pe un mâner și dimensiunea implicită revine; la hero, generatorul alege din nou singur înălțimea.

De ce tragerea este mai bună decât să cereți „fă-l mai mare”: vedeți imediat ce se întâmplă, nu costă nimic, iar AI-ul nu schimbă textul pe parcurs.

Editați secțiunea: setările unei singure secțiuni

Faceți clic pe o secțiune și alegeți Editați secțiunea. Se deschide o fereastră cu:

Dedesubt se află aceleași butoane ca în bara de instrumente (Mutați în sus, Mutați în jos, Duplicați, Secțiune dedesubt, Ștergeți), iar sub „Sau cereți altceva AI-ului:” un câmp de text pentru o instrucțiune AI care privește doar această secțiune.

Câteva sfaturi. Alternați fundalurile (suprafață deschisă, niciunul, nuanță), astfel încât vizitatorii să vadă unde se încheie un subiect. Folosiți la un rând de carduri cel mult trei sau patru coloane; pe un telefon ele ajung oricum una sub alta. Folosiți cu măsură Ascunde pe mobil: nu ascundeți niciodată datele de contact sau ceva de care un vizitator de pe mobil are nevoie. Dacă doriți să verificați cum arată, alegeți Mobil în bara de sus.

HTML personalizat

În grupa Personalizat și widgeturi se află și HTML personalizat: o secțiune în care lipiți singur cod HTML și, dacă doriți, CSS. După plasare, o modificați cu Editați HTML-ul din secțiune. Culorile și fonturile urmează identitatea dumneavoastră vizuală prin variabile precum var(--acc), var(--tekst) și var(--kop-font). Codul CSS se aplică doar acestei secțiuni.

Limitările sunt intenționate: scripturile, iframe-urile și formularele nu funcționează aici. Pentru un player, un calendar, o hartă sau un formular de la alt serviciu folosiți Widgetul (lecția 4.3). HTML personalizat este pentru cei care cunosc HTML; pentru toți ceilalți, secțiunile obișnuite și AI-ul sunt calea mai rapidă.

Capcane

• Lăsarea textului provizoriu într-o secțiune din selector: atunci nu puteți publica site-ul.
• Prea multe secțiuni. O pagină lungă cu zece secțiuni nu este citită. Eliminați ce nu aduce nimic în plus. O pagină are cel mult 40 de secțiuni, dar nu veți avea niciodată nevoie de atâtea.
• Reglarea spațierii prin chat. Costă editări și este mai puțin precisă decât tragerea.
• Verificarea doar pe calculator. Coloanele, spațierea și ascunderea funcționează altfel pe un telefon.
• Ștergerea în chat, deși butonul Ștergeți este gratuit.

În generator: iată cum procedați

1. Faceți clic în previzualizare pe Secțiune dedesubt sau deschideți Blocuri.
2. Alegeți o grupă, un tip și o formă, apoi faceți clic pe Adăugați.
3. Înlocuiți textele provizorii singur sau cu ajutorul AI-ului.
4. Mutați cu Mutați în sus, Mutați în jos sau cu mânerul; duplicați sau ștergeți din bara de instrumente.
5. Trageți de marginea de jos pentru spațiere; faceți dublu clic pentru a reveni la valoarea implicită.
6. Deschideți Editați secțiunea pentru fundal, coloane, colțuri, înălțimea hero-ului și Ascunde pe mobil.
7. Verificați în modul Mobil.

Rezumat

• O pagină este un șir de secțiuni; 35 de tipuri, fiecare în una sau mai multe forme.
• Adăugarea prin selector este gratuită și aduce text provizoriu pe care trebuie să-l înlocuiți înainte de publicare; prin chat primiți trei modele și costă 2 editări.
• Mutarea, duplicarea, ștergerea și ajustarea dimensiunilor prin tragere sunt gratuite; un dublu clic pe un mâner readuce valoarea implicită.
• Editați secțiunea reglează fundalul, spațierea, spațiul între elemente, coloanele, colțurile, înălțimea hero-ului și Ascunde pe mobil.
• HTML personalizat este posibil, dar fără scripturi, iframe-uri și formulare; pentru acestea există widgetul.

Test

Exercițiu

Exercițiul D3.4: O secțiune în plus, una în minus. Îmbunătățiți structura paginii principale cu ajutorul butoanelor și mânerelor, fără instrucțiuni AI inutile.

Listă de verificare:

• [ ] ați notat secțiunile paginii principale de sus în jos;
• [ ] ați adăugat o secțiune prin selector și ați înlocuit tot textul provizoriu;
• [ ] ați eliminat sau comasat, cu Ștergeți, o secțiune care nu aducea nimic în plus;
• [ ] ați mutat o secțiune cu Mutați în sus, Mutați în jos sau cu mânerul;
• [ ] ați ajustat prin tragere spațierea a cel puțin unei secțiuni și ați readus-o o dată la valoarea implicită cu dublu clic;
• [ ] ați modificat fundalul sau coloanele în Editați secțiunea;
• [ ] ați verificat pagina în modul Mobil.

Întrebări:

1. Cum arăta ordinea secțiunilor înainte și după, și de ce ați ales această ordine?
2. Ce secțiune ați eliminat și de ce nu îi va lipsi acum nimic vizitatorului?
3. Câte editări v-a costat acest exercițiu și care pas ar fi costat editări dacă l-ați fi făcut prin chat?

După „gata” veți vedea un exemplu de răspuns: de la Hero, Cifre, Carduri, Recenzii, Contact la Hero, Carduri, Fotografie și text (modul de lucru), Recenzii, Întrebări, Contact, astfel încât serviciile să apară imediat sub deschidere; secțiunea Cifre a dispărut, deoarece cifrele erau inventate; exercițiul a costat 0 editări, în timp ce ștergerea sau o secțiune nouă prin chat ar fi costat 1 sau 2.

Resurse suplimentare

• Curs gratuit Vizibilitate online 3.2: Titlurile și structura unei pagini
• Curs gratuit Vizibilitate online 4.2: Mai întâi mobilul și viewport-ul
• Sitebuilder și AI Builder: pe care să îl alegeți și cum îl deschideți?