섹션 구분선 높이 호버 효과를 사용하여 Divi에서 콘텐츠를 표시하는 방법
게시 됨: 2019-06-24섹션 디바이더는 계속해서 인기 있는 Divi 디자인 요소입니다. 페이지에 고유한 전환 및 배경을 쉽게 추가할 수 있는 유용한 옵션과 함께 선택할 수 있는 다양한 구분선 스타일이 있습니다.
이 자습서에서는 섹션 구분자를 약간 다르게 사용합니다. Divi를 사용하면 각 디바이더의 높이와 배열을 조정할 수 있습니다. 이를 통해 섹션 내의 특정 영역이나 콘텐츠 위에 구분선을 배치할 수 있습니다. 디바이더 높이에 호버 옵션을 사용하여 부분적으로 숨겨진 콘텐츠를 표시하는 고유한 호버 효과를 추가할 수 있습니다. 이것은 방문자가 클릭하기를 원하는 특정 클릭 유도문안이나 버튼에 주의를 집중시키는 데 효과적입니다.
시작하자.
엿보기
섹션 구분선 높이 호버 효과 무료 다운로드
이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.
튜토리얼로 들어가 볼까요?
YouTube 채널 구독
시작하는 데 필요한 것
시작하려면 다음이 필요합니다.
- Divi 테마가 설치되고 활성화되었습니다.
- 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
- 디자인에 사용할 몇 가지 모의 이미지. Juice Shop Layout Pack에서 투명한 배경을 가진 몇 개의 이미지를 사용할 것입니다.
그런 다음 시작할 준비가 된 것입니다!
Divi에서 섹션 구분선 높이 호버 효과 디자인 구현
섹션 및 행 생성
먼저 2열 행이 있는 일반 섹션을 생성해 보겠습니다.
모듈을 추가하기 전에 섹션 설정을 열고 다음을 업데이트하십시오.
배경 그라데이션 왼쪽 색상: #73ba57
배경 그라데이션 오른쪽 색상: #2a4c23
폭: 80%
최대 너비: 1080px
단면 정렬: 중앙
섹션 제목 추가
섹션의 제목을 추가하려면 텍스트 모듈을 만들고 다음 h2 헤더로 본문 내용을 업데이트합니다.
<h2>The Juice</h2>
그런 다음 다음과 같이 디자인을 업데이트합니다.
제목 2 글꼴: Lato
제목 2 텍스트 크기: 80px
제목 2 글자 간격: -5px
여백: -50px 상단, -40px 하단
Z-인덱스: -1
사용자 지정 여백과 z 인덱스를 사용하면 다음 단계에서 추가할 이미지 뒤에 텍스트를 배치할 수 있습니다.
이미지 추가
1열의 제목이 있는 텍스트 모듈 아래에 이미지 모듈을 추가합니다. 그런 다음 배경이 투명한 이미지를 업로드합니다. 저는 Juice Shop Layout Pack의 240x300px 이미지를 사용하고 있습니다.
이미지 정렬을 중앙으로 조정합니다.
2열에 클릭 유도문안 추가
2열에서 행동 유도 모듈을 추가합니다.
버튼이 표시되도록 버튼 링크 URL을 추가합니다.
CTA 배경 및 제목 텍스트 스타일 지정
그런 다음 다음 디자인 설정을 업데이트합니다.
배경색: #ffffff
텍스트 색상: 어두운
제목 글꼴: Lato
제목 글꼴 두께: Heavy
제목 글꼴 스타일: TT
제목 텍스트 크기: 18px
CTA 버튼 스타일 지정
다음과 같이 버튼 디자인을 업데이트합니다.
버튼 텍스트 색상: #ffffff
버튼 배경색: #73ba57
버튼 테두리 너비: 0px
CTA 테두리 스타일링
그런 다음 테두리를 추가하여 다음과 같이 모듈의 프레임을 지정합니다.
테두리 너비: 10px
테두리 색상: rgba(115,186,87,0.15)
클릭 유도문안을 나타내기 위해 디바이더 높이 호버 효과 추가
이제 섹션 구분선 높이 호버 효과를 추가하여 클릭 유도문안을 표시할 차례입니다. 이렇게 하려면 먼저 섹션 구분선을 만들어야 합니다.
상단 구분선 추가
다음 설정으로 섹션 설정과 상단 구분선을 엽니다.
상단 구분선 스타일: 스크린샷 참조
상단 디바이더 색상: #73ba57
상단 구분선 높이: 70%(기본값), 0%(마우스 올리기)
상단 디바이더 플립: 수평
Divider Height는 기본 높이 70%에서 시작하여 마우스를 가져가면 높이가 0%로 변경됩니다.
하단 구분선 추가
다음으로 다음 설정으로 섹션에 유사한 하단 Divider를 추가합니다.
상단 구분선 스타일: 스크린샷 참조
상단 디바이더 색상: #73ba57
상단 구분선 높이: 70%(기본값), 0%(마우스 올리기)
상단 디바이더 플립: 수평
구분선 배열: 섹션 콘텐츠 상단
이 하단 구분선도 70% 높이로 시작하여 호버링 시 0%로 변경됩니다. 그러나 구분선 배열 옵션이 콘텐츠 상단에 설정되어 있기 때문에 섹션 구분선은 1열의 클릭 유도문안 하단 부분을 숨깁니다. 그런 다음 마우스를 가져가면 나머지 클릭 유도문안이 표시됩니다.
지금까지의 결과를 확인하십시오.
독특한 전환 및 디자인을 위한 상자 그림자 호버 효과 추가
호버 시 고유한 전환 및 디자인을 위해 구분선 높이 호버 효과와 동시에 발생하는 상자 그림자 호버 효과를 추가할 수 있습니다. 이렇게 하려면 섹션에 다음 상자 그림자를 추가합니다.
박스 섀도우: 스크린샷 참조
상자 그림자 수평 위치: 0px
상자 그림자 수직 위치: 0px
상자 그림자 확산 강도: 0px(기본값), 150px(호버링)
박스 섀도우 색상: #73ba57
전환 기간 늦추기
마지막 단계로 전환 지속 시간을 약간 늦추겠습니다.
전환 시간: 700ms
최종 결과
다음은 데스크탑에서의 최종 결과입니다.
태블릿 및 휴대폰 디스플레이에서 콘텐츠를 숨기고 싶지 않은 경우 해당 장치에 대해 구분선 배열을 "섹션 콘텐츠 아래"로 쉽게 변경할 수 있습니다.
다음은 태블릿과 휴대폰의 최종 디자인입니다.
몇 초 만에 완전히 독특한 디자인을 위한 다른 섹션 구분선 스타일 실험
이 설정을 사용하면 다양한 구분선 스타일과 조합을 쉽게 실험할 수 있습니다!
무료 다운로드에 포함된 몇 가지가 더 있습니다.
마지막 생각들
이 게시물이 콘텐츠를 표시하기 위해 고유한 섹션 구분선 높이 호버 효과를 만드는 방법에 대한 약간의 영감을 주었길 바랍니다. 사실, 호버에서 구분선 높이를 조정하는 것 자체가 훌륭한 디자인 요소가 될 수 있습니다. 또한 디자인 예제는 자신의 탐색 및 디자인을 시작하는 데 도움이 됩니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!