Cum se creează o pagină web infografică cu Elementar

Cu povești și informații la doar câteva clicuri, oamenii se bazează din ce în ce mai mult pe statistici și date numerice asupra narațiunilor abstracte pentru a lua decizii în cunoștință de cauză. Aici strălucesc paginile web infografice. Nu numai că atrag vizitatori, dar, de asemenea, captivează și atrag atenția, ceea ce face ca informațiile complexe să fie accesibile și captivante.

În plus, paginile web infografice pot prezenta date complexe în moduri convingătoare și ușor de citit. Atunci când infografiile însoțesc orice studii de caz sau povești/idei ipotetice, ele pot crea valori puternice pentru publicul de pe piață. Cu toate acestea, nu este dificil să creezi pagini web infografice.

Cu Elementar și HappyAddons, puteți crea orice tip de design de pagini web infografice pe WordPress. În această postare tutorial, vom afișa un ghid pas cu pas despre cum să creăm o pagină web infografică cu Elementar. Să începem!

Ce este o pagină web infografică?

O pagină web infografică este concepută pentru a prezenta informații folosind reprezentări grafice pentru a ilustra conceptele. Combină diverse elemente vizuale precum imagini, diagrame, figuri statistice, pictograme etc., cu texte minime pentru a simplifica datele cuprinzătoare.

Paginile web infografice prioritizează conținutul vizual pentru a îmbunătăți lizibilitatea, astfel încât oamenii să înțeleagă cu ușurință întregul concept la prima vedere. Acest tip de pagină este de obicei creat pentru povestiri, vizualizare a datelor și scopuri educaționale. Fără îndoială, paginile web infografice au rate mai mari de retenție și de implicare.

De ce și când ai nevoie de pagini web infografice

Să aruncăm acum o privire rapidă de ce și când aveți nevoie de proiecte de pagini infografice pe site -ul dvs. web înainte de a vă scufunda în secțiunea tutorial. Să explorăm.

• Simplifică informațiile complexe

Elementele vizuale ajută utilizatorii să înțeleagă subiecte complexe de date, fără a deveni copleșiți prin descompunerea informațiilor cheie.

• Mențineți vizitatorii pe site -ul dvs.

O pagină infografică eficientă îi motivează pe vizitatori să rămână pe site -ul dvs. mai mult timp prin scăderea ratelor de respingere și stimularea potențialului de conversie.

• Întărește autoritatea mărcii

Afișând vizual date structurate și informații valoroase, puteți stabili site -ul dvs. web ca furnizor de informații de încredere.

• Pentru conținut de marketing și promoțional

Paginile infografice ies în evidență ca o modalitate eficientă de a afișa comparații de produse alături de evidențierea campaniei. Puteți afișa, de asemenea, mărturii ale clienților pentru a atrage atenția clienților.

• Partajează postări pe social media

Conținutul infografic este ușor de partajat pe platformele de socializare. În plus, în ultimele timpuri, oamenii adoră să vadă infografiile și informațiile statistice mai mult decât poveștile textuale.

Cum se creează o pagină web infografică cu Elementar

Dacă utilizați WordPress de cel puțin câteva săptămâni, este posibil să fi auzit de Elementar . Este un plugin puternic de constructor de pagini de drag-and-drop prin care puteți proiecta pagini web fără codificare. Tot ce trebuie să faceți este să alegeți widget -uri de design, să trageți și să le aruncați pe pagină și să le personalizați.

HappyAddons este un binecunoscut addon la pluginul elementar. Este livrat cu multe widget -uri și caracteristici de design suplimentar. Dacă te simți vreodată Elementar nu este suficient, poți încerca HappyAddons cu el. Folosind cele două pluginuri împreună, puteți face magie în domeniul designului web.

Obțineți pluginurile făcând clic pe linkurile de mai jos.

• Element
• Happyaddons
• HappyAddons Pro

Puteți crea pagini infografice folosind doar versiunile gratuite ale Elementar și HappyAddons. Dar versiunea premium vine cu unele resurse mai interesante. Așadar, vom folosi versiunea premium a HappyAddons în acest tutorial.

