Divi의 슬라이더 모듈로 모바일 연습을 만드는 방법(무료 다운로드!)

슬라이더는 웹 디자인에서 항상 인기가 있었습니다. 가장 큰 장점 중 하나는 방문자가 모바일 장치에서 스와이프할 수 있다는 것입니다. 요즘에는 스와이프가 새로운 클릭 방식이므로 슬라이더를 포함하면 방문자가 웹사이트에서 경험하는 모바일 사용자 경험을 개선하는 데 도움이 될 수 있습니다. Divi로 웹사이트를 구축할 때 작업 중인 모든 행이나 섹션에 Slider Module을 쉽게 추가할 수 있습니다. 그리고 약간의 창의성과 실험을 통해 멋진 웹 디자인을 얻을 수 있습니다.

할 수 있는 일 중 하나는 슬라이더 모듈로 모바일 연습을 만드는 것입니다. 원하는 만큼 슬라이드를 추가할 수 있으며 처음에는 모바일 장치용으로 설계되었지만 이 연습은 데스크톱과 태블릿에서 똑같이 좋게 보입니다. 이 게시물에서는 멋진 예제를 처음부터 다시 만들고 끝 부분에 다운로드할 수 있는 섹션을 제공합니다.

가자!

시사

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

공전

GIF

재창조를 시작합시다!

Divi의 슬라이더 모듈로 모바일 연습을 만드는 방법

YouTube 채널 구독

새 섹션 추가

간격

만들기 시작합시다! 새 페이지를 추가하거나 기존 페이지를 열고 새 일반 섹션을 추가하십시오. 섹션 설정을 열고 다양한 화면 크기와 일치하는 사용자 정의 패딩 값을 추가합니다.

• 상단 패딩: 4vw(데스크톱), 5vw(태블릿), 3vw(전화)
• 하단 패딩: 4vw(데스크톱), 5vw(태블릿), 3vw(전화)
• 왼쪽 패딩: 30vw(데스크톱), 18vw(태블릿), 3vw(전화)
• 오른쪽 패딩: 30vw(데스크톱), 18vw(태블릿), 3vw(전화)

새 행 추가

열 구조

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

그라데이션 배경

아직 모듈을 추가하지 않고 행 설정을 열고 방사형 그라데이션 배경을 추가하십시오.

• 색상 1: #f9f9f9
• 색상 2: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 상단
• 시작 위치: 40%
• 최종 위치: 40%

사이징

계속해서 행의 크기 설정으로 이동하고 열 사이의 모든 공백을 제거합니다.

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

간격

또한 행에 아래쪽 패딩을 추가하고 있습니다.

• 하단 패딩: 30px

국경

그런 다음 테두리 설정의 각 모서리에 '20px'를 추가합니다.

박스 섀도우

마지막으로 행에 미묘한 상자 그림자를 추가하여 페이지에 깊이를 만듭니다.

• 상자 그림자 흐림 강도: 80px
• 그림자 색상: rgba(0,0,0,0.07)

슬라이더 모듈 추가

배경색 변경

행 설정 수정이 완료되면 슬라이더 모듈을 추가할 수 있습니다. 모듈의 설정을 열고 배경색을 수정합니다. 디자인 탭에서 변경한 모든 사항은 이후에 추가하는 모든 슬라이드에 자동으로 적용됩니다.

• 배경색: rgba(255,255,255,0)

텍스트 설정

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

• 텍스트 방향: 중앙
• 그림자 색상: rgba(0,0,0,0)

본문 설정

다음으로 본문 설정을 수정합니다.

• 본문 글꼴: 기본값(Open Sans)
• 본문 텍스트 크기: 0.6vw(데스크톱), 1.5vw(태블릿), 2.4vw(전화)
• 바디 라인 높이: 2.2em(데스크탑), 2.3em(태블릿), 2.4em(휴대폰)

간격

사용자 정의 상단 및 하단 패딩도 추가하십시오.

• 탑 패딩: 2vw
• 하단 패딩: 2vw

버튼 사용자 정의 CSS

또한 특히 슬라이더 모듈의 버튼에 사용자 지정 패딩 및 여백 값을 추가해야 합니다. 이 요소는 각 슬라이드의 다른 요소와 결합되기 때문에 고급 탭에서 CSS 코드를 사용하여 패딩과 여백을 수동으로 추가해야 합니다.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

