Divi로 탐색 홈페이지를 만드는 방법

게시 됨: 2017-11-12

홈페이지에 적용할 수 있는 많은 접근 방식이 있지만 웹사이트에 약간의 추가 터치를 추가하려면 탐색 페이지를 홈페이지로 선택하는 것이 좋습니다. 주변에서 자주 볼 수 없으며 방문자에게 웹 사이트에서 기대할 수 있는 것을 명확하게 보여줍니다. 또한 방문자가 귀하가 제공하는 멋진 콘텐츠로 가득 찬 다양한 페이지를 시각적으로 탐색하는 데 도움이 됩니다.

Divi를 사용하여 스타일리시하고 우아한 방식으로 완성하는 방법을 보여주기 위해 이 게시물에서 재현하는 방법을 보여줄 디자인을 만들었습니다. 두 가지 버전이 있습니다. 데스크톱 버전 및 태블릿 및 전화에 적합한 버전. 튜토리얼에 들어가기 전에 최종 결과를 살펴보겠습니다.

데스크탑의 결과

다시 만들 결과는 데스크탑에서 다음과 같습니다.
탐색 페이지

모바일에서의 결과

모바일에서의 결과는 약간 다르며 다음과 같습니다.

탐색 페이지

Divi로 탐색 홈페이지를 만드는 방법

YouTube 채널 구독

데스크탑 버전 재생성

탐색 페이지의 두 가지 버전을 만들 것입니다. 데스크톱 버전과 태블릿 및 전화 버전. 그렇게 하면 탐색 페이지가 모든 기기에서 제대로 표시되는지 확인할 수 있습니다. 평소와 같이 데스크톱 버전을 만드는 것으로 시작하겠습니다.

탐색 페이지

새 섹션 추가

새 페이지를 만들고 일반 섹션을 추가하여 시작하십시오. 이 자습서에서는 필요한 콘텐츠가 있는 모든 행을 포함하는 하나의 섹션만 사용할 것입니다(데스크톱 및 모바일 버전 모두). 그러나 데스크톱 및 모바일 버전을 두 섹션으로 분리하도록 선택할 수도 있습니다.

첫 번째 탐색 행 다시 만들기

위의 결과 미리보기에서 알 수 있듯이 각 탐색 항목은 약간의 다른 세부 사항과 함께 거의 동일한 디자인을 가지고 있습니다. 만들려는 각 탐색 항목에 대한 대부분의 설정은 동일합니다. 그렇기 때문에 첫 번째 행을 자세히 만드는 방법을 보여주고 페이지에 추가하려는 다른 탐색 항목도 수정하는 방법을 보여줍니다.

열 구조

우선, 방금 추가한 행의 전체 너비 열을 선택합니다. 모듈을 추가하기 전에 행 설정이 제자리에 있는지 확인하고 행 설정을 엽니다.

탐색 페이지

배경 이미지

콘텐츠 탭에 있는 동안 가장 먼저 할 일은 행에 배경 이미지를 추가하는 것입니다. 너비가 '1400px'이고 높이가 '934px'인 이미지를 사용하면 최상의 결과를 얻을 수 있으므로 사용하는 것이 좋습니다. 또한 이미지를 '반복 없음'으로 설정했는지 확인하세요.

탐색 페이지

조정

그런 다음 디자인 탭으로 이동하여 행에 오른쪽 맞춤을 추가합니다. 이렇게 하면 화면 왼쪽에 설명과 링크를 추가할 수 있는 충분한 공간이 생깁니다.

탐색 페이지

사이징

그런 다음 크기 조정 하위 범주를 열고 '사용자 정의 너비 사용' 옵션을 활성화하고 백분율 너비 '100%'를 사용합니다.

탐색 페이지

간격

계속해서 각 탐색 항목 사이에 약간의 공백을 추가하고 싶기 때문에 행에 '5px'의 위쪽 및 아래쪽 여백을 추가할 것입니다.

탐색 페이지

시계

마지막으로, 이 게시물의 뒷부분에서 태블릿 및 휴대폰과 일치하는 다른 행을 생성할 것이기 때문에 휴대폰 및 태블릿에서 이 행을 비활성화하고 싶습니다.

탐색 페이지

페이지 설명을 위한 텍스트 모듈

텍스트 설정

행 설정이 완료되면 행의 열에 첫 번째 텍스트 모듈을 추가하고 디자인 탭의 텍스트 하위 범주에 대해 다음 설정을 사용할 수 있습니다.

텍스트 글꼴: Andika
텍스트 글꼴 두께: 일반
텍스트 크기: 13px
텍스트 색상: #000000
텍스트 줄 높이: 1.1em
텍스트 방향: 왼쪽

탐색 페이지

사이징

아래로 스크롤하여 Sizing 하위 범주를 열고 '18%' 너비를 추가합니다. 이 너비는 음수 왼쪽 여백을 추가하면 텍스트 모듈이 행의 배경 이미지와 교차하지 않도록 합니다.

