Divi로 모바일용 끝없는 가로 스와이프 카드 만들기

콘텐츠를 스와이프하는 것은 거의 모든 사람이 매일 하는 일입니다. 기본적으로 제2의 천성이 되었기 때문에 웹사이트에 추가하면 전반적인 사용자 경험을 개선하는 데 도움이 될 수 있습니다. 이 게시물에서는 터치가 관련된 모바일 및 태블릿 장치에 주로 초점을 맞춘 끝없는 가로 스와이프 카드를 만드는 방법을 보여줍니다. 이것은 모바일 우선 튜토리얼이지만 결과는 데스크탑에서도 잘 작동합니다. 사람들은 포함될 스크롤바를 사용하거나 터치패드를 사용하여 왼쪽과 오른쪽으로 '스와이프'할 수 있습니다.

가자!

시사

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

예 1: 1열 행

데스크탑

이동하는

예 2: '스와이프 열'의 2열 행 + 여러 모듈

데스크탑

이동하는

접근하다

• 이 아름다운 효과를 만들려면 몇 개의 CSS 코드 라인을 사용하여 전체 세로 열을 가로 스와이프/스크롤 그리드 메커니즘으로 변환해야 합니다.
• 이 메커니즘에 수직 열을 사용하고 수평 그리드로 바꾸면 원하는 만큼 스와이프 카드를 추가할 수 있습니다.
• 다시 말해; 모듈을 아래쪽으로 추가하면 스와이프/스크롤 메커니즘이 밑단을 수평 열에 배치합니다.
• 첫 번째 예에서는 1열 행을 사용합니다.
• 이렇게 하면 스와이프 메커니즘이 화면의 전체 너비를 차지할 수 있습니다.
• 반면에 두 번째 예는 두 열 중 하나만 스와이프/스크롤 메커니즘으로 바꾸고 다른 열은 정적 상태로 둡니다.
• 또한 스와이프/스크롤 메커니즘의 '열'에 여러 모듈을 추가하는 방법도 보여줍니다.
• 접근 방식을 이해하면 문자 그대로 원하는 모든 종류의 디자인을 만들고 위의 GIF에서 볼 수 있는 스와이프/스크롤 메커니즘의 일부로 만들 수 있습니다.
• 'Divi용 무료 Fluid Section 배경 이미지 10개 다운로드' 게시물로 이동하여 사용할 유동적인 배경 이미지를 모두 찾을 수 있습니다.

YouTube 채널 구독

예제 #1 다시 만들기

새 섹션 추가

첫 번째 예제를 만들어 봅시다! 작업 중인 페이지에 새 섹션을 추가합니다.

새 행 추가

열 구조

그런 다음 하나의 열이 있는 행을 추가합니다. 이 전체 열을 스와이프/스크롤 메커니즘으로 전환할 것입니다.

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 크기 조정 설정으로 이동합니다. 여기에서는 섹션, 행, 열 사이의 모든 공백을 제거합니다. 즉, 열은 화면의 전체 너비를 차지합니다.

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

열 CSS 코드

이전에 언급했듯이 열 자체를 스와이프/스크롤 그리드 메커니즘으로 전환하고 있습니다. 그렇게 하려면 아래에서 찾을 수 있는 세 줄의 맞춤 CSS 코드가 필요합니다. 계속해서 행의 고급 탭에 있는 Column Main Element에 추가하십시오.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

CSS 코드의 첫 번째 줄은 스크롤/스와이프를 활성화합니다. 두 번째 줄은 기둥을 수평 그리드로 바꿉니다. 그리고 CSS 코드의 세 번째 줄은 그리드를 정의합니다. 우리는 기본적으로 각각 너비가 70%인 6개의 열을 원한다고 말하고 있습니다. 스와이프/스크롤 메커니즘에 표시하려는 스와이프 카드의 수에 따라 값을 수정해야 합니다. 예를 들어 10개의 다른 스와이프 카드를 메커니즘의 일부로 만들고 각 열의 너비를 90%로 늘리려면 다음 CSS 코드 줄을 대신 사용해야 합니다.

