Divi로 결혼 발표 홈페이지를 만드는 방법

게시 됨: 2017-05-16

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

결혼 발표 페이지를 설정하는 것은 하객들에게 당신이 결혼한다는 사실을 알리는 창의적인 방법입니다. 웹사이트 URL을 제공하면 계속 연락할 것입니다. 그들은 또한 원할 때마다 온라인으로 결혼식 세부 사항을 볼 수 있습니다.

단계별로 구축하는 데 도움이 될 홈페이지 레이아웃을 살펴보겠습니다.

탐색 메뉴 만들기

웨딩 웹사이트의 공지 페이지, 갤러리 페이지 및 선물 목록 페이지를 만드는 방법을 정확히 알려 드리겠습니다. 이 첫 번째 게시물은 공지 페이지를 만들기 위한 것입니다. 그러나 우리가 거기에 가기 전에 손님이 웹 사이트를 원활하게 찾을 수 있는지 확인하고 싶습니다.

그렇기 때문에 먼저 적절하고 우아한 탐색 메뉴를 만들어야 합니다.

Divi > 테마 옵션 > 으로 이동하여 시작하여 전체 웹사이트에서 사용 하려는 로고 를 업로드 하세요.

변경 사항 저장을 클릭하고 WordPress 웹 사이트의 페이지로 이동하십시오. 공지 사항 페이지를 만들 새 페이지를 추가합니다. 다음 게시물에서 만드는 방법을 보여줄 갤러리 페이지와 선물 목록 페이지에 대해 동일한 작업을 수행합니다.

지금은 콘텐츠를 비워두고 웹 사이트의 테마 사용자 지정 프로그램으로 이동하여 탐색 메뉴를 수정하겠습니다. 메뉴 > 메뉴 추가 > 메뉴에 페이지 추가로 이동하여 웹사이트 페이지를 메뉴에 추가하는 것으로 시작하십시오 . 이 메뉴는 웹사이트의 기본 메뉴여야 합니다.

그런 다음 헤더 및 탐색 > 기본 메뉴 모음으로 이동하여 다음과 같이 변경합니다.

메뉴 높이: 66
이미지 크기에 따라 로고 최대 높이 조정
텍스트 크기: 16
문자 간격: 2
글꼴: 레일웨이 라이트
글꼴 스타일: 굵게
텍스트 색상: #9b7461
배경색: rgba(155,116,97,0.13)

이제 헤더 및 탐색으로 돌아가서 헤더 형식 내에서 헤더 스타일을 '중앙'으로 변경합니다.

변경 사항을 저장하고 게시합니다.

발표 페이지에서 시작하기

웹사이트에는 4개의 섹션이 있으며 각 섹션은 웹사이트에 가치를 부여하여 결혼 발표를 완성합니다. 각 섹션에 대해 자세히 설명하고 위에 표시된 레이아웃과 동일한 디자인을 정확히 만들 수 있는 방법을 보여 드리겠습니다.

영웅 섹션(카운트다운 포함)

디자인의 첫 번째 부분은 헤더입니다. 카운트다운 모듈을 넣어 하객들이 웹사이트와 결혼식과 즉각적으로 상호작용하는 듯한 느낌을 주기로 했습니다. Divi 빌더 내에서 헤더 섹션은 다음과 같습니다.

우리는 웹사이트의 이 부분에서 전체 너비 방식으로 전체 한 행이 있는 표준 섹션을 사용할 것입니다. 행 섹션에서 세 개의 모듈을 추가해야 합니다. 두 개의 텍스트 모듈 과 하나의 카운트다운 모듈. 카운트다운 모듈은 두 텍스트 모듈의 중간에 있습니다.

첫 번째 텍스트 모듈 시작하기

행에 텍스트 모듈을 추가하여 시작하십시오. 사용하려는 텍스트를 작성하고 텍스트 방향을 '중앙'으로 변경한 후 고급 디자인 설정 탭에 다음 변경 사항을 적용합니다.

텍스트 글꼴 크기: 100px(데스크톱), 80px(태블릿), 66px(전화)
텍스트 글꼴: 귤
텍스트 색상: #9b857b

같은 탭에서 아래로 스크롤하여 상단에 '10%'를 추가하고 하단에 '5%'를 추가하여 텍스트 모듈의 여백을 변경합니다.

