6 mikrointerakcji, które sprawią, że Twoja witryna Divi będzie przyjemniejsza (samouczek + bezpłatne pobieranie)

Mikrointerakcje to świetny sposób na zwiększenie komfortu użytkowników podczas interakcji z Twoją witryną. Niewielkie animacje ikon, przycisków lub obrazów mogą skłonić użytkownika do podjęcia działania w zabawny i celowy sposób. Istnieje niezliczona ilość mikrointerakcji, które możesz umieścić w swojej witrynie, ale dobrą zasadą jest utrzymywanie ich „mikro”. Nie chcesz przesadzać.

Dzisiaj pokażę Ci kilka prostych mikrointerakcji, które możesz dodać do swojej witryny Divi za pomocą Divi Builder i niestandardowego CSS (bez jquery). Skoncentruję się na tych elementach, z którymi użytkownicy zwykle wchodzą w interakcję – przyciski, ikony, obrazy.

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na mikrointerakcje, które będziemy budować w tym samouczku.

#1 Skalowanie obrazów po najechaniu kursorem

Zacznij budować mikrointerakcję #1

#2 Odbijająca się ikona przewijania w dół

Zacznij budować mikrointerakcję #2

#3 Obracanie ikon rozmycia i przycisków po najechaniu kursorem

Zacznij budować mikrointerakcję #3

#4 Przesuwane ikony przycisków, aby pokazać i ukryć tekst przycisku

Zacznij budować mikrointerakcję #4

#5 Obrót perspektywy obrazu 3D

Zacznij budować mikrointerakcję #5

#6 Mikrointerakcja suwaka z przyciskami

Zacznij budować mikrointerakcję #6

Subskrybuj nasz kanał YouTube

Czego potrzebujesz, aby zacząć

Aby rozpocząć, wszystko, czego naprawdę potrzebujesz, to Divi. Będziemy naszymi przykładami od podstaw, używając Divi Builder na froncie.

Pobierz pliki dla łatwego dostępu

Na dole tego artykułu zamieściłem plik do pobrania dla tych, którzy chcą mieć działający przykład tych mikrointerakcji w szybki i łatwy sposób. W ten sposób możesz mieć działający przykład, który będziesz śledzić wraz z samouczkiem.

Pobierać

#1 Skalowanie obrazów po najechaniu kursorem

Skalowanie odnosi się do dopasowania rozmiaru elementu. Jeśli więc chcemy powiększyć obraz po najechaniu myszą (na przykład), wystarczy dodać mały fragment kodu CSS, aby skalować nasz obraz o określony procent. Dzięki temu możemy stworzyć małą, ale skuteczną mikrointerakcję, gdy użytkownik najedzie kursorem na obraz. Pokażę ci, jak możesz to zastosować do trzech popularnych modułów Divi, które używają obrazów – modułu obrazu, modułu blurb i modułu osoby.

Śmiało i utwórz nową sekcję z rzędem trzech kolumn, abyśmy mogli dodać każdy z naszych przykładów do każdej kolumny.

Skalowanie obrazu po najechaniu kursorem za pomocą modułu obrazu

Aby dodać mikrointerakcję skalowania obrazu do obrazu za pomocą modułu obrazu, najpierw dodaj moduł obrazu do pierwszej kolumny.

Następnie dodaj obraz do wybranego modułu.

Następnie dodaj następującą klasę CSS w zakładce Zaawansowane w ustawieniach obrazu:

Klasa CSS: skala-obraz

Pozwala nam to na ukierunkowanie na ten konkretny moduł podczas dodawania naszego niestandardowego CSS do ustawień strony. Aby dodać CSS potrzebny do skalowania obrazu, otwórz ustawienia strony i dodaj następujący niestandardowy CSS:

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

Teraz sprawdź wynik.

Skalowanie obrazu modułu Blurb po najechaniu kursorem

