Una delle pagine di destinazione esclusive che ti offriamo come membri a vita e nuovi clienti del Black Friday di quest'anno è la straordinaria pagina di destinazione del kit dell'interfaccia utente. Questo layout contiene alcune delle migliori combinazioni di design integrate di Divi e modelli di alta qualità che porteranno il tuo sito Web al livello successivo. In questo post ti mostreremo come metterci le mani sopra e usarlo in modo efficace.

Se sei un cliente a vita o se hai acquistato un nuovo account o hai effettuato l'upgrade durante i nostri saldi del Black Friday, puoi scaricare questo layout in questo momento.

Ottieni l'esclusiva pagina di destinazione del kit dell'interfaccia utente del Black Friday

Prima di entrare in questo caso d'uso, dovrai mettere le mani sull'esclusiva pagina di destinazione del kit dell'interfaccia utente del Black Friday che puoi ottenere diventando un nuovo membro di Elegant Themes, aggiornando il tuo account esistente o essendo già un membro a vita con noi. Se sei già un membro a vita puoi accedere alla nostra area membri e scaricare tutte le nostre pagine di destinazione esclusive qui. Tutti gli altri dovranno utilizzare il pulsante in basso per acquistare o aggiornare prima di poter seguire il resto del nostro tutorial.

Richiedi l'accordo prima che scompaia!

Utilizzo delle strutture delle colonne di Divi per elencare prodotti e funzionalità in modo bello

Per il resto di questo post, supponiamo che tu abbia approfittato della nostra offerta del Black Friday o che tu sia già un membro a vita e abbia accesso alla pagina di destinazione del kit dell'interfaccia utente del Black Friday.

Dopo aver scaricato la nuova pagina di destinazione del kit UI dalla nostra area membri, puoi guardare il video qui sotto per vedere quanto è facile da configurare. Ti invitiamo inoltre a seguire questo tutorial per preparare il tuo sito per un'ulteriore personalizzazione.

In questo post sui casi d'uso, ti mostreremo come elencare in modo sorprendente le tue funzionalità e/o prodotti utilizzando le nuove strutture di colonne di Divi. Il design che tratteremo sembra fantastico con la pagina di destinazione del kit dell'interfaccia utente e ti consente di utilizzare lo spazio sulla tua pagina in modo efficace e bello.

Anteprima

Diamo un'occhiata al risultato su schermi di diverse dimensioni.

Al passaggio del mouse e animazione

Aggiungeremo anche alcune sottili impostazioni di hover e animazione ai vari elementi di design. Questo darà la seguente interazione:

Iniziamo!

Aggiungi nuova pagina utilizzando la pagina di destinazione del kit UI

La prima cosa che devi fare è creare una nuova pagina utilizzando la pagina di destinazione del kit UI che hai scaricato e caricato. Se non sei sicuro di come farlo, assicurati di controllare il video nella parte precedente di questo post che ti guiderà passo dopo passo.

Individua la sezione delle funzionalità sulla pagina

Una volta caricato il layout, scorri verso il basso fino a trovare la sezione delle funzionalità nella pagina.

Rimuovi righe esistenti

Rimuovi le ultime due righe che puoi trovare in questa sezione. Sostituiremo il contenuto di queste righe con il nostro elenco di funzionalità/prodotti.

Aggiungi nuova riga sotto la riga contenente la riga

Struttura della colonna

Aggiungi una nuova riga alla sezione utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e modifica le impostazioni di dimensionamento nella scheda di progettazione.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: Sì
• Equalizza le altezze delle colonne: Sì

Spaziatura

Per assicurarci che questo design sia perfetto su tutte le dimensioni dello schermo, utilizzeremo margini personalizzati e valori di riempimento diversi:

• Margine superiore: 100 px
• Margine inferiore: 100 px
• Imbottitura superiore: 87 px
• Imbottitura superiore della colonna 1: 100 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore colonna 2: 100 px (desktop), 0 px (tablet e telefono)
• Imbottitura superiore colonna 3: 100 px (desktop). 0px (tablet e telefono)
• Imbottitura inferiore colonna 3: 50 px (tablet e telefono)
• Colonna 4 Imbottitura sinistra: 10px (solo telefono)
• Colonna 4 Imbottitura destra: 10px
• Imbottitura sinistra della colonna 5: 5px (desktop e tablet), 10px (telefono)
• Imbottitura destra colonna 5: 5px (desktop e tablet), 10px (telefono)
• Imbottitura sinistra colonna 6: 10px
• Imbottitura sinistra colonna 6: 10px (solo telefono)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo di testo alla prima colonna con un numero.

Colore di sfondo predefinito

Aggiungi un colore di sfondo a questo modulo.

• Colore di sfondo: #0f0f0f

Colore di sfondo al passaggio del mouse

E cambia il colore di sfondo al passaggio del mouse.

• Colore di sfondo: #ff5400

Immagine di sfondo