탐색 페이지

간격

이전 단계에서 언급했듯이 텍스트 모듈이 행 배경을 겹치지 않고 행의 왼쪽에 오길 원합니다. 또한 행 이미지의 상단과 텍스트 모듈의 시작 사이에 약간의 공간이 있기를 원하므로 상단 여백도 사용하고 있습니다.

상단 여백: 150px
왼쪽 여백: -20px
상단 패딩: 10px
하단 패딩: 10px

탐색 페이지

디바이더 모듈

시계

다음으로 Text Module 바로 아래에 Divider 모듈을 추가합니다. 가시성 하위 카테고리 내에서 '표시 구분선' 옵션을 활성화합니다.

탐색 페이지

색상

그런 다음 디자인 탭으로 이동하여 구분선 색상으로 '#FFFFFF'를 추가합니다.

스타일

계속해서 구분선 스타일로 '단색'을 선택하고 구분선 위치로 '상단'을 선택합니다.

탐색 페이지

사이징

마지막으로 Sizing 하위 범주에 다음 설정을 적용합니다.

디바이더 무게: 5px
높이: 23px
폭: 47%
모듈 정렬: 왼쪽

탐색 페이지

메뉴 항목에 대한 텍스트 모듈

콘텐츠 상자의 링크 텍스트

Divider 모듈 작업이 끝나면 바로 아래에 다른 텍스트 모듈을 추가합니다. 이 텍스트 모듈은 탐색 항목이 될 것입니다. 설정을 열고 텍스트를 입력하고 링크를 추가하십시오.

탐색 페이지

그라데이션 배경색

콘텐츠 탭에 있는 동안 다음 그라데이션 배경 설정을 사용합니다.

첫 번째 색상: #FFFFFF
두 번째 색상: rgba(12,113,195,0.62)
그라디언트 유형: 선형
기울기 방향: 108deg
시작 위치: 31%
최종 위치: 21%

탐색 페이지

링크 텍스트 설정

그런 다음 디자인 탭으로 이동하여 텍스트 하위 범주의 링크 탭에 다음 설정을 적용합니다.

링크 글꼴: Andika
링크 글꼴 두께: 굵게
링크 글꼴 스타일: 대문자 및 밑줄
링크 밑줄 스타일: 단색
링크 텍스트 크기: 100px
링크 텍스트 색상: #000000
링크 라인 높이: 1em

탐색 페이지

간격

이 텍스트 모듈은 화면 왼쪽에도 나타나야 하므로 왼쪽 여백을 추가합니다. 우리는 또한 Divider Module과 이 Text Module 사이의 공간이 더 작아지기를 원합니다. 이것이 음수 상단 여백이 들어가는 곳입니다. 중앙 수평 정렬을 생성하기 위해 하단 여백도 추가합니다. 마지막으로 그라디언트 배경이 더 커지길 원하기 때문에 위쪽 및 아래쪽 패딩을 사용합니다.

상단 여백: -33px
하단 여백: 250px
왼쪽 여백: -20px
상단 패딩: 80px
하단 패딩: 80px

탐색 페이지

필요한 만큼 첫 번째 탐색 행 복제

탐색 페이지의 다른 탐색 항목은 다소간 동일한 설정을 갖습니다. 따라서 필요한 만큼 행을 복제하고 나중에 세부적으로 수정하는 것이 좋습니다. 변경해야 할 세 가지 사항이 있습니다. 살펴보겠습니다.

행 배경 변경

가장 먼저 해야 할 일은 중복 행의 배경 이미지를 변경하는 것입니다. 다시 말하지만, 최상의 결과를 얻으려면 너비가 '1400px'이고 높이가 '943px'인 이미지를 사용해야 합니다.

탐색 페이지

메뉴 항목에 대한 텍스트 모듈 변경

링크 변경

그런 다음 탐색 항목 텍스트 모듈을 열고 링크와 함께 텍스트를 변경합니다.

탐색 페이지

텍스트 길이에 따라 그라데이션 배경 변경

마지막으로 이 텍스트 모듈의 그라데이션 배경도 변경해야 합니다. 두 번째 그래디언트 색상을 'rgba(224,43,32,0.62)'로 변경하고 새 탐색 항목의 길이에 따라 시작 위치 값을 변경합니다. 상당히 긴 탐색 항목이 있는 경우 제자리에 들어갈 때까지 시작 위치 백분율을 더 높은 값으로 변경하고 싶을 것입니다.

탐색 페이지

모바일 버전 다시 만들기

이제 데스크톱 버전을 만들었으므로 태블릿 및 모바일 버전도 만들 것입니다. 다른 모듈의 스타일은 데스크탑 버전과 거의 동일하지만 이면에서 행의 구조가 완전히 다릅니다. 각 모듈을 복제하려면 수정해야 하는 사항이 많기 때문에 데스크톱 버전에서 모듈을 복제하지 않고 처음부터 모듈을 만드는 방법을 간단히 보여드리겠습니다.

탐색 페이지