Divi로 결혼식을 위한 선물 목록 페이지를 만드는 방법

게시 됨: 2017-05-18

이 게시물은 미니시리즈 Divi로 우아한 웨딩 웹사이트를 만드는 방법의 5/3 부분입니다. 이 시리즈에서는 Divi를 사용하여 자신 또는 고객을 위한 웨딩 웹사이트를 만드는 데 가장 중요한 부분을 안내합니다.

미니 시리즈의 처음 두 부분에서는 Divi로 우아한 결혼 발표 페이지와 갤러리 페이지를 만드는 방법을 보여 주었습니다. 이 세 번째 부분은 결혼식 웹사이트 내에서 선물 목록 페이지를 만드는 데 전념할 것입니다.

Divi의 Visual Builder로 다음 레이아웃을 만드는 방법을 단계별로 보여드리겠습니다.

레이아웃에는 5개의 섹션이 있으며 각 섹션은 전체에 고유한 가치를 제공합니다. 첫 번째 내용에 대해 알아보자!

영웅 섹션

영웅 섹션은 정말 단순하지만 이것이 바로 우리가 이 미니시리즈에서 찾고 있는 것입니다. 단순함과 우아함. 우리는 이전 두 개의 웨딩 튜토리얼에서와 동일한 색상 팔레트를 사용하고 있으므로 따라하고 있다면 이미 만들기 시작한 웨딩 웹사이트에 이 페이지를 쉽게 추가할 수 있습니다.

시작하다

WordPress 웹 사이트에 새 페이지를 추가하고 이름을 지정하여 시작하십시오. 그 후 Divi Builder를 활성화하고 바로 Visual Builder로 이동하십시오.

방금 만든 페이지에 새 섹션을 추가합니다. 섹션 설정을 열고 콘텐츠 탭의 배경 하위 범주에서 배경 이미지를 변경합니다. 이 예에서는 추가 효과를 주기 위해 섹션의 배경에 대칭 이미지를 사용했습니다.

섹션에 전폭 행을 추가하여 계속하십시오. 행의 설정을 열고 Content 탭의 Background 하위 범주에서 Background Color를 'rgba(122,122,122,0.56)'로 변경합니다.

계속해서 디자인 탭으로 이동합니다. 크기 조정 하위 범주를 열고 행을 전체 너비로 만든 다음 거터 너비에 '1'을 입력합니다.

아래로 스크롤하여 간격 하위 범주를 엽니다. 데스크톱의 경우 상단 및 하단 패딩에 '200px'를 추가하고 태블릿 및 휴대폰의 경우 상단 및 하단 패딩에 '150px'를 추가해야 합니다.

동일한 하위 범주에서 태블릿 및 휴대폰의 상단 및 하단 여백에 '-50px'를 추가합니다.

첫 번째 텍스트 모듈

계속해서 행에 새 텍스트 모듈을 추가하십시오. 콘텐츠 탭의 텍스트 하위 범주에 텍스트를 추가합니다. 그런 다음 디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 변경합니다.

텍스트 방향: 중앙
텍스트 글꼴: 귤
텍스트 글꼴 크기: 100(데스크톱 및 태블릿), 68(전화)
텍스트 색상: #fffaf6
텍스트 줄 높이: 1.5em

두 번째 텍스트 모듈

바로 아래에 다른 텍스트 모듈을 만듭니다. 콘텐츠 탭으로 이동하여 텍스트 하위 범주에 텍스트를 입력합니다. 그런 다음 디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 변경합니다.

텍스트 방향: 중앙
텍스트 글꼴: 레일웨이 라이트
텍스트 글꼴 스타일: 굵게
텍스트 글꼴 크기: 20px(데스크톱), 14px(태블릿 및 휴대폰)
텍스트 색상: #fffaf6
텍스트 줄 높이: 1.5em

헤더는 지금까지 다음과 같아야 합니다.

소개 섹션

이 레이아웃에서 우리는 사람들에게 선택권을 주고 싶습니다. 그들은 신부, 신랑 또는 둘 모두를 위해 무언가를 사고 싶은지 여부를 선택할 수 있습니다.

