6 microinteracțiuni care vă vor face site-ul Divi mai plăcut (tutorial + descărcare gratuită)

Microinteracțiunile sunt o modalitate excelentă de a îmbunătăți experiența utilizatorului pe măsură ce interacționează cu site-ul dvs. Animațiile ușoare ale pictogramelor, butoanelor sau imaginilor pot determina utilizatorul să acționeze într-un mod distractiv și intenționat. Există nenumărate microinteracțiuni pe care le puteți include pe site-ul dvs., dar o regulă bună este să le păstrați „micro”. Nu vrei să exagerezi.

Astăzi vă voi arăta câteva microinteracțiuni simple pe care le puteți adăuga pe site-ul dvs. Divi folosind Divi Builder și Custom CSS (fără jquery). Mă voi concentra asupra acelor elemente cu care utilizatorii interacționează în mod normal - butoane, pictograme, imagini.

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra microinteracțiunilor pe care le vom construi în acest tutorial.

# 1 Redimensionarea imaginilor pe Hover

Începeți să construiți microinteracțiunea # 1

# 2 Pictogramă derulantă în jos

Începeți să construiți microinteracțiunea # 2

# 3 Rotirea pictogramelor Blurb și Buton pe Hover

Începeți să construiți microinteracțiunea # 3

# 4 pictograme cu buton glisant pentru a afișa și ascunde textul butonului

Începeți să construiți microinteracțiunea # 4

# 5 Rotirea perspectivei imaginii 3D

Începeți să construiți microinteracțiunea # 5

# 6 Microinteracțiune cu glisor de butoane

Începeți să construiți microinteracțiunea # 6

Abonați-vă la canalul nostru Youtube

Ce trebuie să începeți

Pentru a începe, tot ce ai nevoie este Divi. Vom fi exemplele noastre de la zero folosind Divi Builder de pe partea frontală.

Descărcați fișierele pentru acces ușor

Am inclus o descărcare în partea de jos a acestui articol pentru aceia dintre voi care doresc să aibă un exemplu de lucru al acestor microinteracțiuni care rulează pe site-ul dvs. într-un mod rapid și ușor. În acest fel puteți avea un exemplu de lucru pe măsură ce urmați împreună cu tutorialul.

Descarca

# 1 Redimensionarea imaginilor pe Hover

Scalarea se referă la ajustarea dimensiunii unui element. Deci, dacă am vrut să creștem imaginea la hover (de exemplu), tot ce trebuie să facem este să adăugăm un mic fragment CSS pentru a ne scala imaginea cu un anumit procent. Acest lucru ne permite să creăm o microinteracțiune mică, dar eficientă, atunci când un utilizator trece peste o imagine. Permiteți-mi să vă arăt cum puteți aplica acest lucru la trei module Divi populare care utilizează imagini - modulul imagine, modulul blurb și modulul persoană.

Continuați și creați o nouă secțiune cu un rând cu trei coloane, astfel încât să putem adăuga fiecare dintre exemplele noastre la fiecare coloană.

Scalarea unei imagini pe Hover utilizând modulul de imagine

Pentru a adăuga microinteracțiunea de scalare a imaginii la o imagine utilizând modulul de imagine, mai întâi adăugați un modul de imagine în prima coloană.

Apoi adăugați o imagine la modulul la alegere.

Apoi, adăugați următoarea clasă CSS sub fila avansată din setările imaginii:

Clasa CSS: scala-imagine

Acest lucru ne permite să vizăm acest modul specific atunci când adăugăm CSS personalizat la setările paginii. Pentru a adăuga CSS necesar pentru a scala imaginea, deschideți setările paginii și adăugați următoarele CSS personalizate:

