Come progettare un grafico comparativo di prodotti creativi con Divi

Una tabella di confronto dei prodotti può essere un modo estremamente efficace per promuovere nuovi prodotti insieme alle loro funzionalità aggiornate. L'aspetto visivo di un grafico è più attraente per gli utenti rispetto al semplice testo. E la struttura di un confronto fianco a fianco consente agli utenti di vedere facilmente la differenza tra ogni caratteristica del prodotto.

In questo tutorial, ti mostrerò come progettare un grafico comparativo di prodotti creativi con Divi. E questo layout di progettazione può essere utilizzato per confrontare qualsiasi cosa. Ad esempio, posso vedere che questo è un layout perfetto anche per i casi di studio.

Iniziamo.

Sbirciata

Ecco un'anteprima del grafico di confronto che creerò in questo tutorial.

Cosa ti serve per questo tutorial

Per questo tutorial, è necessario quanto segue:

• Tema Divi (installato e attivo)
• Due immagini (circa 800 px per 450 px) per fungere da immagini del prodotto nella tabella di confronto.

Creare la tua intestazione e le immagini del prodotto

Per cominciare, crea una nuova pagina, distribuisci Visual Builder, quindi scegli di creare la tua pagina da zero.

Quindi aggiungi un layout a una colonna alla riga della tua sezione.

Prima di aggiungere un modulo, andiamo all'impostazione della sezione e aggiorniamo quanto segue:

Colore di sfondo: #222222
Colore sfondo sfumato a sinistra: rgba(242,90,71,0.14)
Colore sfondo sfumato a destra: rgba(255,255,255,0)
Tipo di gradiente: radiale
Posiziona il gradiente sopra l'immagine di sfondo: S

Salva le impostazioni. Ora apri le impostazioni della riga e assegna alla tua riga una larghezza personalizzata del 100%.

Quindi aggiungi un modulo di testo alla tua riga di una colonna con le seguenti impostazioni:

Per il contenuto, inserisci questo html:

<h2>Compare</h2>
VS

Carattere del testo: Montserrat
Peso del carattere del testo: Ultra grassetto
Stile del carattere del testo: TT (maiuscolo)
Colore del testo del testo: rgba (255,255,255,0.3)
Dimensione del testo del testo: 3vw
Altezza riga di testo: 1,8 em
Orientamento del testo: al centro

Quindi aggiorna le opzioni di progettazione dell'intestazione h2 e dai al tuo modulo un margine inferiore personalizzato per creare l'effetto di sovrapposizione.

Intestazione 2 Carattere: Montserrat
Colore testo titolo 2: rgba (255,255,255,0.3)
Intestazione 2 Dimensione del testo: 13vw
Intestazione 2 Spaziatura lettere: 1vw
Margine personalizzato: -13vw inferiore

Una parte del tuo testo sarà nascosta per ora, ma verrà visualizzata una volta aggiunto l'altro contenuto.

Due creano la nostra seconda riga, duplicano la prima riga e quindi eliminano il modulo di testo all'interno della riga duplicata. Quindi aggiorna la struttura della colonna a una riga a due colonne.

Vai avanti e aggiorna le impostazioni della riga come segue:

Larghezza grondaia personalizzata: 1
Imbottitura personalizzata colonna 1: 2vw destra
Imbottitura personalizzata colonna 2: 2vw sinistra

Qui è dove metteremo le immagini dei nostri due prodotti che desideriamo confrontare. Nella colonna di sinistra della nostra riga, aggiungi la tua immagine utilizzando il modulo immagine. Per questo esempio, sto usando un'immagine png di 800 px per 459 px. Quindi aggiorna le impostazioni del modulo immagine come segue:

Larghezza: 70%
Allineamento del modulo: a destra
Imbottitura personalizzata: fondo 40px

Quindi copia il modulo e incollalo nella colonna di destra. Modificare l'immagine e quindi regolare l'allineamento del modulo a sinistra.

