Divi로 완전히 가로로 스와이프 페이지를 만드는 방법

게시 됨: 2019-03-16

스와이프 및 앵커 링크를 사용하여 탐색하는 완전히 수평적인 페이지를 만드는 것에 대해 생각해 본 적이 있습니까? 글쎄, 당신이 그것에 접근하는 방법을 정확히 알지 못했다면 이것은 당신에게 이상적인 게시물입니다. Divi를 사용하여 전체 가로 스와이프 페이지를 만드는 방법을 보여 드리겠습니다. 이 기술은 웹사이트를 다른 웹사이트와 차별화하고 2019년의 웹 디자인 트렌드와 일치시키는 데 도움이 됩니다. 우리가 만들 결과는 모든 화면 크기에서 멋지게 보일 것입니다.

가자!

시사

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

데스크탑

스와이프 페이지

이동하는

스와이프 페이지

접근하다

한 섹션만 사용하여 전체 페이지를 만듭니다.
튜토리얼 끝에서 몇 개의 CSS 코드 라인을 사용하여 해당 섹션을 수평 그리드로 전환합니다.
수평 그리드는 수평으로 배치된 열에 각 행을 배치합니다.
섹션에 포함된 수평 열의 수를 결정할 수 있습니다.
이 경우 각각 2개의 행으로 구성된 4개의 다른 열을 사용합니다.
생성하는 수평 열의 수를 수정하고 섹션 열의 각 행이 포함하는 행 수를 결정할 수 있습니다.
또한 앵커 링크를 사용하여 다양한 섹션 열을 탐색할 수 있습니다.
또한 방문자가 쉽게 탐색할 수 있도록 부드러운 스크롤과 섹션 스크롤 스냅 효과를 추가하고 있습니다.

재창조를 시작하자

새 섹션 추가

배경색

새 페이지를 만들고 일반 섹션을 추가하십시오. 섹션 설정을 열고 배경색을 변경합니다.

배경색: #ffffff

스와이프 페이지

간격

그런 다음 간격 설정으로 이동하여 다양한 화면 크기에 맞춤 패딩을 추가합니다.

상단 패딩: 10.5vw(데스크톱), 15vw(태블릿), 10vw(전화)
하단 패딩: 3vw(데스크탑 및 태블릿), 10vw(전화)

스와이프 페이지

행 #1 추가

열 구조

다음 열 구조를 사용하여 새 행을 계속 추가합니다.

스와이프 페이지

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 행이 화면의 전체 너비를 차지하도록 합니다.

이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1

스와이프 페이지

간격

다음의 간격 설정으로 이동하여 모든 다른 화면 크기에서 일부 변경을 수행하십시오.

상단 패딩: 0px
하단 패딩: 0px
왼쪽 패딩: 6vw(태블릿 및 전화)
오른쪽 패딩: 6vw(태블릿 및 휴대전화)
열 1 하단 패딩: 15vw(태블릿 및 휴대폰)
열 2 왼쪽 패딩: 4vw(데스크톱), 0vw(태블릿 및 휴대전화)

스와이프 페이지

CSS ID

생성한 섹션 열의 첫 번째 행에 CSS ID를 할당해야 합니다. 이것은 이 게시물의 뒷부분에서 앵커 화살표를 만드는 데 도움이 됩니다.

CSS ID: 스와이프-1

스와이프 페이지

맞춤 CSS

이 게시물의 접근 방식 섹션에서 언급했듯이 부드러운 스크롤 및 스냅 효과를 메커니즘에 적용하고 있습니다. 그렇게 하려면 우리가 만든 가로 열 각각의 첫 번째 행에 CSS 코드 한 줄을 추가해야 합니다.

scroll-snap-align: start;

스와이프 페이지

열 1에 Blurb 모듈 추가

아이콘 선택

이제 모듈 추가를 시작할 수 있습니다! 열 1에서 Blurb 모듈로 시작하십시오. 모듈 설정을 열고 왼쪽 화살표 아이콘을 선택하십시오.

스와이프 페이지

아이콘 설정

그런 다음 디자인 탭으로 이동하여 아이콘 모양을 약간 변경합니다.

아이콘 색상: rgba(255,255,255,0)
이미지/아이콘 배치: 상단
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 5vw(데스크톱), 13vw(태블릿), 21vw(전화)

스와이프 페이지

간격

다음에 사용자 정의 여백 값을 추가하십시오.

상단 여백: 14vw(데스크톱), -11vw(태블릿), -17vw(전화)
왼쪽 여백: 60vw(태블릿 및 휴대폰)

스와이프 페이지

시계

또한 더 작은 화면 크기에서 모듈을 숨기고 있습니다.

스와이프 페이지

열 2에 텍스트 모듈 추가

H2 콘텐츠 추가

다음으로 필요한 모듈은 2열의 텍스트 모듈입니다. H2 콘텐츠를 추가합니다.

스와이프 페이지

H2 텍스트 설정

