Divi 사이트를 더욱 즐겁게 만들어줄 6가지 마이크로인터랙션 (튜토리얼 + 무료 다운로드)

마이크로인터랙션은 사이트와 상호작용할 때 사용자 경험을 향상시키는 좋은 방법입니다. 아이콘, 버튼 또는 이미지의 약간의 애니메이션은 사용자가 재미있고 목적 있는 방식으로 작업을 수행하도록 유도할 수 있습니다. 사이트에 포함할 수 있는 마이크로인터랙션은 셀 수 없이 많지만 경험상 "마이크로"로 유지하는 것이 좋습니다. 당신은 그것을 과용하고 싶지 않습니다.

오늘은 Divi Builder 및 Custom CSS(jquery 없음)를 사용하여 Divi 웹사이트에 추가할 수 있는 몇 가지 간단한 마이크로인터랙션을 보여 드리겠습니다. 사용자가 일반적으로 상호 작용하는 요소(버튼, 아이콘, 이미지)에 집중할 것입니다.

시작하자.

엿보기

다음은 이 튜토리얼에서 구축할 마이크로인터랙션에 대한 간략한 설명입니다.

#1 호버에서 이미지 크기 조정

마이크로인터랙션 구축 시작 #1

#2 튀는 스크롤 다운 아이콘

마이크로인터랙션 구축 시작 #2

#3 호버링에서 회전하는 광고 문구 및 버튼 아이콘

마이크로인터랙션 구축 시작 #3

#4 버튼 텍스트를 표시하고 숨기는 슬라이딩 버튼 아이콘

마이크로인터랙션 구축 시작 #4

#5 3D 이미지 원근 회전

마이크로인터랙션 구축 시작 #5

#6 버튼 슬라이더 마이크로인터랙션

마이크로인터랙션 구축 시작 #6

YouTube 채널 구독

시작하는 데 필요한 것

시작하려면 Divi만 있으면 됩니다. 우리는 프론트 엔드에서 Divi Builder를 사용하여 처음부터 예제가 될 것입니다.

쉽게 액세스할 수 있도록 파일 다운로드

이러한 마이크로인터랙션의 실제 예제를 웹사이트에서 빠르고 쉽게 실행하려는 사람들을 위해 이 기사 하단에 다운로드를 포함했습니다. 그렇게 하면 튜토리얼을 따라하면서 실제 예제를 가질 수 있습니다.

다운로드

#1 호버에서 이미지 크기 조정

스케일링은 요소의 크기를 조정하는 것을 말합니다. 따라서 (예를 들어) 마우스 오버 시 이미지를 더 크게 만들고 싶다면 약간의 CSS 스니펫을 추가하여 이미지 크기를 일정 비율로 조정하기만 하면 됩니다. 이를 통해 사용자가 이미지 위로 마우스를 가져갈 때 작지만 효과적인 마이크로 인터랙션을 만들 수 있습니다. 이미지를 사용하는 널리 사용되는 3가지 Divi 모듈인 image 모듈, blurb 모듈, person 모듈에 이것을 어떻게 적용할 수 있는지 보여드리겠습니다.

계속해서 3개의 열 행이 있는 새 섹션을 만들어 각 열에 각 예제를 추가할 수 있습니다.

이미지 모듈을 사용하여 마우스 오버 시 이미지 크기 조정

이미지 모듈을 사용하여 이미지에 스케일링 이미지 마이크로인터랙션을 추가하려면 먼저 첫 번째 열에 이미지 모듈을 추가하십시오.

그런 다음 선택한 모듈에 이미지를 추가합니다.

그런 다음 이미지 설정의 고급 탭 아래에 다음 CSS 클래스를 추가합니다.

CSS 클래스: 스케일 이미지

이를 통해 사용자 정의 CSS를 페이지 설정에 추가할 때 이 특정 모듈을 대상으로 지정할 수 있습니다. 이미지 크기를 조정하는 데 필요한 CSS를 추가하려면 페이지 설정을 열고 다음 사용자 정의 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)
}

이제 결과를 확인하십시오.