După ce pluginurile sunt instalate și activate pe site -ul dvs. web, începeți să urmați tutorialul, așa cum se arată mai jos.

Pasul 01: Deschideți o postare sau o pagină cu Elementar

Deschideți o postare sau o pagină cu element. În stânga este panoul Elementar , unde veți găsi toate widget -urile și caracteristicile de design. În partea dreaptă se află Canvas Elementar , unde trebuie să trageți și să aruncați widget -urile pentru a proiecta pagina web infografică.

Pasul 02: Creați coloane pentru plasarea widget -urilor

Înainte de a plasa orice widget, trebuie să creați coloane. Pentru a face acest lucru, faceți clic pe pictograma (+) plus . Apoi, selectați opțiunea Container FlexBox . După aceea, selectați o structură de coloană de care aveți nevoie pentru proiectare.

Verificați cum să adăugați Lightbox în WordPress cu Elementar.

Pasul 03: Începeți să adăugați widget -uri adecvate la coloane

În conformitate cu preferințele dvs. de proiectare, plasați widget -urile în coloanele pe care le -ați creat. Să vedem cum proiectăm această secțiune.

# Adăugați widgetul de imagine

Tastați „ imagine ” în caseta de căutare. Odată ce widgetul Image apare mai jos, trageți și aruncați -l într -o secțiune adecvată din zona structurii coloanei.

Încărcați o imagine sau adăugați una din biblioteca media în zona widget din secțiunea marcată în imaginea de mai jos.

# Adăugați widget -ul cu titlu

Găsiți widgetul cu titlu și așezați -l în coloana din dreapta.

Scrieți un titlu pentru pagina infografică. Deoarece voi crea această pagină pentru diabet , am scris -o pentru titlul paginii.

Vino în fila Style . Veți primi opțiuni pentru a schimba alinierea, tipografia, culoarea textului și multe altele.

# Adăugați widgetul editorului de text

După aceea, adăugați widgetul editorului de text sub rubrică. Vă va permite să adăugați texte și paragrafe simple pe pânză.

Acum, în același mod, adăugați textul dorit la widgetul editorului de text. Apoi, creșteți fontul, schimbați familia de fonturi și selectați o culoare așa cum am arătat -o mai sus.

Dacă doriți să reduceți diferența dintre două widget -uri, puteți personaliza setările de marjă .

În același mod, adăugați text și imagini suplimentare pe pânză folosind widget -urile respective.

Folosind opțiunea de marjă , puteți muta și așeza orice widget într -un alt loc, cum ar fi harta de pe imaginea de mai jos. Sper că o înțelegi.

Aflați cum să creați un calendar de evenimente în WordPress.

Pasul 04: Creați o nouă secțiune pentru a adăuga diagrame statistice

O pagină a site -ului este o combinație de mai multe secțiuni. Așadar, pentru a crea o secțiune nouă, trebuie să adăugați o nouă zonă de structură a coloanelor la pagină.

Folosind widgetul editorului de text, adăugați o copie la noua secțiune infografică, așa cum am făcut -o mai jos.

# Adăugați un widget grafic pe pânză

HappyAddons vine cu șase widget -uri de diagramă care sunt cu adevărat utile pentru proiectarea paginii web infografice. Explorați doar widget -urile Chart și selectați cele care vă plac designul paginii web infografice.

Vom folosi widgetul Bare de abilități pentru a arăta anumite date statistice.

Presetările vin cu șabloane pre-proiectate. Puteți selecta orice presetare pentru widgetul Bars de abilități sau puteți rămâne cu cel implicit.

Din secțiunea de abilități , puteți adăuga informații la toate barele una câte una făcând clic pe filele respective. Puteți vedea că le -am redenumit și am stabilit procente pentru fiecare.

Accesați fila Style , păstrând widgetul Bare de abilități selectate. Puteți schimba culoarea textului, tipografia și alte alte setări ale widget -ului.

Folosind blocul editorului de text, puteți adăuga mai multe informații în partea stângă pentru a utiliza spațiul alb.

Pasul 05: Creați o nouă structură de coloană pentru informații suplimentare

