6 microinterazioni che renderanno il tuo sito Divi più piacevole (tutorial + download gratuito)

Le microinterazioni sono un ottimo modo per migliorare l'esperienza degli utenti mentre interagiscono con il tuo sito. Piccole animazioni di icone, pulsanti o immagini possono indurre l'utente ad agire in modo divertente e mirato. Ci sono innumerevoli microinterazioni che puoi includere sul tuo sito, ma una buona regola è mantenerle "micro". Non vuoi esagerare.

Oggi ti mostrerò alcune semplici microinterazioni che puoi aggiungere al tuo sito web Divi usando Divi Builder e Custom CSS (no jquery). Mi concentrerò su quegli elementi con cui gli utenti normalmente interagiscono: pulsanti, icone, immagini.

Iniziamo.

Sbirciata

Ecco una rapida occhiata alle microinterazioni che creeremo in questo tutorial.

#1 Ridimensionamento delle immagini al passaggio del mouse

Inizia a costruire la microinterazione #1

#2 Rimbalzare l'icona di scorrimento verso il basso

Inizia a costruire la microinterazione #2

#3 Rotazione delle icone Blurb e dei pulsanti al passaggio del mouse

Inizia a costruire la microinterazione #3

#4 Icone dei pulsanti scorrevoli per mostrare e nascondere il testo dei pulsanti

Inizia a costruire la microinterazione #4

#5 Rotazione della prospettiva dell'immagine 3D

Inizia a costruire microinterazioni #5

#6 Microinterazione con cursore a pulsante

Inizia a costruire la microinterazione #6

Iscriviti al nostro canale Youtube

Cosa ti serve per iniziare

Per iniziare, tutto ciò di cui hai veramente bisogno è Divi. Saremo i nostri esempi da zero utilizzando Divi Builder sul front-end.

Scarica i file per un facile accesso

Ho incluso un download in fondo a questo articolo per quelli di voi che desiderano avere un esempio funzionante di queste microinterazioni in esecuzione sul proprio sito Web in modo rapido e semplice. In questo modo puoi avere un esempio funzionante mentre segui il tutorial.

Scarica

#1 Ridimensionamento delle immagini al passaggio del mouse

Il ridimensionamento si riferisce alla regolazione delle dimensioni di un elemento. Quindi, se volessimo ingrandire un'immagine al passaggio del mouse (ad esempio), tutto ciò che dobbiamo fare è aggiungere un piccolo frammento CSS per ridimensionare la nostra immagine di una certa percentuale. Questo ci consente di creare una microinterazione piccola ma efficace quando un utente passa il mouse su un'immagine. Lascia che ti mostri come puoi applicare questo a tre popolari moduli Divi che utilizzano immagini: il modulo immagine, il modulo blurb e il modulo persona.

Vai avanti e crea una nuova sezione con una riga di tre colonne in modo da poter aggiungere ciascuno dei nostri esempi a ciascuna colonna.

Ridimensionamento di un'immagine al passaggio del mouse utilizzando il modulo immagine

Per aggiungere la microinterazione dell'immagine di ridimensionamento a un'immagine utilizzando il modulo immagine, aggiungi prima un modulo immagine alla prima colonna.

Quindi aggiungi un'immagine al modulo che preferisci.

Quindi, aggiungi la seguente classe CSS nella scheda Avanzate nelle impostazioni dell'immagine:

Classe CSS: scale-image

Questo ci consente di scegliere come target questo modulo specifico quando aggiungiamo il nostro CSS personalizzato alle impostazioni della pagina. Per aggiungere il CSS necessario per ridimensionare l'immagine, apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato:

/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
  overflow:hidden;
}
.scale-image img{
 transition: all 0.2s;
}
.scale-image:hover img {
  transform: scale(1.3)
}

Ora controlla il risultato.

Ridimensionamento dell'immagine di un modulo Blurb al passaggio del mouse

Per aggiungere lo stesso effetto a un'immagine in un modulo blurb, aggiungi prima un modulo blurb alla seconda colonna.

Quindi aggiungi un'immagine a tua scelta al modulo blurb.

Quindi aggiungi la seguente classe CSS al modulo blurb.

Classe CSS: scale-blurb-image

Con questa classe CSS in atto, ora possiamo aggiungere il nostro CSS personalizzato che ha come target l'immagine blurb. Apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato:

