올해 평생 회원 및 신규 블랙 프라이데이 고객에게 제공하는 독점 랜딩 페이지 중 하나는 멋진 UI 키트 랜딩 페이지입니다. 이 레이아웃에는 웹사이트를 한 단계 끌어올릴 수 있는 Divi의 최고의 내장 디자인 조합과 고품질 모형이 포함되어 있습니다. 이 포스트에서는 그것을 어떻게 손에 넣고 효과적으로 사용하는지 보여줄 것입니다.

현재 평생 고객이거나 블랙 프라이데이 세일 기간에 새 계정을 구입했거나 업그레이드했다면 지금 이 레이아웃을 다운로드할 수 있습니다.

독점 블랙 프라이데이 UI 키트 랜딩 페이지 받기

이 사용 사례를 시작하기 전에 새로운 우아한 테마 회원이 되거나 기존 계정을 업그레이드하거나 이미 평생 회원이 되어 얻을 수 있는 독점적인 블랙 프라이데이 UI 키트 랜딩 페이지를 손에 넣어야 합니다. 이미 평생 회원이라면 회원 영역에 로그인하여 여기에서 모든 독점 방문 페이지를 다운로드할 수 있습니다. 다른 모든 사람들은 튜토리얼의 나머지 부분을 따라하기 전에 아래 버튼을 사용하여 구매하거나 업그레이드해야 합니다.

사라지기 전에 거래를 신청하세요!

Divi의 열 구조를 사용하여 제품 및 기능을 아름답게 나열하기

이 게시물의 나머지 부분에서는 귀하가 Black Friday 거래를 이용했거나 이미 평생 회원이고 Black Friday UI Kit 방문 페이지에 액세스할 수 있다고 가정합니다.

회원 영역에서 새로운 UI 키트 랜딩 페이지를 다운로드하면 아래 비디오를 시청하여 설정이 얼마나 쉬운지 확인할 수 있습니다. 또한 이 자습서를 따라 사이트를 추가 사용자 지정에 사용할 수 있도록 준비하는 것이 좋습니다.

이 사용 사례 게시물에서는 Divi의 새로운 열 구조를 사용하여 기능 및/또는 제품을 멋지게 나열하는 방법을 보여 드리겠습니다. 우리가 처리할 디자인은 UI Kit 랜딩 페이지로 멋지게 보이며 페이지의 공간을 효과적이고 아름다운 방식으로 사용할 수 있습니다.

시사

다양한 화면 크기에서 결과를 살펴보겠습니다.

호버 및 애니메이션

또한 다양한 디자인 요소에 미묘한 호버 및 애니메이션 설정을 추가합니다. 그러면 다음과 같은 상호 작용이 발생합니다.

시작하자!

UI Kit 방문 페이지를 사용하여 새 페이지 추가

가장 먼저 해야 할 일은 다운로드 및 업로드한 UI Kit 랜딩 페이지를 사용하여 새 페이지를 만드는 것입니다. 방법을 잘 모르겠다면 이 게시물의 이전 부분에서 단계별로 안내하는 비디오를 확인하십시오.

페이지에서 기능 섹션 찾기

레이아웃을 업로드한 후 페이지의 기능 섹션이 나타날 때까지 아래로 스크롤합니다.

기존 행 제거

이 섹션에서 찾을 수 있는 마지막 두 행을 제거하십시오. 이 행의 내용을 기능/제품 목록으로 교체합니다.

행을 포함하는 행 아래에 새 행 추가

열 구조

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

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 디자인 탭에서 크기 설정을 수정합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 예
• 열 높이 균등화: 예

간격

이 디자인이 모든 화면 크기에서 멋지게 보이도록 하기 위해 다른 사용자 지정 여백 및 패딩 값을 사용할 것입니다.

• 상단 여백: 100px
• 하단 여백: 100px
• 상단 패딩: 87px
• 열 1 상단 패딩: 100px(데스크톱), 0px(태블릿 및 휴대전화)
• 2열 상단 패딩: 100px(데스크톱), 0px(태블릿 및 휴대전화)
• 열 3 상단 패딩: 100px(데스크톱). 0px(태블릿 및 휴대전화)
• 3열 하단 패딩: 50px(태블릿 및 휴대전화)
• 4열 왼쪽 패딩: 10px(전화 전용)
• 열 4 오른쪽 패딩: 10px
• 5열 왼쪽 패딩: 5px(데스크톱 및 태블릿), 10px(휴대전화)
• 열 5 오른쪽 패딩: 5px(데스크톱 및 태블릿), 10px(휴대전화)
• 열 6 왼쪽 패딩: 10px
• 6열 왼쪽 패딩: 10px(전화 전용)

열 1에 텍스트 모듈 추가

콘텐츠 추가

모듈 추가를 시작할 시간입니다! 숫자가 있는 첫 번째 열에 텍스트 모듈을 추가합니다.

기본 배경색