호버에서 Blurb 모듈 이미지 크기 조정

블러브 모듈의 이미지에 동일한 효과를 추가하려면 먼저 블러브 모듈을 두 번째 열에 추가합니다.

그런 다음 Blub 모듈에 원하는 이미지를 추가합니다.

그런 다음 blurb 모듈에 다음 CSS 클래스를 추가합니다.

CSS 클래스: scale-blurb-image

이 CSS 클래스를 사용하면 이제 광고 이미지를 대상으로 하는 사용자 정의 CSS를 추가할 수 있습니다. 페이지 설정을 열고 다음 사용자 정의 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);
}

결과는 다음과 같습니다.

호버에서 사람 모듈 이미지 크기 조정

마우스 오버 시 사람 모듈 이미지의 크기를 조정하려면 세 번째 열에 사람 모듈을 추가하고 모듈에서 선택한 업로드 이미지를 추가합니다.

그런 다음 person 모듈에 다음 CSS 클래스를 추가합니다.

CSS 클래스: scale-person-image

이제 페이지 설정을 열고 다음 사용자 정의 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);
}

스케일링 이미지 마이크로인터랙션으로 세 모듈 모두의 결과를 확인하십시오.

#2 튀는 스크롤 다운 아이콘

이 다음 마이크로 인터랙션은 전체 너비 헤더 모듈에 내장된 아래로 스크롤 아이콘에 튀는 애니메이션을 추가합니다. 이것은 방문자에게 페이지 아래에 더 많은 정보가 있음을 알리는 미묘한 방법입니다. 그리고 기본적으로 또는 호버에서 이 튀는 효과를 갖도록 선택할 수 있습니다.

방법은 다음과 같습니다.

먼저 전체 너비 헤더 모듈이 있는 새 전체 너비 섹션을 추가합니다.

그런 다음 다음을 업데이트합니다.

텍스트 및 로고 방향: 중앙
아래로 스크롤 버튼 표시: 예
아이콘: [선택 아이콘 선택]

그런 다음 다음 CSS 클래스를 추가합니다.

CSS 클래스: 바운스 스크롤 아이콘

이 클래스를 사용하면 CSS로 스크롤 아이콘을 대상으로 지정하여 페이지 로드 시 기본적으로 아이콘에 애니메이션을 적용할 수 있습니다.

그런 다음 전체 너비 헤더 모듈을 복제하고 CSS 클래스를 다음으로 업데이트합니다.

CSS 클래스: 바운스-스크롤-아이콘-호버

이 클래스를 사용하면 CSS로 스크롤 아이콘을 대상으로 지정하여 호버 시 아이콘에 애니메이션을 적용할 수 있습니다.

그런 다음 페이지 설정을 열고 다음 사용자 정의 CSS를 추가하여 두 예제에 대한 튀는 애니메이션을 활성화합니다.

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

두 예제의 결과를 확인하십시오. 상단 헤더 스크롤 아이콘은 기본적으로 애니메이션되고 하단 헤더 스크롤 아이콘은 마우스를 가져갈 때 애니메이션됩니다.

#3 호버링 아이콘 회전

아이콘에 약간의 회전을 추가하면 사용자가 요소를 클릭하도록 유도하는 효과적인 마이크로인터랙션이 될 수 있습니다. 아이콘이 내장된 가장 인기 있는 두 가지 Divi 모듈은 버튼 모듈과 블러브 모듈이므로 호버링 시 해당 아이콘에 회전을 추가하는 방법을 보여 드리겠습니다.

마우스 오버 시 버튼 아이콘 회전

Divi에는 기본적으로 버튼 아이콘에 대한 유용한 마이크로인터랙션이 이미 제공됩니다. 버튼 위로 마우스를 가져가면 버튼 아이콘이 나타나고 버튼을 클릭하면 다른 페이지로 리디렉션됨을 나타내는 오른쪽으로 이동합니다. 그러나 좀 더 창의적으로 만들고 싶다면 완전히 새로운 마이크로 인터랙션을 위해 아이콘을 회전할 수 있습니다.

