Come creare eleganti sezioni di informazioni sui prodotti con immagine divisa con Divi

Pubblicato: 2019-10-06

Essere creativi con le immagini può sicuramente aiutare ad attirare l'attenzione sui tuoi CTA. In questo post, ti mostreremo come ricreare una bellissima sezione di informazioni sui prodotti con immagini suddivise con Divi. Il design che stiamo ricreando è bello, accattivante e può essere personalizzato in base alle tue esigenze. Potrai anche scaricare gratuitamente il file JSON del design!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il layout dell'immagine divisa gratuita

Per mettere le mani sul layout gratuito dell'immagine divisa, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

Crea un effetto immagine divisa con Photoshop e Illustrator

Prima di iniziare con Divi, devi avere una serie di immagini pronte per il caricamento. Poiché si tratta di un effetto di immagine divisa, sono necessarie due immagini che si adattino bene insieme. Avrai bisogno di due diverse dimensioni dell'immagine: 960 px di larghezza per 1200 px di altezza per desktop e 600 px di larghezza per 1200 px di altezza per tablet e dispositivi mobili.

Passaggio 1: selezionare le immagini

Seleziona due immagini HD dei tuoi prodotti.

Passaggio 2: cancella lo sfondo

Cancella gli sfondi per creare ritagli. Puoi usare qualsiasi programma tu voglia. Ma ecco una guida passo passo per Photoshop.

Passaggio 3: apri un nuovo progetto su Illustrator

Apri un nuovo progetto in Illustrator, 1920 px di larghezza per 1200 px di altezza.

Passaggio 4: aggiungi una guida verticale.

Aggiungi una guida verticale attraverso il centro della tela vuota. Assicurati che sia proprio al centro.

Passaggio 5: importa o posiziona le immagini ritagliate

Posiziona entrambe le immagini ritagliate sulla tela.

Passaggio 6: inizia a visualizzare la divisione

Crea due duplicati di ogni immagine. Usa la funzione di ritaglio per dividerli a metà in punti diversi. Prima attraverso il centro, e poi un po' meno e un po' di più per i duplicati. Ora avrai tre versioni divise di ogni immagine.

Passaggio 7: finalizzare l'effetto

Utilizzando i diversi ritagli divisi, trova la migliore composizione per le tue immagini. Assicurati che il bordo dritto di ogni immagine sia proprio sulla guida centrale sulla tela. Prova a modificare le dimensioni delle immagini per adattarle meglio. Ricorda che la tela ha le dimensioni di uno schermo a larghezza intera, quindi regola le dimensioni delle immagini di conseguenza.

Passaggio 8: ritaglia metà e salva

Quando il disegno è finito, elimina i ritagli extra. Ricontrolla che il bordo dritto di ciascuna immagine tocchi la guida centrale. Crea due nuove tavole da disegno e ridimensionale per adattarle a ciascun lato, assicurandoti che siano separate proprio nella guida centrale. Esporta per il Web, una tavola da disegno alla volta e salva come .png. Ora hai due immagini diverse. Entrambi larghi 960 px e alti 1200 px.

Passaggio 9: ridimensionamento per tablet e dispositivi mobili

Ridimensiona entrambe le immagini a 960 px di larghezza per 1200 px di altezza. Assicurati di ritagliare solo lo sfondo trasparente, non toccare l'immagine. L'ho fatto su Photoshop cambiando le dimensioni della tela con l'ancora sul lato dell'immagine.

Iniziamo a ricreare!

Aggiungi nuova sezione

Sfondo

Ora che abbiamo completato la prima parte del tutorial, è ora di iniziare con Divi! Crea una nuova pagina o aggiungi una nuova sezione a una pagina esistente. Aggiungi uno sfondo sfumato alla sezione.

Sfondo: gradiente
Colore uno: bianco sporco # f7f7f7
Colore due: verde fresco # b7e778
Direzione gradiente: 90 gradi
Posizione iniziale e finale: 50%

Spaziatura

Successivamente, modifica le impostazioni di spaziatura della sezione.

Imbottitura superiore: 5vw
Imbottitura inferiore: 12vw

Visibilità

Infine, regola la visibilità.

Overflow verticale e orizzontale: nascosto

Aggiungi la prima riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Regola le impostazioni di dimensionamento della riga.

Larghezza grondaia: 2
Larghezza: 100%
Larghezza massima: 100%

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati.

Imbottitura superiore e inferiore: 2vw