Pentru a adăuga o altă secțiune, creați din nou o nouă structură de coloană. Apoi, adăugați o imagine și o descriere textuală așa cum am făcut -o în imaginea de mai jos.

Apoi, în partea dreaptă, umpleți spațiul alb cu informații adecvate. Am adăugat două texte folosind widgetul editorului de text. Între ele, am păstrat o secțiune folosind containerul FlexBox.

Puteți crea aceste sub-secțiuni folosind acest container FlexBox .

Acum, adăugați widget -ul pictogramei la secțiunile containerului.

Widgetul pictogramei vine cu o colecție cuprinzătoare de pictograme în bibliotecă. Puteți schimba pictograma una câte una pentru toate secțiunile. Fă -o așa cum am făcut -o.

Pentru a schimba culoarea pictogramei , accesați fila Style> Culoarea primară .

Pentru a -și schimba poziția, accesați fila Layout> Marja . Sper că poți face restul singur.

Pasul 06: Creați ultima secțiune pentru proiectarea paginii web infografice

Ca mai sus, creați o nouă secțiune și o structură de coloană folosind containerul FlexBox. De asemenea, adăugați o rubrică pentru secțiune.

# Adăugați un grafic de plăcintă

După cum am spus mai sus, HappyAddons vine cu multe widget -uri utile. Vom folosi graficul de plăcintă în această secțiune. Trageți -l și aruncați -l în secțiunea respectivă.

Din secțiunea Grafic PIE din widget, specificați informații pentru graficul PIE folosind toate filele una câte una.

Extindeți secțiunea Setări . De aici, puteți personaliza numeroase lucruri. Dar cele mai proeminente pe care le puteți face este să scrieți un titlu și să schimbați poziția legendei .

Accesați fila Style . Puteți personaliza tipografia, dimensiunea fontului și diverse efecte de culoare pentru widget.

# Adăugați un grafic de bare

În același mod, adăugați widget -ul Chart Bar pe pânză.

Ca barele de abilități și widget -urile Chart Bar, personalizați widget -ul Chart Bar, setarea informațiilor și stilizarea după cum doriți. Sper că o poți face singur. Fă -o.

Iată un ghid despre modul de afișare a fotografiei produsului rotativ de 360 ​​de grade în WordPress.

Pasul 07: Setați o culoare de fundal pentru designul paginii web infografice

Setarea unei culori de fundal pe întreaga pagină ar putea face ca proiectarea paginii web infografice să fie mai calmantă. Pentru a face acest lucru, faceți clic pe pictograma cu trei linii din colțul din stânga.

Vei fi dus la un nou panou. Faceți clic pe opțiunea Setări site .

Vei fi din nou dus la un nou panou. Apăsați opțiunea de fundal .

Din opțiunea de culoare, selectați o culoare. Veți vedea că culoarea este aplicată pe fundalul paginii.

Astfel, puteți crea și proiecta designul paginii web infografice.

Pasul 08: Previzualizați designul paginii web infografice

Accesați pagina de previzualizare și verificați dacă totul funcționează bine. Funcționează bine la sfârșitul tău.

Închiderea!

Într -adevăr, Elementar, împerecheat cu HappyAddons, vă împuternicește să creați pagini infografice uimitoare care simplifică informațiile complexe. Cu toate acestea, pentru a obține cele mai bune rezultate, anumite puncte cheie trebuie luate în considerare cu atenție.

Păstrați designul curat și neclintit prin evitarea textului și a imaginilor excesive. Utilizați o paletă de culori care se aliniază cu identitatea dvs. de marcă și asigurați -vă că receptivitatea mobilă pentru a menține un aspect constant pe toate dispozitivele. Dacă este posibil, adăugați efecte de animație și plasare, deoarece acestea vă pot face conținutul interactiv.

Străduiți -vă pentru un echilibru armonios între conținutul textual și elementele de design. Prioritizează utilizarea graficelor și graficelor, deoarece acestea se aliniază perfect cu scopul paginilor infografice. În cele din urmă, optimizați -vă pagina pentru a vă asigura că se încarcă rapid, fără a compromite performanța.

Astfel, urmând toate aceste cele mai bune practici, puteți crea pagini web infografice minunate care adaugă valoare și aduc conversii.