섹션 구분선은 계속해서 Divi에서 인기있는 디자인 요소입니다. 페이지에 고유 한 전환과 배경을 쉽게 추가 할 수있는 몇 가지 유용한 옵션을 포함하여 다양한 스타일의 구분 기호가 있습니다.
이 튜토리얼에서는 섹션 구분선을 약간 다르게 사용하겠습니다. Divi를 사용하면 각 구분선의 높이와 레이아웃을 조정할 수 있습니다. 이를 통해 섹션의 특정 영역이나 콘텐츠 위에 구분 기호를 배치할 수 있습니다. 구분선 높이에 호버 옵션을 사용하면 다음을 나타내는 고유한 호버 효과를 추가할 수 있습니다. 내용 부분적으로 숨겨져 있습니다. 이는 클릭 유도 문구나 사람들이 클릭하기를 원하는 특정 버튼에 주의를 집중시키는 데 유용합니다. 방문자 딸깍 하는 소리.
시작하자.
샘플 결과
시작하려면 무엇이 필요합니까?
시작하려면 다음이 필요합니다.
- Le 디비 테마 설치 및 활성
- 프론트 엔드 (시각적 생성자)를 처음부터 새로 작성하기 위해 작성된 새 페이지
- 디자인에 사용할 더미 이미지입니다. 투명 배경이있는 이미지를 사용하겠습니다. 주스 샵 레이아웃 팩 .
그 후에는 시작할 준비가되었습니다!
Divi에서 섹션 구분선 높이 호버 효과 디자인 구현
단면과 선 만들기
두 개의 열로 구성된 일반 섹션을 만들어 봅시다.
모듈을 추가하기 전에 섹션 설정을 열고 다음을 업데이트하십시오.
왼쪽 배경 그라데이션 : #73ba57
오른쪽 배경 그라디언트 : #2a4c23
너비 : 80 %
최대 너비 : 1080px
단면 정렬 : 중심
그러나 이미지에 따라 원하는 색 구성표를 선택할 수도 있습니다. 내 색 구성표는 # fff200-# e09900입니다.
섹션 제목 추가
섹션 제목을 추가하려면 텍스트 모듈을 생성하고 내용 다음 h2 헤더가 있는 본문:
주스
그런 다음 다음과 같이 도면을 업데이트하십시오.
제목 2 폰트 : Lato
제목 2 텍스트 크기 : 80px
2 제목 간격 : -5px
여백 : 상단에 -50px, 하단에 -40px
Z- 색인 : -1
사용자 정의 여백과 z 인덱스를 사용하면 다음 단계에서 추가 할 이미지 뒤에 텍스트를 배치 할 수 있습니다.
이미지 추가
1 열에 제목이있는 텍스트 모듈 아래에 이미지 모듈을 추가합니다. 그런 다음 배경이 투명한 이미지를 업로드하세요. 240 x 300 픽셀 인 Juice Shop Layout Pack의 이미지를 사용하고 있습니다.
이미지 정렬을 중앙으로 조정합니다.
2 열에 클릭 유도 문안 추가
2 열에서 조치 모듈에 대한 호출을 추가하십시오.
단추가 표시되도록 단추 링크 URL을 추가하십시오.
CTA 배경 및 제목 스타일
그런 다음 다음 설계 매개 변수를 업데이트하십시오.
배경색 : #ffffff
텍스트 색상 :
제목 글꼴 : Lato
제목 가중치 정책 : 헤비
제목 글꼴 스타일 : TT
제목 텍스트 크기 : 18px
CTA 버튼 스타일 지정
다음과 같이 버튼 디자인을 업데이트하십시오.
버튼 텍스트 색상 : #ffffff
버튼 배경색 : # e09900
버튼 테두리 폭 : 0 px
CTA 경계선 스타일 지정하기
그런 다음 테두리를 추가하여 모듈의 프레임을 다음과 같이 만듭니다.
테두리의 너비 : 10px
테두리 색 : rgba (224,145,0,0.25)
클릭 유도 문안을 표시하기 위해 구분선 높이 호버 효과 추가
이제 섹션 분할 높이 호버 효과를 추가하여 클릭 유도 문안을 표시 할 차례입니다. 이렇게하려면 먼저 섹션 구분선을 만들어야합니다.
상단 분리기 추가
다음 파라미터를 사용하여 섹션 파라미터와 상단 구분 기호를 엽니 다.
상단 구분선 스타일 : 스크린 샷 참조 상단 구분선 색상 : # 73ba57 상단 구분선 높이 : 70 % (기본값), 0 % (마우스 오버)
상단 구분선 뒤집기 : 가로
구분 기호의 높이는 기본 높이 70 %로 시작한 다음 롤오버시 0 % 높이로 이동합니다.
하위 분배기 추가
그런 다음 다음 매개 변수가있는 섹션과 유사한 하단 구분 기호를 추가하십시오.
상단 구분선 스타일 : 스크린 샷 참조 상단 구분선 색상 : # 73ba57 상단 구분선 높이 : 70 % (기본값), 0 % (마우스 오버)
상단 구분선 뒤집기 : 가로
구분선 레이아웃: 섹션 상단 내용
이 배경 구분 기호는 높이 70 %로 시작하여 마우스를 올리면 0 %로 변경됩니다. 그러나 구분자 레이아웃 옵션이 콘텐츠 상단에 설정되어 있기 때문에 섹션 구분자는 1 열에서 클릭 유도 문안의 하단 부분을 숨 깁니다. 그런 다음 마우스를 올리면 나머지 부분이 숨겨집니다. 클릭 유도 문안이 공개됩니다.
지금까지의 결과를 확인하세요.
독특한 전환 및 디자인을 위해 상자 그림자 호버 효과를 추가했습니다.
독특한 호버링 전환 및 디자인을 위해 분할기 높이 호버 효과와 동시에 발생하는 상자 그림자 호버 효과를 추가 할 수 있습니다. 이렇게하려면 섹션에 다음 상자의 그림자를 추가합니다.
Box Shadow : 스크린 샷 참조
박스 그림자 수평 위치 : 0px
상자 그림자 세로 위치 : 0px
상자 그림자 확산력 : 0px (기본값), 150px (호버)
박스 그림자 색상 : #73ba57
전환 지속 시간을 늦추십시오
마지막 단계에서는 전환 지속 시간을 늦 춥니 다.
전환 기간 : 700ms
최종 결과
데스크탑의 최종 결과는 다음과 같습니다.
위에서 수행 한 작업을 기반으로 모바일 및 태블릿에서 디스플레이를 사용자 지정할 수 있습니다.
마지막 생각
이 튜토리얼이 고유 한 섹션 구분선 높이 호버 효과를 만들어 콘텐츠를 표시하는 데 영감을 주었기를 바랍니다. 사실, 호버링 디바이더의 높이를 조정하는 것은 놀라운 디자인 요소가 될 수 있습니다. 그리고 디자인 샘플은 자신의 탐색과 디자인을 시작하는 데 도움이 될 것입니다.
의견에서 의견을 듣고 싶습니다.
건강에!