Sotto il modulo immagine nella colonna di sinistra, aggiungi un modulo di testo con il seguente contenuto di testo: "Old Product".

Quindi vai nel modulo di testo nella prima riga sopra e copia gli stili di testo.

Quindi passa il mouse sul nuovo modulo di testo con il testo "Old Product" e incolla gli stili di testo nel modulo facendo clic con il pulsante destro del mouse.

Questo corrisponderà agli stili di testo di cui abbiamo bisogno molto più velocemente. Ora non ci resta che
aggiorna la dimensione e l'allineamento del testo:

Dimensione del testo del testo: 16px
Orientamento del testo: a destra

Ora vai alla scheda Avanzate e inserisci il seguente CSS personalizzato nella casella di input Main Element:

text-align:right !important;

Ciò è necessario perché Divi regolerà l'allineamento del testo a sinistra sugli smartphone per impostazione predefinita. Questo frammento CSS lo sovrascriverà e si assicurerà che rimanga allineato correttamente anche sullo smartphone.

Salva le impostazioni. Quindi copia il modulo di testo e incollalo sotto l'immagine nella colonna di destra. Modifica il contenuto del testo in "Nuovo prodotto" e aggiorna l'orientamento del testo su "Sinistra".

Ecco cosa abbiamo finora.

Creazione della tabella di confronto dei prodotti

Per creare il nostro grafico di confronto utilizzeremo una sequenza di due righe di colonne ciascuna separata da una riga di una colonna. Le due righe di colonna conterranno le nostre barre colorate. E la riga di una colonna visualizzerà il nome della funzione associata ai valori della barra.

Crea una nuova riga a due colonne e aggiorna le impostazioni della riga come segue:

Larghezza personalizzata: 100%
Larghezza grondaia: 1
Imbottitura personalizzata: 0px in basso
Imbottitura personalizzata colonna 1: 2vw destra
Imbottitura personalizzata colonna 2: 2vw sinistra

Il riempimento personalizzato delle colonne 1 e 2 crea lo spazio di cui abbiamo bisogno nel mezzo dei nostri grafici a barre che aggiungeremo.

Nella colonna di sinistra aggiungi un modulo divisore e aggiorna le impostazioni come segue:

Colore sfondo sfumato a sinistra: rgba(81,91,214,0.25)
Colore sfondo sfumato a destra: rgba (255,255,255,0.15)
Direzione gradiente: 90 gradi
Posizione di partenza: 35%
Colore: #515bd6
Peso divisore: 23 px (questo valore dovrebbe essere uguale al valore Altezza divisore che è 23 px per impostazione predefinita in modo che il divisore abbia la stessa larghezza dello sfondo del modulo)
Imbottitura personalizzata: 70% a sinistra (spinge il divisore a destra del 75% con conseguente valore del grafico a barre del 25% da destra)

Salva le impostazioni.

Ora copia il modulo divisore nella colonna di destra della stessa riga. Quindi aggiorna le seguenti impostazioni:

Colore sfumatura di sfondo a sinistra: rgba(255,255,255,0.15)
Colore sfondo sfumato a destra: rgba(242,90,71,0.25)
Posizione di partenza: 70%
Colore: #f25a47
Imbottitura personalizzata: 30% a destra (spinge il divisore a sinistra del 30% con conseguente valore del grafico a barre del 70% da sinistra.)

Ora che la tua prima riga di barre è a posto, dobbiamo aggiungere una riga di una colonna sotto di essa per inserire l'etichetta delle caratteristiche del prodotto.

Crea una riga di una colonna con un riempimento personalizzato di 0 px in alto. Quindi aggiungi un nuovo modulo blurb e aggiorna le impostazioni del modulo blurb come segue:

Contenuto: "caratteristica"
Usa l'icona: S
Icona: vedi screenshot

