Come creare una pagina Web infografica con Element

Con storie e informazioni a pochi clic, le persone fanno sempre più affidamento su statistiche e dati numerici rispetto alle narrazioni astratte per prendere decisioni informate. È qui che brillano le pagine Web infografiche. Non solo attirano i visitatori, ma catturano e attirano anche l'attenzione, il che rende informazioni complesse sia accessibili che coinvolgenti.

Inoltre, le pagine Web infografiche possono presentare dati complessi in modi convincenti e di facile lettura. Quando le infografiche accompagnano qualsiasi studio o storie/idee ipotetiche, possono creare valori potenti per il pubblico di mercato. Tuttavia, non è difficile creare pagine Web infografiche.

Con Elementor e HappyAddons, puoi creare qualsiasi tipo di progettazione di pagina Web infografica su WordPress. In questo post di tutorial, mostreremo una guida passo-passo su come creare una pagina Web infografica con Elementor. Iniziamo!

Cos'è una pagina web infografica?

Una pagina Web infografica è progettata per presentare informazioni utilizzando rappresentazioni grafiche per illustrare i concetti. Combina vari elementi visivi come immagini, grafici, figure statistiche, icone, ecc., Con testi minimi per semplificare i dati completi.

Le pagine Web infografiche danno la priorità ai contenuti visivi per migliorare la leggibilità in modo che le persone possano facilmente comprendere l'intero concetto a prima vista. Questo tipo di pagina viene generalmente creato per narrazione, visualizzazione dei dati e scopi educativi. Senza dubbio, le pagine Web infografiche hanno tassi di conservazione e coinvolgimento più elevati.

Perché e quando hai bisogno di pagine Web infografiche

Diamo ora una rapida occhiata al perché e quando hai bisogno di progetti di pagine infografiche sul tuo sito Web prima di immergerti nella sezione tutorial. Esploriamo.

• Semplifica informazioni complesse

Gli elementi visivi aiutano gli utenti a comprendere argomenti di dati complessi senza essere sopraffatti abbattendo le informazioni chiave.

• Mantieni i visitatori sul tuo sito web più a lungo

Una pagina infografica efficace motiva i visitatori a rimanere più a lungo sul tuo sito riducendo le velocità di rimbalzo e aumentando il potenziale di conversione.

• Rafforza l'autorità del marchio

Visualizzando visivamente dati strutturati e preziose approfondimenti, è possibile stabilire il tuo sito Web come fornitore di informazioni di fiducia.

• Per il marketing e i contenuti promozionali

Le pagine infografiche si distinguono come un modo efficace per visualizzare confronti dei prodotti insieme ai punti salienti della campagna. Puoi anche visualizzare le testimonianze dei clienti per attirare l'attenzione dei clienti.

• Condividi post sui social media

I contenuti infografici sono facili da condividere sulle piattaforme di social media. Inoltre, negli ultimi tempi, le persone adorano vedere le infografiche e le informazioni statistiche più che storie testuali.

Come creare una pagina Web infografica con Element

Se usi WordPress da almeno alcune settimane, potresti aver sentito parlare di Elementor . È un potente plug-in per il costruttore di pagine di drag-and-drop con cui è possibile progettare pagine Web senza codifica. Tutto quello che devi fare è scegliere i widget di design, trascinarli sulla pagina e personalizzarli.

HappyAddons è un noto componente aggiuntivo al plug-in Element. Viene fornito con molti widget e funzionalità di design aggiuntivi. Se ti senti mai sufficiente, puoi provare HappyAddons. Usando i due plugin insieme, puoi fare magia nel campo del web design.

Ottieni i plugin facendo clic sui collegamenti seguenti.

• Elemento
• HappyAddons
• HappyAddons Pro

Puoi creare pagine infografiche utilizzando solo le versioni gratuite di Element e HappyAddons. Ma la versione premium viene fornita con alcune risorse più interessanti. Quindi, useremo la versione premium di HappyAddons in questo tutorial.

Una volta installati e attivati ​​i plugin sul tuo sito Web, inizia a seguire il tutorial come mostrato di seguito.