/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/

.scale-blurb-image .et_pb_main_blurb_image {
  overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
  transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
  transform: scale(1.3);
}

Ecco il risultato.

Ridimensionamento di un'immagine del modulo Persona al passaggio del mouse

Per ridimensionare un'immagine del modulo persona al passaggio del mouse, aggiungi un modulo persona alla terza colonna e aggiungi un caricamento di un'immagine a tua scelta il modulo.

Quindi aggiungi la seguente classe CSS al modulo persona.

Classe CSS: scale-person-image

Ora apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato.

/**This scales the image in the person module with the CSS class "scale-person-image" **/

.scale-person-image .et_pb_team_member_image {
  overflow:hidden;
}
.scale-person-image img {
  transition: all 0.2s;
}
.scale-person-image img:hover {
  transform: scale(1.3);
}

Controlla il risultato di tutti e tre i moduli con la microinterazione dell'immagine in scala.

#2 Rimbalzare l'icona di scorrimento verso il basso

Questa prossima microinterazione aggiunge un'animazione di rimbalzo all'icona di scorrimento verso il basso incorporata nel modulo di intestazione a larghezza intera. Questo è un modo sottile per informare ulteriormente il visitatore che ci sono più informazioni più in basso nella pagina. E puoi scegliere di avere questo effetto di rimbalzo per impostazione predefinita o al passaggio del mouse.

Ecco come farlo.

Per prima cosa aggiungi una nuova sezione a larghezza intera con un modulo di intestazione a larghezza intera.

Quindi aggiorna quanto segue:

Orientamento del testo e del logo: al centro
Mostra pulsante di scorrimento verso il basso: S
Icona: [selezionare l'icona di scelta]

Quindi aggiungi la seguente classe CSS:

Classe CSS: bounce-scroll-icon

Questa classe ci consentirà di indirizzare l'icona di scorrimento con css per animare l'icona per impostazione predefinita al caricamento della pagina.

Quindi duplica il modulo di intestazione a larghezza intera e aggiorna la classe CSS come segue:

Classe CSS: bounce-scroll-icon-hover

Questa classe ci consentirà di indirizzare l'icona di scorrimento con css per animare l'icona al passaggio del mouse.

Quindi apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato per attivare l'animazione di rimbalzo per i nostri due esempi.

.bounce-scroll-icon-hover .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}

.bounce-scroll-icon .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
  animation-name: none;
}

@keyframes bounce {
      0%   {top: -10px; opacity: 1;}
    50%  {top: 15px; opacity:0;}
    100% {top: -10px;opacity:1;}
}

Controlla il risultato dei due esempi. L'icona di scorrimento dell'intestazione in alto si animerà per impostazione predefinita e l'icona di scorrimento dell'intestazione in basso si animerà al passaggio del mouse.

#3 Icone rotanti al passaggio del mouse

L'aggiunta di una leggera rotazione a un'icona può essere un'efficace microinterazione per coinvolgere gli utenti a fare clic su un elemento. Poiché i due moduli Divi più popolari con icone integrate sono il modulo pulsanti e il modulo blurb, ho pensato di mostrarti come aggiungere la rotazione a quelle icone al passaggio del mouse.

Rotazione dell'icona di un pulsante al passaggio del mouse

Divi è già dotato di un'utile microinterazione per le icone dei pulsanti per impostazione predefinita. Passando il mouse sopra il pulsante, viene visualizzata l'icona del pulsante e si sposta a destra indicando che facendo clic sul pulsante verrai reindirizzato a un'altra pagina. Ma, se vuoi essere un po' più creativo, puoi ruotare l'icona per una microinterazione completamente nuova.

Per ruotare l'icona di un pulsante al passaggio del mouse, aggiungi prima una nuova sezione con una riga a una colonna. Quindi aggiungi un modulo pulsante alla riga.

Quindi aggiorna le impostazioni del pulsante come segue:

Usa stili personalizzati per il pulsante: S
Mostra solo l'icona al passaggio del mouse per il pulsante: NO
Icona del pulsante: [scegli l'icona di scelta]

Quindi aggiungi la seguente classe CSS:

Classe CSS: icona del pulsante di rotazione

Con la nostra icona e classe CSS in atto, tutto ciò che dobbiamo fare è aggiungere il seguente CSS personalizzato alle impostazioni della pagina:

/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}