새 섹션을 만들고 열이 하나 있는 행을 추가하는 것으로 시작합니다. 콘텐츠 탭의 배경 하위 카테고리에서 배경색을 '#fffaf6'으로 변경합니다. 그런 다음 행 설정을 열고 디자인 탭으로 이동합니다. 데스크탑의 경우에만 상단 및 하단 여백에 '5%'를 추가합니다.

섹션 제목

이 행에서. 우리가 추가해야 할 유일한 것은 텍스트 모듈입니다. 콘텐츠 탭의 텍스트 하위 범주에 표시할 제목을 입력합니다. 디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 변경합니다.

텍스트 방향: 중앙
텍스트 글꼴: 귤
텍스트 글꼴 스타일: 굵게
텍스트 글꼴 크기: 60px(데스크톱), 50px(태블릿 및 휴대폰)
텍스트 색상: #9b857b
텍스트 줄 높이: 1.7em

이제 Sizing 하위 범주를 열고 Max Width를 '500px'로 변경합니다.

계속해서 동일한 탭에서 Spacing 하위 범주를 열고 상단 및 하단 패딩에 '3%'를 추가합니다.

다음으로 고급 탭으로 이동하여 사용자 정의 CSS 하위 범주의 기본 요소에 다음 코드를 추가합니다.

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

이제 동일한 섹션에 하나의 열이 있는 다른 행을 추가합니다. 이 행의 설정에서 아무것도 변경할 필요가 없습니다.

이미지 모듈

행에 이미지 모듈을 추가하고 콘텐츠 탭의 이미지 하위 범주에 이미지를 업로드합니다. 그런 다음 디자인 탭으로 이동하여 이미지 아래 공간을 제거하고 이미지 정렬에서 '중앙'을 선택하고 모바일에서는 항상 이미지를 중앙에 배치합니다.

다음으로 고급 탭으로 이동하여 사용자 정의 CSS 하위 범주 내의 기본 요소 필드에 다음 코드를 추가합니다.

height: 100px;
width: 150px;

첫 번째 텍스트 모듈

이미지 모듈에서 섹션의 첫 번째 텍스트 모듈을 추가합니다. 콘텐츠 탭의 텍스트 하위 범주에 있는 텍스트 상자에 텍스트를 입력하고 디자인 탭으로 이동합니다. 텍스트 하위 범주 내에서 다음과 같이 조정합니다.

텍스트 방향: 중앙
텍스트 글꼴: 레일웨이 라이트
텍스트 글꼴 크기: 24px
텍스트 색상: #9b857b
텍스트 줄 높이: 1.5em

동일한 탭을 아래로 스크롤하고 Spacing 하위 범주 내의 상단 여백에 '30px'를 추가합니다.

마지막으로 동일한 텍스트 모듈의 고급 탭으로 이동하여 사용자 정의 CSS 하위 범주 내의 기본 요소에 다음 코드를 추가합니다.

font-weight:400;

두 번째 텍스트 모듈

섹션에 다른 텍스트 모듈을 추가하고 콘텐츠 탭의 텍스트 하위 범주에 있는 텍스트 상자에 텍스트를 입력합니다. 그런 다음 디자인 탭으로 이동하여 다음과 같이 수정합니다.

텍스트 방향: 중앙
텍스트 글꼴: 레일웨이 라이트
텍스트 글꼴 스타일: 굵게
텍스트 글꼴 크기: 16px
텍스트 색상: #9b857b
텍스트 줄 높이: 1.5em

동일한 탭을 아래로 스크롤하고 크기 조정 하위 범주 내에서 최대 너비를 '300px'로 변경합니다. Spacing 하위 범주에서도 상단 여백을 '5%'로 변경합니다.

다음으로 고급 탭으로 이동하여 사용자 정의 CSS 하위 범주 내의 기본 요소에 다음 코드를 추가합니다.

font-weight: 300;

클론 이미지 모듈 및 텍스트 모듈

다른 행을 추가하되 이번에는 열이 세 개 있는 동일한 섹션에 추가합니다.