그런 다음 디자인 탭으로 이동하여 H2 텍스트 설정을 수정합니다.

제목 2 글꼴: Source Serif Pro
제목 2 텍스트 정렬: 왼쪽
제목 2 텍스트 크기: 3vw(데스크톱), 7vw(태블릿 및 전화)

스와이프 페이지

사이징

다음으로 크기 설정에서 너비를 수정합니다.

폭: 77%

스와이프 페이지

간격

그리고 더 작은 화면 크기를 위해 약간의 하단 여백을 추가하십시오.

하단 여백: 15vw(태블릿 및 휴대폰)

스와이프 페이지

2열에 버튼 모듈 추가

콘텐츠 추가

추가한 텍스트 모듈 바로 아래에 버튼 모듈을 추가합니다. 일부 사본을 입력하십시오.

스와이프 페이지

버튼 설정

그런 다음 디자인 탭으로 이동하여 버튼 설정을 변경합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 0.9vw(데스크톱), 2vw(태블릿), 3.5vw(전화)
버튼 텍스트 색상: #000000
버튼 테두리 너비: 1px

스와이프 페이지

버튼 테두리 색상: #000000
버튼 테두리 반경: 0px
버튼 글꼴: Mukta
글꼴 두께: 굵게
글꼴 스타일: 대문자

스와이프 페이지

간격

다음으로 사용자 정의 여백과 패딩을 추가하십시오.

최고 마진: 6vw(데스크톱), 4vw(태블릿 및 전화)
상단 패딩: 15px
하단 패딩: 15px
왼쪽 패딩: 50px
오른쪽 패딩: 50px

스와이프 페이지

열 3에 Blurb 모듈 추가

아이콘 선택

이 행에 필요한 다음이자 마지막 모듈은 3열에 있는 또 다른 Blurb 모듈입니다. 원하는 아이콘을 선택하십시오.

스와이프 페이지

링크

그런 다음 링크 설정으로 이동하여 방문자를 섹션의 두 번째 가로 열로 안내하는 링크를 추가합니다.

모듈 링크 URL: https://www.yourwebsite.com/page/#swipe-2

스와이프 페이지

아이콘 설정

아이콘 설정도 변경하십시오.

아이콘 색상: #333333
이미지 아이콘 배치: 상단
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 5vw(데스크톱), 13vw(태블릿), 21vw(전화)

스와이프 페이지

간격

계속해서 다양한 화면 크기에 맞춤 상단 및 왼쪽 여백을 추가합니다.

상단 여백: 14vw(데스크톱), -11vw(태블릿), -17vw(전화)
왼쪽 여백: 60vw(태블릿 및 휴대폰)

스와이프 페이지

행 #2 추가

열 구조

필요한 두 번째 행은 다음 열 구조를 사용합니다.

스와이프 페이지

배경색

아직 모듈을 추가하지 않고 행 설정을 열고 배경색을 변경하십시오.

배경색: #f7f7f7

스와이프 페이지

사이징

다음으로 크기 설정을 수정합니다.

이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1

스와이프 페이지

간격

간격 설정의 사용자 정의 패딩 및 여백 값과 함께.

상단 여백: -3.5vw(데스크톱), -10vw(태블릿), -17vw(전화)
상단 패딩: 8vw(데스크톱), 15vw(태블릿), 20vw(전화)
하단 패딩: 8vw(데스크톱), 15vw(태블릿), 20vw(전화)
왼쪽 패딩: 24vw(데스크톱), 5vw(태블릿 및 전화)
오른쪽 패딩: 24vw(데스크톱), 5vw(태블릿 및 전화)
열 1 오른쪽 패딩: 2vw(데스크톱), 0vw(태블릿 및 휴대전화)
열 2 왼쪽 패딩: 2vw(데스크톱), 0vw(태블릿 및 휴대전화)

스와이프 페이지

열 1에 텍스트 모듈 추가

콘텐츠 추가

계속해서 첫 번째 열에 텍스트 모듈을 추가하십시오. 원하는 사본(H3 제목 포함)을 입력하십시오.

스와이프 페이지

텍스트 설정

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

텍스트 글꼴: Open Sans
텍스트 크기: 0.65vw(데스크톱), 1.8vw(태블릿), 2.7vw(전화)
텍스트 줄 높이: 1.8em

스와이프 페이지

H3 텍스트 설정

H3 텍스트 설정과 함께.

제목 3 글꼴: Mukta
제목 2 글꼴 두께: 굵게
제목 3 글꼴 스타일: 대문자
제목 3 텍스트 크기: 0.8vw(데스크톱), 3vw(태블릿), 4vw(전화)
제목 3 줄 높이: 1.8em

스와이프 페이지

간격

작은 화면 크기에도 약간의 하단 여백을 추가하십시오.

하단 여백: 5vw(태블릿 및 휴대폰)

스와이프 페이지

텍스트 모듈 복제 및 2열에 배치