마우스 오버 시 버튼 아이콘을 회전하려면 먼저 한 열 행이 있는 새 섹션을 추가합니다. 그런 다음 행에 버튼 모듈을 추가합니다.

그런 다음 다음과 같이 버튼 설정을 업데이트합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼에 대한 호버 시 아이콘만 표시: 아니오
버튼 아이콘: [선택한 아이콘 선택]

그런 다음 다음 CSS 클래스를 추가합니다.

CSS 클래스: 회전 버튼 아이콘

아이콘과 CSS 클래스가 있으면 다음 사용자 정의 CSS를 페이지 설정에 추가하기만 하면 됩니다.

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

이렇게 하면 아이콘이 처음에 90도 시계 반대 방향으로 회전한 다음 호버링 시 다시 0도로 회전합니다.

결과는 다음과 같습니다.

Blurb 모듈 아이콘 회전

광고 문구 모듈 아이콘을 회전하려면 먼저 3열 행이 있는 새 섹션을 만듭니다. 그런 다음 1열에 광고 문구 모듈을 추가하고 다음 문구 설정을 업데이트합니다.

아이콘 사용: 예
아이콘: [선택한 아이콘 추가]
텍스트 방향: 중앙
CSS 클래스: 회전 광고 아이콘

이제 다음 사용자 정의 CSS를 페이지 설정에 추가하십시오.

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

결과는 다음과 같습니다.

이것은 제목 왼쪽에 있는 아이콘에서도 작동합니다. 다음과 같이 광고 문구 설정을 업데이트하기만 하면 됩니다.

이미지/아이콘 배치: 왼쪽
제목 줄 높이: 1.7em

결과를 확인하십시오.

#4 버튼 텍스트를 표시하고 숨기는 슬라이딩 버튼 아이콘

마우스 오버 시 아이콘에 대한 버튼 텍스트

이 마이크로인터랙션은 기본적으로 아이콘이 있는 버튼 텍스트를 표시한 다음 아이콘을 이동하여 가리키면 텍스트를 덮습니다.

방법은 다음과 같습니다.

1열 행이 있는 새 섹션을 추가합니다. 그런 다음 행에 버튼 모듈을 추가하고 다음 버튼 설정을 업데이트합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 배경색: #0c71c3
버튼 테두리 너비: 0px
버튼 아이콘 색상: #ffffff
CSS 클래스: 버튼 텍스트를 아이콘으로

이제 다음 사용자 정의 CSS를 페이지 설정에 추가하십시오.

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

이제 결과를 확인하십시오.

마우스 오버 시 텍스트에 대한 버튼 아이콘

처음에 버튼 아이콘을 표시한 다음 아이콘을 위로 밀어 버튼 텍스트를 표시하는 반대 효과를 만들 수도 있습니다. 이렇게 하려면 버튼 모듈을 복제하고 다음 버튼 설정을 업데이트합니다.

버튼 텍스트 색상(기본값): #0c71c3
버튼 텍스트 색상(호버): #ffffff

그런 다음 CSS 클래스를 다음으로 바꿉니다.

CSS 클래스: 버튼 아이콘을 텍스트로

그런 다음 페이지 설정에 다음 사용자 정의 CSS를 추가합니다.

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

이제 결과를 확인하십시오.

#5 3D 이미지 원근 회전

이 마이크로 인터랙션은 기본적으로 3D 이미지 원근 및 회전으로 스타일이 지정된 이미지 모듈 이미지로 시작합니다. 그런 다음 마우스를 올리면 이미지가 이미지의 일반 표시로 바뀝니다.

방법은 다음과 같습니다.

먼저 3열 행이 있는 새 섹션을 만듭니다. 그런 다음 1열에 이미지 모듈을 추가하고 원하는 이미지 모듈에 이미지를 추가합니다.

이 효과를 위해 사용자 정의 CSS를 모듈에 직접 추가할 수 있습니다. 고급 탭으로 이동하여 기본 요소 아래에 다음 사용자 정의 CSS를 추가하십시오.

기본 요소 CSS(기본값):

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