Puoi anche aggiungere sullo sfondo una delle immagini delle icone, che puoi trovare nella tua libreria multimediale:

• Dimensione dell'immagine di sfondo: dimensione reale
• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione

Impostazioni di testo predefinite

Continua modificando le impostazioni del testo.

• Carattere del testo: Muli
• Peso del carattere del testo: leggero
• Colore del testo: #ffffff
• Dimensione del testo: 80 px (desktop e telefono), 40 px (telefono)
• Altezza riga di testo: 1em

• Colore ombra del testo: ##ffffff
• Orientamento del testo: a sinistra

Spaziatura predefinita

Aggiungi un'imbottitura personalizzata per creare un quadrato.

• Imbottitura superiore: 200 px
• Imbottitura sinistra: 50 px (solo telefono)
• Imbottitura destra: 50 px (solo telefono)

Spaziatura al passaggio del mouse

Modifica le impostazioni di spaziatura al passaggio del mouse.

• Imbottitura sinistra: 100 px

Frontiera

Per abbinare la pagina di destinazione del kit dell'interfaccia utente, stiamo anche aggiungendo alcuni sottili angoli arrotondati. Aggiungi '20px' a ciascuno degli angoli.

Scatola ombra

Usa la seguente ombra della scatola per aggiungere un po' di colore anche al modulo:

• Posizione orizzontale dell'ombra del riquadro: 20 px
• Posizione verticale dell'ombra del riquadro: -50 px
• Forza di diffusione dell'ombra della scatola: 17px
• Colore ombra: #593aff

Animazione

Ultimo ma non meno importante, aggiungi un'animazione diapositiva molto sottile al modulo di testo.

• Stile di animazione: diapositiva
• Direzione dell'animazione: destra
• Intensità animazione: 3%

Aggiungi modulo divisore alla colonna 2

Visibilità

Il prossimo modulo di cui avremo bisogno è un modulo divisore. Vai avanti e aggiungine uno alla seconda colonna. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Colore

Cambia il colore del divisore successivo.

• Colore: #ffffff

Spaziatura

Per sovrapporre il modulo di testo nella prima colonna, utilizzeremo alcuni valori di margine personalizzati che regoleremo in base alle diverse dimensioni dello schermo.

• Margine superiore: 30px
• Margine sinistro: -200 px (desktop e tablet), 0 px (telefono)
• Margine destro: 200 px (desktop e tablet), 0 px (telefono)

Aggiungi il modulo di testo n. 1 alla colonna 3

Aggiungi contenuto

Alla prossima colonna! Qui, il primo modulo di cui avremo bisogno è un modulo di testo del titolo. Vai avanti e aggiungi il titolo della tua prima funzionalità o prodotto.

Impostazioni del testo dell'intestazione

Quindi, vai alle impostazioni del testo dell'intestazione e apporta alcune modifiche in modo che corrispondano al pacchetto di layout del kit dell'interfaccia utente.

• Intestazione 3 Carattere: Muli
• Intestazione 3 Peso del carattere: Leggero
• Colore testo titolo 3: #ffffff
• Intestazione 3 Dimensioni del testo: 30 px (desktop e tablet), 18 px (telefono)

Spaziatura

Per spostare questo modulo a sinistra, utilizzeremo alcuni valori di spaziatura personalizzati.

• Margine superiore: 20px
• Margine inferiore: 20 px
• Margine sinistro: -180 px (desktop e tablet), 0 px (telefono)
• Imbottitura sinistra: 20px (desktop e tablet), 50px (telefono)
• Imbottitura destra: 20px (desktop e tablet), 50px (telefono)

Aggiungi il modulo di testo n. 2 alla colonna 3

Aggiungi contenuto

Il prossimo modulo di cui avremo bisogno è un modulo di testo descrittivo. Vai avanti e inserisci la descrizione della tua funzione o del tuo prodotto.

Impostazioni testo

Modifica le impostazioni del testo in seguito.

• Colore del testo: rgba (255,255,255,0,5)
• Altezza riga di testo: 2,2 em

Spaziatura

Sposta anche questo modulo a sinistra utilizzando alcuni valori di spaziatura personalizzati.

• Margine sinistro: -180 px (desktop e tablet), 0 px (telefono)
• Imbottitura sinistra: 20px (desktop e tablet), 50px (telefono)
• Imbottitura destra: 20px (desktop e tablet), 50px (telefono)

Modulo pulsante Clona e posiziona nella colonna 3

L'ultimo modulo di cui avremo bisogno nella colonna 3 è un modulo pulsante. Per risparmiare tempo, cloneremo un pulsante esistente sulla pagina e posizioneremo il duplicato proprio sotto gli altri due moduli che abbiamo aggiunto.

Modifica contenuto

Modificare il contenuto del modulo pulsante.

Cambia spaziatura