활성 슬라이더 제거

모든 일반 슬라이드 설정 수정이 끝나면 이미 있는 활성 슬라이드를 제거할 수 있습니다. 이것들을 사용하는 대신 포스트의 다음 부분에서 처음부터 새로 만들 것입니다. 이것은 우리가 모든 것을 더 빠르게 수정하고 사용자화하는 데 도움이 될 것입니다.

첫 번째 슬라이드 사용자 지정

콘텐츠 상자의 콘텐츠 사용자 지정

슬라이더 모듈에 새 슬라이드를 추가하고 콘텐츠 상자의 콘텐츠 사용자 지정을 시작합니다. 아래 인쇄 화면에서 이미지 설정 대신 콘텐츠 상자에 이미지를 추가하고 있음을 알 수 있습니다. 이렇게 하면 작성된 내용 위에 이미지를 배치할 수 있습니다. Graphic Illustrator Layout Pack 게시물로 이동하여 마지막에 있는 이미지를 다운로드하면 사용한 일러스트레이션을 찾을 수 있습니다. 또한 제목 필드 대신 내용 상자에 H3 제목을 추가하고 스타일을 지정하여 원하는 위치에 정확하게 표시되도록 합니다.

버튼 링크

계속해서 링크 설정으로 이동하고 방문자를 해당 슬라이드에 대한 보다 자세한 페이지로 리디렉션하는 버튼에 대한 링크를 추가합니다.

그라데이션 배경

그런 다음 다음 설정을 사용하여 그라데이션 배경을 추가합니다.

• 색상 1: #aaacff
• 색상 2: rgba(255,255,255,0)
• 그라디언트 유형: 방사형
• 방사형 방향: 상단
• 시작 위치: 30%
• 최종 위치: 30%

항해

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

• 화살표 사용자 정의 색상: #f4f4f4
• 점 탐색 사용자 정의 색상: #000000

텍스트 설정

그리고 슬라이드의 텍스트 설정에서 텍스트 색상을 변경합니다.

• 텍스트 색상: 어두운

단추

마지막으로 버튼을 수정하여 원하는 대로 정확하게 보이도록 합니다.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 0.8vw(데스크톱), 2vw(태블릿), 3vw(전화)
• 버튼 텍스트 색상: #ffffff
• 버튼 배경색: #aaacff
• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 10px

필요한 만큼 슬라이드 복제

첫 번째 슬라이드를 만들고 사용자 지정했으면 원하는 만큼 슬라이드를 복제할 수 있습니다. 각각의 복제본을 수동으로 수정해야 합니다.

콘텐츠 상자의 콘텐츠 변경

가장 먼저 변경해야 할 것은 콘텐츠 상자의 콘텐츠입니다. 여기에는 사용 중인 이미지/그림이 포함됩니다. Graphic Illustrator Layout Pack 게시물로 이동하여 마지막에 있는 이미지를 다운로드하면 이 튜토리얼에서 사용된 두 그림을 모두 찾을 수 있습니다.

링크 변경

버튼 링크도 변경하십시오.

그라데이션 배경 수정

첫 번째 그라데이션 색상을 변경하여 각 복제 슬라이드의 색상 팔레트를 사용자 정의할 수도 있습니다.

• 색상 1: #ffccaa

버튼 배경색 변경

동일한 색상을 사용하여 버튼 배경색을 변경합니다. 생성한 각 복제본에 대해 이 단계를 반복하면 완료됩니다!

• 버튼 배경색: #ffccaa

모바일 연습 섹션을 무료로 다운로드하십시오.

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

파일 다운로드

무료로 다운로드

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

다운로드

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

시사

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

공전

GIF

마지막 생각들

이 게시물에서 우리는 Divi의 Slider Module을 사용하여 멋진 모바일 연습을 만드는 방법을 보여주었습니다. 처음에는 모바일 화면 크기용으로 설계되었지만 태블릿과 데스크톱에서 똑같이 잘 보입니다. 이 접근 방식을 사용하여 웹 사이트에 모든 종류의 슬라이드 섹션을 만들고 방문자와 원활하게 상호 작용할 수 있습니다. 이 튜토리얼이 Divi의 슬라이더 모듈로 창의력을 발휘하도록 영감을 주기를 바랍니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!