Aby dodać ten sam efekt do obrazu w module blurb, najpierw dodaj moduł blurb do drugiej kolumny.

Następnie dodaj wybrany obraz do modułu notki.

Następnie dodaj następującą klasę CSS do modułu blurb.

Klasa CSS: scale-blurb-image

Z tą klasą CSS możemy teraz dodać nasz niestandardowy CSS, który jest skierowany do obrazu blurb. Otwórz ustawienia strony i dodaj następujący niestandardowy CSS:

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

Oto wynik.

Skalowanie obrazu modułu osoby po najechaniu kursorem

Aby skalować obraz modułu osoby po najechaniu myszą, dodaj moduł osoby do trzeciej kolumny i dodaj wybrany obraz modułu.

Następnie dodaj następującą klasę CSS do modułu person.

Klasa CSS: skala-osoba-obraz

Teraz otwórz ustawienia strony i dodaj następujący niestandardowy CSS.

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

Sprawdź wyniki wszystkich trzech modułów z mikrointerakcją skalowania obrazu.

#2 Odbijająca się ikona przewijania w dół

Ta następna mikrointerakcja dodaje animację odbijania do ikony przewijania w dół wbudowanej w moduł nagłówka o pełnej szerokości. Jest to subtelny sposób na dalsze poinformowanie odwiedzającego, że w dalszej części strony znajduje się więcej informacji. I możesz wybrać, czy chcesz mieć ten efekt odbijania domyślnie, czy po najechaniu myszą.

Oto jak to zrobić.

Najpierw dodaj nową sekcję o pełnej szerokości z modułem nagłówka o pełnej szerokości.

Następnie zaktualizuj następujące elementy:

Orientacja tekstu i logo: Środek
Pokaż przycisk przewijania w dół: TAK
Ikona: [wybierz wybraną ikonę]

Następnie dodaj następującą klasę CSS:

Klasa CSS: bounce-scroll-ikon

Ta klasa pozwoli nam skierować ikonę przewijania za pomocą css, aby domyślnie animować ikonę podczas ładowania strony.

Następnie zduplikuj moduł nagłówka o pełnej szerokości i zaktualizuj klasę CSS do następującej:

Klasa CSS: bounce-scroll-icon-hover

Ta klasa pozwoli nam celować w ikonę przewijania za pomocą css, aby animować ikonę po najechaniu myszą.

Następnie otwórz ustawienia strony i dodaj następujący niestandardowy CSS, aby aktywować animację odbijania dla naszych dwóch przykładów.

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

Sprawdź wyniki dwóch przykładów. Górna ikona przewijania nagłówka będzie animowana domyślnie, a dolna ikona przewijania nagłówka będzie animowana po najechaniu myszą.

#3 Obracanie ikon po najechaniu kursorem

Dodanie niewielkiego obrotu do ikony może być skuteczną mikrointerakcją zachęcającą użytkowników do kliknięcia elementu. Ponieważ dwa najpopularniejsze moduły Divi, które mają wbudowane ikony, to moduł przycisków i moduł notatek, pomyślałem, że pokażę ci, jak dodać obrót do tych ikon po najechaniu myszą.

Obracanie ikony przycisku po najechaniu kursorem

Divi jest już domyślnie wyposażony w pomocną mikrointerakcję z ikonami przycisków. Po najechaniu na przycisk pojawi się ikona przycisku i przesunie się w prawo, wskazując, że po kliknięciu przycisku zostaniesz przekierowany na inną stronę. Ale jeśli chcesz być nieco bardziej kreatywny, możesz obrócić ikonę, aby uzyskać zupełnie nową mikrointerakcję.

Aby obrócić ikonę przycisku po najechaniu myszą, najpierw dodaj nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł przycisku do wiersza.

Następnie zaktualizuj ustawienia przycisków w następujący sposób:

Użyj niestandardowych stylów dla przycisku: TAK
Pokaż tylko ikonę po najechaniu na przycisk: NIE
Ikona przycisku: [wybierz wybraną ikonę]

