Divi에서 호버 또는 클릭 시 여러 요소의 스타일을 변경하는 방법

결국 웹 디자인의 세계에서 코더와 비코더 모두 Divi 웹사이트에 고급 사용자 지정 및 기능을 추가하려고 합니다. 일반적으로 여기에는 여러 가지 이유로 페이지의 요소 스타일을 변경하기 위해 Javascript/JQuery를 사용하는 것이 포함됩니다. 버튼을 클릭할 때 연락처 양식이 나타나도록 할 수 있습니다. 또는 링크 위로 마우스를 가져갈 때 이미지를 변경하고 싶을 수도 있습니다.

이 튜토리얼에서는 Divi에서 마우스를 올리거나 클릭할 때 여러 요소의 스타일을 변경하는 방법을 보여 드리겠습니다. 먼저 Divi의 기본 제공 디자인 옵션을 활용하여 섹션 레이아웃을 디자인합니다. 그런 다음 사용자 지정 CSS와 함께 사용하여 버튼을 가리키거나 클릭할 때 해당 섹션의 요소 스타일을 조정할 수 있는 간단한 jQuery 조각을 소개합니다. 이것은 복잡하게 들릴 수 있지만(특히 초보자의 경우) 달성하는 것이 얼마나 간단한지 놀랄 수 있습니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

다음은 버튼 위로 마우스를 가져갈 때 변경되는 섹션 레이아웃 디자인입니다.

다음은 버튼을 클릭하여 변경되는 동일한 섹션 레이아웃 디자인입니다. 클릭 시 버튼 텍스트도 변경됩니다.

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

1부: 섹션 레이아웃 디자인

시작하려면 새 2열 행을 만드십시오.

섹션 설정

모듈을 추가하기 전에 섹션에 대한 설정을 열고 다음을 업데이트하십시오.

• 배경색: #ffffff

• 상단 구분선 스타일: 스크린샷 참조
• 상단 구분선 색상: #ffffff
• 상단 분배기 높이: 5vw

• 하단 디바이더 스타일: 동일
• 하단 구분선 색상: #ffffff
• 하단 디바이더 높이: 5vw

• 패딩: 6vw 상단, 6vw 하단

이미지 전

2열 행의 왼쪽 열에 새 이미지 모듈을 추가합니다.

그런 다음 보여주고 싶은 이미지를 업로드합니다. 이 튜토리얼에서는 대략 800x550px 크기의 학습 관리(LMS) 레이아웃 팩의 이미지를 사용하고 있습니다.

디자인 탭에서 정렬을 업데이트하고 전체 너비 강제 옵션을 활성화합니다.

• 이미지 정렬: 중앙
• 강제 전폭: 예

애프터 이미지

다음으로, 버튼을 가리키거나 클릭할 때 표시할 또 다른 이미지를 만들 것입니다.

이미지를 생성하려면 이전 이미지 모듈을 복제하십시오.

그런 다음 새 이미지를 업로드합니다. 이미지는 마우스 오버/클릭 시 다른 이미지를 대체하므로 다른 이미지와 크기가 같아야 합니다.

이 이미지의 경우 절대 위치를 지정합니다. 이렇게 하면 페이지의 실제 공간을 차지하지 않고 이미지가 다른 이미지 바로 위에 놓입니다.

• 위치: 절대

디자인 탭에서 필터 옵션 아래의 불투명도를 변경하여 이미지가 완전히 보이지 않도록 합니다.

• 불투명도: 0%

텍스트 제목 추가

오른쪽 열에 새 텍스트 모듈을 추가합니다.

그런 다음 본문 콘텐츠 영역에 다음 HTML을 붙여넣습니다.

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

텍스트의 일부 단어는 span 태그로 래핑됩니다. 이는 나중에 사용자 정의 CSS를 사용하여 해당 단어를 대상으로 지정하고 스타일을 지정할 수 있도록 하기 위한 것입니다.

디자인 탭에서 다음과 같이 H3 스타일 옵션을 업데이트합니다.

• 제목 3 글꼴: 몬세라트
• 제목 3 글꼴 두께: 매우 굵게
• 제목 3 글꼴 스타일: TT
• 제목 3 텍스트 크기: 65px(데스크톱 및 태블릿), 40px(휴대전화)
• 제목 3 글자 간격: 0.8em
• 제목 3 줄 높이: 1.3em