이 CSS는 Transform CSS 속성을 사용하여 이미지에 두 가지 작업을 수행합니다. 먼저 페이지를 볼 때 이미지와 사용자의 관점 사이의 거리인 700px의 관점을 추가합니다. CSS는 또한 이미지에 회전을 추가합니다. rotateY(45deg) 는 Y축에서 이미지를 45도(시계 방향) 회전합니다. 원근감이 있으면 이제 이미지가 3차원 모양으로 나타납니다.

기본 요소 CSS(마우스 오버):

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

이것은 사용자가 이미지를 더 잘 볼 수 있도록 정상으로 보이도록 호버에서 이미지의 회전을 제거합니다.

이제 결과를 확인해보자.

이 마이크로인터랙션의 몇 가지 예를 더 살펴보겠습니다. 계속해서 이미지 모듈을 복사하여 2열과 3열에 붙여넣습니다. 2열의 복제 이미지 모듈에서 다음과 같이 사용자 정의 CSS를 업데이트합니다.

기본 요소 CSS(기본값):

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

기본 요소 CSS(마우스 오버):

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

여기서 유일한 차이점은 "rotate" 뒤의 문자 "X"뿐입니다. 이것은 이미지가 x축에서 45도 회전하도록 지시합니다. 그런 다음 호버에서 각도 값을 0으로 설정하여 정상으로 되돌립니다.

결과는 다음과 같습니다.

열 3의 복제 이미지 모듈에서 다음과 같이 사용자 정의 CSS를 업데이트합니다.

기본 요소 CSS(기본값):

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

기본 요소 CSS(마우스 오버):

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

이 CSS와 열 1의 이미지에 사용된 CSS의 유일한 차이점은 "-45deg" 값입니다. 이렇게 하면 Y축의 이미지가 시계 반대 방향으로 회전합니다.

다음은 원근 및 회전을 사용한 세 가지 이미지 미세 상호 작용의 최종 결과입니다.

이미지 모듈의 기본 제공 설정을 사용하여 더 많은 기본 제공 호버 효과 및 디자인을 추가하는 것을 잊지 마십시오. 예를 들어 상자 그림자 효과를 추가하는 데도 좋습니다.

#6 버튼 슬라이더 마이크로인터랙션

이 마지막 마이크로인터랙션의 경우 마우스를 올리면 추가 정보(실제로는 완전히 새로운 버튼)를 표시하는 버튼 슬라이더를 만들 것입니다. 기본 아이디어는 열에 사용자 정의 높이를 지정한 다음 열 내부에 두 개의 버튼 모듈을 쌓는 것입니다. 상단 버튼은 기본적으로 사용자에게 표시되는 것이지만 두 번째 버튼은 사용자가 버튼 위로 마우스를 가져갈 때 표시되는 "추가 정보"가 있는 버튼입니다.

만드는 방법은 다음과 같습니다.

이 버튼은 행 열의 전체 너비에 걸쳐 있으므로 너무 넓어지지 않는 열이 있는 행에 버튼을 추가하는 경우 가장 잘 작동합니다. 이 예에서는 1열 행을 사용한 다음 큰 브라우저에서 버튼이 너무 넓어지지 않도록 최대 너비를 내 행으로 설정하겠습니다.

한 열 행으로 새 섹션을 만듭니다. 그런 다음 행에 버튼 모듈을 추가하고 다음 버튼 설정을 업데이트합니다.

버튼 텍스트: "다운로드"

버튼 정렬: 중앙
버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 색상: #ffffff
버튼 배경색: #0c71c3
버튼 테두리 너비: 0px
버튼 테두리 반경: 0px
버튼 아이콘: 스크린샷 참조
버튼 아이콘 색상: #ffffff
버튼 아이콘 배치: 왼쪽
버튼에 대한 호버 시 아이콘만 표시: 아니오

맞춤 여백: 0px 하단

그런 다음 방금 만든 버튼을 복제하여 방금 만든 버튼 바로 아래에 중복이 쌓이도록 합니다. 그런 다음 다음과 같이 복제 버튼 설정을 업데이트합니다.

