Divi 페이지에 스타일 및 반전 커서를 추가하는 방법

게시 됨: 2021-03-03

웹사이트에서 방문자와 상호작용하는 가장 빠른 방법 중 하나는 커서를 사용하는 것입니다. 그것이 일반적으로 모든 것이 시작되는 곳입니다. 데스크톱에서의 사용자 상호 작용은 거의 전적으로 방문자가 커서를 사용하여 페이지를 탐색하는 방식을 기반으로 합니다. 호버 효과든 클릭이든 상관없이 이벤트를 트리거할 수 있는 유일한 것이기도 합니다. 그렇기 때문에 특정 목표를 염두에 두고 커서를 사용자 정의하는 수많은 웹 사이트를 보게 될 것입니다. 예를 들어 클릭 유도문안을 강조 표시하려는 경우 커서 스타일을 지정하면 유용합니다. 오늘은 Divi에서 어떻게 하는지 보여드리겠습니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

커서

이동하는

커서

무료로 레이아웃 다운로드

무료 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드
무료로 다운로드

무료로 다운로드

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

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

1. 새 페이지 만들기/기존 페이지 열기

새 페이지 만들기 또는 기존 페이지 열기

새 페이지를 만들거나 기존 페이지를 열어 시작하십시오.

커서

원하는 레이아웃 업로드

이 튜토리얼의 핵심에 집중하기 위해 Bike Repair Layout Pack을 사용하지만 원하는 다른 레이아웃을 자유롭게 사용할 수 있습니다.

커서

페이지 하단에 새 섹션 추가

레이아웃이 업로드되면 페이지 하단으로 이동하여 새 섹션을 추가합니다. 이 섹션을 사용하여 커서를 만들 것입니다.

커서

간격

사용자 정의 커서를 생성하기 위해 튜토리얼 후반부에 텍스트 모듈을 추가합니다. 이 모듈은 섹션 내부에 배치되지만 실제 섹션 컨테이너가 디자인에 표시되는 것을 원하지 않습니다. 섹션이 표시되지 않도록 간격 설정에서 기본 상단 및 하단 패딩을 제거합니다.

  • 상단 패딩: 0px
  • 하단 패딩: 0px

커서

새 행 추가

열 구조

다음 열 구조를 사용하여 섹션에 행을 계속 추가합니다.

커서

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 조정 설정에서 모든 사용자 지정 여백 너비를 제거합니다.

  • 사용자 지정 거터 너비 사용: 예
  • 거터 폭: 1

커서

간격

모든 기본 상단 및 하단 패딩도 제거하십시오.

  • 상단 패딩: 0px
  • 하단 패딩: 0px

커서

텍스트 모듈 추가(커서)

콘텐츠 상자를 비워 둡니다.

나중에 커서로 사용할 텍스트 모듈을 추가할 시간입니다! 내용 상자를 비워 둡니다.

커서

사이징

디자인 탭으로 이동하여 다양한 화면 크기에서 사용자 정의 너비와 높이를 사용하여 모듈의 모양을 지정합니다.

  • 너비:
    • 데스크탑: 100px
    • 태블릿: 60px
    • 전화: 40px
  • 키:
    • 데스크탑: 100px
    • 태블릿: 60px
    • 전화: 40px

커서

국경

이 게시물의 미리보기에서 알 수 있듯이 커서를 원으로 바꾸려면 둥근 모서리와 테두리를 사용합니다.

  • 모든 모서리: 100%
  • 테두리 너비: 3px
  • 테두리 색상: #ffffff

커서

혼합 모드

이 게시물의 미리보기에서 특히 버튼 모듈을 가리키면 커서가 반전된 효과를 볼 수 있습니다. 이 효과를 얻기 위해 텍스트 모듈에 혼합 모드를 사용합니다.

  • 혼합 모드: 차이

커서

주요 요소 CSS

모듈의 기본 요소에 다음 CSS 코드 행을 추가하면 나중에 커서로 사용할 수 있도록 모듈을 준비하는 데 도움이 됩니다. 

transition: all .1s linear;
pointer-events: none;

커서

위치

모듈에도 고정 위치를 사용합니다.

  • 위치: 고정
  • 위치: 왼쪽 상단
  • Z 인덱스: 2

커서

CSS 클래스

그리고 고급 탭에서 사용자 정의 CSS 클래스를 할당하여 모듈 설정을 완료합니다.

  • CSS 클래스: 커서

커서

2. 기능 추가

커서 텍스트 모듈 아래에 코드 모듈 추가

이제 커서 텍스트 모듈이 준비되었으므로 기능에 집중할 차례입니다! 새 섹션의 커서 텍스트 모듈 바로 아래에 코드 모듈을 추가합니다.

커서

스타일 및 스크립트 태그 추가

우리는 약간의 CSS와 JQuery 코드를 결합할 것이므로 코드 모듈에 스타일 및 스크립트 태그를 추가하십시오.

커서

jQuery 코드 열기

다음으로 스크립트 태그 사이에 다음 JQuery 코드 시작 줄을 복사하여 붙여넣습니다. 

jQuery(document).ready(function($){
});

커서

커서 텍스트 모듈 재배치

이제 코드 모듈 내부의 기초가 생성되었으므로 단계별로 진행합니다. 우리가 할 첫 번째 일은 빌더의 내부 콘텐츠 뒤에 생성한 텍스트 모듈을 배치하는 것입니다. 이렇게 하면 커서를 페이지 전체에서 사용할 수 있습니다. 

$('.cursor').insertAfter('.et_builder_inner_content');

커서

페이지의 기본 커서 제거

다음으로 스타일 태그 사이에 배치할 사용자 정의 CSS 코드를 사용하여 페이지의 기본 커서를 제거합니다. 

body {
cursor: none;
}

커서

커서 텍스트 모듈을 커서로 설정

다음으로 다음 JQuery 코드 줄을 사용하여 커서가 방문자의 움직임을 따라갈 수 있도록 합니다. 

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

커서

특정 모듈을 호버링할 때 토글 효과

CSS 클래스 증가 추가

이 게시물의 미리보기에서 알 수 있듯이 버튼 모듈을 가리키면 커서 스타일이 변경됩니다. 이를 달성하기 위해 스타일 태그 사이에 새로운 CSS 클래스를 추가할 것입니다. 

.increase-size {
transform: scale(5);
background-color: white;
}

커서

모든 버튼 모듈

일부 JQuery 코드를 사용하여 이 CSS 클래스를 토글합니다. 아래 코드는 Divi 페이지 내의 모든 버튼 모듈을 하나씩 대상으로 합니다. 

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

커서

특정 버튼 모듈

특히 하나의 모듈에 효과를 적용하려면 다른 접근 방식이 필요합니다. 먼저 효과를 적용할 버튼 모듈을 열고 사용자 정의 CSS 클래스를 포함합니다.

  • CSS 클래스: 커서 버튼

커서

그런 다음 이전 단계에서 사용한 코드의 CSS 클래스를 교체합니다. 그게 다야! 

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

커서

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

커서

이동하는

커서

마지막 생각들

이 게시물에서는 Divi 페이지에 대한 사용자 지정 커서를 만드는 방법을 보여주었습니다. 또한 누군가가 귀하의 페이지에서 클릭 유도문안을 호버링할 때 이 사용자 정의 커서를 사용하여 호버 효과를 트리거하는 방법을 보여주었습니다. 사용자 지정 커서를 만드는 방법을 익히면 모든 종류의 디자인이나 효과를 만들 수 있습니다! JSON 파일도 무료로 다운로드할 수 있었습니다. 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.