/**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)
}

Acum verificați rezultatul.

Redimensionarea unei imagini a modulului Blurb pe Hover

Pentru a adăuga același efect unei imagini într-un modul de blurb, mai întâi adăugați un modul de blurb în a doua coloană.

Apoi, adăugați o imagine la alegere la modulul blurb.

Apoi, adăugați următoarea clasă CSS la modulul blurb.

Clasa CSS: scale-blurb-image

Cu această clasă CSS, putem adăuga acum CSS-ul nostru personalizat care vizează imaginea blurb. Deschideți setările paginii și adăugați următoarele CSS personalizate:

/**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);
}

Iată rezultatul.

Scalarea unei imagini a modulului persoană pe Hover

Pentru a redimensiona o imagine a modulului de persoană pe hover, adăugați un modul de persoană la a treia coloană și adăugați o încărcare a imaginii la alegerea dvs. modulul.

Apoi adăugați următoarea clasă CSS la modulul persoană.

Clasa CSS: scala-persoană-imagine

Acum deschideți setările paginii și adăugați următoarele CSS personalizate.

/**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);
}

Verificați rezultatul tuturor celor trei module cu microinteracțiunea de scalare a imaginii.

# 2 Pictogramă derulantă în jos

Următoarea microinteracțiune adaugă o animație săritoare la pictograma de derulare în jos încorporată în modulul de antet cu lățime completă. Acesta este un mod subtil de a informa vizitatorul în continuare că există mai multe informații în partea de jos a paginii. Și puteți alege să aveți acest efect de respingere în mod implicit sau în timpul deplasării.

Iată cum să o faci.

Mai întâi adăugați o nouă secțiune cu lățime completă cu un modul de antet cu lățime completă.

Apoi actualizați următoarele:

Orientare text și siglă: centru
Afișați butonul de derulare în jos: DA
Pictogramă: [selectați pictograma la alegere]

Apoi adăugați următoarea clasă CSS:

Clasa CSS: bounce-scroll-icon

Această clasă ne va permite să vizăm pictograma scroll cu css pentru a anima pictograma în mod implicit la încărcarea paginii.

Apoi copiați modulul de antet cu lățime completă și actualizați clasa CSS la următoarele:

Clasa CSS: bounce-scroll-icon-hover

Această clasă ne va permite să vizăm pictograma de defilare cu css pentru a anima pictograma în cursa plasării.

Apoi deschideți setările paginii și adăugați următorul CSS personalizat pentru a activa animația de respingere pentru cele două exemple ale noastre.

.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;}
}

Verificați rezultatul celor două exemple. Pictograma de derulare a antetului de sus se va anima în mod implicit, iar pictograma de derulare a antetului de jos se va anima în timpul deplasării.

# 3 Icoane rotative pe Hover

Adăugarea unei ușoare rotații la o pictogramă poate fi o microinteracțiune eficientă pentru a atrage utilizatorii să facă clic pe un element. Deoarece cele mai populare două module Divi care au pictograme încorporate sunt modulul buton și modulul blurb, m-am gândit să vă arăt cum să adăugați rotație acelor pictograme aflate pe hover.

Rotirea unei pictograme de buton pe Hover

Divi vine deja cu o microinteracțiune utilă pentru pictogramele butoanelor în mod implicit. Când treceți cu mouse-ul peste buton, pictograma butonului apare și se deplasează spre dreapta, indicând faptul că, făcând clic pe buton, veți fi redirecționat către o altă pagină. Dar, dacă vrei să devii ceva mai creativ cu el, poți roti pictograma pentru o microinteracțiune complet nouă.

Pentru a roti o pictogramă de buton pe hover, mai întâi adăugați o nouă secțiune cu un rând cu o coloană. Apoi adăugați un modul buton la rând.

Apoi actualizați setările butonului după cum urmează:

Utilizați stiluri personalizate pentru butonul: DA
Afișați pictograma doar pe cursor pentru buton: NU
Pictogramă buton: [alege pictograma la alegere]

Apoi adăugați următoarea clasă CSS:

Clasa CSS: rotire-buton-pictogramă

Având pictograma și clasa CSS la locul lor, tot ce trebuie să facem este să adăugăm următoarele setări CSS personalizate la setările paginii:

/** 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);
}

Aceasta va roti pictograma în sens invers acelor de ceasornic cu 90 de grade inițial și apoi înapoi la 0 grade la deplasare.

Iată rezultatul.

Rotirea unei pictograme Blurb Module

Pentru a roti o pictogramă a modulului blurb, să creăm mai întâi o nouă secțiune cu un rând cu trei coloane. Apoi adăugați un modul de blurb în coloana 1 și actualizați următoarele setări de blurb.

Utilizați pictograma: DA
Pictogramă: [adăugați pictograma la alegere]
Orientare text: centru
Clasa CSS: rotire-blurb-icon

Acum adăugați următoarele CSS personalizate la setările paginii:

/** 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);
}

Iată rezultatul.

Acest lucru funcționează și cu pictograma plasată în stânga titlului. Tot ce trebuie să faceți este să actualizați setările de blurb după cum urmează:

Plasare imagine / pictogramă: stânga
Înălțimea liniei de titlu: 1.7em

Verificați rezultatul.

# 4 pictograme cu buton glisant pentru a afișa și ascunde textul butonului

Buton Text către pictogramă pe Hover

Această microinteracțiune afișează textul butonului cu o pictogramă în mod implicit și apoi mută pictograma pentru a acoperi textul pe hover.

Iată cum să o faci.

Adăugați o nouă secțiune cu un rând cu o coloană. Apoi adăugați un modul buton la rând și actualizați următoarele setări buton:

Utilizați stiluri personalizate pentru buton: DA
Culoarea fundalului butonului: # 0c71c3
Lățimea chenarului butonului: 0 px
Culoare pictogramă buton: #ffffff
Clasa CSS: buton-text-pictogramă

Acum adăugați următoarele setări CSS personalizate la setările paginii:

/** 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);
}

Acum verificați rezultatul.

Pictogramă buton pentru text pe hover

De asemenea, puteți crea efectul opus afișării butonului Pictogramă inițial și apoi glisarea pictogramei pentru a dezvălui textul butonului. Pentru aceasta, copiați modulul buton și actualizați următoarele setări buton:

Culoare text buton (implicit): # 0c71c3
Culoarea textului butonului (hover): #ffffff

Apoi înlocuiți clasa CSS cu următoarele:

Clasa CSS: buton-pictogramă-text

Apoi adăugați următoarele CSS personalizate la setările paginii:

/** 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);
}

Acum verificați rezultatul.

# 5 Rotirea perspectivei imaginii 3D

Această microinteracțiune începe cu o imagine a modulului de imagine în stil implicit cu perspectivă 3D și rotație. Apoi, la plimbare, imaginea recurge la o afișare normală a imaginii.

Iată cum să o faci.

Mai întâi, creați o nouă secțiune cu un rând cu trei coloane. Apoi adăugați un modul de imagine în coloana 1 și adăugați o imagine la modulul de imagine la alegere.

Pentru acest efect, putem adăuga CSS personalizat direct la modul. Accesați fila avansată și adăugați următorul CSS personalizat sub Elementul principal:

Element principal CSS (implicit):

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

Acest CSS face două lucruri imaginii noastre folosind proprietatea Transform CSS. În primul rând, adaugă o perspectivă de 700 px, care este cantitatea de distanță dintre imagine și perspectiva utilizatorului atunci când vizualizează pagina. CSS adaugă, de asemenea, rotație imaginii. RotateY (45deg) rotește imaginea pe axa Y cu 45 de grade (în sensul acelor de ceasornic). Și având perspectiva în loc, imaginea are acum un aspect tridimensional.

Element principal CSS (cursor):

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

Aceasta elimină rotația imaginii în cursă, astfel încât să pară normală, astfel încât utilizatorii să poată arăta mai bine imaginea.

Acum, să verificăm rezultatul.

Să facem câteva alte exemple ale acestei microinteracțiuni. Continuați și copiați modulul de imagine și lipiți-l în coloana 2 și coloana 3. În modulul de imagine duplicat din coloana 2, actualizați CSS personalizat după cum urmează:

Element principal CSS (implicit):

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

Element principal CSS (cursor):

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

Observați singura diferență aici este litera „X” după „rotire”. Aceasta spune imaginii să se rotească pe axa x la 45 de grade. Apoi, luăm setată valoarea gradului la 0 la plecare pentru a o readuce la normal.

Iată rezultatul.

În modulul de imagine duplicat din coloana 3, actualizați CSS personalizat după cum urmează:

Element principal CSS (implicit):

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

Element principal CSS (cursor):

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

Observați că singura diferență dintre acest CSS și CSS utilizat în imaginea din coloana 1 este valoarea „-45deg”. Aceasta rotește imaginea pe axa Y în sens invers acelor de ceasornic.

Iată rezultatul final al tuturor celor trei microinteracțiuni de imagine folosind perspectiva și rotația.

Nu uitați să adăugați și mai multe efecte și modele de hover încorporate utilizând setarea încorporată a modulului de imagine. De exemplu, acesta ar fi un loc minunat pentru a adăuga și efectul de umbră a cutiei.

# 6 Microinteracțiune cu glisor de butoane

Pentru această ultimă microinteracțiune, vom crea un glisor de buton care să afișeze informații suplimentare (de fapt un buton complet nou) pe hover. Ideea de bază este să oferiți coloanei o înălțime personalizată și apoi să stivați două module de butoane în interiorul coloanei. Butonul de sus va fi ceea ce utilizatorul vede în mod implicit, dar al doilea buton va fi butonul cu „informații suplimentare” pe care utilizatorul le va vedea când trece peste buton.

Iată cum să-l creați.

Acest buton va acoperi întreaga lățime a coloanei rândului, astfel încât funcționează cel mai bine dacă adăugați butonul la un rând cu o coloană care nu se extinde prea mult. Pentru acest exemplu, voi folosi un rând cu o singură coloană și apoi voi seta o lățime maximă pe rândul meu, astfel încât butonul să nu se extindă prea mult pe browserele mari.

Creați o nouă secțiune cu un rând cu o coloană. Apoi adăugați un modul buton la rând și actualizați următoarele setări buton:

Text buton: „Descărcare”

Aliniere buton: centru
Utilizați stiluri personalizate pentru buton: DA
Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # 0c71c3
Lățimea chenarului butonului: 0 px
Raza chenarului butonului: 0 px
Pictogramă buton: vezi captura de ecran
Culoare pictogramă buton: #ffffff
Plasare pictogramă buton: stânga
Afișați pictograma doar pe cursor pentru buton: NU

Marja personalizată: 0 px de jos

Apoi, dublează butonul pe care tocmai l-ai creat, astfel încât duplicatul să se stive chiar sub butonul pe care tocmai l-ai creat. Apoi actualizați setările butonului duplicat după cum urmează:

Text buton: MP3 (3,5 mb)

Culoarea textului butonului: # 0c71c3
Culoarea fundalului butonului: #ffffff
Pictogramă buton: vezi captura de ecran
Culoare pictogramă buton: # 0c71c3

Înainte de a continua să ne stilizăm rândul, trebuie să adăugăm o clasă CSS la butonul de sus. Deschideți setările butonului de sus și adăugați următoarea clasă CSS:

Clasa CSS: butonul de sus

Acum că ambele butoane sunt la locul lor, să actualizăm setările rândurilor cu o lățime personalizată care va servi ca lățimea maximă a butoanelor noastre și o clasă CSS coloană pentru CSS-ul nostru personalizat pe care o vom adăuga la setările paginii. Deschideți setările rândului și actualizați următoarele:

Lățime personalizată: 200 px
Coloana CSS Class: glisor-buton

Asigurați-vă că adăugați clasa CSS la coloană și nu la rând.

Acum suntem gata să adăugăm CSS personalizat. Deschideți setările paginii și adăugați următoarele 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;
}

Acest CSS va funcționa numai cu butonul la dimensiunea implicită. Acest lucru se datorează faptului că trebuie să acordăm coloanei o înălțime fixă ​​pentru a ascunde al doilea buton până la deplasare. Chiar acum înălțimea coloanei (cu clasa „glisor-buton”) are o înălțime de 50 px. Aceasta reprezintă și chenarul de 2 px dat coloanei. La plecare, butonul de sus (cu clasa „butonul de sus” este deplasat în sus din vizualizare cu o marjă de sus de -48px (înălțimea butonului minus una dintre marginile de 2px). Dar, dacă modificați fontul- dimensiunea sau căptușirea butoanelor, va trebui să reglați înălțimea clasei de butoane glisante împreună cu marginea butonului superior în consecință.

Iată rezultatul final.

Nu uitați că puteți stiliza butoanele cu text / informații și pictograme diferite pentru propria dvs. utilizare. Este o modalitate excelentă de a educa utilizatorii cu informații suplimentare într-un îndemn unic la acțiune.

Descărcare GRATUITĂ: obțineți fișierul Premade Layout și CSS pentru acest tutorial

Dacă doriți să începeți să vedeți cum vor arăta aceste microinteracțiuni pe site-ul dvs. web, puteți descărca fișierul zip de mai jos. După ce descărcați fișierul zip, localizați fișierul pe hard disk. Se va numi „microinteracțiune-exemple.zip”. Când dezarhivați fișierul, veți vedea două fișiere. Fișierul numit „microinteraction-examples.json” este aspectul Divi. Va trebui încărcat în biblioteca Divi. Puteți face acest lucru din tabloul de bord WordPress navigând la Divi> Divi Library și apoi făcând clic pe butonul de import din partea de sus a paginii. Fișierul numit „microinteractions.css” conține CSS personalizat utilizat în tutorial. Acest CSS va trebui copiat în setările de pagină CSS personalizate sau în caseta CSS suplimentară Theme Customizer. De asemenea, puteți utiliza funcția de glisare și fixare a Divi pentru a trage fișierul microinteractions.css direct în Divi Builder odată ce aspectul dvs. a fost încărcat. Aceasta va adăuga automat CSS la setările paginii dvs.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Gânduri finale

Sper că veți găsi utile aceste microinteracțiuni. Acestea sunt ușor de utilizat cu Divi (folosind numai CSS) pe tot site-ul dvs. Din motive de timp și simplitate, am folosit stilurile implicite de bază ale modulelor, dar nu ezitați să ajustați opțiunile de design după cum este necesar pentru stiluri mai creative. De asemenea, nu ezitați să ajustați CSS pentru aceste exemple pentru a se potrivi nevoilor dvs. sau să veniți cu ceva complet nou.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!