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

년부터 에 탕 | Divi, Divi 자습서

여러 요소의 스타일을 변경하시겠습니까? Divi 호버 또는 클릭 후?

이 튜토리얼에서는 마우스를 올리거나 클릭할 때 여러 요소의 스타일을 변경하는 방법을 보여줍니다. Divi. 

먼저, 내장된 디자인 옵션을 활용하겠습니다. Divi 섹션 레이아웃을 디자인합니다. 

다음으로, 버튼 위로 마우스를 이동하거나 클릭할 때 이 섹션의 요소 스타일을 조정하기 위해 사용자 정의 CSS와 함께 사용할 수 있는 간단한 jQuery 스니펫을 제시합니다. 

이것은 복잡하게 들릴 수 있지만(특히 초보자의 경우), 수행하는 방법이 얼마나 간단한지 놀랄 수 있습니다.

시작하자!

측량

다음은 이 튜토리얼에서 달성할 디자인에 대한 간략한 개요입니다.

버튼 호버에서 요소 변경

호버 또는 클릭 후 여러 Divi 요소의 스타일 변경

버튼 클릭 후 요소 수정

호버 또는 클릭 후 여러 Divi 요소의 스타일 변경

Divi Builder로 페이지를 만드는 것부터 시작해 봅시다.

또한보십시오: Divi: 호버에서 회전하는 휠 메뉴를 만드는 방법

WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.

탭으로 변환된 Divi 라인

이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용

그런 다음 클릭 건물 시작 (처음부터 구축)

탭으로 변환된 Divi 라인

그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.

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

시작하려면 두 개의 열이 있는 새 행을 만듭니다.

섹션 설정

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

  • 배경: #ffffff

섹션 구분 기호를 추가해 보겠습니다.

  • 디바이더(상단)
    • 스타일: 스크린샷 참조
    • 색상: #ffffff
    • 높이: 5vw
  • 디바이더(하단)
    • 스타일: 캡처 참조
    • 색상: #ffffff
    • 높이: 5vw
    • 패딩(상단 및 하단): 6vw

이미지(마우스 오버 전)

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

다음으로 강조 표시할 이미지를 업로드합니다. 

탭 아래 디자인, 정렬 업데이트 및 옵션 활성화 강도 전폭.

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

이미지(마우스 오버 시 또는 클릭 후)

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

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

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

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

  • 위치: 절대

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

  • 불투명도: 0%

텍스트 모듈 추가

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

그런 다음 다음 HTML 코드를 상자에 붙여넣습니다. 내용 몸에서 :

<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>

텍스트의 일부 단어는 태그로 둘러싸여 있습니다. 기간. 이것이 나중에 사용자 정의 CSS를 사용하여 이러한 단어를 대상으로 지정하고 사용자 정의할 수 있는 방법입니다.

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

  • 제목 3:
    • 글꼴: 몬세라트
    • 글꼴 두께 글꼴 두께: 매우 굵게
    • 스타일: TT
    • 텍스트 크기: 60픽셀(컴퓨터 및 태블릿), 40픽셀(휴대전화)
    • 문자 간격: 0,06em
    • 줄 높이: 2em

다음 섹션에서는 스타일 변경을 시작하는 데 사용할 버튼을 추가합니다.

버튼 섹션 만들기

먼저 현재 섹션 아래에 새 일반 섹션을 만들어야 합니다.

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

버튼 추가

열에서 새 모듈 추가 단추.

버튼 텍스트를 "계속..."으로 변경합니다.

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

  • 버튼에 사용자 정의 스타일 사용: 예
  • 텍스트 크기: 16px
  • 텍스트 색상: #ffffff
  • 버튼 배경(데스크탑): #4b4baf
  • 버튼 배경(호버): #67ddc1
  • 테두리 너비: 0픽셀

읽기 : Divi: 메뉴 모듈에 햄버거 아이콘을 추가하는 방법

  • 버튼 문자 간격: 4px
  • 글꼴: 몬세라트
  • 글꼴 두께: 반 굵게
  • 버튼 글꼴 스타일: TT
  • 여백(하단): 0px
  • 패딩(상단 및 하단): 1.5em
  • 패딩(좌우): 4em

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

이제 디자인이 준비되었으므로 사용자 지정 코드(CSS 및 JQuery)를 사용하여 나머지 디자인을 변경합니다.

그러나 사용자 정의 코드를 추가하기 전에 버튼을 가리키거나 클릭할 때 변경하려는 모든 요소에 CSS 클래스를 추가해야 합니다.

섹션에 CSS 클래스 추가

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

  • CSS 클래스: et-change-style_section

이미지 모듈에 CSS 클래스 추가

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

  • CSS 클래스: et-before-image

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

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

  • CSS 클래스: et-after-image

이것은 버튼을 가리키거나 클릭한 "후"에 표시될 이미지입니다.

Text 모듈에 CSS 클래스 추가

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

  • CSS 클래스: et-style-text

Button 모듈에 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로 요소 스타일 변경

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

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

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

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

그런 다음 스타일 태그 안에 나머지 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 스니펫은 섹션(또는 버튼)에 새 클래스가 있을 때 요소의 스타일을 변경하기 위해 동일한 개념을 사용합니다.

호버의 Divi 요소

최종 결과(개요)

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

호버 또는 클릭 후 여러 Divi 요소의 모양 변경

클릭 시 스타일 변경

클릭 기능을 추가하려면 현재 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('Précédent...');
            } else {
                $this.text('Suite...');
            }
        });
    });
})( jQuery );

최종 결과는 다음과 같습니다.

호버 또는 클릭 후 여러 Divi 요소의 스타일 변경

지금 DIVI를 다운로드하세요!!!

결론

무언가를 가리키거나 클릭할 때 페이지의 여러 요소를 대상으로 지정하고 스타일을 지정할 수 있는 것은 웹 디자인에서 유용한 기술입니다. 

다양한 사용 사례(CTA 이전 및 이후, CTA 등)에 이 기술을 사용할 수 있습니다.

물론 CSS와 JS/JQuery를 조금 아는 것이 도움이 됩니다. 그러나 이 튜토리얼에서 보았듯이 놀라운 결과를 얻기 위해 깊은 코딩 지식이 필요하지 않습니다!

이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.

상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...

포스터 르 논평

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.