Divi로 마우스를 가져갈 때 팝업 서비스 설명 만들기

마우스 오버 시 팝업 서비스 설명을 작성하면 사용자에게 추가 정보를 알리고 참여를 유도하는 효과적인 방법이 될 수 있습니다. 툴팁과 매우 유사하게 이러한 팝업 설명은 마우스 오버 시 서비스에 대한 추가 정보를 표시합니다. 그러나 Divi를 사용하면 Divi 빌더에서 사용할 수 있는 전체 디자인 도구 모음을 사용하여 추가 사용자 지정 CSS 없이도 멋진 팝업 디자인을 만들 수 있습니다.

이 튜토리얼에서는 Divi 웹사이트에서 팝업 서비스 설명을 만드는 것이 얼마나 쉬운지 보여줄 것입니다. 트릭은 모듈이 서로 뒤로 미끄러지고 마우스를 가져갈 때 행의 너비를 조정할 때마다 튀어나오도록 모듈을 배치하는 것입니다.

시작하자!

엿보기

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

YouTube 채널 구독

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

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

시작하는 데 필요한 것

시작하려면 다음이 필요합니다.

1. Divi 테마가 설치되고 활성화되었습니다.
2. 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
3. 모의 콘텐츠에 사용할 이미지입니다. 이 튜토리얼에서는 Investment Company 레이아웃 팩에서 몇 가지를 사용할 것입니다.

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

Divi를 사용하여 Hover에 팝업 서비스 설명 만들기

섹션 및 행 만들기

먼저 한 열 행이 있는 새 일반 섹션을 만듭니다.

모듈을 추가하기 전에 다음과 같이 행 설정을 업데이트하십시오.

어두운 배경 이미지 또는 어두운 배경 색상을 추가합니다. Investment Company Layout Pack의 추상적인 배경 이미지를 사용하고 있습니다. 그러나 그것을 사용하지 않으려면 #161c29의 배경색을 추가하면 됩니다.

• 거터 폭: 1
• 폭: 100%
• 높이: 320px(데스크톱), 자동(태블릿 및 휴대폰)\
• 패딩: 0px 상단, 0px 하단

Blurb 모듈 추가

다음으로 행에 블러브 모듈을 추가합니다.

그리고 다음과 같이 blurb 모듈 설정을 업데이트합니다.

• 제목: 서비스
• 아이콘: 스크린샷 참조

기본 본문 내용도 삭제합니다.

• 배경 이미지: 약 320x215px 크기의 이미지 추가
• 배경 이미지 크기: 맞춤
• 배경 이미지 위치: 상단 중앙

• 배경 그라데이션 왼쪽 색상: rgba(31,72,192,0.61)
• 배경 그라데이션 오른쪽 색상: #161c29
• 시작 위치: 34%
• 최종 위치: 71%
• 배경 이미지 위에 그라디언트 배치: 예

• 아이콘 색상: #ffffff
• 텍스트 정렬: 가운데
• 제목 글꼴: Archivo
• 제목 텍스트 색상: #ffffff
• 제목 텍스트 크기: 38px
• 제목 문자 간격: 4px
• 최대 너비: 320px
• 모듈 정렬: 중앙
• 높이: 320px

• 패딩: 68px 상단
• 둥근 모서리: 10px
• Z 인덱스: 1

z 인덱스 1 값을 추가하는 것은 블러 모듈이 결국 뒤에 쌓이게 될 다른 모듈 위에 유지되도록 하는 데 중요합니다.

행동 유도 모듈 ​​추가

다음으로 블러브 모듈의 왼쪽에 위치할 행동 유도 모듈을 추가해야 합니다.

이것은 결국 마우스를 가져갈 때 튀어나올 두 개의 콘텐츠 영역 중 첫 번째 영역이 될 것입니다.

이제 기본 배경색을 제거하고 다음과 같이 디자인 설정을 업데이트해야 합니다.

• 텍스트 정렬: 왼쪽
• 제목 글꼴: Archivo
• 제목 텍스트 크기: 22px
• 너비: 320px
• 모듈 정렬: 왼쪽(데스크탑), 가운데(태블릿 및 휴대폰)
• 높이: 320px(데스크톱), 자동(태블릿 및 휴대폰)
• 여백: -320px(데스크톱), 0px(태블릿 및 휴대폰)
• 패딩: 상단 40픽셀, 왼쪽 40픽셀, 오른쪽 40픽셀

클릭 유도문안 모듈을 복제하고 오른쪽에 맞춥니다.

안내문 오른쪽에 표시될 두 번째 콘텐츠 블록을 만들기 위해 와이어프레임 보기 모드를 배포하고 행동 유도 모듈을 복제할 수 있습니다. 그런 다음 복제본의 설정을 열고 오른쪽으로 모듈 정렬을 업데이트합니다.

지금까지의 디자인은 다음과 같습니다.

버튼 만들기

