Divi의 새로운 크기 조정 및 오버플로 설정으로 호버 섹션을 만드는 방법

Divi의 새로운 드래그 가능한 크기 조정 옵션을 사용하면 반응이 빠른 웹사이트를 만드는 데 도움이 될 뿐만 아니라 고유한 상호 작용을 만드는 데에도 도움이 됩니다. 이러한 옵션을 사용하여 현재 디자인 트렌드에 맞게 만들고 있는 웹 사이트를 사용자 정의하고 페이지 구조를 사용자 정의할 수 있습니다.

이 자습서에서는 특히 Divi로 호버 섹션을 만드는 방법을 보여줍니다. 새 페이지를 만들고 모든 섹션 제목이 표시되도록 허용하지만 각 섹션은 호버(데스크톱) 또는 클릭(모바일) 시에만 열립니다. 다른 섹션을 열면 이전에 열었던 섹션이 자동으로 닫힙니다. 일반적인 접근 방식을 설명하는 것으로 시작하고 아래에서 볼 수 있는 예제를 처음부터 다시 만드는 것으로 계속하겠습니다. 이 튜토리얼을 통해 자신만의 호버 섹션 디자인도 만들 수 있기를 바랍니다!

가자!

시사

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

데스크탑

이동하는

무료로 호버 섹션 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

접근하다

실제 자습서를 시작하기 전에 호버 섹션을 만드는 데 사용되는 기술을 살펴보겠습니다. 이 기술을 모든 종류의 디자인 스타일과 함께 구축 중인 모든 종류의 웹 사이트에 적용할 수 있습니다.

1. 페이지에 첫 번째 섹션 추가

새로운 페이지에서 새로운 디자인을 시작한다고 가정해 보겠습니다. 가장 먼저 해야 할 일은 새 일반 섹션을 추가하는 것입니다.

2. 섹션 제목이 포함된 새 행 추가

그런 다음 섹션 제목이 포함된 텍스트 모듈로 새 행을 추가하여 계속할 수 있습니다. 또한 구분선 모듈과 마우스를 올리거나 터치할 때 행이 확장됨을 나타내는 항목을 추가할 수 있습니다(이 게시물 미리보기의 예 참조). 섹션 제목을 섹션 콘텐츠의 나머지 부분과 분리하여 유지하는 것이 중요하므로 섹션 제목과 다음에 오는 내용 사이에 충분한 공백을 남겨 두십시오.

3. 나머지 섹션 내용 미세 조정(원하는 만큼 행과 모듈 추가)

섹션 제목 뒤에 오는 디자인 요소는 전적으로 귀하에게 달려 있습니다. 섹션을 원하는 만큼 길게 또는 짧게 만들 수 있으며 어떤 디자인 스타일도 활용할 수 있습니다.

4. 섹션의 기본 및 hover 최대 높이 수정

섹션과 그 안의 모든 디자인 요소를 미세 조정했으면 이제 호버 효과를 만들 차례입니다. 섹션의 기본 높이는 섹션 제목에만 맞도록 되어 있습니다. 마우스를 가져가면 섹션이 초기 크기로 돌아갑니다.

5. 수직 오버플로 숨기기

이 기술의 또 다른 중요한 부분은 수직 오버플로를 숨기는 것입니다. 섹션의 초기 높이보다 작은 섹션의 기본 최대 높이를 설정하면 오버플로가 생성됩니다. 오버플로가 표시되지 않도록 하려면 섹션의 가시성 설정에서 숨겨져 있는지 확인해야 합니다.

5. 페이지의 모든 섹션에 대해 단계를 반복합니다.

페이지의 모든 섹션에 대해 동일한 단계를 반복하여 방문자가 좋아할 분명한 사용자 경험을 만드십시오.

YouTube 채널 구독

재창조를 시작합시다!

새 섹션 추가

기본 배경색

이 게시물의 접근 방식을 살펴보았으므로 이제 행동을 시작할 때입니다! WordPress 웹사이트의 새로운 페이지에 첫 번째 일반 섹션을 추가하고 섹션 설정을 엽니다. 섹션의 기본 배경색을 원하는 색상으로 변경합니다.

• 배경색: #000000

호버 배경색

마우스를 가져갈 때 이 배경색을 변경합니다.

• 배경색: #ffffff

행 #1 추가

열 구조

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

텍스트 모듈 추가