Impostazioni colonna 1

Trasformare

Vai alle impostazioni della colonna 1 e modifica i valori di traduzione della trasformazione.

Trasforma Traduci: -2vw asse y

Impostazioni colonna 2

Trasformare

Fai lo stesso per la colonna 2.

Trasforma Traduci: 2vw x-axis

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo di testo alla colonna 1 con un contenuto H2 a tua scelta.

Testo del titolo

Nella scheda Progettazione, modifica le impostazioni del testo dell'intestazione.

Livello del testo dell'intestazione: H2
Carattere H2: Corben
Allineamento H2:
- Desktop: Sinistra
- Tablet + Telefono: Centro
Colore del testo H2: grigio molto scuro #3a3a3a
Dimensione del testo H2:
- Desktop: 7vw
- Tablet + telefono: 16vw

Spaziatura

Quindi, regolare la spaziatura.

Margine destro:
- Desktop: -1vw
- Tablet + Telefono: 0vw
Imbottitura destra:
- Tablet + Telefono: 35vw

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Ora aggiungi un modulo di testo alla seconda colonna. Inserisci alcuni contenuti H2 a tua scelta.

Testo del titolo

Quindi, modella il testo dell'intestazione come segue.

Livello del testo dell'intestazione: H2
Carattere H2: Corben
Allineamento H2:
- Desktop: Sinistra
- Tablet + telefono: destra
Colore del testo H2: grigio molto scuro #3a3a3a
Dimensione del testo H2:
- Desktop: 7vw
- Tablet + Telefono: 14vw

Spaziatura

Infine, regola la spaziatura.

Margine superiore:
- Tablet: -12vw
- Telefono: -14vw
Margine sinistro:
- Desktop + Tablet: -0.5vw
Imbottitura destra:
- Tablet + Telefono: 17vw

Aggiungi la seconda riga

Struttura della colonna

Continua aggiungendo una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga e regola le impostazioni di dimensionamento.

Larghezza grondaia: 1
Equalizza le altezze delle colonne: Sì
Larghezza: 100%
Larghezza massima: 100%

Spaziatura

Modificare le impostazioni di spaziatura successiva.

Margine superiore:
- Desktop: -15vw
- Tablet: -36vw
- Telefono: -40vw
Imbottitura superiore e inferiore:
- Desktop: 0vw
- Tablet: 9vw
- Telefono: 12vw

CSS personalizzato

Completa le impostazioni della riga aggiungendo una singola riga di codice CSS all'elemento principale della riga. Ciò contribuirà a tenere insieme le immagini.

Elemento principale: display: flex;

display: flex;

Aggiungi modulo immagine alla colonna 1

Aggiungi immagine

Aggiungi la metà immagine sinistra alla colonna 1.

Immagine:
- Desktop: l'immagine larga 960 px
- Tablet + telefono: l'immagine larga 600 px

Dimensionamento

Rendi il modulo immagine a larghezza intera.

Forza a tutta larghezza: sì

Aggiungi modulo immagine alla colonna 2

Aggiungi immagine

Aggiungi la metà dell'immagine destra alla colonna 2.

Immagine:
- Desktop: l'immagine larga 960 px
- Tablet + telefono: l'immagine larga 600 px

Dimensionamento

Rendi anche questo modulo immagine a larghezza intera.

Forza a tutta larghezza: sì

Aggiungi 3a riga

Struttura della colonna

Alla prossima riga! Scegli la seguente struttura di colonne:

Dimensionamento

Regola le dimensioni della riga come segue:

Larghezza grondaia: 4
Larghezza: 100%
Larghezza massima: 100%

Spaziatura

Quindi, regolare la spaziatura.

Margine superiore:
- Desktop: -38vw
- Tablet + Telefono: -14vw

Impostazioni colonna 1

Spaziatura

Prima di aggiungere moduli, regolare la spaziatura nelle colonne. Inizia con la colonna 1.

Imbottitura sinistra:
- Desktop: 7vw
- Tablet + Telefono: 12vw
Imbottitura destra:
- Desktop: 15vw
- Tablet + Telefono: 12vw

Impostazioni colonna 2

Spaziatura

Quindi, regola le impostazioni di spaziatura della colonna 2

Imbottitura sinistra:
- Desktop: 15vw
- Tablet + Telefono: 12vw
Imbottitura destra:
- Desktop: 7vw
- Tablet + Telefono: 12vw

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Aggiungi un modulo di testo alla colonna 1 e aggiungi del contenuto H3 a tua scelta.