이 모듈에 배경색을 추가합니다.

• 배경색: #0f0f0f

호버 배경색

그리고 호버에서 배경색을 변경하십시오.

• 배경색: #ff5400

배경 이미지

미디어 라이브러리에서 찾을 수 있는 아이콘 이미지 중 하나를 배경에 추가할 수도 있습니다.

• 배경 이미지 크기: 실제 크기
• 배경 이미지 위치: 중앙
• 배경 이미지 반복: 반복 없음

기본 텍스트 설정

텍스트 설정을 수정하여 계속하십시오.

• 텍스트 글꼴: Muli
• 텍스트 글꼴 두께: 가벼움
• 텍스트 색상: #ffffff
• 텍스트 크기: 80px(데스크톱 및 전화), 40px(전화)
• 텍스트 줄 높이: 1em

• 텍스트 그림자 색상: ##ffffff
• 텍스트 방향: 왼쪽

기본 간격

정사각형을 만들기 위해 사용자 정의 패딩을 추가하십시오.

• 상단 패딩: 200px
• 왼쪽 패딩: 50px(전화 전용)
• 오른쪽 패딩: 50px(전화 전용)

호버 간격

마우스 오버 시 간격 설정을 수정합니다.

• 왼쪽 패딩: 100px

국경

UI Kit 랜딩 페이지와 일치시키기 위해 약간의 둥근 모서리도 추가하고 있습니다. 각 모서리에 '20px'를 추가합니다.

박스 섀도우

모듈에 색상을 추가하려면 다음 상자 그림자를 사용하십시오.

• 상자 그림자 수평 위치: 20px
• 상자 그림자 수직 위치: -50px
• 상자 그림자 확산 강도: 17px
• 그림자 색상: #593aff

생기

마지막으로 텍스트 모듈에 매우 미묘한 슬라이드 애니메이션을 추가합니다.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 오른쪽
• 애니메이션 강도: 3%

2열에 디바이더 모듈 추가

시계

다음으로 필요한 모듈은 Divider 모듈입니다. 계속해서 두 번째 열에 하나를 추가하십시오. '표시 구분선' 옵션이 활성화되어 있는지 확인하십시오.

• 디바이더 표시: 예

색상

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

• 색상: #ffffff

간격

첫 번째 열의 텍스트 모듈을 겹치기 위해 다른 화면 크기에 따라 조정할 몇 가지 사용자 정의 여백 값을 사용할 것입니다.

• 상단 여백: 30px
• 왼쪽 여백: -200px(데스크톱 및 태블릿), 0px(전화)
• 오른쪽 여백: 200px(데스크톱 및 태블릿), 0px(전화)

열 3에 텍스트 모듈 #1 추가

콘텐츠 추가

다음 칼럼으로! 여기에서 우리가 필요로 하는 첫 번째 모듈은 제목 텍스트 모듈입니다. 계속해서 첫 번째 기능이나 제품의 제목을 추가하십시오.

제목 텍스트 설정

그런 다음 제목 텍스트 설정으로 이동하여 UI 키트 레이아웃 팩과 일치하도록 일부 변경합니다.

• 제목 3 글꼴: Muli
• 제목 3 글꼴 두께: 가벼움
• 제목 3 텍스트 색상: #ffffff
• 제목 3 텍스트 크기: 30px(데스크톱 및 태블릿), 18px(전화)

간격

이 모듈을 왼쪽으로 밀기 위해 몇 가지 사용자 정의 간격 값을 사용할 것입니다.

• 상단 여백: 20px
• 하단 여백: 20px
• 왼쪽 여백: -180px(데스크톱 및 태블릿), 0px(전화)
• 왼쪽 패딩: 20px(데스크톱 및 태블릿), 50px(전화)
• 오른쪽 패딩: 20px(데스크톱 및 태블릿), 50px(전화)

열 3에 텍스트 모듈 #2 추가

콘텐츠 추가

다음으로 필요한 모듈은 설명 텍스트 모듈입니다. 기능이나 제품에 대한 설명을 입력하세요.

텍스트 설정

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

• 텍스트 색상: rgba(255,255,255,0.5)
• 텍스트 줄 높이: 2.2em

간격

일부 사용자 정의 간격 값을 사용하여 이 모듈을 왼쪽으로도 푸시합니다.

• 왼쪽 여백: -180px(데스크톱 및 태블릿), 0px(전화)
• 왼쪽 패딩: 20px(데스크톱 및 태블릿), 50px(전화)
• 오른쪽 패딩: 20px(데스크톱 및 태블릿), 50px(전화)

3열에 버튼 모듈 복제 및 배치

열 3에서 필요한 마지막 모듈은 버튼 모듈입니다. 시간을 절약하기 위해 페이지의 기존 버튼을 복제하고 추가한 다른 두 모듈 바로 아래에 복제본을 배치합니다.

콘텐츠 변경

버튼 모듈의 내용을 변경합니다.

