Come creare un catalogo di moda a scorrimento con Divi

In questo post, ti mostreremo come creare un catalogo di moda a scorrimento. L'utilizzo di questo metodo ti aiuterà a entrare in contatto con il tuo pubblico come faresti consegnando loro un catalogo cartaceo. La creazione di un catalogo di moda a scorrimento online può aiutare ad aumentare i risultati che ottieni dal catalogo. Includendo collegamenti diretti agli articoli del negozio, ad esempio, anche il processo di acquisto sarà migliorato.

Risultato

Il risultato che ti mostreremo come creare, passo dopo passo, assomiglia a questo sul desktop:

E così su telefono e tablet:

Come creare un catalogo di moda a scorrimento con Divi

Iscriviti al nostro canale Youtube

Aggiungi forme trasparenti alle immagini con Photoshop

La prima cosa che ti mostreremo è come aggiungere una parte trasparente a un'immagine con Photoshop. Esiste un'alternativa gratuita per Photoshop chiamata GimpShop, ma in questa parte del tutorial utilizzeremo solo Photoshop. Avremo bisogno di due immagini con ciascuna due forme diverse; uno per desktop e uno per mobile e tablet. In questa parte, ti mostreremo semplicemente come aggiungere una forma trasparente all'immagine. Successivamente, puoi realizzare tutte le immagini di cui hai bisogno.

Apri Photoshop

Inizia aprendo Photoshop sul tuo computer.

Apri immagine

Quindi, apri la prima immagine che desideri modificare. Il metodo rimane lo stesso per tutte e tre le immagini che utilizzerai in questo tutorial. Ecco perché lo spiegheremo solo una volta.

Fare doppio clic su Immagine e creare livello

Una volta aperta l'immagine che desideri modificare, fai doppio clic sull'immagine e crea un nuovo livello per essa.

Aggiungi un altro livello

Continua aggiungendo un altro strato vuoto sopra di esso.

Seleziona il livello 1 e lo strumento lazo poligonale

Seleziona Livello 1 e inizia a utilizzare lo strumento Lazo poligonale.

Crea una forma

Pur avendo attivato lo strumento Lazo poligonale, vai avanti e crea la forma trasparente all'interno della tua immagine.

Rendi invisibile il livello 1 e premi Elimina dopo aver selezionato il livello 0

Dopo aver selezionato l'area che vuoi rendere trasparente, vai avanti e rendi invisibile il livello 1, seleziona nuovamente il livello 0 e premi il pulsante Elimina sulla tastiera.

Seleziona lo strumento Selezione rettangolare e fai clic da qualche parte sull'immagine

Dopo averlo fatto, seleziona lo strumento Selezione rettangolare e fai clic da qualche parte sull'immagine.

Salva immagine come PNG

Infine, dovrai salvare l'immagine come PNG e ripetere la stessa procedura per tutte e quattro le immagini che utilizzerai nel layout.

Impostazioni della barra dei menu principale

Le impostazioni della barra dei menu principale di cui abbiamo bisogno per il layout che stiamo creando sono le seguenti:

• Nascondi immagine logo: Abilita
• Altezza del menu: 30
• Dimensione del testo: 15
• Spaziatura lettere: -1
• Carattere: Lato
• Stile carattere: grassetto e maiuscolo
• Colore del testo: #FFFFFF
• Colore collegamento attivo: #FFFFFF
• Colore di sfondo: rgba (255,255,255,0)
• Colore di sfondo del menu a discesa: rgba (255,255,255,0)

Introduzione all'edizione

Dopo aver modificato la barra dei menu principale, puoi andare avanti e aggiungere una nuova pagina, utilizzare Divi Builder e passare a Visual Builder.

Aggiungi nuova sezione

All'interno di quella pagina, inizia aggiungendo una sezione standard.

Colore di sfondo della sezione

Lo sfondo di quel colore deve essere '#d6d6d6'.

Imbottitura personalizzata

Passa alla scheda Design di quella sezione. All'interno della sottocategoria Spaziatura, aggiungi "24 px" al padding superiore e 0 px a quello inferiore.

Aggiungi riga a una colonna

Una volta fatto, puoi andare avanti e aggiungere una riga di una colonna alla sezione.

Dimensionamento

Vai alla scheda Progettazione e modifica la sottocategoria Dimensionamento:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: 1

Imbottitura personalizzata

Scorri verso il basso e aggiungi "0px" all'imbottitura superiore della riga.

Primo modulo di testo

Fatto ciò, puoi aggiungere un modulo di testo alla riga. Dopo aver inserito il testo che vuoi che appaia, vai alla scheda Design e assicurati che le seguenti modifiche si applichino alla sottocategoria Testo:

• Carattere del testo: vecchio standard TT
• Stile carattere: maiuscolo
• Dimensione carattere testo: 72 (desktop), 41 (tablet), 29 (telefono)
• Colore del testo: #000000
• Spaziatura delle lettere del testo: 11px
• Altezza riga di testo: 1em
• Orientamento del testo: al centro

Apri la sottocategoria Spaziatura e aggiungi "30px" al padding superiore e inferiore.