grid-template-columns: repeat(10, 90%);

열 1에 CTA 모듈 추가

콘텐츠 추가

행 설정 수정을 완료했으면 CTA 모듈을 열에 추가합니다. 원하는 콘텐츠를 추가하세요.

링크

버튼이 모듈에 표시되도록 하려면 버튼 링크 URL도 추가해야 합니다.

그라데이션 배경

계속해서 그라디언트 배경을 추가합니다.

• 색상 1: #802bff
• 색상 2: #001519

배경 이미지

이 게시물의 접근 섹션에서 이 게시물로 이동하여 무료로 다운로드할 수 있는 유동적인 배경 이미지를 사용할 것이라고 언급했습니다. 유동적인 배경 이미지를 다운받으 셨다면 , ' fluid-style-2.png ' 이미지 파일을 검색하여 배경 이미지 탭에 업로드 하세요. 그에 따라 배경 이미지 설정을 수정합니다.

• 배경 이미지 크기: 맞춤
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

텍스트 설정

디자인 탭으로 이동하여 다음 텍스트 설정이 적용되는지 확인합니다.

• 텍스트 방향: 중앙
• 텍스트 색상: 라이트

제목 텍스트 설정

다음으로 제목 텍스트 설정을 수정합니다.

• 제목 글꼴: Didact Gothic
• 제목 글꼴 두께: 굵게
• 제목 텍스트 크기: 1vw(데스크톱), 2.5vw(태블릿), 4vw(전화)
• 제목 줄 높이: 1.9em

본문 설정

본문 설정과 함께.

• 본문 글꼴: Open Sans
• 본문 텍스트 크기: 0.6vw(데스크톱), 1.3vw(태블릿), 2.5vw(전화)
• 바디 라인 높이: 2.6em(데스크탑 및 태블릿), 2.1em(전화)

버튼 설정

이 모듈에서 버튼의 모양도 변경하고 있습니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 0.9vw(데스크톱), 2.1vw(태블릿), 3.5vw(전화)
• 버튼 텍스트 색상: #000000
• 버튼 배경색: #ffffff
• 버튼 테두리 너비: 10px
• 버튼 테두리 색상: #ffffff
• 버튼 글꼴: Didact Gothic

사이징

크기 설정에서 CTA 모듈의 너비를 약간 줄이는 것도 중요합니다. 이렇게 하면 이 모듈과 스와이프/스크롤 메커니즘에서 다음에 오는 모듈 사이에 항상 간격이 있게 됩니다.

• 폭: 95%
• 모듈 정렬: 중앙

간격

물론 우리는 모든 다른 화면 크기에서 모든 것이 멋지게 보이기를 원합니다. 그렇기 때문에 간격 설정에 다양한 맞춤 패딩 값을 추가합니다.

• 상단 여백: 50px
• 하단 여백: 50px
• 상단 패딩: 12vw(데스크톱), 5vw(태블릿), 14vw(전화)
• 하단 패딩: 12vw(데스크톱), 5vw(태블릿), 14vw(전화)
• 왼쪽 패딩: 20vw(데스크톱), 3vw(태블릿), 8vw(전화)
• 오른쪽 패딩: 20vw(데스크톱), 3vw(태블릿), 8vw(전화)

국경

마지막으로 모듈의 각 모서리에 '20px'를 추가합니다.

원하는 만큼 CTA 모듈 복제

CTA 모듈 사용자 정의가 완료되면 원하는 만큼 모듈을 복제할 수 있습니다.

중복 1의 그라데이션 배경 및 배경 이미지 변경

첫 번째 복제본의 그라데이션 배경을 변경합니다.

• 색상 1: #7a010d
• 색상 2: #001519

그리고 대신 ' fluid-style-9.png ' 배경 이미지를 사용하세요.

• 배경 이미지 크기: 표지
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

중복 2의 그라데이션 배경 및 배경 이미지 변경

다음 두 번째 복제본의 그라데이션 배경을 변경합니다.

• 색상 1: #26ccff
• 색상 2: #001519