Stiamo spingendo anche questo modulo a sinistra. Come puoi notare, tutti i moduli nella colonna 3 occupano lo spazio di due colonne. Questo tipo di approccio ci consente di creare un'altra struttura di colonne che corrisponda al risultato desiderato.

• Margine superiore: 50 px
• Margine sinistro: -160 px (desktop e tablet), 50 px (telefono)
• Margine destro: 50 px (solo telefono)

Aggiungi modulo immagine alla colonna 4

Carica immagine

Alla prossima colonna! Aggiungi un modulo immagine alla colonna 4 e carica un'immagine a scelta. Per questo esempio, abbiamo utilizzato immagini di dimensioni 500×500, ma sentiti libero di giocare anche con altre dimensioni dell'immagine.

Scatola ombra

Aggiungi un'ombra sottile a questo modulo.

• Colore ombra: #ffffff

Animazione

E per finire, aggiungi anche un'animazione di diapositive all'immagine.

• Stile di animazione: diapositiva
• Direzione animazione: Sinistra
• Ritardo animazione: 100 ms
• Intensità animazione: 3%

Aggiungi il modulo di testo n. 1 alla colonna 4

Aggiungi contenuto

Proprio sotto il modulo immagine, vai avanti e aggiungi un titolo Modulo testo con alcuni contenuti a scelta.

Colore di sfondo predefinito

Cambia il colore di sfondo di questo modulo.

• Colore di sfondo: #0f0f0f

Colore di sfondo al passaggio del mouse

E usa un altro colore di sfondo al passaggio del mouse.

• Colore di sfondo: #593aff

Impostazioni del testo dell'intestazione

Continua modificando le impostazioni del testo dell'intestazione in modo che corrispondano alla pagina di destinazione del kit dell'interfaccia utente.

• Intestazione 4 Carattere: Muli
• Intestazione 4 Peso del carattere: Leggero
• Colore testo titolo 4: #ffffff
• Titolo 4: Dimensioni testo: 23 px (desktop e tablet), 18 px (telefono)

Spaziatura predefinita

Aggiungi successivamente alcuni valori di spaziatura personalizzati.

• Imbottitura superiore: 50px
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Spaziatura al passaggio del mouse

E cambia questi valori al passaggio del mouse per creare una bella transizione.

• Margine inferiore: 50px
• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px

Aggiungi il modulo di testo n. 2 alla colonna 4

Aggiungi contenuto

Il secondo e ultimo modulo di cui avremo bisogno nella colonna 4 è un modulo di testo descrittivo. Inserisci alcuni contenuti a tua scelta.

Colore di sfondo

Cambia il colore di sfondo successivo.

• Colore di sfondo: #0f0f0f

Impostazioni testo

E modificare le impostazioni del testo.

• Colore del testo: rgba (255,255,255,0,5)
• Altezza riga di testo: 2,2 em

Spaziatura

Per creare un aspetto pulito, aggiungi un'imbottitura personalizzata a questo modulo.

• Imbottitura inferiore: 50 px
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Frontiera

Ultimo ma non meno importante, aggiungi "20px" ai due angoli inferiori del modulo.

Clona tutti i moduli nella colonna 4 due volte e posizionali nelle colonne rimanenti

Cambia immagine e contenuto

Ora che hai tutti i moduli necessari nella colonna 4, puoi andare avanti e clonare tutti questi moduli due volte e posizionare i duplicati nelle due colonne rimanenti. Modifica il contenuto e le immagini per creare varietà.

Clona riga tutte le volte che vuoi (in base al numero di elementi dell'elenco)

Abbiamo terminato la nostra prima voce di elenco! Ora puoi andare avanti e clonare questa riga tutte le volte che vuoi, a seconda del numero di funzionalità e/o prodotti che vuoi mostrare.

Cambia contenuto di Clone

Per ciascuno dei duplicati, dovrai modificare il contenuto.

Trova e sostituisci colore

Puoi anche utilizzare la funzione Trova e sostituisci di Divi per cambiare rapidamente la tavolozza dei colori di un elemento dell'elenco.

Cambia colore di sfondo al passaggio del mouse

Assicurati che una volta modificata la tavolozza dei colori, cambi anche il colore di sfondo al passaggio del mouse del modulo di testo numerico.

• Colore di sfondo: #593aff

Cambia immagine di sfondo

Ultimo ma non meno importante, puoi anche scegliere un'altra icona nell'elenco a seconda della funzione e/o del prodotto che vuoi mostrare.

Pensieri finali

Questo caso d'uso fa parte del nostro Black Friday Deal in cui condividiamo 6 landing page GRATUITE in edizione limitata con i clienti del Black Friday e i membri a vita. Unendoti alla nostra community autorizzata in questi giorni e diventando un membro, otterrai:

• 25% DI SCONTO SU TUTTO
• Tutte le 6 landing page gratis
• Accesso ai nostri fantastici temi e plugin
• Premi bonus

Cogli l'opportunità e diventa un membro oggi!