Cum se creează secțiuni de site-uri web Hero în Gutenberg cu tema Total

Tema WordPress Total vine cu o gamă întreagă de instrumente de care un site web de afaceri ar putea avea nevoie vreodată.

Tema vă oferă editare vizuală prin WordPress Customizer și un import rapid de date demonstrative, care sunt deosebit de utile pentru construirea unei pagini de față remarcabile.

După cum vedeți, versiunea gratuită a Total nu vă blochează cu niciun constructor suplimentar de pagini WordPress, ci oferă mai degrabă o modalitate nativă WordPress de a vă proiecta site-ul.

Odată cu venirea lui Gutenberg, editorul WordPress bazat pe blocuri, orice temă WordPress, inclusiv Total, poate fi personalizată mult mai mult. Alegerea elementelor de conținut (blocuri) ne oferă libertatea de personalizare pe care nu am mai văzut-o până acum în nucleul WordPress, greu de negat.

Unele setări de stil de bloc, totuși, sunt încă foarte limitate în editorul implicit. Deci, dacă sunteți în noul editor Gutenberg și Total caută să construiască și să proiecteze conținut mai bun, veți găsi câteva sfaturi utile în acest tutorial.

Pentru a fi mai precis, în această postare, ne-am dori să arătăm câteva exemple despre cum să construiți și să personalizați elementele de site esențiale precum secțiunile eroi, suberoi și îndemn în Gutenberg. Cele care de obicei ajută companiile:

• Creați secțiuni de introducere/bun venit pentru site-ul web
• Promovați produse sau evenimente cheie
• Concentrați-vă pe anumite articole sau servicii din portofoliu etc.

Pentru a spori posibilitățile de personalizare ale lui Gutenberg, vom folosi pluginul Getwid WordPress Blocks pe care îl recomandăm utilizatorilor temei Total. Suntem siguri că unii utilizatori Total și-au încercat deja mâna la Getwid.

Dar pentru cei dintre voi care vă întrebați ce este Getwid, următoarea este o scurtă descriere.

În câteva cuvinte, este un supliment gratuit pentru Gutenberg, care vine cu cea mai mare bibliotecă de blocuri de tip premium și o colecție de modele adaptate pentru Gutenberg . Nu este singurul motiv pentru care îl recomandăm.

Suntem deosebit de interesați de acest plugin, deoarece se îmbină frumos cu stilul total implicit, vă permite să dezactivați orice bloc de care nu aveți nevoie și este cu adevărat bogat în funcții.

Pluginul apare ca unul recomandat atunci când activați Total – este o soluție temporară pentru a vedea dacă se potrivește clienților noștri.

Dar ei bine, trebuie să încerci singur pentru a vedea dacă este soluția ta. Între timp, să trecem prin exemplele pe care am reușit să le creăm.

Exemple de secțiuni eroi și îndemnuri create cu Getwid în Total

Am efectuat aceste teste într-o versiune gratuită a temei Total și putem spune cu siguranță că aproape nu au existat limitări.

Cu toate acestea, opțiunile pentru lățimea totală a containerului site-ului web sunt limitate, așa că dacă sunteți în căutarea unor aspecte captivante pe ecran complet, vă recomandăm să vă gândiți la Total Plus.

În primul rând, aproape întotdeauna va trebui să utilizați blocul Secțiune al blocurilor Getwid WordPress. Este un container care poate gestiona orice număr de orice alte blocuri. Astfel, secțiunile dvs. de eroi pot afișa orice fel de conținut.

Un alt lucru proeminent despre containerul Section este că vă oferă multe tipuri de fundal: o imagine, culoare, videoclip (din biblioteca dvs. media WP sau YouTube), gradient multicolor și multe altele.

Prin urmare, principalele dvs. sarcini atunci când proiectați zonele site-ului web cu blocul Secțiune sunt:

• Alegeți și personalizați tipul de fundal, astfel încât conținutul de deasupra acestuia să rămână lizibil și clar.
• Introduceți blocurile necesare în ordinea preferată.
• Reglați distanța (există unghiuri care pot fi trasate la fel ca în constructorii vizuali pentru a seta spațiile interioare și exterioare).
• Opțional: adăugați animație, divizoare de formă și alte elemente de decor.

Să mergem acum cu exemple.

Exemplul 1. Vitrina produsului

Toate blocurile din acest exemplu sunt plasate în interiorul blocului Secțiune:

1. Titlu avansat
2. Titlu avansat
3. Titlu avansat
4. Grup de butoane
5. Fundalul secțiunii: o imagine (Poziționare > dreapta sus; Dimensiune > Auto)

Blocul de titlu vă permite să utilizați orice font Google, dimensiunea textului, greutatea fontului etc. Există, de asemenea, mai multe stiluri pentru butoane (completare sau contur).

Cea mai mare provocare care se poate întâmpla este găsirea imaginii de fundal potrivite și alegerea poziției corecte a imaginii, deoarece este redimensionată automat în funcție de fereastra de vizualizare.

Exemplul 2. Extras de portofoliu

Toate blocurile sunt plasate în interiorul blocului Secțiune:

1. Titlu avansat
2. Titlu avansat
3. Trei coloane (paragraf, imagine, imagine, imagine)
4. Fundalul secțiunii: gradient

De asemenea, puteți plasa un buton de îndemn pentru a trimite la pagina completă a portofoliului.

Exemplul 3. Caracteristică sau card de eveniment

Într-o astfel de secțiune erou puteți prezenta un produs, eveniment, serviciu, lucru, persoană etc.

Blocul Advanced Heading vă permite să alegeți orice font:

În acest exemplu, am folosit un fundal gradient și un divizor de formă de fund de fundal (Waves Multilayered).

1. Două titluri avansate
2. Paragraf
3. Buton
4. Imagine
5. Fundal secțiunii: gradient + divizoare de formă

Exemplul 4. Secțiunea îndemn la acțiune

Din nou, trebuie să începeți cu blocul Secțiune. Pentru a plasa titluri ca în exemplul de mai jos, puteți utiliza un șablon din Biblioteca de șabloane Getwid sau puteți crea un model de la zero.

Este o secțiune foarte ușoară cu imaginea de fundal, câteva titluri și un buton centralizat.

1. Trei blocuri de titluri avansate
2. Blocul Buton
3. Fundalul secțiunii: o imagine cu opacitate (Dimensiune > copertă)

De asemenea, vă veți bucura de cât de ușor puteți ajusta alinierea conținutului cu unghiurile de tragere:

Este, de asemenea, o tendință de a crea machete offset punând titluri peste imagini:

În Getwid, puteți obține acest lucru setând o imagine de fundal adecvată cu un spațiu liber pentru linia de text.

Exemplul 5. Secțiuni sub-eroi

Destul de des, secțiunile sub-eroi oferă mai multe informații despre un proiect sau persoană. Este potrivit pentru a vă prezenta biografia, povestea sau obiectivele cheie.

Ca element vizual, am folosit blocul Image Stack Gallery de la Getwid, care vine cu mai multe stiluri. Puteți, totuși, să îl înlocuiți cu o imagine, un videoclip sau orice alt element de conținut.

1. Două titluri avansate
2. Paragraf
3. Buton
4. Blocul Galerie Stack de imagini
5. Fondul secțiunii: culoare solidă

Exemplul 6. Accente vizuale

Galeriile de imagini, glisoarele și videoclipurile sunt instrumente vizuale foarte comune pentru crearea de secțiuni care atrage atenția.

De exemplu, puteți utiliza blocul Media & Text Slider de la Getwid pentru a crea o prezentare de diapozitive cu conținut text opțional:

1. Glisor media și text
2. Fundal secțiunii: gradient + separatoare de sus și de jos cu înălțime personalizată

Există, de asemenea, numeroase blocuri Getwid bazate pe postare care pot fi prezentate într-un glisor (vor fi obținute automat din conținutul site-ului dvs.). Doriți să prezentați câteva postări cele mai recente sau selectate manual într-un format glisor sau grilă/listă? Există un bloc pentru el.

Exemplul 7. Bannere

Getwid vine cu un bloc Banner la îndemână care oferă containere implicite pentru imagini și text. De asemenea, are o gamă de efecte de animație, permițându-vă să faceți mai dinamice secțiunile cu bannere.

Blocul este o potrivire perfectă atât pentru vânzări temporare, cât și pentru momentele importante.

1. Banner
2. Fondul secțiunii: gradient monocrom

Exemplul 8. Secțiuni informative

Dacă doriți să afișați mai multe informații într-un mod structurat și compact, Getwid oferă trei blocuri dedicate acestui scop: Tabs, Accordion și Toggle.

Iată un aspect pe două coloane cu blocul Acordeon și o imagine lângă el:

Caracteristica unică a acestor blocuri este capacitatea de a conține orice bloc în interiorul widget-urilor cu file. Aceasta înseamnă că, pe lângă text, puteți adăuga imagini, liste, videoclipuri, galerii, glisoare la file.

Există multe alte blocuri care pot adăuga funcționalități unice secțiunilor dvs. de marketing, de exemplu Image Hotspot pentru a construi secțiuni informative de imagine, Icon Box pentru servicii, un flux de galerie Instagram în timp real și multe altele.

Puteți construi și proiecta secțiuni similare dintr-o pagină Gutenberg goală, optând pentru aspectul de pagină necesar în setările paginii Total.

Pentru a încheia

Știți care este cel mai bun lucru despre utilizarea combinației Gutenberg și Getwid în tema gratuită Total? Nu, nu numai numărul de blocuri contează.

Ceea ce este mai important, nu trebuie să ai ochi de designer (sau abilități de dezvoltator) pentru a crea conținut arătos. Există atât de multe skin-uri prefabricate, modele bloc și modele gata de utilizare care sunt acolo pentru a vă ajuta. Blocurile WordPress Getwid sunt, de asemenea, o alternativă bună la constructorii de pagini pentru cei dintre voi care rămâneți cu versiunea gratuită a Total.

Până când editorul de blocuri nu este suficient de matur, un supliment suplimentar nativ Gutenberg poate fi un punct de plecare excelent.

Ai încercat Gutenberg sau Getwid? Spune-ne în comentarii.