배경 이미지로 'fluid-style-10a.png' 이미지 파일을 업로드합니다.

• 배경 이미지 크기: 맞춤
• 배경 이미지 위치: 왼쪽 상단
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

중복 3의 그라데이션 배경 및 배경 이미지 변경

세 번째 복제본의 그라데이션 배경을 변경합니다.

• 색상 1: #ff21b8
• 색상 2: #001519

' fluid-style-6.png ' 배경 이미지를 업로드합니다.

• 배경 이미지 크기: 맞춤
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

중복 4의 그라데이션 배경 및 배경 이미지 변경

네 번째 복제본의 그라데이션 배경을 변경합니다.

• 색상 1: #4400aa
• 색상 2: #001519

배경 이미지로 ' fluid-style-4.png '를 사용하세요.

• 배경 이미지 크기: 맞춤
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

중복 5의 그라데이션 배경 및 배경 이미지 변경

마지막 복제본의 그라데이션 배경을 변경합니다.

• 색상 1: #ff2626
• 색상 2: #001519

배경 이미지로 ' fluid-style-7.png '를 사용하세요.

• 배경 이미지 크기: 맞춤
• 배경 이미지 위치: 오른쪽 상단
• 배경 이미지 반복: 반복 없음
• 배경 이미지 혼합: 오버레이

모듈 수에 맞게 열 CSS 조정

앞서 언급했지만 CSS 코드가 열에 있는 모듈 수와 일치하는지 확인하세요.

스크롤바 스타일 지정

열에 CSS 클래스 추가

이 스와이프/스크롤 그리드 메커니즘과 함께 제공되는 스크롤 막대의 스타일을 지정할 수도 있습니다. 열에 다음 CSS 클래스를 추가합니다.

• 열 CSS 클래스: 스와이프-스크롤바

페이지 설정에 사용자 정의 CSS 추가

그런 다음 페이지 설정을 열고 고급 탭으로 이동하여 다음 사용자 지정 CSS 코드를 추가합니다.

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

예제 #2 다시 만들기

이전 섹션 복제

다음 예제로 넘어갑니다! 이 게시물의 이전 부분에서 만든 섹션을 복제합니다.

CTA 간격 설정 변경

그런 다음 첫 번째 CTA 모듈의 간격 설정을 변경합니다.

• 상단 여백: 50px
• 하단 여백: 50px
• 상단 패딩: 5vw(데스크톱 및 태블릿), 14vw(전화)
• 하단 패딩: 5vw(데스크탑 및 태블릿), 14vw(전화)
• 왼쪽 패딩: 4vw(데스크톱), 3vw(태블릿), 8vw(전화)
• 오른쪽 패딩: 4vw(데스크톱), 3vw(태블릿), 8vw(전화)

열의 모든 모듈로 간격 설정 확장

마우스 오른쪽 버튼을 클릭하고 '간격 스타일 확장'을 클릭하여 이러한 새 간격 설정을 확장합니다.

• 받는 사람: 모든 행동 촉구
• 전체: 이 칼럼

열 구조 변경

행의 열 구조를 변경하여 계속하십시오.

모듈을 두 번째 열로 이동

그리고 대신 두 번째 열에 각 모듈을 배치합니다.

CSS를 두 번째 열로 이동 및 값 변경

모듈을 한 열에서 다른 열로 이동했으므로 CSS 코드에 대해서도 동일한 작업을 수행해야 합니다. 대신 CSS 클래스를 열 2에 추가하십시오.

• 열 2 CSS 클래스: 스와이프-스크롤바

Column 2 Main Element에 CSS 코드 라인을 배치합니다. 또한 각 열의 너비를 '80%'로 변경합니다.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

열 1에 제목 텍스트 모듈 추가

콘텐츠 추가

첫 번째 열에 새 텍스트 모듈을 추가하여 계속하십시오. 원하는 H2 콘텐츠를 추가합니다.

제목 텍스트 설정

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