저장 및 종료를 클릭합니다.

카운팅 모듈(데스크탑)

방금 만든 텍스트 모듈 아래에 카운트다운 모듈을 추가합니다. 일반 설정 탭에서 결혼식 날짜와 시간을 추가하고 배경색을 '#fae4de'로 변경합니다. 이 카운트다운은 데스크톱에서만 사용하고 태블릿과 휴대폰에서는 비활성화합니다.

고급 디자인 설정으로 이동하여 다음과 같이 변경합니다.

숫자 글꼴: 귤
숫자 글꼴 크기: 74px
숫자 글꼴 색상: #9b857b
숫자 줄 높이: 70px
레이블 글꼴: Raleway Light
레이블 글꼴 크기: 14px
레이블 텍스트 색상: #9b857b
라벨 라인 높이: 25px

같은 탭에서 맨 아래로 스크롤하여 Top Custom Padding을 '10%'로 조정하고 Bottom Custom Padding을 '10%'로 조정합니다.

다음으로 세 번째 Custom CSS 탭으로 이동하여 다음 코드를 기본 요소에 추가합니다.

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

이제 카운트다운이 위에서 보여드린 레이아웃 이미지와 똑같이 표시됩니다.

카운트다운 모듈(태블릿 및 휴대폰)

이제 이전에 만든 카운트다운을 복제하고 데스크톱(태블릿 및 전화 대신)에서 비활성화합니다. 그런 다음 모듈을 다음과 같이 변경합니다.

숫자 글꼴 크기: 72px(태블릿 및 휴대폰 모두)
숫자 줄 높이: 70px
라벨 글꼴 크기: 14px(태블릿), 12px(휴대폰)

CSS 탭의 Main Element에 있는 코드를 다음과 같이 변경합니다.

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

두 번째 텍스트 모듈

이제 카운트다운 모듈 아래에 다른 텍스트 모듈을 추가합니다. 일반 설정 탭에서 텍스트 방향을 '중앙'으로 변경합니다. 신랑과 신부의 이름을 추가하고 고급 디자인 설정 탭으로 이동하여 계속하십시오.

고급 디자인 설정에서 다음과 같이 변경합니다.

텍스트 글꼴: 귤
텍스트 글꼴 크기: 50px
텍스트 색상: #9b857b
텍스트 줄 높이: 1.7em

고급 디자인 설정 탭에서 사용자 지정 여백으로 계속 스크롤하고 상단 여백에 '10%'를 추가합니다.

분할기

이 영웅 섹션의 마지막 부분은 디바이더입니다. 구분선을 추가하고 일반 탭의 색상을 '#9b857b'로 변경합니다. 디바이더도 '보이게' 설정해야 합니다.

다음으로 디자인 탭으로 이동하여 Divider Style을 'Solid'로, Divider Position을 'Top'으로 설정하고, Divider weight를 '1px'로 변경하여 모바일에서 숨깁니다.

CSS 탭으로 이동하여 다음 코드를 기본 요소에 추가합니다.

margin-left: auto;
margin-right: auto;
width: 30%;

저장 및 종료를 클릭합니다. 다음과 같은 웹사이트의 첫 번째 섹션을 완료했습니다.

이제 이 레이아웃의 두 번째 부분으로 이동하여 게스트에게 자신의 이야기를 전할 수 있습니다.

스토리텔링 발표: 두 번째 섹션

이 두 번째 섹션에는 웨딩 홈페이지의 한 부분을 구성하는 두 개의 대칭 행이 있습니다. 이 부분은 너비가 약간 작아 웹사이트에 대한 원근감이 조금 더 커집니다.

섹션의 첫 번째 행

표준 섹션을 만들어 시작하고 배경색을 '#fffaf6'으로 변경하고 하단 패딩에 '5%'를 추가합니다. 다음으로 이 섹션에 2열 행을 추가합니다.

다음으로 행 설정을 엽니다. 일반 설정에서 사용자 정의 너비를 사용하려면 '예'를 선택하고 단위를 백분율로 변경하고 '90%'를 입력합니다. 같은 탭에서 아래로 스크롤하여 거터 너비를 활성화하고 휴대폰 및 태블릿에 대해 숨깁니다.

