[Ad_1]
Andiamo.
Panoramica
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di dimensioni diverse.
ufficio
Mobile
Scarica il layout GRATUITAMENTE
Per mettere le mani sul layout gratuito, devi prima scaricarlo utilizzando il pulsante qui sotto. 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 il tuo indirizzo e-mail di seguito e fai clic su download. Non verrai "riscritto" né riceverai ulteriori e-mail.
1. Creare una struttura di elementi
Aggiungi una nuova sezione
Colore di sfondo
Inizieremo questo tutorial costruendo la struttura degli elementi in una pagina Divi. Aggiungi una nuova sezione e usa un colore di sfondo bianco.
- Colore di sfondo: #ffffff
spaziatura
Vai alla scheda Progettazione sezione e modifica le impostazioni di spaziatura come segue:
- Imbottitura superiore: 80px
- Imbottitura inferiore: 0px
Aggiungi una nuova linea
Struttura della colonna
Continua ad aggiungere una nuova riga utilizzando la seguente struttura di colonne:
dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica la larghezza massima nelle impostazioni di dimensionamento.
spaziatura
Quindi rimuovere tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi un modulo immagine alla colonna 1
Scarica immagine
Facciamo i moduli, iniziando con un modulo immagine nella colonna 1. Carica un'immagine di tua scelta.
Aggiungi un collegamento
Quindi aggiungi un collegamento al modulo immagine.
Scala cavalcavia
Quindi vai alla scheda Design e modifica le impostazioni della scala al passaggio del mouse.
Classe CSS
Completa i parametri del modulo applicando la seguente classe CSS nella scheda avanzata:
Aggiungi il modulo di testo # 1 alla colonna 1
Aggiungi contenuto H3
Passiamo al modulo successivo, che è un modulo di testo con alcuni contenuti H3 a tua scelta.
Impostazioni di testo H3
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H3 di conseguenza:
- Titolo 3: Polizia: attore
- Colore testo titolo 3: # 000000
- Intestazione 3 Dimensioni del testo:
- Desktop: 35 px
- Tablet: 28px
- Telefono: 22px
- Titolo 3 Altezza linea: 1,4em
spaziatura
Quindi aggiungi un margine inferiore.
Aggiungi il modulo di testo # 2 alla colonna 1
Aggiungi contenuto
Quindi aggiungi un altro modulo di testo appena sotto il precedente con il contenuto della descrizione a tua scelta.
Impostazioni del testo
Modificare le impostazioni di testo del modulo come segue:
- Carattere del testo: attore
- Colore del testo: # 75baff
- Dimensione del testo:
- Desktop: 22 px
- Tablet: 18px
- Telefono: 15px
- Spaziatura lettere del testo: 0.5 px
- Altezza della linea della lettera: 2 °
Aggiungi un modulo pulsanti alla colonna 1
Aggiungi una copia
Il prossimo e ultimo modulo di cui abbiamo bisogno in questa colonna è un modulo pulsante. Aggiungi una copia a tua scelta.
Impostazioni dei pulsanti
Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante di conseguenza:
- Usa stili personalizzati per il pulsante: Sì
- Colore testo pulsante: # 000000
- Larghezza del bordo del pulsante: 0px
- Raggio del bordo del pulsante: 1px
- Carattere pulsante: attore
- Mostra l'icona del pulsante: Sì
- Posizione icona pulsante: sinistra
- Mostra solo l'icona al passaggio del mouse per il pulsante: No
spaziatura
Aggiungi anche valori di spaziatura personalizzati.
- Margine inferiore: 80px
- Imbottitura inferiore: 20px
- Imbottitura destra: 30px
Scatola delle ombre
E completa le impostazioni del modulo applicando le seguenti impostazioni dell'ombra del riquadro:
- Posizione orizzontale dell'ombra del riquadro: 0px
- Posizione dell'ombra del riquadro verticale: 2px
- Colore ombra: # 000000
Elimina colonna 2
Dopo aver completato la prima colonna e tutti i moduli in essa contenuti, rimuovere la seconda colonna vuota dalla riga.
Clona colonna 1
E riutilizzare la prima colonna clonandola una volta.
Clona l'intera riga
Continua clonando l'intera riga una volta.
Modifica tutti i contenuti, le immagini e i link duplicati
Successivamente, assicurati di modificare tutto il contenuto, le immagini e i collegamenti in ciascuna delle colonne duplicate.
2. Aggiungi un cursore
Aggiungi una nuova riga alla sezione
Struttura della colonna
Ora che abbiamo la struttura degli elementi a posto, è il momento di creare il design dello slider. Per fare ciò, aggiungeremo una nuova riga alla nostra sezione utilizzando la seguente struttura di colonne:
spaziatura
Apri le impostazioni delle righe e rimuovi tutte le imbottiture predefinite in alto e in basso.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi il modulo di testo del cursore alla nuova colonna di riga
Aggiungi contenuto
Quindi aggiungi un modulo di testo alla nuova riga. Questo modulo di testo sarà dedicato alla creazione del design del pulsante del cursore. Aggiungi una copia di tua scelta nell'area dei contenuti.
Colore di sfondo
Quindi aggiungi un colore di sfondo.
- Colore di sfondo: # 47669b
Impostazioni del testo
Passa alla scheda Design e applica uno stile al testo di conseguenza:
- Carattere del testo: attore
- Spessore del carattere del testo: grassetto
- Stile del carattere del testo: maiuscolo
- Colore del testo: #ffffff
- Spaziatura lettere del testo: 2px
- Allineamento del testo: centro
dimensionamento
Quindi aggiungi un valore di larghezza e altezza ai parametri di dimensionamento.
- Larghezza: 150px
- Altezza: 150px
confine
Trasformiamo questo modulo in un cerchio modificando le impostazioni del bordo.
Scatola delle ombre
Aggiungeremo anche un'ombra sottile della scatola.
- Intensità della sfocatura dell'ombra del riquadro: 0 px
- Forza di propagazione dell'ombra del riquadro: 20 px
- Colore dell'ombra: rgba (7,213,255,0.14)
Classe CSS
Successivamente, daremo al nostro modulo una classe CSS.
Elemento principale CSS
Aggiungiamo anche righe di codice CSS all'elemento principale del modulo.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Posizione
E completeremo i parametri del modulo cambiando la posizione nella scheda avanzata:
- Posizione: fissa
- Posizione: in alto a sinistra
- Indice Z: 2
Aggiungi un modulo di codice sotto il modulo di testo
Ora che abbiamo progettato il nostro dispositivo di scorrimento, è il momento di far funzionare la funzione. Per fare ciò, aggiungeremo un nuovo modulo di codice appena sotto il modulo di testo del cursore.
Aggiungi tag di stile e script
Aggiungi tag di stile e script al tuo modulo di codice.
Aggiungi codice CSS
Inserisci le seguenti righe di codice CSS tra i tag di stile:
.hide-cursor { cursor: none; } .cursor { -webkit-transition: all 0.2s ease !important; -moz-transition: all 0.2s ease !important; -o-transition: all 0.2s ease !important; transition: all 0.2s ease !important; visibility: hidden; opacity: 0; } .show-cursor { visibility: visible !important; opacity: 1; }
Aggiungi il codice JQuery
E usa le seguenti righe di codice JQuery tra i tag di script:
jQuery(document).ready(function($){ var cursor = $('.cursor'); $('.image-cursor').mousemove(function(e){ cursor.css({ top: e.clientY - cursor.height() / 2, left: e.clientX - cursor.width() / 2 }); cursor.addClass('show-cursor'); $('body').addClass('hide-cursor'); }); $('.image-cursor').mouseleave(function() { cursor.removeClass('show-cursor'); $('body').removeClass('hide-cursor'); }); });
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
ufficio
Mobile
Considerazioni finali
In questo tutorial, ti abbiamo mostrato come aggiungere più interazioni agli elementi cliccabili sulla tua pagina. Nello specifico, ti abbiamo mostrato come attivare un pulsante cursore quando qualcuno passa sopra un elemento di tua scelta. Ciò aggiunge ulteriore interazione al design della tua pagina e può aiutare ad aumentare le percentuali di clic! Sei stato anche in grado di scaricare gratuitamente il file JSON. Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
Se vuoi saperne di più su Divi e ottenere più omaggi Divi, assicurati Iscriviti alla nostra newsletter et Canale Youtube Quindi sarai sempre una delle prime persone a conoscere e apprezzare questo contenuto gratuito.
[Ad_2]