Następnie dodaj następującą klasę CSS:

Klasa CSS: przycisk-obróć-ikona

Z naszą ikoną i klasą CSS wystarczy dodać następujący niestandardowy kod CSS do ustawień strony:

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

Spowoduje to obrócenie ikony w kierunku przeciwnym do ruchu wskazówek zegara o 90 stopni początkowo, a następnie z powrotem do 0 stopni po najechaniu kursorem.

Oto wynik.

Obracanie ikony modułu Blurb

Aby obrócić ikonę modułu notki, utwórzmy najpierw nową sekcję z wierszem z trzema kolumnami. Następnie dodaj moduł noty do kolumny 1 i zaktualizuj następujące ustawienia notatek.

Użyj ikony: TAK
Ikona: [dodaj wybraną ikonę]
Orientacja tekstu: środek
Klasa CSS: obróć-blurb-ikon

Teraz dodaj następujący niestandardowy CSS do ustawień strony:

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

Oto wynik.

Działa to również z ikoną umieszczoną po lewej stronie tytułu. Wszystko, co musisz zrobić, to zaktualizować ustawienia notki w następujący sposób:

Umieszczenie obrazu/ikony: po lewej
Wysokość wiersza tytułu: 1.7em

Sprawdź wynik.

#4 Przesuwane ikony przycisków, aby pokazać i ukryć tekst przycisku

Tekst przycisku do ikony po najechaniu kursorem

Ta mikrointerakcja domyślnie wyświetla tekst przycisku z ikoną, a następnie przesuwa ikonę, aby zakryć tekst po najechaniu myszą.

Oto jak to zrobić.

Dodaj nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł przycisku do wiersza i zaktualizuj następujące ustawienia przycisku:

Użyj niestandardowych stylów dla przycisku: TAK
Kolor tła przycisku: #0c71c3
Szerokość obramowania przycisku: 0px
Kolor ikony przycisku: #ffffff
Klasa CSS: przycisk-tekst-do-ikony

Teraz dodaj następujący niestandardowy kod CSS do ustawień strony:

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

Teraz sprawdź wynik.

Ikona przycisku do tekstu po najechaniu myszą

Możesz również uzyskać odwrotny efekt, początkowo wyświetlając ikonę przycisku, a następnie przesuwając ikonę, aby odsłonić tekst przycisku. W tym celu zduplikuj moduł przycisków i zaktualizuj następujące ustawienia przycisków:

Kolor tekstu przycisku (domyślny): #0c71c3
Kolor tekstu przycisku (najechanie): #ffffff

Następnie zastąp klasę CSS następującą:

Klasa CSS: przycisk-ikona na tekst

Następnie dodaj następujący niestandardowy kod CSS do ustawień strony:

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

Teraz sprawdź wynik.

#5 Obrót perspektywy obrazu 3D

Ta mikrointerakcja rozpoczyna się od obrazu modułu obrazu, który domyślnie ma styl z perspektywą i obrotem obrazu 3D. Następnie po najechaniu kursorem obraz powraca do normalnego wyświetlania obrazu.

Oto jak to zrobić.

Najpierw utwórz nową sekcję z rzędem trzech kolumn. Następnie dodaj moduł obrazu do kolumny 1 i dodaj obraz do wybranego modułu obrazu.

W tym celu możemy dodać nasz niestandardowy CSS bezpośrednio do modułu. Przejdź do zakładki zaawansowane i dodaj następujący niestandardowy CSS w elemencie głównym:

CSS głównego elementu (domyślnie):

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

Ten CSS robi dwie rzeczy z naszym obrazem za pomocą właściwości Transform CSS. Po pierwsze, dodaje perspektywę 700px, która jest odległością między obrazem a perspektywą użytkownika podczas przeglądania strony. CSS dodaje również obrót do obrazu. rotateY(45deg) obraca obraz na osi Y o 45 stopni (zgodnie z ruchem wskazówek zegara). Po umieszczeniu perspektywy obraz ma teraz trójwymiarowy wygląd.