.rotate-button-icon:hover:after {
transform: rotate(0deg);
}

Questo ruoterà l'icona in senso antiorario di 90 gradi inizialmente e poi di nuovo a 0 gradi al passaggio del mouse.

Ecco il risultato.

Rotazione dell'icona di un modulo Blurb

Per ruotare l'icona di un modulo blurb, creiamo prima una nuova sezione con una riga a tre colonne. Quindi aggiungi un modulo blurb alla colonna 1 e aggiorna le seguenti impostazioni del blurb.

Usa l'icona: S
Icona: [aggiungi icona a scelta]
Orientamento del testo: centro
Classe CSS: ruotare-blurb-icon

Ora aggiungi il seguente CSS personalizzato alle impostazioni della pagina:

/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/

.rotate-blurb-icon .et-pb-icon {
  transition:  0.2s ease-out;
  transform: rotateZ(-90deg);
}

.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
  transform: rotateZ(0deg);
}

Ecco il risultato.

Funziona anche con l'icona posta a sinistra del titolo. Tutto quello che devi fare è aggiornare le impostazioni del blurb come segue:

Posizionamento immagine/icona: a sinistra
Altezza della riga del titolo: 1,7 em

Controlla il risultato.

#4 Icone dei pulsanti scorrevoli per mostrare e nascondere il testo dei pulsanti

Pulsante Testo sull'icona al passaggio del mouse

Questa microinterazione visualizza il testo del pulsante con un'icona per impostazione predefinita e quindi sposta l'icona per coprire il testo al passaggio del mouse.

Ecco come farlo.

Aggiungi una nuova sezione con una riga a una colonna. Quindi aggiungi un modulo pulsante alla riga e aggiorna le seguenti impostazioni del pulsante:

Usa stili personalizzati per il pulsante: S
Colore di sfondo del pulsante: # 0c71c3
Larghezza bordo pulsante: 0px
Colore icona pulsante: #ffffff
Classe CSS: pulsante-testo-icona

Ora aggiungi il seguente CSS personalizzato alle impostazioni della pagina:

/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-text-to-icon:after {
  width: 1em;
  transition: all .3s !important;
  margin-left: 0;
  border-left: 1px solid #dddddd;
  left: calc(100% - 1em);
}

body #page-container .et_pb_button.button-text-to-icon:hover:after {
  border-left: 1px solid transparent;
  left: calc(50% - 0.5em);
  transform: scale(1.3);
}

body #page-container .et_pb_button:hover:after {
    color: #ffffff;
    margin-left: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    transform: scale(1.5);
}

Ora controlla il risultato.

Icona pulsante per testo al passaggio del mouse

Puoi anche creare l'effetto opposto di mostrare inizialmente l'icona del pulsante e quindi far scorrere l'icona per rivelare il testo del pulsante. Per fare ciò, duplica il modulo pulsante e aggiorna le seguenti impostazioni del pulsante:

Colore testo pulsante (predefinito): #0c71c3
Colore del testo del pulsante (al passaggio del mouse): #ffffff

Quindi sostituire la classe CSS con la seguente:

Classe CSS: pulsante-icona-testo

Quindi aggiungi il seguente CSS personalizzato alle impostazioni della pagina:

/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-icon-to-text:after {
    width: 1em;
    transition: all .3s !important;
    margin-left: 0;
  border-left: 1px solid transparent;
      left: calc(50% - 0.5em);
    transform: scale(1.3);
}

body #page-container .et_pb_button.button-icon-to-text:hover:after {
  border-left: 1px solid #dddddd;
    left: calc(100% - 1em);
  transform: scale(1);
}

Ora controlla il risultato.

#5 Rotazione della prospettiva dell'immagine 3D

Questa microinterazione inizia con un'immagine del modulo immagine stilizzata con la prospettiva e la rotazione dell'immagine 3D per impostazione predefinita. Quindi al passaggio del mouse, l'immagine ricorre a una visualizzazione normale dell'immagine.

Ecco come farlo.

Innanzitutto, crea una nuova sezione con una riga a tre colonne. Quindi aggiungi un modulo immagine alla colonna 1 e aggiungi un'immagine al modulo immagine di tua scelta.