Passaggio 01: Apri un post o una pagina con Element

Apri un post o una pagina con Element. A sinistra è il pannello Element , dove troverai tutti i widget e le funzionalità di design. Sulla destra è la tela Element , in cui è necessario trascinare e rilasciare i widget per progettare la pagina Web infografica.

Passaggio 02: creare colonne per il posizionamento di widget

Prima di posizionare qualsiasi widget, è necessario creare colonne. Per fare ciò, fai clic sull'icona (+) più . Quindi, selezionare l'opzione del contenitore Flexbox . Successivamente, selezionare una struttura della colonna necessaria per il design.

Controlla come aggiungere LightBox in WordPress con Element.

Passaggio 03: Inizia ad aggiungere widget adatti alle colonne

Secondo le tue preferenze di progettazione, posiziona i widget nelle colonne che hai creato. Vediamo come progettiamo questa sezione.

# Aggiungi il widget immagine

Digita " immagine " nella casella di ricerca. Una volta che il widget immagine appare di seguito, trascinalo e lascialo cadere in una sezione adatta nell'area della struttura della colonna.

Carica un'immagine o aggiungi una dalla libreria multimediale all'area del widget dalla sezione contrassegnata nell'immagine seguente.

# Aggiungi il widget intestazione

Trova il widget di intestazione e posizionalo nella colonna destra.

Scrivi un titolo per la pagina infografica. Dato che creerò questa pagina per il diabete , l'ho scritta per il titolo della pagina.

Vieni alla scheda Style . Otterrai le opzioni per cambiare l' allineamento, la tipografia, il colore del testo e altro ancora.

# Aggiungi il widget dell'editor di testo

Successivamente, aggiungi il widget dell'editor di testo sotto l'intestazione. Ti consentirà di aggiungere semplici testi e paragrafi alla tela.

Ora, allo stesso modo, aggiungi il tuo testo desiderato al widget dell'editor di testo. Quindi, aumenta il suo carattere, cambia la famiglia dei caratteri e seleziona un colore come abbiamo mostrato sopra.

Se si desidera ridurre il divario tra due widget, è possibile personalizzare le impostazioni del margine .

Allo stesso modo, aggiungi ulteriore testo e immagini alla tela utilizzando i rispettivi widget.

Utilizzando l' opzione margine , è possibile spostare e posizionare qualsiasi widget in un altro posto, come la mappa sull'immagine qui sotto. Spero che tu lo capisca.

Scopri come creare un calendario degli eventi in WordPress.

Passaggio 04: crea una nuova sezione per aggiungere grafici statistici

Una pagina del sito Web è una combinazione di diverse sezioni. Quindi, per creare una nuova sezione, è necessario aggiungere una nuova area della struttura della colonna alla pagina.

Utilizzando il widget dell'editor di testo, aggiungi una copia alla nuova sezione infografica, come abbiamo fatto di seguito.

# Aggiungi un widget grafico alla tela

HappyAddons viene fornito con sei widget grafici che sono davvero utili per la progettazione della pagina Web infografica. Basta esplorare i widget grafici e selezionare quelli che ti piacciono il design della pagina web infografica.

Useremo il widget delle barre delle abilità per mostrare alcuni dati statistici.

I preset sono dotati di modelli pre-progettati. È possibile selezionare qualsiasi preimpostazione per il widget delle barre di abilità o rimanere con quello predefinito.

Dalla sezione Skills , è possibile aggiungere informazioni a tutte le barre una per una facendo clic sulle rispettive schede. Puoi vedere che li abbiamo rinominati e impostare le percentuali per ciascuno.

Vai alla scheda Style , mantenendo selezionata il widget delle barre di abilità. È possibile modificare il colore del testo, la tipografia e varie altre impostazioni del widget.

Utilizzando il blocco dell'editor di testo, è possibile aggiungere ulteriori informazioni sul lato sinistro per utilizzare lo spazio bianco.

Passaggio 05: creare una nuova struttura di colonna per ulteriori informazioni

