Divi로 호버/클릭 시 클라이언트 로고를 사용후기로 바꾸는 방법

고객 로고 및 일치하는 평가에 상호 작용을 추가하는 방법을 찾고 계십니까? Divi의 반응형 콘텐츠 기능을 사용하면 모듈의 기본 상태와 마우스 오버 시 다양한 콘텐츠를 훨씬 쉽게 표시할 수 있습니다. 오늘의 Divi 튜토리얼에서는 호버(데스크톱) 및 클릭(태블릿 및 전화)에서 클라이언트 로고를 평가로 바꾸는 방법을 보여줌으로써 이를 시연할 것입니다. 우리는 Blurb 모듈을 사용하여 거기에 도달하는 데 도움을 줄 것입니다! 레이아웃의 JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

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

데스크탑

이동하는

클라이언트 로고 레이아웃을 무료로 다운로드하십시오

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

파일 다운로드

무료로 다운로드

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

다운로드

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

재창조를 시작합시다!

새 섹션 추가

배경색

새 페이지나 기존 페이지에 새 섹션을 추가하여 시작하십시오. 섹션 설정을 열고 배경색을 변경합니다.

• 배경색: #000000

간격

사용자 정의 상단 및 하단 패딩도 추가하십시오.

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

국경

흰색 테두리를 추가하여 섹션 설정을 완료합니다.

• 테두리 너비: 1vw
• 테두리 색상: #ffffff

행 #1 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 행의 최대 너비를 늘리십시오.

• 최대 너비: 1500px

열에 텍스트 모듈 추가

반응형 H2 콘텐츠 추가

이 행에서 필요한 첫 번째 모듈은 반응형 H2 콘텐츠가 포함된 텍스트 모듈입니다.

• 바탕 화면: 클라이언트 로고에 마우스를 올려 놓으면 그들이 말하는 내용을 볼 수 있습니다!
• 태블릿 및 전화: 고객 로고를 클릭하여 고객의 말을 확인하세요!

H2 텍스트 설정

모듈의 디자인 탭으로 이동하여 다음과 같이 H2 텍스트 설정을 변경합니다.

• 제목 2 글꼴: Work Sans
• 제목 2 텍스트 정렬: 가운데
• 제목 2 텍스트 색상: #ffffff
• 제목 2 텍스트 크기: 40px(데스크톱), 30px(태블릿), 25px(전화)

열에 디바이더 모듈 추가

시계

이 행에서 필요한 다음이자 마지막 모듈은 Divider 모듈입니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

선

그런 다음 모듈의 선 색상을 변경합니다.

• 선 색상: #ffffff

사이징

모듈의 크기 설정도 수정합니다.

• 디바이더 무게: 4px
• 폭: 10%
• 모듈 정렬: 중앙

간격

상단 여백을 추가하여 모듈 설정을 완료합니다.

• 상단 여백: 100px

행 #2 추가

열 구조

이전 행 바로 아래에 다른 행을 추가하고 다음 열 구조를 사용하십시오.

사이징

행 설정을 열고 다양한 화면 크기에서 크기 설정을 변경합니다. 열 높이도 동일하게 하면 다음 단계에 도움이 됩니다. 열 콘텐츠를 중앙에 배치합니다.

• 열 높이 균등화: 예
• 너비: 100%(데스크톱), 80%(태블릿 및 휴대폰)
• 최대 너비: 1500px
• 최소 높이: 500px(데스크톱), 자동(태블릿 및 휴대전화)

주요 요소

행의 열 콘텐츠를 가운데에 맞추려면 1) '열 높이 균등화' 옵션(이전 단계)을 활성화하고 2) 행의 기본 요소에 다음 CSS 코드 행을 추가해야 합니다.

align-items: center;

열에 Blurb 모듈 추가

기본 콘텐츠를 비워 둡니다.

이제 호버에서 클라이언트 로고를 교체하기 위해 Blurb 모듈을 사용합니다. 열 1의 첫 번째 항목부터 시작합니다. 기본 제목과 본문 내용을 비워두고 두 항목 모두에서 계속 호버 옵션을 활성화합니다.

호버에 콘텐츠 추가

두 개의 호버 필드에 원하는 서면 콘텐츠를 삽입하십시오.

기본 이미지

이미지 및 아이콘 설정에서 원하는 회사 로고를 업로드하여 계속하십시오.

마우스 오버 시 이미지 제거

호버 상태에서 클라이언트 로고를 완전히 제거하여 호버 시 클라이언트 로고를 교체합니다.

호버 배경색

이 게시물의 미리보기에서 알 수 있듯이 호버 시 모듈의 배경색도 변경합니다. 기본 배경색을 사용하지 말고 마우스 오버 시 다음 색상 코드를 추가하세요.

• 배경색: #191919

이미지/아이콘 설정

모듈의 디자인 탭으로 이동하여 다음 이미지/아이콘 정렬이 적용되는지 확인합니다.

• 이미지/아이콘 정렬: 중앙

텍스트 설정

검은색 섹션 배경색을 사용하고 있으므로 일반 텍스트 설정에서 모듈의 텍스트 색상을 변경합니다.

• 텍스트 색상: 라이트

제목 텍스트 설정

그런 다음 그에 따라 제목 텍스트 설정을 수정합니다.

• 제목 제목 수준: H3
• 제목 글꼴: Work Sans
• 제목 텍스트 크기: 24px
• 제목 줄 높이: 1.4em

본문 설정

본문 설정도 일부 변경하십시오.

• 본문 글꼴: Open Sans
• 본문 색상: #8c8c8c
• 바디 라인 높이: 2.5em

기본 간격

그런 다음 간격 설정으로 이동하여 모듈의 기본 상태에 맞춤 패딩이 없는지 확인합니다.

• 상단 패딩: 0px
• 하단 패딩: 0px
• 왼쪽 패딩: 0px
• 오른쪽 패딩: 0px

호버 간격

그러나 호버에서 다음 값을 사용하여 평가를 위한 공백을 만듭니다.

• 상단 패딩: 20px
• 하단 패딩: 50px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

이행

기본 전환 기간을 제거하여 모듈 설정을 완료합니다. 이렇게 하면 로고를 가리키거나 클릭할 때 평가가 바로 표시됩니다.

• 전환 시간: 0ms

Blurb 모듈을 두 번 복제하고 나머지 열에 중복 배치

열 1에서 첫 번째 Blurb 모듈을 완료하면 모듈을 두 번 복제하고 행의 나머지 열에 복제본을 배치할 수 있습니다.

전체 행 복제

이제 표시하려는 클라이언트 로고 수에 따라 이 행을 원하는 만큼 복제할 수 있습니다.

각 Blurb 모듈 복제의 Hover 내용 변경

각 복제 Blurb 모듈에서 클라이언트 로고를 변경했는지 확인하십시오.

각 Blurb 모듈 복제의 로고 변경

각 중복 모듈의 호버 콘텐츠도 변경하면 완료됩니다!

시사

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

데스크탑

이동하는

마지막 생각들

이 게시물에서 우리는 Divi의 반응형 옵션 기능을 사용하여 호버/클릭 시 클라이언트 로고를 평가로 바꾸는 방법을 보여주었습니다. 이것은 페이지의 공간을 절약하고 다양한 화면 크기에서 인터랙티브한 디자인을 만드는 훌륭한 방법입니다. 튜토리얼을 보여주는 것 외에도 이 게시물의 시작 부분에서 JSON 파일을 무료로 공유했습니다! 질문이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요.

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