Come creare procedure dettagliate mobili con il modulo Slider di Divi (download gratuito!)

Gli slider sono sempre stati molto popolari nel web design. Uno dei loro maggiori vantaggi è il fatto che i visitatori possono sfogliarli sui dispositivi mobili. Al giorno d'oggi, lo scorrimento è il nuovo clic, quindi è ovvio che l'inclusione di dispositivi di scorrimento può aiutare a migliorare l'esperienza dell'utente mobile che i visitatori hanno sul tuo sito web. Quando crei un sito Web con Divi, puoi facilmente aggiungere il modulo Slider a qualsiasi riga o sezione su cui stai lavorando. E con un po' di creatività e sperimentazione, puoi realizzare fantastici progetti web.

Una delle cose che puoi fare è creare una procedura dettagliata mobile con il modulo Slider. Puoi aggiungere tutte le diapositive che desideri e la procedura dettagliata avrà lo stesso aspetto su desktop e tablet, sebbene inizialmente sia progettata per dispositivi mobili. In questo post, ricreeremo da zero uno straordinario esempio e offriremo la sezione per il download alla fine.

Arriviamo ad esso!

Anteprima

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

Statico

GIF

Iniziamo a ricreare!

Come creare procedure dettagliate mobili con il modulo Slider di Divi

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Spaziatura

Iniziamo a creare! Aggiungi una nuova pagina o aprine una esistente e aggiungi una nuova sezione regolare. Apri le impostazioni della sezione e aggiungi alcuni valori di riempimento personalizzati che corrispondono alle diverse dimensioni dello schermo.

• Imbottitura superiore: 4vw (Desktop), 5vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 4vw (desktop), 5vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 30vw (Desktop), 18vw (Tablet), 3vw (Telefono)
• Imbottitura destra: 30vw (Desktop), 18vw (Tablet), 3vw (Telefono)

Aggiungi nuova riga

Struttura della colonna

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

Sfondo sfumato

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato radiale.