Per aggiungere un'altra sezione, creare di nuovo una nuova struttura di colonna. Quindi, aggiungi un'immagine e una descrizione testuale come abbiamo fatto nell'immagine qui sotto.

Quindi, sul lato destro, riempi lo spazio bianco con informazioni adeguate. Abbiamo aggiunto due testi utilizzando il widget dell'editor di testo. Tra loro, abbiamo tenuto una sezione usando il contenitore Flexbox.

È possibile creare queste sottosezioni utilizzando questo contenitore Flexbox .

Ora aggiungi il widget Icon alle sezioni del contenitore.

Il widget icona viene fornito con una raccolta completa di icone in biblioteca. Puoi cambiare l'icona uno per uno per tutte le sezioni. Fallo come abbiamo fatto.

Per cambiare il colore dell'icona , vai alla scheda Style> colore primario .

Per cambiare la loro posizione, vai alla scheda Layout> . Spero che tu possa fare il resto da solo.

Passaggio 06: crea l'ultima sezione per la progettazione della pagina web infografica

Come sopra, crea una nuova sezione e struttura della colonna utilizzando il contenitore Flexbox. Aggiungi anche un'intestazione per la sezione.

# Aggiungi un grafico a torta

Come detto sopra, HappyAddons viene fornito con molti utili widget grafici. Useremo il grafico a torta in questa sezione. Trascina e lascialo cadere nella rispettiva sezione.

Dalla sezione grafico a torta del widget, specificare le informazioni per il grafico a torta utilizzando tutte le schede una per una.

Espandere la sezione Impostazioni . Da qui puoi personalizzare numerose cose. Ma i più importanti che puoi fare è scrivere un titolo e cambiare la posizione della leggenda .

Vai alla scheda Style . Puoi personalizzare la tipografia, le dimensioni del carattere e vari effetti di colore per il widget.

# Aggiungi un grafico a barre

Allo stesso modo, aggiungi il widget grafico a barre alla tela.

Come le barre di abilità e i widget grafici a barre, personalizzare il widget grafico a barre, impostazione delle informazioni e stilizzazione come desideri. Spero che tu possa farlo da solo. Fallo.

Ecco una guida su come visualizzare la fotografia di prodotto rotante a 360 gradi in WordPress.

Passaggio 07: impostare un colore di sfondo per il design della pagina web infografica

L'impostazione di un colore di sfondo in tutta la pagina potrebbe rendere la progettazione della pagina web infografica più straordinaria. Per fare ciò, fai clic sull'icona a tre righe nell'angolo a sinistra.

Sarai portato a un nuovo pannello. Fare clic sull'opzione Impostazioni del sito .

Sarai di nuovo portato a un nuovo pannello. Premi l' opzione di sfondo .

Dall'opzione colore, selezionare un colore. Vedrai che il colore viene applicato attraverso lo sfondo della pagina.

Pertanto, puoi creare e progettare la progettazione della pagina web infografica.

Passaggio 08: Anteprima la progettazione della pagina Web infografica

Vai alla pagina di anteprima e controlla se tutto funziona bene. Funziona bene da parte tua.

Close!

In effetti, Elementor, abbinato a HappyAddons, ti consente di creare straordinarie pagine Web infografiche che semplificano informazioni complesse. Tuttavia, per ottenere i migliori risultati, alcuni punti chiave devono essere attentamente considerati.

Mantieni il tuo design pulito e ordinato evitando testi e visioni eccessive. Usa una tavolozza di colori che si allinea con l'identità del tuo marchio e assicurati la reattività mobile per mantenere un aspetto coerente su tutti i dispositivi. Se possibile, aggiungi gli effetti di animazione e hover, in quanto possono rendere interattivo il tuo contenuto.

Cerca un equilibrio armonioso tra contenuto testuale ed elementi di design. Dai la priorità all'uso di grafici e grafici, poiché si allineano perfettamente con lo scopo delle pagine infografiche. Infine, ottimizza la tua pagina per assicurarti che si carica rapidamente senza compromettere le prestazioni.

Pertanto, seguendo tutte queste migliori pratiche, puoi creare meravigliose pagine Web infografiche che aggiungono valore e apportano conversioni.