버튼을 가리키거나 클릭할 때 변경할 디자인 요소를 포함하는 섹션 레이아웃을 처리합니다. 다음 섹션에서는 스타일 변경을 시작하는 데 사용할 버튼을 추가합니다.

버튼에 대한 섹션 만들기

현재 섹션 아래에 새 일반 섹션을 만듭니다.

그런 다음 섹션에 1열 행을 추가합니다.

버튼 추가

열에 새 버튼 모듈을 추가합니다.

버튼 텍스트를 "See After"로 변경합니다.

디자인 탭으로 이동하여 다음과 같이 버튼 디자인을 업데이트합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 16px
• 버튼 텍스트 색상: #ffffff
• 버튼 배경: #4b4baf
• 버튼 배경(호버): #67ddc1
• 버튼 테두리 너비: 0px
• 버튼 문자 간격: 4px
• 버튼 글꼴: 몬세라트
• 버튼 글꼴 두께: 반 굵게
• 버튼 글꼴 스타일: TT

2부: 요소에 CSS 클래스 추가하기

이제 디자인이 준비되었으므로 사용자 지정 코드(CSS 및 JQuery)를 사용하여 나머지 디자인 변경을 수행할 것입니다. 그러나 사용자 정의 코드를 추가하기 전에 버튼을 가리키거나 클릭할 때 변경하려는 모든 요소에 CSS 클래스를 추가해야 합니다.

섹션에 CSS 클래스 추가

섹션에 CSS 클래스를 추가하려면 섹션 설정을 열고 고급 탭을 클릭합니다. 그런 다음 다음 CSS 클래스를 입력합니다.

• CSS 클래스: et-change-style_section

이미지에 CSS 클래스 추가

그런 다음 왼쪽 열의 첫 번째 이미지에 대한 설정을 열고 다음 CSS 클래스를 추가합니다.

• CSS 클래스: et-before-image

이것은 버튼을 가리키거나 클릭하기 "전"에 표시되는 이미지입니다.

레이어 모달을 사용하여 두 번째 이미지(불투명도 필터로 숨겨진 이미지)에 대한 설정을 열고 다음 CSS 클래스를 추가합니다.

• CSS 클래스: et-after-image

이것은 버튼을 호버/클릭한 "후"에 표시되는 이미지입니다.

텍스트에 CSS 클래스 추가

다음으로 오른쪽 열의 텍스트 모듈에 다음 CSS 클래스를 추가합니다.

• CSS 클래스: et-style-text

버튼에 CSS 클래스 추가

마지막으로 다음과 같이 하단 섹션에 사용자 정의 CSS 클래스 버튼을 추가합니다.

• CSS 클래스: et-toggle-button

나중에 코드에서 호버/클릭 기능을 위한 버튼을 대상으로 하려면 이 클래스가 필요합니다.

파트 3: 마우스를 올리거나 클릭할 때 스타일을 변경하는 사용자 지정 코드 추가

이제 모든 CSS 클래스가 준비되었으므로 버튼을 가리키거나 클릭할 때 모든 요소의 스타일을 변경하는 데 필요한 코드를 추가할 수 있습니다.

코드 모듈 추가

코드를 추가하려면 하단 섹션의 버튼 아래에 코드 모듈을 추가합니다.

jQuery 코드 붙여넣기

그런 다음 다음 JQuery를 붙여넣습니다. 코드를 HTML 문서(JS 파일이 아님)에 추가하기 때문에 스크립트 태그로 코드를 래핑해야 합니다.

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').hover(function(){
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
        });
    });
})( jQuery );

코드를 보면 버튼과 섹션에 추가한 CSS 클래스를 인식해야 합니다.

버튼 클래스(".et-toggle-button")는 마우스 오버 시 기능을 시작하는 요소를 대상으로 하는 데 사용됩니다.

마우스를 올리면 함수는 섹션 클래스가 ".et-change-style_section"인 요소를 찾고 커서가 버튼 위에 있을 때 새 클래스(".et-change-style-active")를 토글/추가합니다.

버튼은 또한 호버 상태에서 새 클래스(".et-toggle-button_active")를 토글하기 위해 ("$this"를 통해) 대상이 됩니다.

호버에서 이러한 요소의 스타일을 변경하는 핵심은 이러한 추가 새 CSS 클래스를 섹션 및 버튼에 추가/토글하는 것입니다.