Główny element CSS (najechanie):

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

Eliminuje to obrót obrazu po najechaniu kursorem, aby wyglądał normalnie, dzięki czemu użytkownicy mogą lepiej przyjrzeć się obrazowi.

Sprawdźmy teraz wynik.

Zróbmy jeszcze kilka przykładów tej mikrointerakcji. Śmiało skopiuj moduł obrazu i wklej go w kolumnie 2 i kolumnie 3. W zduplikowanym module obrazu w kolumnie 2 zaktualizuj niestandardowy CSS w następujący sposób:

CSS głównego elementu (domyślnie):

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

Główny element CSS (najechanie):

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

Zauważ, że jedyną różnicą jest litera „X” po „obróć”. To każe obrazowi obrócić się na osi x o 45 stopni. Następnie ustawiamy wartość stopnia na 0 po najechaniu kursorem, aby przywrócić normalną wartość.

Oto wynik.

W module zduplikowanych obrazów w kolumnie 3 zaktualizuj niestandardowy CSS w następujący sposób:

CSS głównego elementu (domyślnie):

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

Główny element CSS (najechanie):

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

Zauważ, że jedyną różnicą między tym CSS a CSS użytym na obrazie w kolumnie 1 jest wartość „-45deg”. Powoduje to obrót obrazu na osi Y w kierunku przeciwnym do ruchu wskazówek zegara.

Oto końcowy wynik wszystkich trzech mikrointerakcji obrazu z wykorzystaniem perspektywy i rotacji.

Nie zapomnij dodać jeszcze więcej wbudowanych efektów i projektów najechania za pomocą wbudowanego ustawienia modułu obrazu. Na przykład byłoby to również świetne miejsce do dodania efektu cienia pudełka.

#6 Mikrointerakcja suwaka z przyciskami

Na potrzeby tej ostatniej mikrointerakcji stworzymy suwak przycisku, który po najechaniu kursorem będzie wyświetlał dodatkowe informacje (właściwie zupełnie nowy przycisk). Podstawową ideą jest nadanie kolumnie niestandardowej wysokości, a następnie ułożenie dwóch modułów przycisków wewnątrz kolumny. Górny przycisk będzie tym, co domyślnie widzi użytkownik, ale drugi przycisk będzie przyciskiem z „dodatkowymi informacjami”, które użytkownik zobaczy po najechaniu na przycisk.

Oto jak to stworzyć.

Ten przycisk będzie obejmował całą szerokość kolumny wiersza, więc działa najlepiej, jeśli dodasz przycisk do wiersza z kolumną, która nie będzie zbyt szeroka. W tym przykładzie użyję wiersza z jedną kolumną, a następnie ustawię maksymalną szerokość mojego wiersza, aby przycisk nie był zbyt szeroki w dużych przeglądarkach.

Utwórz nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł przycisku do wiersza i zaktualizuj następujące ustawienia przycisku:

Tekst przycisku: „Pobierz”

Wyrównanie przycisków: środek
Użyj niestandardowych stylów dla przycisku: TAK
Kolor tekstu przycisku: #ffffff
Kolor tła przycisku: #0c71c3
Szerokość obramowania przycisku: 0px
Promień obramowania przycisku: 0px
Ikona przycisku: patrz zrzut ekranu
Kolor ikony przycisku: #ffffff
Umieszczenie ikony przycisku: w lewo
Pokaż tylko ikonę po najechaniu na przycisk: NIE

Margines niestandardowy: 0px dół

Następnie zduplikuj właśnie utworzony przycisk, aby zduplikowane stosy znajdowały się tuż pod właśnie utworzonym przyciskiem. Następnie zaktualizuj ustawienia zduplikowanych przycisków w następujący sposób:

Tekst przycisku: MP3 (3,5 mb)

Kolor tekstu przycisku: #0c71c3
Kolor tła przycisku: #ffffff
Ikona przycisku: patrz zrzut ekranu
Kolor ikony przycisku: #0c71c3

Zanim przejdziemy do stylizacji naszego wiersza, musimy dodać klasę CSS do górnego przycisku. Otwórz ustawienia górnego przycisku i dodaj następującą klasę CSS:

Klasa CSS: górny przycisk

Teraz, gdy oba przyciski są na miejscu, zaktualizujmy ustawienia wierszy o niestandardową szerokość, która będzie służyć jako maksymalna szerokość naszych przycisków, oraz klasę CSS kolumny dla naszego niestandardowego CSS, który dodamy do ustawień strony. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Szerokość niestandardowa: 200px
Klasa CSS kolumny: suwak-przycisk

Pamiętaj, aby dodać klasę CSS do kolumny, a nie do wiersza.

Teraz jesteśmy gotowi do dodania niestandardowego CSS. Otwórz ustawienia strony i dodaj następujący kod 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;
}

Ten CSS będzie działał tylko z przyciskiem w domyślnym rozmiarze. Dzieje się tak, ponieważ musimy nadać kolumnie stałą wysokość, aby ukryć drugi przycisk do momentu najechania. W tej chwili wysokość kolumny (z klasą „suwak-przycisk”) ma wysokość 50px. Stanowi to również granicę 2px przypisaną do kolumny. Po najechaniu kursorem górny przycisk (z klasą „górny przycisk” jest przesuwany w górę z górnym marginesem -48px (wysokość przycisku minus jeden z obramowań 2px). Ale jeśli zmienisz czcionkę- rozmiar lub wypełnienie przycisków, należy odpowiednio dostosować wysokość klasy przycisku suwaka wraz z górnym marginesem przycisku.

Oto ostateczny wynik.

Nie zapominaj, że możesz stylizować przyciski z różnymi tekstami/informacjami i ikonami na własny użytek. To świetny sposób na przekazanie użytkownikom dodatkowych informacji w unikalnym wezwaniu do działania.

BEZPŁATNE pobieranie: pobierz gotowy układ i plik CSS do tego samouczka

Jeśli chcesz szybko dowiedzieć się, jak te mikrointerakcje będą wyglądać w Twojej witrynie, możesz pobrać poniższy plik zip. Po pobraniu pliku zip zlokalizuj go na dysku twardym. Będzie się nazywać „mikrointerakcja-examples.zip”. Po rozpakowaniu pliku zobaczysz dwa pliki. Plik o nazwie „microinteraction-examples.json” to układ Divi. Będzie musiał zostać przesłany do biblioteki Divi. Możesz to zrobić z pulpitu nawigacyjnego WordPress, przechodząc do Divi> Biblioteka Divi, a następnie klikając przycisk importowania u góry strony. Plik o nazwie „microinteractions.css” zawiera niestandardowy CSS używany w samouczku. Ten kod CSS należy skopiować do niestandardowego kodu CSS w ustawieniach strony lub do pola Dodatkowy CSS w dostosowywaniu motywu. Możesz także użyć funkcji przeciągnij i upuść Divi, aby przeciągnąć plik microinteractions.css bezpośrednio do Divi Builder po załadowaniu układu. Spowoduje to automatyczne dodanie css do ustawień strony.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Końcowe przemyślenia

Mam nadzieję, że te mikrointerakcje okażą się przydatne. Są proste w użyciu z Divi (używając tylko CSS) w całej witrynie. Ze względu na czas i prostotę użyłem podstawowych domyślnych stylów modułów, ale możesz dowolnie dostosowywać opcje projektowe do potrzeb bardziej kreatywnych stylów. Nie wahaj się też dostosować CSS do tych przykładów, aby pasowały do ​​Twoich potrzeb lub wymyśl coś zupełnie nowego.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!