간격 변경

우리는 이 모듈을 왼쪽으로도 밀고 있습니다. 보시다시피 3열의 모든 모듈은 2열의 공간을 차지합니다. 이러한 접근 방식을 통해 원하는 결과와 일치하는 또 다른 열 구조를 만들 수 있습니다.

• 상단 여백: 50px
• 왼쪽 여백: -160px(데스크톱 및 태블릿), 50px(전화)
• 오른쪽 여백: 50px(전화 전용)

4열에 이미지 모듈 추가

이미지 업로드

다음 칼럼으로! 4열에 이미지 모듈을 추가하고 선택한 이미지를 업로드합니다. 이 예에서는 500×500 이미지 크기를 사용했지만 다른 이미지 크기도 자유롭게 사용할 수 있습니다.

박스 섀도우

이 모듈에 미묘한 상자 그림자를 추가하십시오.

• 그림자 색상: #ffffff

생기

그리고 무엇보다도 이미지에 슬라이드 애니메이션을 추가하십시오.

• 애니메이션 스타일: 슬라이드
• 애니메이션 방향: 왼쪽
• 애니메이션 지연: 100ms
• 애니메이션 강도: 3%

열 4에 텍스트 모듈 #1 추가

콘텐츠 추가

이미지 모듈 바로 아래에 선택한 콘텐츠가 포함된 제목 텍스트 모듈을 추가합니다.

기본 배경색

이 모듈의 배경색을 변경합니다.

• 배경색: #0f0f0f

호버 배경색

그리고 호버에서 다른 배경색을 사용하십시오.

• 배경색: #593aff

제목 텍스트 설정

UI Kit 랜딩 페이지와 일치하도록 제목 텍스트 설정을 변경하여 계속하십시오.

• 제목 4 글꼴: Muli
• 제목 4 글꼴 두께: 가벼움
• 제목 4 텍스트 색상: #ffffff
• 제목 4 텍스트 크기: 23px(데스크톱 및 태블릿), 18px(전화)

기본 간격

다음에 몇 가지 사용자 정의 간격 값을 추가하십시오.

• 상단 패딩: 50px
• 왼쪽 패딩: 30px
• 오른쪽 패딩: 30px

호버 간격

그리고 호버에서 이러한 값을 변경하여 멋진 전환을 만듭니다.

• 하단 여백: 50px
• 상단 패딩: 20px
• 하단 패딩: 20px

열 4에 텍스트 모듈 #2 추가

콘텐츠 추가

4열에 필요한 두 번째이자 마지막 모듈은 설명 텍스트 모듈입니다. 선택한 내용을 입력합니다.

배경색

다음으로 배경색을 변경합니다.

• 배경색: #0f0f0f

텍스트 설정

그리고 텍스트 설정을 수정합니다.

• 텍스트 색상: rgba(255,255,255,0.5)
• 텍스트 줄 높이: 2.2em

간격

깔끔한 모양과 느낌을 만들려면 이 모듈에 맞춤 패딩을 추가하세요.

• 하단 패딩: 50px
• 왼쪽 패딩: 30px
• 오른쪽 패딩: 30px

국경

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

열 4의 모든 모듈을 두 번 복제하고 나머지 열에 배치

이미지 및 콘텐츠 변경

이제 열 4에 필요한 모든 모듈이 있으므로 이 모든 모듈을 두 번 복제하고 나머지 두 열에 복제본을 배치할 수 있습니다. 콘텐츠와 이미지를 변경하여 다양하게 만듭니다.

원하는 만큼 Row 복제(목록 항목 수에 따라)

첫 번째 목록 항목을 완료했습니다! 이제 표시하려는 기능 및/또는 제품의 수에 따라 원하는 만큼 이 행을 복제할 수 있습니다.

클론 내용 변경

각 복제본에 대해 콘텐츠를 변경해야 합니다.

색상 찾기 및 바꾸기

Divi의 찾기 및 바꾸기 기능을 사용하여 목록 항목의 색상 팔레트를 빠르게 변경할 수도 있습니다.

호버 배경색 변경

색상 팔레트를 변경한 후에는 숫자 텍스트 모듈의 호버 배경색도 변경해야 합니다.

• 배경색: #593aff

배경 이미지 변경

마지막으로 표시할 기능 및/또는 제품에 따라 목록에서 다른 아이콘을 선택할 수도 있습니다.

마지막 생각들

이 사용 사례는 블랙 프라이데이 고객 및 평생 회원과 6개의 무료 한정판 방문 페이지를 공유하는 블랙 프라이데이 거래의 일부입니다. 이 기간 동안 강력한 커뮤니티에 가입하고 회원이 되면 다음을 얻을 수 있습니다.

• 모든 제품 25% 할인
• 6개의 랜딩 페이지 모두 무료
• 멋진 테마 및 플러그인에 대한 액세스
• 보너스 상품

지금 기회를 잡고 회원이 되십시오!