예를 들어 ".et-change-style_section" 클래스가 있는 섹션에 추가 클래스(".et-change-style_active")가 주어지면 Custom CSS를 사용하여 원래 제공된 섹션의 스타일을 변경할 수 있습니다. 내장 Divi 옵션.

사용자 정의 CSS로 요소 스타일 변경하기

코드 모듈을 열고 JQuery 스크립트 위에 다음 사용자 정의 CSS를 붙여넣고 필요한 Style 태그로 감싸야 합니다.

 .et_pb_section.et-change-style_section.et-change-style_active {
   background-color:#484db0 !important;
 }

초기 섹션 클래스는 선택기로 새 클래스와 결합됩니다. 다음 CSS는 해당 새 클래스가 첨부된 경우에만 해당 섹션에 적용됩니다. 부착하지 않은 경우 원래 디자인이 표시됩니다. 이 예에서는 버튼 위로 마우스를 가져가면 섹션의 배경색이 변경됩니다.

다음으로 스타일 태그 안에 다음 추가 CSS를 붙여넣습니다.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

상위 섹션에는 마우스 오버 시 클래스가 제공되므로 동일한 CSS 클래스를 사용하여 섹션의 하위 요소(예: 이미지)를 대상으로 지정할 수 있습니다. 그러나 그것은 부모 컨테이너/섹션의 클래스이기 때문에 CSS 클래스는 변경하려는 요소의 클래스보다 앞서야 합니다. 이 예에서 부모 섹션에 주어진 CSS 클래스(".et-change-style_active")는 자식 이미지(".et-after-image" 및 ".et-before-image")가 주어진 클래스 앞에 옵니다.

애프터 이미지의 CSS는 버튼 호버에 이미지를 표시합니다. 그리고 이전 이미지의 CSS는 버튼을 가리킬 때 이미지를 숨깁니다. 결과는 초기 이미지가 버튼 호버에서 새 이미지로 변경된다는 것입니다.

다음으로 스타일 태그 안에 나머지 CSS를 붙여넣습니다.

  .et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
    color: #ffffff;
  }
  .et-change-style_active .et-style-text h3 span {
    color: #67ddc1;
  }
  .et-toggle-button_active {
    transform: scale(1.1);
    background-color: #67ddc1 !important;
  }  
  .et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3  {
    transition: all 0.3s;
  }

이 CSS 스니펫은 섹션(또는 버튼)에 새 클래스가 있을 때 동일한 개념을 사용하여 요소의 스타일을 변경합니다.

최종 결과(마우스 오버)

코드가 추가되면 변경 사항을 저장하고 페이지를 열어 결과를 봅니다. 버튼 위로 마우스를 가져갈 때 대상 요소가 어떻게 변경되는지 확인하십시오.

호버 대신 클릭 시 스타일 변경

버튼을 클릭할 때 동일한 요소의 스타일을 변경하려면(호버링 대신) JQuery를 약간 변경하기만 하면 됩니다. 대부분의 코드는 그대로 유지됩니다. 주요 차이점은 "hover" 방법이 "click"으로 대체된다는 것입니다. 그리고 클릭 시 버튼의 텍스트를 변경하는 유용한 코드 스니펫을 추가했습니다.

클릭 기능을 추가하려면 현재 JQuery를 다음으로 교체합니다(다시 한 번 스크립트 태그로 래핑되었는지 확인).

(function($) {
    $(document).ready(function(){
        $('.et-toggle-button').click(function(e){
            e.preventDefault();
            $('.et-change-style_section').toggleClass('et-change-style_active');
            var $this = $(this);
            $this.toggleClass('et-toggle-button_active');
            if ($this.hasClass('et-toggle-button_active')){
                $this.text('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

다음은 최종 결과입니다.

마지막 생각들

무언가를 가리키거나 클릭할 때 페이지에 있는 여러 요소의 스타일을 대상으로 지정하고 변경할 수 있는 것은 웹 디자인에 유용한 기술입니다. 이 기술을 다양한 사용 사례(before and after, CTA 등...)에 사용할 수 있습니다. 물론 CSS와 JS/JQuery를 약간 아는 것이 도움이 됩니다. 그러나 이 튜토리얼에서 보았듯이 놀라운 결과를 얻기 위해 코드 톤을 알 필요는 없습니다!

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

건배!