디자인에 추가해야 하는 마지막 요소는 버튼입니다. 원하는 경우 클릭 유도문안 모듈 내에 버튼을 추가할 수 있습니다. 그러나 이 디자인의 경우 행 맨 아래에 계속 표시되는 버튼을 추가하는 것이 더 낫다고 생각했습니다.

버튼을 생성하려면 와이어프레임 보기 모듈을 배포하고 행/열의 마지막 모듈이 되도록 두 번째 행동 유도 모듈 ​​바로 아래에 버튼 모듈을 추가합니다.

버튼 모듈 설정을 연 다음 데스크탑 보기 모드를 토글하여 버튼을 시각적으로 편집합니다.

버튼 텍스트 "자세히 알아보기"를 추가합니다.

그런 다음 다음과 같이 버튼 스타일을 업데이트합니다.

• 버튼 정렬: 중앙
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #1f48c0
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 10px
• 버튼 문자 간격: 4px
• 버튼 글꼴: Archivo

이제 버튼을 배치하기만 하면 됩니다.

• 여백(데스크톱): -25px 상단
• 여백(태블릿 및 휴대폰): 상단 25px, 하단 50px
• Z 인덱스: 2

z 인덱스 값이 2이면 버튼이 블러브 모듈(az 인덱스가 1) 위에 유지됩니다.

팝아웃 호버 효과 만들기

팝업 서비스 설명을 수행하는 데 필요한 주요 호버 효과에는 호버 시 행의 너비 변경이 포함됩니다. 이렇게 하려면 기본적으로 행에 좁은 너비를 지정해야 합니다. 이렇게 하면 모듈이 서로 뒤에 쌓이고 블러 모듈 뒤에 숨겨진 상태로 유지됩니다. 그런 다음 두 개의 숨겨진 호출 유도 기능 모듈을 표시하기 위해 호버에서 행의 너비를 확장합니다.

행 설정을 열고 다음과 같이 너비를 업데이트합니다.

• 최대 너비(데스크톱): 320px
• 최대 너비(마우스 오버): 1080px
• 최대 너비(태블릿 및 휴대폰) 1080px

그런 다음 마지막 터치를 위해 행에 테두리 반경을 추가하고 버튼이 숨겨지지 않도록 가시성 오버플로 옵션을 표시되도록 업데이트합니다.

• 둥근 모서리: 10px
• 수평 오버플로: 표시
• 수직 오버플로: 표시

최종 결과

지금까지의 팝아웃 서비스 설명을 확인하세요.

그리고 여기 태블릿과 전화 디스플레이에 있습니다.

시도할 더 많은 디자인 옵션

기본 설정이 준비되었으므로 더 많은 디자인 옵션을 실험하는 것은 항상 즐겁습니다. 다음은 팝업 서비스 설명에 대해 시도할 수 있는 몇 가지 제안입니다.

섹션 배경색 추가

원하는 경우 독특한 팝업 디자인을 위해 행의 배경색/이미지와 일치하는 섹션에 배경색을 추가할 수 있습니다.

행 설정으로 이동하여 다음을 업데이트합니다.

• 배경색: #161c29

그런 다음 결과를 확인하십시오.

두 개의 모듈만 사용

두 개의 모듈만 사용하여 보다 간결하게 팝업을 표시하려면 클릭 유도문안 모듈 중 하나를 삭제한 다음, 광고 문구 모듈을 왼쪽에 정렬하여 두 개의 모듈이 호버링 시 표시되도록 할 수 있습니다.

이렇게 하려면 와이어프레임 보기 모드를 배포합니다. 그런 다음 blurb 모듈 바로 아래에 있는 첫 번째 행동 유도 모듈을 삭제합니다.

그런 다음 왼쪽 모듈 정렬로 블러브 모듈을 업데이트합니다.

• 모듈 정렬: 왼쪽(데스크탑), 가운데(태블릿)

마지막으로 마우스를 가져갈 때 행의 최대 너비를 줄여 더 작게 만듭니다. 행 설정을 열고 다음을 업데이트합니다.

• 최대 너비(마우스 오버): 700px
• 최대 너비(태블릿): 700px

다음은 최종 결과입니다.

그리고 여기 흰색 배경에 있습니다.

마지막 생각들

마우스 오버 시 팝업 서비스 설명을 작성하는 것은 방문자의 콘텐츠 참여를 유도하는 독특한 방법입니다. 이 기능은 Divi의 모든 디자인 기능이 포함된 멋지고 유익한 툴팁과 매우 유사하게 작동합니다. 그리고 그것은 꽤 쉽습니다. 모듈의 크기와 위치를 지정했으면 마우스를 가져갈 때 행의 너비를 조정하기만 하면 됩니다. 더 많은 애플리케이션을 위해 다양한 모듈과 콘텐츠를 자유롭게 실험해 보십시오. 이 글이 Divi로 더 많은 일을 할 수 있는 영감을 주기를 바랍니다.

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

건배!