Modulo divisore

Proprio sotto il modulo di testo, aggiungi un modulo divisore e abilita l'opzione "Mostra divisore".

Vai alla scheda Design e scegli '#FFFFFF' come colore del divisore.

Quindi, scegli "Solido" come Stile divisore e "In alto" come Posizione divisore all'interno della sottocategoria Stili.

Quindi, apri la sottocategoria Ridimensionamento e applica le seguenti impostazioni:

• Peso del divisore: 10px
• Altezza: 23px
• Larghezza: 100%
  

Secondo modulo di testo

Proprio sotto il modulo divisore, aggiungi un altro modulo di testo. Scegli l'icona che desideri all'interno della Mappa caratteri (Windows) o della Tavolozza caratteri (Mac) e posizionala nella scheda Contenuto. Per questo esempio, abbiamo usato il seguente simbolo: '↓'. Quindi, vai alla scheda Progettazione e applica le seguenti impostazioni:

• Dimensione carattere del testo: 42px
• Colore del testo: #000000
• Orientamento del testo: al centro

Catalogo moda desktop (nuova sezione)

Ora aggiungi un'altra sezione standard. Questa sezione conterrà due righe che visualizzeranno una parte diversa del catalogo sul desktop.

Impostazioni della sezione

Colore di sfondo

Usa '#FFFFFF' come colore di sfondo di questa sezione.

Imbottitura personalizzata

Quindi, vai alla scheda Design e aggiungi "15px" al padding superiore.

Prima riga

Struttura della colonna

Dopo aver apportato le modifiche all'impostazione, aggiungi una riga con la seguente struttura a colonne:

Colore di sfondo

Apri le impostazioni della riga e aggiungi "rgba(255,255,255,0.14)" come colore di sfondo.

Immagine di sfondo

Aggiungi una delle immagini che hai creato nella parte di Photoshop di questo post e usa 'Hue' come Background Image Blend.

Dimensionamento

Infine, apporta le seguenti modifiche alla sottocategoria Ridimensionamento:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Primo modulo di testo

Una volta completate le impostazioni della riga, aggiungi un modulo di testo alla seconda colonna. Utilizzare le seguenti impostazioni per la sottocategoria Testo:

• Carattere del testo: amaro
• Dimensione carattere del testo: 63 px
• Colore del testo: #000000
• Orientamento del testo: al centro

Modulo divisore

Proprio sotto il primo modulo di testo, aggiungi un modulo divisore e abilita l'opzione "Mostra divisore".

Passa alla scheda Design e usa '#000000' come colore del divisore.

All'interno della sottocategoria Stili, utilizzare "Solido" come Stile divisore e "Alto" come Posizione divisore.

Scorri verso il basso la stessa scheda e applica le seguenti impostazioni alla sottocategoria Dimensionamento:

• Peso del divisore: 3px
• Altezza: 23px
• Larghezza: 57%
• Allineamento del modulo: a sinistra

Infine, aggiungi un margine superiore di "30px" e un margine inferiore di "50px".

Secondo modulo di testo

Una volta che il divisore è a posto, vai avanti e aggiungi il secondo modulo di testo che conterrà un titolo. Prima di tutto, usa '#000000' come colore di sfondo nella scheda Contenuto.

Quindi, passa alla scheda Progettazione e applica le seguenti impostazioni alla sottocategoria Testo:

• Carattere del testo: amaro
• Dimensione carattere del testo: 92px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: a sinistra

Apri la sottocategoria Bordo e usa il bordo seguente:

• Usa bordo: Sì
• Colore bordo: #000000
• Larghezza bordo: 3px
• Stile bordo: solido

Inoltre, usa una Larghezza del '77%' e un Allineamento del Modulo a sinistra.

Infine, aggiungi "15px" al riempimento superiore, destro, inferiore e sinistro del modulo di testo.

Terzo modulo di testo

Aggiungi un altro modulo di testo proprio sotto il precedente. Questo rappresenterà la descrizione. Vai alla scheda Design e usa le seguenti impostazioni per la sottocategoria di testo:

• Carattere del testo: Lato
• Dimensione carattere del testo: 16px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: a sinistra

Apri la sottocategoria Dimensionamento, usa "70%" per Larghezza e seleziona Allineamento modulo sinistro.

Infine, aggiungi un margine superiore di "20px".

Quinto modulo di testo

Il quinto modulo di testo funge da pulsante minimalista. All'interno della scheda Contenuto, usa il simbolo '→' + il testo e inserisci un collegamento dietro di esso.

Quindi, vai alla scheda Design. Utilizzare le seguenti impostazioni per la sottocategoria Testo:

• Carattere del testo: amaro
• Dimensione carattere del testo: 23px
• Colore del testo: #000000
• Altezza riga di testo: 1em
• Orientamento del testo: a sinistra

Scorri verso il basso la stessa scheda finché non trovi la sottocategoria Ridimensionamento. All'interno di quella sottocategoria, usa una Larghezza di "49%" e un Allineamento del modulo a destra.