Per questo effetto, possiamo aggiungere il nostro CSS personalizzato direttamente al modulo. Vai alla scheda Avanzate e aggiungi il seguente CSS personalizzato sotto l'Elemento principale:

CSS elemento principale (predefinito):

transform: perspective(700px) rotateY(45deg);
transition: all .2s;

Questo CSS sta facendo due cose alla nostra immagine usando la proprietà Transform CSS. Innanzitutto, aggiunge una prospettiva di 700 px che è la distanza tra l'immagine e la prospettiva dell'utente durante la visualizzazione della pagina. Il CSS aggiunge anche la rotazione all'immagine. La rotazioneY(45deg) ruota l'immagine sull'asse Y di 45 gradi (in senso orario). E con la prospettiva in atto, l'immagine ora ha un aspetto tridimensionale.

CSS elemento principale (hover):

transform: perspective(700px) rotateY(0deg);

Questo elimina la rotazione dell'immagine al passaggio del mouse in modo che appaia normale in modo che gli utenti possano vedere meglio l'immagine.

Ora controlliamo il risultato.

Facciamo un altro paio di esempi di questa microinterazione. Vai avanti e copia il modulo immagine e incollalo nella colonna 2 e nella colonna 3. Nel modulo immagine duplicato nella colonna 2, aggiorna il CSS personalizzato come segue:

CSS elemento principale (predefinito):

transform: perspective(700px) rotateX(45deg);
transition: all .2s;

CSS elemento principale (hover):

transform: perspective(700px) rotateX(0deg);

Notare che l'unica differenza qui è la lettera "X" dopo "ruota". Questo dice all'immagine di ruotare sull'asse x a 45 gradi. Quindi impostiamo il valore del grado su 0 al passaggio del mouse per riportarlo alla normalità.

Ecco il risultato.

Nel modulo immagine duplicata nella colonna 3, aggiorna il CSS personalizzato come segue:

CSS elemento principale (predefinito):

transform: perspective(700px) rotateY(-45deg);
transition: all .2s;

CSS elemento principale (hover):

transform: perspective(700px) rotateY(0deg);

Notare che l'unica differenza tra questo CSS e il CSS utilizzato nell'immagine nella colonna 1 è il valore "-45deg". Questo ruota l'immagine sull'asse Y in senso antiorario.

Ecco il risultato finale di tutte e tre le microinterazioni dell'immagine utilizzando la prospettiva e la rotazione.

Non dimenticare di aggiungere ancora più effetti e design al passaggio del mouse incorporati utilizzando l'impostazione integrata del modulo immagine. Ad esempio, questo sarebbe un ottimo posto per aggiungere anche l'effetto ombra della scatola.

#6 Microinterazione con cursore a pulsante

Per quest'ultima microinterazione, creeremo un cursore a pulsante che mostra informazioni aggiuntive (in realtà un pulsante completamente nuovo) al passaggio del mouse. L'idea di base è dare alla tua colonna un'altezza personalizzata e quindi impilare due moduli di pulsanti all'interno della colonna. Il pulsante in alto sarà quello che l'utente vede per impostazione predefinita, ma il secondo pulsante sarà il pulsante con "informazioni aggiuntive" che l'utente vedrà quando passa con il mouse sopra il pulsante.

Ecco come crearlo.

Questo pulsante occuperà l'intera larghezza della colonna della riga, quindi funziona meglio se aggiungi il pulsante a una riga con una colonna che non diventa troppo ampia. Per questo esempio, utilizzerò una riga a una colonna e quindi imposterò una larghezza massima per la mia riga in modo che il pulsante non diventi troppo largo su browser di grandi dimensioni.

Crea una nuova sezione con una riga a una colonna. Quindi aggiungi un modulo pulsante alla riga e aggiorna le seguenti impostazioni del pulsante:

Testo del pulsante: "Scarica"

Allineamento dei pulsanti: centro
Usa stili personalizzati per il pulsante: S
Colore del testo del pulsante: #ffffff
Colore di sfondo del pulsante: # 0c71c3
Larghezza bordo pulsante: 0px
Raggio bordo pulsante: 0px
Icona del pulsante: vedi screenshot
Colore icona pulsante: #ffffff
Posizionamento dell'icona del pulsante: a sinistra
Mostra solo l'icona al passaggio del mouse per il pulsante: NO

Margine personalizzato: 0px in basso