Sfondo

Cambia il colore di sfondo.

Colore di sfondo
Colore: Grigio Molto Scuro #333333

Testo del titolo

Quindi, modella il testo dell'intestazione.

Livello del testo dell'intestazione: H3
Carattere H3: Corben
Allineamento H3: Centro
Colore carattere H3: bianco sporco # f7f7f7
Dimensione carattere H3:
- Desktop: 2.2vw
- Tablet: 6.4vw
- Telefono: 7vw
Spaziatura lettere H3: 3 px

Spaziatura

Aggiungi successivamente alcuni valori di spaziatura personalizzati.

Imbottitura superiore:
- Desktop + Tablet: 0.2vw
- Telefono: 1vw
Imbottitura inferiore:
- Desktop: 0.5vw
- Tablet: 1.2vw
- Telefono: 1vw

Frontiera

Completa le impostazioni del modulo aggiungendo degli angoli arrotondati.

Angoli arrotondati: 1vw tutti e quattro gli angoli

Duplica il modulo di testo e trascina nella colonna 2

Ora duplica il modulo di testo e trascinalo sulla colonna 2.

Cambia contenuto

Ovviamente, dovrai modificare il contenuto nel modulo di testo duplicato.

Aggiungi il modulo di invito all'azione alla colonna 1

Aggiungi contenuto

Sotto il modulo di testo nella colonna 1, aggiungi un modulo di invito all'azione con alcuni contenuti a tua scelta.

Titolo
Pulsante
Corpo

Aggiungi collegamento

Continua aggiungendo un collegamento al pulsante CTA.

Sfondo

E aggiungi un colore di sfondo a tablet e dispositivi mobili.

Colore di sfondo:
- Tablet + telefono: bianco sporco #f7f7f7

Testo del titolo

Nella scheda Design, modella le impostazioni del testo H4.

Livello del testo dell'intestazione: H4
Carattere H4: Open Sans
Colore H4: grigio molto scuro #333333
Dimensione del testo H4:
- Desktop: 1.4vw
- Tablet: 4.5vw
- Telefono: 7vw
Spaziatura lettere H3: 2px
Altezza della linea H3: 1,5 em

Corpo del testo

Modifica le impostazioni del testo del corpo in seguito.

Carattere del corpo: Open Sans
Allineamento del corpo del testo: Centro
Colore del corpo del testo: grigio molto scuro #333333
Dimensione del carattere del corpo:
- Desktop: 0.9vw
- Tablet: 3vw
- Telefono: 4vw
Altezza della linea del corpo: 1,8 em

Pulsante

Stile anche il pulsante.

Dimensione del testo del pulsante:
- Desktop: 1vw
- Tablet: 2.2vw
- Telefono: 3.8vw
Colore carattere pulsante: grigio molto scuro #333333
Colore di sfondo del pulsante:
- Tablet + Cellulare: Fresh Green #b7e778
Larghezza bordo pulsante:
- Desktop: 1px
Colore bordo pulsante:
- Desktop: grigio molto scuro #333333
Raggio del bordo del pulsante: 1vw

Spaziatura

E aggiungi alcuni valori di spaziatura personalizzati.

Margine superiore:
- Desktop + Tablet: -2vw
- Telefono: 3vw
Imbottitura sinistra e destra:
- Desktop: 0vw
- Tablet + Telefono: 4vw

Frontiera

Ultimo ma non meno importante, modella il bordo su diverse dimensioni dello schermo.

Angoli arrotondati: 1vw tutti gli angoli
Stili di bordo:
- Tablet + Telefono: tutti e quattro i lati
Larghezza del bordo:
- Tablet + Telefono: 1px
Colore del bordo:
- Tablet + Telefono: Grigio Molto Scuro #333333

Duplica il modulo di invito all'azione e trascina nella colonna 2

Duplica il modulo di invito all'azione e trascinalo nella colonna 2.

Cambia contenuto

Per completare il design, cambia il contenuto nel modulo di invito all'azione duplicato e il gioco è fatto!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Conclusione

In questo post, ti abbiamo mostrato come creare una sezione di informazioni sui prodotti con immagine divisa con Divi. Abbiamo spiegato come creare le immagini divise utilizzando il software di modifica delle immagini e abbiamo continuato a utilizzare i file nel nostro design Divi. Speriamo che questo design ti ispiri a essere creativo con le immagini dei tuoi prodotti. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!