H2 콘텐츠 추가

다음에 새 행에 텍스트 모듈을 추가하십시오. 다음에 올 것을 나타내는 '▼'기호와 함께 H2 사본을 추가하십시오.

H2 텍스트 설정

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

• 제목 2 글꼴: Trebuchet
• 제목 2 글꼴 두께: 매우 굵게
• 제목 2 텍스트 정렬: 왼쪽
• 제목 2 텍스트 색상: #ff0f3b
• 제목 2 텍스트 크기: 100px(데스크톱), 80px(태블릿), 60px(전화)
• 제목 2 글자 간격: -5px

디바이더 모듈 추가

시계

이 행에서 필요한 두 번째이자 마지막 모듈은 Divider 모듈입니다. 가시성 설정에서 '디바이더 표시' 옵션을 활성화했는지 확인하십시오.

• 디바이더 표시: 예

색상

그런 다음 디자인 탭으로 이동하여 구분선 색상을 변경합니다.

• 색상: #ff0f3b

사이징

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

• 디바이더 무게: 2px
• 폭: 14%

행 #2 추가

열 구조

다음 줄로! 여기에 마우스를 올리거나(데스크톱) 클릭(태블릿 및 모바일)한 후 표시하려는 모든 콘텐츠를 배치해야 합니다. 다음 열 구조를 사용하고 있지만 원하는 만큼 행과 모듈을 추가하고 필요에 따라 스타일을 지정할 수 있습니다.

열 1에 텍스트 모듈 추가

콘텐츠 추가

선택한 내용이 포함된 첫 번째 열에 텍스트 모듈을 배치합니다.

텍스트 설정

텍스트 모듈의 디자인 탭으로 이동하여 텍스트 방향을 변경합니다.

• 텍스트 방향: 양쪽 맞춤

열 2에 텍스트 모듈 추가

콘텐츠 추가

선택한 콘텐츠와 함께 두 번째 열에 텍스트 모듈을 추가합니다.

텍스트 설정

다시, 모듈의 텍스트 설정에서 텍스트 방향을 변경하십시오.

• 텍스트 방향: 양쪽 맞춤

섹션에 크기 조정 설정 추가

기본 크기 조정

섹션을 완료했으면 호버 효과를 만들 차례입니다. 섹션 설정을 열고 다양한 화면 크기에서 최대 높이를 변경합니다.

• 최대 높이: 300px(데스크탑), 280px(태블릿), 260px(휴대폰)

호버 크기 조정

최대 높이에서도 호버 옵션을 활성화하고 다양한 화면 크기의 모든 요소를 ​​덮을 만큼 충분히 높은 값을 추가합니다. 이 값은 섹션 컨테이너의 초기 크기를 초과하지 않고 모든 요소가 표시되도록 합니다.

• 최대 높이: 5000px

수직 오버플로

그런 다음 섹션의 고급 탭으로 이동하여 세로 오버플로를 변경합니다. 이렇게 하면 섹션 컨테이너를 초과하는 모든 콘텐츠가 숨겨집니다.

• 수직 오버플로: 숨김

전환

부드러운 전환을 만들기 위해 고급 탭에서 전환 설정도 변경하고 있습니다.

• 전환 시간: 800ms
• 전환 지연: 500ms

전체 섹션을 원하는 만큼 복제

첫 번째 호버 섹션 생성이 완료되면 원하는 만큼 복제할 수 있습니다.

섹션 제목 변경

물론 복제본의 섹션 제목을 변경하고 싶을 것입니다.

H2 텍스트 색상 변경

디자인에 약간의 변형을 주기 위해 아래 인쇄 화면에서 강조 표시된 모듈의 텍스트 색상도 변경합니다.

• 제목 2 텍스트 색상: #c4c4c4

구분선 색상 변경

텍스트 모듈과 함께 제공되는 구분선 색상과 함께.

• 색상: #c4c4c4

시사

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

데스크탑

이동하는

마지막 생각들

이 게시물에서 우리는 당신이 만들고 있는 모든 웹사이트에서 호버 섹션을 사용하여 독특한 상호작용을 만들기 위해 Divi의 새로운 드래그 가능한 크기 조정 옵션을 창의적으로 사용하는 방법을 보여주었습니다. 접근 방식을 설명하는 것으로 시작하여 디자인 예제를 처음부터 다시 만드는 것으로 시작했습니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요.

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