Quindi, duplica il pulsante appena creato in modo che i duplicati si accumulino appena sotto il pulsante appena creato. Quindi aggiorna le impostazioni del pulsante duplicato come segue:

Testo pulsante: MP3 (3,5 MB)

Colore del testo del pulsante: # 0c71c3
Colore di sfondo del pulsante: #ffffff
Icona del pulsante: vedi screenshot
Colore icona pulsante: #0c71c3

Prima di procedere allo stile della nostra riga, dobbiamo aggiungere una classe CSS al pulsante in alto. Apri le impostazioni del pulsante in alto e aggiungi la seguente classe CSS:

Classe CSS: pulsante in alto

Ora che entrambi i pulsanti sono a posto, aggiorniamo le impostazioni della riga con una larghezza personalizzata che servirà come larghezza massima dei nostri pulsanti e una classe CSS di colonna per il nostro CSS personalizzato che aggiungeremo alle impostazioni della pagina. Apri le impostazioni della riga e aggiorna quanto segue:

Larghezza personalizzata: 200 px
Classe CSS colonna: pulsante di scorrimento

Assicurati di aggiungere la classe CSS alla colonna e non alla riga.

Ora siamo pronti per aggiungere il CSS personalizzato. Apri le impostazioni della pagina e aggiungi il seguente CSS:

/** This styles the slider button **/

.slider-button {
  height: 50px;
  overflow:hidden;
  border:2px solid #0c71c3;
}

.slider-button .et_pb_button {
  display:block;
  margin: 0 !important;
}

.slider-button:hover .top-button {
  margin-top: -48px !important;
}

Questo CSS funzionerà solo con il pulsante alla dimensione predefinita. Questo perché dobbiamo dare alla colonna un'altezza fissa per nascondere il secondo pulsante fino al passaggio del mouse. In questo momento l'altezza della colonna (con la classe "pulsante di scorrimento") ha un'altezza di 50 px. Questo spiega anche il bordo di 2 pixel dato alla colonna. Al passaggio del mouse, il pulsante in alto (con la classe "pulsante in alto" viene spostato fuori dalla vista con un margine superiore di -48 px (l'altezza del pulsante meno uno dei bordi di 2 px). Ma, se cambi il carattere- dimensione o riempimento dei pulsanti, sarà necessario regolare di conseguenza l'altezza della classe del pulsante di scorrimento insieme al margine superiore del pulsante.

Questo è il risultato finale.

Non dimenticare che puoi modellare i pulsanti con testo/informazioni e icone diversi per uso personale. È un ottimo modo per educare gli utenti con informazioni aggiuntive in un unico invito all'azione.

Download GRATUITO: ottieni il layout predefinito e il file CSS per questo tutorial

Se vuoi iniziare subito su come appariranno queste microinterazioni sul tuo sito web, puoi scaricare il file zip qui sotto. Una volta scaricato il file zip, individua il file sul tuo disco rigido. Si chiamerà “microinteraction-examples.zip”. Quando decomprimi il file, vedrai due file. Il file denominato "microinteraction-examples.json" è il layout Divi. Dovrà essere caricato nella tua libreria Divi. Puoi farlo dalla dashboard di WordPress accedendo a Divi > Divi Library e quindi facendo clic sul pulsante di importazione nella parte superiore della pagina. Il file denominato "microinteractions.css" contiene il CSS personalizzato utilizzato nel tutorial. Questo CSS dovrà essere copiato nel CSS personalizzato delle impostazioni della pagina o nella casella CSS aggiuntivo per la personalizzazione del tema. Puoi anche utilizzare la funzione di trascinamento della selezione di Divi per trascinare il file microinteractions.css direttamente in Divi Builder una volta caricato il layout. Questo aggiungerà automaticamente il css alle impostazioni della tua pagina.

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!

Pensieri finali

Spero che queste microinterazioni ti siano utili. Sono semplici da usare con Divi (usando solo CSS) in tutto il tuo sito. Per motivi di tempo e semplicità, ho utilizzato gli stili di base predefiniti dei moduli, ma sentiti libero di regolare le opzioni di progettazione secondo necessità per stili più creativi. Inoltre, non esitare a modificare il CSS per questi esempi per adattarlo alle tue esigenze o inventare qualcosa di completamente nuovo.

Non vedo l'ora di sentirti nei commenti.

Saluti!