버튼 텍스트: MP3(3.5MB)

버튼 텍스트 색상: #0c71c3
버튼 배경색: #ffffff
버튼 아이콘: 스크린샷 참조
버튼 아이콘 색상: #0c71c3

행의 스타일을 지정하기 전에 상단 버튼에 CSS 클래스를 추가해야 합니다. 상단 버튼 설정을 열고 다음 CSS 클래스를 추가합니다.

CSS 클래스: 상단 버튼

이제 두 버튼이 모두 배치되었으므로 버튼의 최대 너비 역할을 할 사용자 정의 너비와 페이지 설정에 추가할 사용자 정의 CSS의 열 CSS 클래스로 행 설정을 업데이트하겠습니다. 행 설정을 열고 다음을 업데이트합니다.

맞춤 너비: 200px
열 CSS 클래스: 슬라이더 버튼

행이 아닌 열에 CSS 클래스를 추가해야 합니다.

이제 사용자 정의 CSS를 추가할 준비가 되었습니다. 페이지 설정을 열고 다음 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;
}

이 CSS는 기본 크기의 버튼에서만 작동합니다. 두 번째 버튼을 호버링할 때까지 숨기려면 열에 고정 높이를 지정해야 하기 때문입니다. 바로 지금 열 높이("slider-button" 클래스 포함)의 높이가 50px입니다. 이것은 열에 주어진 2px 테두리도 고려합니다. 마우스를 올리면 상단 버튼("top-button" 클래스가 있는 경우 상단 여백이 -48px(버튼 높이에서 2px 테두리 중 하나를 뺀 값)으로 보이지 않게 위로 이동됩니다. 그러나 글꼴을 변경하면- 버튼의 크기나 패딩에 따라 상단 버튼 여백과 함께 슬라이더 버튼 클래스의 높이를 조정해야 합니다.

다음은 최종 결과입니다.

다른 텍스트/정보와 아이콘으로 버튼의 스타일을 지정할 수 있다는 점을 잊지 마세요. 고유한 클릭 유도문안에서 추가 정보로 사용자를 교육할 수 있는 좋은 방법입니다.

무료 다운로드: 이 튜토리얼을 위한 미리 만들어진 레이아웃 및 CSS 파일 받기

이러한 마이크로인터랙션이 웹사이트에서 어떻게 보이는지 빠르게 시작하려면 아래에서 zip 파일을 다운로드할 수 있습니다. zip 파일을 다운로드한 후 하드 드라이브에서 파일을 찾습니다. "microinteraction-examples.zip"이라고 합니다. 압축을 풀면 2개의 파일이 보입니다. "microinteraction-examples.json"이라는 파일은 Divi 레이아웃입니다. Divi 라이브러리에 업로드해야 합니다. Divi > Divi 라이브러리로 이동한 다음 페이지 상단의 가져오기 버튼을 클릭하여 WordPress 대시보드에서 이 작업을 수행할 수 있습니다. "microinteractions.css"라는 파일에는 튜토리얼에서 사용된 Custom CSS가 포함되어 있습니다. 이 CSS는 페이지 설정 사용자 정의 CSS 또는 테마 사용자 정의 추가 CSS 상자에 복사해야 합니다. 레이아웃이 로드되면 Divi의 드래그 앤 드롭 기능을 사용하여 microinteractions.css 파일을 Divi Builder로 직접 드래그할 수도 있습니다. 그러면 페이지 설정에 CSS가 자동으로 추가됩니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

마지막 생각들

이러한 마이크로인터랙션이 유용하기를 바랍니다. 사이트 전체에서 Divi(CSS만 사용)와 함께 사용하기 쉽습니다. 시간과 단순함을 위해 모듈의 기본 기본 스타일을 사용했지만 더 창의적인 스타일을 위해 필요에 따라 디자인 옵션을 자유롭게 조정합니다. 또한 주저하지 말고 이러한 예제의 CSS를 필요에 맞게 조정하거나 완전히 새로운 것을 생각해내십시오.

댓글로 여러분의 의견을 기다리겠습니다.

건배!