• Colore 1: #f9f9f9
• Colore 2: RGB (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: in alto
• Posizione di partenza: 40%
• Posizione finale: 40%

Dimensionamento

Continua andando alle impostazioni di dimensionamento della riga e rimuovi tutto lo spazio tra le colonne.

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

Spaziatura

Stiamo anche aggiungendo un po' di imbottitura inferiore alla riga.

• Imbottitura inferiore: 30px

Frontiera

Quindi, aggiungi "20px" a ciascuno degli angoli nelle impostazioni del bordo.

Scatola ombra

Ultimo ma non meno importante, aggiungi una sottile ombra di riquadro alla riga per creare un po' di profondità sulla pagina.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.07)

Aggiungi modulo slider

Cambia colore di sfondo

Una volta che hai finito di modificare le impostazioni della riga, puoi andare avanti e aggiungere un modulo Slider. Apri le impostazioni del modulo e modifica il colore di sfondo. Tutte le modifiche apportate nella scheda Progettazione si applicheranno automaticamente a tutte le diapositive aggiunte in seguito.

• Colore di sfondo: rgba (255,255,255,0)

Impostazioni testo

Quindi, vai alla scheda Design e modifica le impostazioni del testo.

• Orientamento del testo: al centro
• Colore ombra: rgba(0,0,0,0)

Impostazioni del corpo del testo

Modifica successivamente le impostazioni del testo del corpo.

• Carattere del corpo: predefinito (Open Sans)
• Dimensioni del corpo del testo: 0,6 vw (desktop), 1,5 vw (tablet), 2,4 vw (telefono)
• Altezza della linea del corpo: 2.2em (desktop), 2.3em (tablet), 2.4em (telefono)

Spaziatura

Aggiungi anche un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 2vw
• Imbottitura inferiore: 2vw

Pulsante CSS personalizzato

Avremo anche bisogno di aggiungere alcuni valori di riempimento e margine personalizzati al pulsante del modulo Slider in particolare. Poiché questo elemento è combinato con elementi diversi in ogni diapositiva, dovrai aggiungere il riempimento e il margine manualmente utilizzando il codice CSS nella scheda Avanzate.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Rimuovi slider attivi

Una volta che hai finito di modificare tutte le impostazioni generali delle diapositive, puoi andare avanti e rimuovere le diapositive attive che sono già lì. Invece di usarli, ne creeremo uno da zero nella parte successiva del post. Questo ci aiuterà a modificare e personalizzare tutto più velocemente.

Personalizza la prima diapositiva

Personalizza il contenuto nella casella dei contenuti

Aggiungi una nuova diapositiva al modulo Slider e inizia a personalizzare il contenuto nella casella del contenuto. Nelle schermate di stampa sottostanti, noterai che stiamo aggiungendo l'immagine alla casella del contenuto anziché alle impostazioni dell'immagine. Questo ci permetterà di posizionare l'immagine sopra il contenuto scritto. Puoi trovare le illustrazioni che abbiamo usato andando al post Graphic Illustrator Layout Pack e scaricando le immagini alla fine di esso. Stiamo anche aggiungendo e modellando un titolo H3 nella casella del contenuto invece del campo del titolo per farlo apparire esattamente dove vogliamo.

Collegamento pulsante

Continua andando alle impostazioni del collegamento e aggiungi un collegamento al pulsante che reindirizzerà i visitatori a una pagina più dettagliata sulla diapositiva in questione.

Sfondo sfumato

Quindi, aggiungi uno sfondo sfumato utilizzando le seguenti impostazioni:

• Colore 1: #aaacff
• Colore 2: RGB (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: in alto
• Posizione di partenza: 30%
• Posizione finale: 30%

Navigazione

Modificare le impostazioni del testo successivamente.

• Colore personalizzato frecce: #f4f4f4
• Dot Nav Colore personalizzato: #000000

Impostazioni testo

E cambia il colore del testo nelle impostazioni del testo della diapositiva.

• Colore del testo: scuro

Pulsante

Ultimo ma non meno importante, modifica il pulsante per farlo apparire esattamente come desideri.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 0.8vw (desktop), 2vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #aaacff
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 10 px

Clona diapositiva tutte le volte necessarie

Una volta che hai finito di creare e personalizzare la prima diapositiva, puoi andare avanti e clonare la diapositiva tutte le volte che vuoi. Dovrai apportare alcune modifiche manuali a ciascuno dei duplicati.

Modifica contenuto nella casella dei contenuti

La prima cosa che devi modificare è il contenuto nella casella del contenuto. Ciò include l'immagine/illustrazione che viene utilizzata. Puoi trovare entrambe le illustrazioni che sono state utilizzate in questo tutorial andando al post Graphic Illustrator Layout Pack e scaricando le immagini alla fine di esso.

Cambia collegamento

Modifica anche il collegamento del pulsante.

Modifica sfondo sfumato

Puoi anche personalizzare la tavolozza dei colori di ogni diapositiva duplicata modificando il primo colore del gradiente.

• Colore 1: #ffccaa

Cambia il colore di sfondo del pulsante

Usa lo stesso colore per cambiare il colore di sfondo del pulsante. Ripeti questi passaggi per ciascuno dei duplicati che crei e il gioco è fatto!

• Colore di sfondo del pulsante: #ffccaa

Scarica GRATUITAMENTE la sezione Mobile Walkthrough

Per mettere le mani sulla sezione walkthrough mobile gratuita, dovrai prima scaricarla 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.

SCARICA

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!

Anteprima

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

Statico

GIF

Pensieri finali

In questo post, ti abbiamo mostrato come utilizzare il modulo Slider di Divi per creare una splendida procedura dettagliata per dispositivi mobili. Sebbene sia stato inizialmente progettato per schermi di dimensioni mobili, sembra altrettanto buono su tablet e desktop. Puoi utilizzare questo approccio per creare tutti i tipi di sezioni di diapositive sul tuo sito Web e interagire perfettamente con i tuoi visitatori. Speriamo che questo tutorial ti ispiri a diventare creativo con il modulo Slider di Divi. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!