그런 다음 고급 디자인 설정 탭으로 이동하여 열 높이를 균등화하고 첫 번째 열의 배경색으로 '#9b857b'를 추가합니다. 동일한 탭에서 열 1 패딩을 '5%' 위쪽, '10%' 오른쪽, '5%' 아래쪽 및 '10%' 왼쪽으로 변경합니다.

두 번째 열의 경우 배경색을 설정할 필요가 없지만 대신 배경 이미지를 업로드합니다.

텍스트 모듈

이제 행의 첫 번째 열에 텍스트 모듈을 추가합니다. 일반 설정 탭에서 텍스트 방향을 '중앙'에 놓고 텍스트 상자에 공유할 텍스트를 입력합니다. 그런 다음 고급 디자인 설정 탭으로 이동합니다.

고급 디자인 설정 탭에서 다음과 같이 변경합니다.

최대 너비: 500px(데스크톱 전용)
텍스트 글꼴: 귤
텍스트 글꼴 크기: 44
텍스트 색상: #fffaf6

그리고 하단 패딩에 5%를 추가합니다.

저장 및 종료를 누르고 다른 텍스트 모듈을 추가하십시오. 텍스트 방향을 '정렬'로 만듭니다. 디자인 설정에서 텍스트 모듈을 다음과 같이 변경하여 계속하십시오.

최대 너비: 500px
텍스트 글꼴 크기: 14px
텍스트 글꼴: 레일웨이 라이트
글꼴 스타일: 굵게
텍스트 글꼴 색상: #fffaf6
텍스트 줄 높이: 1.7em

저장 및 종료를 누릅니다.

이전 행 복제

이제 방금 생성한 행을 복제합니다. 복제된 행은 방금 생성한 행 아래에 자동으로 배치됩니다. 그러나 이 경우 모듈이 반대쪽에 있어야 합니다. 첫 번째 열 대신 두 번째 열에 두 개의 텍스트 모듈을 배치합니다.

그런 다음 행 설정을 열고 첫 번째 열에 배경 이미지를 추가합니다. 첫 번째 열 패딩에서 만든 모든 패딩 설정을 삭제하고 두 번째 열 패딩에 배치합니다.

저장 및 종료를 누르면 바로 사용할 수 있습니다.

전화 및 태블릿용 행

또 다른 2열 행을 만들고 데스크탑용으로 숨깁니다. 행을 전체 너비로 만들고 여백 너비를 '3'으로 변경합니다.

그런 다음 디자인 탭으로 이동하여 두 열의 배경 이미지를 업로드하고 두 열의 사용자 지정 패딩을 다음과 같이 변경합니다.

상위: 5%
오른쪽: 10%
하단: 5%
왼쪽: 10%

이 두 번째 섹션을 추가한 후 레이아웃은 현재 다음과 같아야 합니다.

베스트맨, 메이드 오브 아너, 신랑 들러리

당신의 결혼식 웹사이트에 당신의 인생에서 가장 중요한 사람들을 배치하지 않으시겠습니까? 최고의 남자, 하녀, 신부 들러리 및 신랑 들러리를 제공하는 것은 귀하의 웹 사이트에 약간의 추가 향상을 줄 수 있습니다.

이 부분을 사이트에 추가하려면 먼저 페이지에 새 표준 섹션을 추가하십시오. 해당 새 섹션 내에서 서로 다른 열과 모듈이 있는 세 개의 행을 만들어야 합니다.

이제 표준 섹션인 섹션을 생성했으면 배경색 '#fae4de'를 지정합니다. 섹션 설정에서 다른 것을 변경할 필요가 없으므로 저장 및 종료를 누를 수 있습니다.

텍스트 모듈 만들기

다음으로 첫 번째 전각 행을 만듭니다. 거기에 넣어야 할 유일한 것은 텍스트 모듈입니다. 텍스트 모듈을 열고 텍스트 상자를 채우고 텍스트 방향 필드에서 '가운데'를 선택하십시오.

그런 다음 고급 디자인 설정으로 이동하여 텍스트 글꼴을 'Tangerine'으로, 텍스트 글꼴 크기를 '100px'(데스크톱 및 태블릿) 및 '68%'(전화)로, 텍스트 글꼴 색상을 '#9b857b'로 설정합니다. 같은 탭을 아래로 스크롤하여 여백을 위쪽 '10%' 및 아래쪽 '5%'로 변경합니다.