• 제목 2 글꼴: Didact Gothic
• 제목 2 글꼴 두께: 굵게
• 제목 2 텍스트 정렬: 가운데
• 제목 2 텍스트 크기: 2.5vw(데스크톱), 5vw(태블릿), 6vw(전화)

간격

사용자 정의 상단 여백도 추가하십시오.

• 상단 여백: 100px

열 1에 분배기 모듈 추가

시계

열 1에서 필요한 다음 모듈은 분배기 모듈입니다. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

색상

다음으로 구분선 색상을 변경합니다.

• 색상: #333333

사이징

크기 설정과 함께.

• 디바이더 무게: 7px
• 높이: 0px
• 폭: 10%
• 모듈 정렬: 중앙

간격

다양한 화면 크기에 사용자 지정 상단 여백을 추가하여 분할기 모듈을 완성하십시오.

• 상단 마진: 1.8vw(데스크톱), 2.5vw(태블릿), 4vw(전화)

열 1에 본문 모듈 추가

콘텐츠 추가

첫 번째 열에 필요한 다음이자 마지막 모듈은 설명 텍스트 모듈입니다. 선택한 콘텐츠를 추가합니다.

텍스트 설정

디자인 탭에서 텍스트 설정을 변경하여 계속하십시오.

• 텍스트 글꼴: Open Sans
• 텍스트 크기: 0.7vw(데스크톱), 1.6vw(태블릿), 2.3vw(전화)

사이징

크기 설정도 수정합니다.

• 너비: 43%(데스크탑), 68%(태블릿), 70%(휴대폰)
• 모듈 정렬: 중앙

간격

그리고 사용자 정의 상단 및 하단 여백을 추가하십시오.

• 상단 여백: 50px
• 하단 여백: 50px

와이어프레임 보기로 전환

열 1의 모든 모듈 수정을 완료했으면 계속해서 와이어프레임 보기로 전환합니다.

2열 상단에 텍스트 모듈 추가

여기서는 두 번째 열의 맨 위에 텍스트 모듈을 추가합니다. 우리가 추가한 CSS 코드는 6개의 다른 열을 만드는 데 도움이 되었습니다. 즉, 이 6개의 열 각각에 두 개의 다른 모듈을 표시하려면 총 12개의 모듈이 필요합니다. 모듈 배치는 수평으로 이루어지므로 2열에 있는 처음 5개의 모듈이 나란히 표시됩니다. 그런 다음 메커니즘이 다른 행으로 전환되고 나머지 6개의 모듈이 추가됩니다.

콘텐츠 추가

두 번째 열의 맨 위에 추가한 새 텍스트 모듈을 열고 원하는 콘텐츠를 추가합니다.

텍스트 설정

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

• 텍스트 글꼴: Didact Gothic
• 텍스트 글꼴 두께: 굵게
• 텍스트 색상: #000000
• 텍스트 크기: 1.1vw(데스크톱), 3vw(태블릿), 3.5vw(전화)

복제 텍스트 모듈 5x

계속해서 이 텍스트 모듈을 5번 복제하십시오. 이제 6개의 다른 텍스트 모듈을 갖게 되며 이는 우리가 가지고 있는 CTA 모듈의 수와 같습니다. 따라서 대신 10개의 CTA 모듈을 사용하는 경우 열 구조의 균형을 맞추기 위해 10개의 텍스트 모듈(또는 다른 모듈)을 추가해야 합니다.

중복 내용 변경

아래에 나타날 CTA 모듈과 일치하도록 각 복제본의 내용을 변경하면 완료됩니다!

시사

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

예 1: 1열 행

데스크탑

이동하는

예 1: '스와이프 열'의 2열 행 + 여러 모듈

데스크탑

이동하는

마지막 생각들

이 게시물에서는 Divi를 사용하여 끝없이 가로로 스와이프하는 카드를 만드는 방법을 보여주었습니다. 이러한 스와이프 카드를 만들면 웹사이트에 차원을 추가하는 데 도움이 될 뿐만 아니라 방문자가 웹사이트에서 제공하는 모든 콘텐츠를 원활하게 탐색할 수 있습니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!