열 1에서 텍스트 모듈 수정을 완료하면 이를 복제하고 두 번째 열에 복제본을 배치할 수 있습니다.

스와이프 페이지

콘텐츠 변경

내용을 변경했는지 확인하십시오.

스와이프 페이지

행 #1 세 번 복제

두 행이 모두 완료되면 첫 번째 행을 3번 복제할 수 있습니다.

스와이프 페이지

중복 #1 변경

행 CSS ID 변경

첫 번째 복제본의 CSS ID를 변경해야 합니다.

CSS ID: 스와이프-2

스와이프 페이지

Blurb 모듈(열 1) 아이콘 색상 변경

첫 번째 Blurb 모듈의 색상과 함께.

아이콘 색상: #333333

스와이프 페이지

두 Blurb 모듈의 링크 변경

앵커 링크가 작동하도록 하려면 그에 따라 각 화살표의 링크를 변경해야 합니다.

모듈 링크 URL: https://www.yourwebsite.com/page/#swipe-1

스와이프 페이지

모듈 링크 URL: https://www.yourwebsite.com/page/#swipe-3

스와이프 페이지

중복 변경 #2

행 CSS ID 변경

두 번째 복제본의 CSS ID를 변경합니다.

CSS ID: swipe-3

스와이프 페이지

Blurb 모듈(열 1) 아이콘 색상 변경

첫 번째 Blurb 모듈의 아이콘 색상과 함께.

아이콘 색상: #333333

스와이프 페이지

두 Blurb 모듈의 링크 변경

그리고 다시 각 Blurb 모듈의 링크를 적절하게 변경합니다.

모듈 링크 URL: https://www.yourwebsite.com/page/#swipe-2

스와이프 페이지

모듈 링크 URL: https://www.yourwebsite.com/page/#swipe-4

스와이프 페이지

중복 변경 #3

CSS ID 변경

세 번째 행 복제의 CSS ID도 변경하십시오.

CSS ID: swipe-4

스와이프 페이지

Blurb 모듈(2열) 아이콘 변경

열 3에서 Blurb 모듈에 대한 다른 아이콘을 선택합니다.

스와이프 페이지

Blurb 모듈(2열) 링크 변경

클릭 시 모듈 링크 URL을 적절하게 수정하여 방문자가 첫 번째 섹션 열로 리디렉션되는지 확인하십시오.

모듈 링크 URL: https://www.yourwebsite.com/page/#swipe-1

스와이프 페이지

행 #2를 세 번 복제

다음 행으로 이동합니다. 이 행도 세 번 복제합니다.

스와이프 페이지

중복 #1의 행 배경색 변경

첫 번째 복제본의 배경색을 변경합니다.

배경색: #dccdced

스와이프 페이지

중복 #2의 행 배경색 변경

두 번째 복제는 다음 배경색을 사용합니다.

배경색: #ffeed1

스와이프 페이지

복제 #3의 행 배경색 변경

세 번째 행 복제의 배경색도 변경하십시오.

배경색: #d6ffe5

스와이프 페이지

섹션에 CSS ID 및 CSS 코드 추가

이제 필요한 모든 행이 있으므로 마법을 일으킬 수 있습니다. 전체 섹션에 CSS ID를 추가합니다. 이 게시물의 뒷부분에서 이 CSS ID를 사용하여 스크롤바를 숨길 것입니다.

CSS ID: 섹션 스크롤바

스와이프 페이지

그런 다음 사용자 정의 CSS 옵션으로 이동하여 기본 요소에 몇 줄의 CSS 코드를 추가합니다.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

만들고 싶은 섹션 열이 많을수록 CSS 코드에 더 많은 열을 추가해야 합니다. 예를 들어 동일한 구조를 원하지만 4회 대신 7회 스와이프를 허용하고 싶다면 그에 따라 그리드 템플릿 열 CSS 코드 라인을 수정해야 합니다.

grid-template-columns: repeat(7, 100%);

그러나 열 번호를 늘리는 경우 행을 더 추가해야 한다는 점에 유의하십시오. 따라서 이 경우 섹션 열당 두 개의 행을 표시하려면 14개의 행이 필요합니다.

스와이프 페이지

스크롤바 숨기기

섹션 CSS ID를 사용하고 페이지 설정에 다음 CSS 코드 행을 추가하여 스크롤 막대를 숨기도록 선택할 수도 있습니다.

#section-scrollbar::-webkit-scrollbar {
display: none;
}

스와이프 페이지

시사

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

데스크탑

스와이프 페이지

이동하는

스와이프 페이지

마지막 생각들

Divi로 웹사이트를 디자인할 때 가장 간단한 것은 아래로 빌드하는 것입니다. 그러나 가장 간단한 작업이라고 해서 해당 옵션으로 제한되는 것은 아닙니다. 완전히 가로로 스와이프하는 페이지도 만들 수 있습니다. 이 튜토리얼에서는 Divi를 사용하여 멋진 수평 스와이프 웹 디자인을 구현하는 방법을 보여주었습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!