저장 및 종료를 클릭합니다. 이제 첫 번째 모듈과 행이 완료되었습니다.

이 경우 두 개의 열이 있는 다른 행을 추가하고 위쪽 및 아래쪽 여백에 5%를 추가합니다. 다음으로, 행의 첫 번째 열에 person 모듈을 추가합니다.

이미지 및 사람 모듈

계속해서 사람 모듈의 설정을 엽니다. 이미지를 업로드하고 필드에 소셜 미디어 채널의 URL을 입력하고 텍스트 상자에 이에 대한 약간을 씁니다. 이미지의 크기가 어느 정도인지 잘 모르겠다면 이 블로그 게시물을 살펴보세요.

그런 다음 고급 디자인 설정으로 이동하여 다음과 같이 조정합니다.

헤더 글꼴: Raleway Light
헤더 글꼴 스타일: 굵게
헤더 글꼴 크기: 14
헤더 텍스트 색상: #9b857b
헤더 라인 높이: 1em
본문 글꼴: Raleway Light
본문 글꼴 스타일: 굵게
본문 글꼴 크기: 14
본문 색상: #9b857b
바디 라인 높이: 1.7em

person 모듈의 설정을 열고 CSS 탭으로 이동합니다. 멤버 이미지 필드에 다음 코드를 추가합니다.

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

이제 Image 및 Person 모듈을 모두 복제하여 오른쪽 열에 넣습니다.

계속해서 4개의 열이 있는 새 행을 추가하고 Image and Person 모듈을 다시(4번) 복제하여 각 열에 넣습니다. 처음 사용한 코드와 설정이 모두 적용됩니다.

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

언제 어디서

청중에게 결혼식 장소와 시간을 알리는 결혼식 홈페이지의 마지막 부분입니다. 이 섹션에서는 배경색이 '#fffaf6'인 3개의 열(1/2, 1/4, 1/4)이 있는 행이 필요합니다.

지도 추가

이 섹션의 첫 번째 열에 지도 모듈을 추가합니다. 지도 기능을 사용하려면 Google API 키를 입력해야 합니다. API 키가 없는 경우 여기에서 만드는 방법을 읽어보세요. 결혼식 주소를 입력하고 모듈이 위치를 찾도록 합니다. 지도에 핀을 만들려면 새 핀을 추가하고 위치를 다시 입력하면 핀이 지도에 표시됩니다.

다른 열에서는 텍스트 모듈과 문구를 사용할 것입니다. 텍스트 모듈을 추가하고 일반 설정에서 텍스트 방향 설정을 '중앙'으로 설정합니다. 그런 다음 고급 디자인 설정으로 이동하여 다음과 같이 변경합니다.

텍스트 글꼴: 귤
텍스트 글꼴 크기: 50px
텍스트 색상: #9b857b
텍스트 줄 높이: 1.7em

이 텍스트 모듈의 설정은 두 열의 텍스트 모듈에 모두 적용됩니다.

블러브 모듈

텍스트 모듈 아래에 Blurb 모듈을 추가하십시오. 위치 아이콘을 선택하고 색상을 '#f9c8b8'로 변경하고 텍스트 상자에 위치를 추가하고 텍스트 방향을 '중앙'으로 변경합니다. 그런 다음 고급 디자인 설정으로 이동하여 다음과 같이 변경합니다.

아이콘 글꼴 크기: 42px
본문 글꼴: Raleway Light
글꼴 스타일: 굵게
본문 글꼴 크기: 14
본문 색상: #9b857b
바디 라인 높이: 1em

다음 열에서 똑같은 작업을 수행합니다. 광고 아이콘만 시계로 변경하고 텍스트 상자에 '언제' 세부정보를 추가하세요.

그게 다야 이제 레이아웃이 이 튜토리얼의 레이아웃처럼 매끄럽게 보일 것입니다.

이 미니시리즈의 두 번째 부분에서는 결혼식 후 하객들과 사진을 공유하는 전용 갤러리 페이지를 만드는 방법을 알아보겠습니다. 이 튜토리얼에 대한 의견이 있거나 향후 튜토리얼에 대한 요청이 있는 경우 이 블로그 게시물의 댓글 섹션에 댓글을 남겨주시면 답변을 드리겠습니다!

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