Colore icona: rgba (255,255,255,0.3)
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 30px
Orientamento del testo: centro
Carattere del corpo: Montserrat
Peso del carattere del corpo: Ultra grassetto
Colore del corpo del testo: rgba (255,255,255,0.3)
Spaziatura delle lettere del corpo: 2px
Margine personalizzato: -20 px

Nella scheda Avanzate, puoi eliminare il margine predefinito sotto l'icona blurb aggiungendo il seguente CSS personalizzato nella casella CSS immagine Blurb:

margin-bottom: 0px;

Ora che hai il tuo primo esempio funzionante di funzionalità di confronto dei prodotti, tutto ciò che devi fare è duplicare le due righe che compongono la funzionalità di confronto (la riga con le due barre/divisori e la riga con il modulo blurb). Trovo che sia più semplice usare ctrl + c (o command + c) per copiare ogni riga e quindi ctrl + v (o command + v) per incollarli uno sotto l'altro. Quindi aggiorna semplicemente il riempimento personalizzato per i divisori duplicati per mostrare diversi valori del grafico a barre.

Puoi anche regolare la posizione iniziale e finale del gradiente in base al valore di riempimento personalizzato scelto. Ad esempio, se assegni al divisore di colonna sinistro un'imbottitura del 60% a sinistra, puoi regolare la posizione iniziale della sfumatura al 30% (esattamente metà della distanza dell'imbottitura).

Per un tocco finale, potresti voler aggiungere uno sfondo divisore alla tua sezione. Per questo esempio, aggiungerò quanto segue:

Divisore superiore: vedi screenshot
Colore divisore: rgba (255,255,255,0,05)
Altezza divisore: 19vw

Questo è il risultato finale.

Mi piace anche l'aspetto del design quando cambio il colore di sfondo della sezione in # 000314.

Rendere il design reattivo

In Divi, qualsiasi riga a due colonne verrà automaticamente impilata l'una sull'altra sui dispositivi mobili. Questo ovviamente romperà il design sui dispositivi mobili. Per risolvere questo problema dovremo fare due cose. Innanzitutto, dobbiamo aggiungere un piccolo frammento di CSS personalizzato all'interno del personalizzatore del tema.

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

Questo codice regolerà la larghezza della colonna di qualsiasi riga con la classe CSS "disable-break" al 50%. Ciò assicurerà di mantenere la nostra struttura a due colonne sui dispositivi mobili in modo che il design non si rompa. Non dimenticare di pubblicare le modifiche.

Una volta che il CSS è a posto, dobbiamo aggiungere la classe CSS a qualsiasi riga che abbia una struttura a due colonne.

Per cominciare, aggiungiamo la classe CSS alla riga di due colonne che contiene le nostre due immagini di prodotto. Apri le impostazioni della riga e vai alla scheda avanzate. Quindi inserisci "disable-break" nella casella di input Classe CSS.

Quindi fare clic con il pulsante destro del mouse sull'opzione Classe CSS e fare clic su "Copia classe CSS".

Ora tutto ciò che devi fare è fare clic con il pulsante destro del mouse su ogni riga che ha una struttura a due colonne (tutte le righe con i divisori/barre) e fare clic su "Incolla classe CSS".

Ora le tue colonne manterranno la struttura a due colonne sui dispositivi mobili e manterranno il design coerente.

Pensieri finali

La creazione di un grafico di confronto dei prodotti in Divi è semplice una volta apprese alcune tecniche di progettazione. Il trucco è impostare le righe a due colonne con una larghezza del 100% e una larghezza della grondaia di 1. Successivamente, puoi utilizzare il modulo divisore per creare alcuni design di grafici a barre unici. E se vuoi mantenere il tuo layout a due colonne su dispositivi mobili, tutto ciò di cui hai bisogno è un piccolo frammento di CSS personalizzato. Mi aspetto che questo layout del grafico di confronto possa essere utilizzato in molti modi diversi. Sentiti libero di condividere alcune idee con Divi Nation.

Non vedo l'ora di sentirti nei commenti.

Saluti!