Infine, aggiungi un margine superiore di "80 px".

Sesto modulo di testo

Il sesto e ultimo modulo di cui avremo bisogno è quasi lo stesso del precedente. Usa il '→' + testo e metti un link dietro di esso.

Le impostazioni per la sottocategoria Testo sono le seguenti:

• Carattere del testo: amaro
• Dimensione carattere del testo: 23px
• Colore del testo: #e02b20
• Altezza riga di testo: 1em
• Orientamento del testo: a sinistra

Cambia la larghezza in "39%" e usa anche l'allineamento del modulo corretto.

Seconda fila

Colore di sfondo

Apri le impostazioni della riga e aggiungi "rgba(255,255,255,0.14)" come colore di sfondo.

Immagine di sfondo

Aggiungi una delle immagini che hai creato nella parte di Photoshop di questo post e usa 'Hue' come Background Image Blend.

Struttura della colonna

La seconda riga che devi aggiungere alla sezione standard è esattamente l'opposto della precedente.

Clona moduli

I moduli che abbiamo usato nella riga precedente sono gli stessi di cui abbiamo bisogno per questa riga, quindi vai avanti, clonali e posizionali nella prima colonna anziché nella seconda. Avremo bisogno di apportare alcune modifiche all'allineamento nella parte successiva di questo post.

Prime modifiche al modulo di testo

Apri il primo modulo di testo e aggiungi un margine superiore di '20px'.

Modifiche al modulo divisore

Quindi, apri il modulo divisore e modifica l'allineamento del modulo all'interno della sottocategoria dimensionamento a destra.

Modifiche al secondo modulo di testo

Imposta l'orientamento del testo del secondo modulo di testo a destra.

E scegli anche un corretto allineamento del modulo nella sottocategoria Dimensionamento.

Modifiche al terzo modulo di testo

Anche il terzo modulo di testo avrà bisogno di un corretto orientamento del testo.

E anche un corretto allineamento del modulo.

Modifiche al quinto modulo di testo

L'unica cosa che dovrai fare per il quinto modulo di testo è cambiare la larghezza in "82%".

Modifiche del sesto modulo di testo

Stessi conteggi per il sesto modulo di testo, ma usa invece '87%'.

Nascondi sezione per tablet e telefono

Una volta terminate le due righe, puoi andare avanti e disabilitare l'intera sezione su telefono e tablet.

Catalogo Tablet e Telefono (Nuova Sezione)

Per rendere tutto perfetto anche su tablet e telefono, creeremo una nuova sezione standard.

Impostazioni della sezione

Colore di sfondo

Aggiungi '#FFFFFF' come colore di sfondo di quella sezione.

Imbottitura personalizzata

Passa alla scheda Design e aggiungi un'imbottitura superiore di "15px".

Prima riga

Struttura della colonna

Quindi, aggiungi una riga a due colonne alla sezione.

Dimensionamento

Vai alla sottocategoria Ridimensionamento di quella riga e apporta le seguenti modifiche:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Modulo immagine

Invece di utilizzare un'immagine di sfondo, utilizzeremo invece un modulo immagine. In questo modo, saremo sicuri che il testo e l'immagine non si sovrappongano. Vai avanti e aggiungi un modulo immagine alla prima colonna della riga e carica un'immagine.

Clona i moduli della prima riga nella versione desktop

Quindi, clona tutti i moduli che hai utilizzato nella prima riga della versione desktop e posizionali nella seconda colonna.

Modifica la dimensione del carattere del secondo modulo di testo

C'è solo una cosa che deve essere cambiata; la dimensione del carattere del secondo modulo di testo. Cambialo in 65px.

Seconda fila

Struttura della colonna

Quindi, vai avanti e aggiungi un'altra riga a due colonne alla sezione.

Dimensionamento

Anche questa riga richiederà una sottocategoria di dimensionamento modificata:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Modulo immagine

Aggiungi anche il modulo immagine alla prima colonna e carica un'immagine.

Clona i moduli della seconda riga nella versione desktop

Quindi, vai avanti e clona i moduli che si trovano nella seconda riga della versione desktop. Dopo averli clonati, posizionali nella seconda colonna di questa riga.

Modifica la dimensione del carattere del secondo modulo di testo

Anche la dimensione del testo del secondo modulo di testo deve essere modificata. Vai avanti e assegnagli una dimensione del carattere di '65px'.

Nascondi sezione per desktop

Una volta che hai finito entrambe le righe, puoi andare avanti e disabilitare l'intera sezione sul desktop.

Risultato

Et voilà, dopo aver seguito tutti i passaggi in questo post, dovresti ottenere il seguente risultato sul desktop:

E quanto segue su telefono e tablet:

Pensieri finali

In questo post, ti abbiamo mostrato come creare un bel catalogo di moda a scorrimento. Per far funzionare il nostro design, ti abbiamo prima mostrato come creare una forma trasparente all'interno della tua immagine con Photoshop. Successivamente, abbiamo utilizzato queste immagini all'interno del nostro tutorial Divi per creare il design. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano di Rvector / shutterstock.com