행의 첫 번째 열과 마지막 열에는 이전 행과 동일한 모듈이 필요합니다. 하나의 이미지 모듈과 두 개의 텍스트 모듈. 이 모듈은 이전에 만든 것과 동일한 설정을 가져야 하므로 우리가 할 일은 복제하는 것뿐입니다. 각 모듈을 두 번 복제한 후 새 행의 왼쪽과 오른쪽 열에 넣고 이미지와 텍스트를 변경합니다.

다음으로, 행의 디자인 탭으로 이동하여 간격 하위 범주 내의 아래쪽 여백에 '5%'를 추가합니다.

신부 이미지 모듈

이제 행의 두 번째 열에 이미지 모듈을 추가합니다. 이미지를 업로드하고 디자인 탭으로 이동합니다. 이미지 정렬을 '왼쪽'으로 설정하고 정렬 하위 범주 내에서 '모바일에서 항상 중앙 이미지' 옵션을 활성화했는지 확인하십시오.

동일한 탭을 아래로 스크롤하고 Spacing 하위 범주 내의 상단 여백에 '5%'를 추가합니다.

그런 다음 고급 탭으로 이동하여 사용자 정의 CSS 하위 범주 내의 기본 요소에 다음 코드를 추가합니다.

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

마지막으로 휴대폰 및 태블릿에서 이미지 모듈을 비활성화합니다.

신랑의 이미지 모듈

이전 이미지 모듈을 복제하고 이전 이미지 모듈과 동일한 열에 배치합니다. 업로드한 이미지를 변경하고 디자인 탭으로 이동합니다. 정렬 하위 범주를 열고 이미지 정렬을 '오른쪽'으로 변경합니다.

또한 Spacing 하위 범주 내에서 Top Margin을 '-60%'로 조정합니다.

이제 레이아웃의 선물 목록 섹션으로 이동할 수 있습니다. 지금까지 레이아웃은 다음과 같아야 합니다.

위시리스트/선물리스트

새 표준 섹션을 추가하고 콘텐츠 탭의 배경 하위 범주에서 배경색을 '#fae4de'로 변경합니다.

텍스트 모듈: 제목

섹션에 전체 너비 행을 추가하고 전체 너비로 만듭니다. 그런 다음 두 번째 섹션에서 만든 Text Module을 복제하여 이 Row Module에 배치합니다. 텍스트 게시물의 텍스트를 변경하고 Advanced의 Custom CSS 하위 범주 내 Main Element 필드에서 배경색을 '#fffaf6'으로 변경합니다. 탭.

선물 목록/위시리스트: 슬라이더 모듈 사용

섹션에 3개의 열이 있는 새 행을 추가하고 디자인 탭의 크기 조정 하위 범주 내에서 사용자 정의 너비 '65%'를 변경합니다. 계속해서 첫 번째 행에 텍스트 모듈을 추가하고 디자인 탭의 텍스트 하위 범주를 다음과 같이 조정합니다.

텍스트 방향: 중앙
텍스트 글꼴: 레일웨이 라이트
텍스트 글꼴 스타일: 굵게
텍스트 글꼴 크기: 24px
텍스트 색상: #9b857b
텍스트 줄 높이: 1.5em

동일한 탭을 아래로 스크롤하고 Spacing 하위 범주 내의 상단 여백에 '30px'를 추가합니다.

이제 텍스트 모듈을 두 번 복제하고 각 열에 하나씩 넣습니다.

다음으로 슬라이더 모듈을 추가합니다. 슬라이더의 고급 탭으로 이동하여 사용자 정의 CSS 하위 범주 내의 기본 요소에 다음 코드를 추가합니다.

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

계속해서 새 슬라이드를 추가하십시오. 슬라이드 내에서 콘텐츠 탭의 배경 하위 범주에 있는 선물 목록에 넣을 항목 중 하나의 배경 이미지를 업로드합니다. 그런 다음 동일한 탭의 텍스트 하위 범주에 항목 이름과 버튼 텍스트를 입력합니다. 링크 하위 범주에서도 URL을 변경합니다. 하나의 범주에 필요한 만큼 슬라이드를 추가하고 같은 작업을 반복합니다.

계속해서 새 행을 추가하되 이제 열이 2개뿐입니다.

디자인 탭의 크기 조정 하위 범주 내에서 사용자 정의 너비를 '55%'로 변경하고 간격 하위 범주 내에서 아래쪽 여백을 '5%'로 변경합니다.

이전 행 모듈에서 만든 텍스트 모듈과 슬라이더 모듈은 다른 모든 텍스트 모듈과 슬라이더에 필요한 것과 동일한 설정을 가지고 있습니다. 계속해서 두 가지를 모두 네 번 복제하고 각 행 모듈의 나머지 열에 배치하십시오.

이제 레이아웃이 다음과 같아야 합니다.

문의 양식(데스크탑)

레이아웃에 있는 연락처 양식의 목적은 사람들이 커플을 위해 어떤 선물을 구매하는지 전달할 수 있도록 하는 것입니다. 선물을 받는 즉시 웹사이트에서 다른 선물로 교체할 수 있습니다. 그렇게 하면 두 명의 손님이 같은 선물을 가져갈 가능성이 줄어듭니다.

새 표준 섹션을 만들고 콘텐츠 탭의 배경 하위 범주에서 배경색을 #fffaf6으로 변경합니다.

첫번째 줄

이 섹션에서 필요한 행은 다른 섹션에서와 동일합니다. 텍스트 모듈이 있는 이전에 사용한 행 모듈을 복제하고 섹션 내에 배치하기만 하면 됩니다. 텍스트 모듈 설정을 약간 수정하기만 하면 됩니다. Main Element의 텍스트와 배경색을 #fae4de로 변경합니다.

두 번째 행

이제 두 개의 열이 있는 행을 추가하고 고급 탭의 가시성 하위 범주 내에서 태블릿 및 휴대폰의 행을 숨깁니다. 첫 번째 열에 Contact Form Module을 넣고 Design 탭의 다른 하위 범주를 다음과 같이 변경합니다.

양식 필드 텍스트:

양식 필드 글꼴: Raleway Light
양식 필드 글꼴 크기: 18px
양식 필드 텍스트 색상: #9b857b
양식 필드 라인 높이: 1.7em

국경:

입력 테두리 반경: 15
테두리 사용: 예
테두리 색상: #d7dce1
테두리 너비: 1px
테두리 스타일: 단색

단추:

버튼 텍스트 크기: 15
버튼 텍스트 크기: 15
버튼 텍스트 색상: #fffaf6
버튼 배경색: #9b857b
버튼 테두리 너비: 9
버튼 테두리 색상: #9b857b
버튼 테두리 반경: 4

연락처 양식 모듈의 콘텐츠 탭에서 이제 세 개의 필드를 추가할 수 있습니다. 이름, 이메일 및 메시지.

수동으로 각 필드의 배경색을 #fae4de로 변경합니다.

마지막으로 두 번째 열에 텍스트 모듈을 추가하여 게스트에게 프로세스에 대해 알릴 것입니다. 디자인 탭으로 이동하여 텍스트 범주를 다음과 같이 변경합니다.

텍스트 방향: 중앙
텍스트 글꼴: 레일웨이 라이트
Tet 글꼴 스타일: 굵게
텍스트 글꼴 크기: 16
텍스트 색상: #9b857b
편지 줄 높이: 1.5em

동일한 탭을 아래로 스크롤하고 크기 조정 하위 범주 내의 최대 너비에 '300픽셀'을 추가합니다.

마지막으로 Spacing 하위 범주 내 상단 여백에 '5px'를 입력합니다.

문의 양식(태블릿 및 전화)

이전에 만든 행을 복제하고 Contact Form Module과 Text Module이 위치(및 열)를 전환하도록 합니다. 고급 탭으로 이동하여 데스크톱 행을 숨깁니다.

이제 레이아웃이 다음과 같아야 합니다.

이 미니 시리즈의 네 번째 파트에서는 Divi와 자동 평가로 결혼식을 위한 온라인 방명록을 만드는 방법을 보여 드리겠습니다. 이 튜토리얼에 대한 의견이 있거나 향후 튜토리얼에 대한 요청이 있는 경우 이 블로그 게시물의 댓글 섹션에 댓글을 남겨주시면 답변을 드리겠습니다!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!