Divi로 웨딩 갤러리 페이지를 만드는 방법
게시 됨: 2017-05-17이 게시물은 Divi로 우아한 결혼식 웹사이트를 만드는 방법 미니시리즈의 5부 중 2부 입니다. 이 시리즈에서는 Divi를 사용하여 자신 또는 고객을 위한 웨딩 웹사이트를 만드는 데 가장 중요한 부분을 안내합니다.
미니시리즈 1부에서는 우아한 결혼 발표 페이지를 만드는 방법을 보여 드렸습니다. 이 두 번째 부분은 웨딩 웹사이트 내에 갤러리 페이지를 만드는 데 전념할 것입니다. 갤러리 페이지는 결혼식 공지 페이지와 동일한 스타일로 되어 있어 많은 변경 없이 동일한 웹사이트에서 둘 다 사용할 수 있습니다.
Divi의 시각적 빌더를 사용하여 다음 레이아웃을 만드는 방법을 단계별로 보여 드리겠습니다.
이 레이아웃은 대화형의 아름다운 갤러리 페이지를 만드는 데 도움이 되는 6개의 섹션으로 구성되어 있습니다.
영웅 섹션
우리는 너무 복잡해 보이지 않는 매우 단순한 헤더를 사용하기로 결정했습니다. 갤러리 페이지에는 이미 많은 이미지가 있으며 사람들이 그것에 집중하기를 바랍니다. 간단한 영웅 섹션을 사용하면 방문자가 페이지 시작 부분의 시각적 요소에 너무 산만하지 않고 페이지의 본질을 더 쉽게 찾을 수 있습니다.
페이지 만들기
Divi 빌더를 사용하여 페이지를 생성하고 Visual Builder로 전환하십시오.
새 페이지에 자동으로 하나의 섹션이 이미 있는 것을 볼 수 있습니다. 해당 섹션에는 전체 너비 행이 포함되어 있습니다. 이 섹션의 첫 번째 부분에는 전체 너비 행이 필요하므로 계속 사용하십시오.
방금 만든 섹션의 설정을 열고 콘텐츠 탭에서 배경 하위 범주를 엽니다. 그런 다음 배경색을 '#fffaf6'으로 변경합니다.
텍스트 모듈
계속해서 행의 전체 너비 열에 텍스트 모듈을 추가합니다. 콘텐츠 탭의 텍스트 상자에 텍스트를 입력하고 디자인 탭으로 이동합니다.
디자인 탭에서 텍스트 하위 범주를 선택하여 콘텐츠 디자인 편집을 시작합니다. 생성한 레이아웃의 경우 텍스트 모듈의 텍스트 하위 범주를 다음과 같이 조정해야 합니다.
- 텍스트 방향: 중앙
- 텍스트 글꼴: 귤
- 텍스트 글꼴 크기: 90p(데스크톱), 80(태블릿), 66(전화)
- 텍스트 색상: #9b857b
- 텍스트 줄 높이: 1.7em
아래로 스크롤하여 변경할 다른 옵션을 찾고 싶지 않다면 검색 옵션을 사용할 수도 있습니다. 이 옵션을 사용하면 많은 노력을 기울이지 않고도 생산성을 높이고 즉시 변경할 수 있습니다. 아래 예에서는 단순히 '텍스트 글꼴'이라는 용어를 검색하고 있으며 옵션이 바로 나타나는 것을 볼 수 있습니다.
저장 및 종료를 클릭합니다.
신랑신부
계속해서 신부와 신랑의 두 개의 개별 이미지가 있는 섹션을 만들어야 합니다.
계속해서 생성한 이전 행 바로 아래에 새로운 2열 행을 추가하십시오. 행 설정을 열고 디자인 탭으로 이동합니다.
그런 다음 행 설정의 디자인 탭으로 이동하여 크기 조정 하위 범주를 엽니다. 사용자 정의 너비 옵션을 활성화하고 백분율을 '60%'로 변경합니다. 같은 탭을 아래로 스크롤하여 하단 여백에 '5%'를 추가합니다.
다시 한 번, 쉬운 방법을 선택하고 검색 창에 '사용자 정의 너비'를 입력하면 됩니다.
신부의 이미지
행의 첫 번째 열에 이미지 모듈을 추가합니다. 이미지 하위 카테고리의 콘텐츠 탭에서 신부 이미지를 업로드하고 고급 탭으로 이동합니다. Custom CSS 하위 카테고리를 클릭하고 Main Element 필드에 다음 코드 라인을 추가합니다.
border: 10px double #9b857b;
앞에서 언급했듯이 검색 창에 '주 요소'를 입력하면 즉시 팝업됩니다. 검색 옵션을 사용하면 특히 자습서의 단계를 따르려고 할 때 시간을 크게 절약할 수 있습니다. 너무 많이 생각하지 않고 필요한 것을 정확하게 할 수 있습니다.
저장 및 종료를 누릅니다.
신랑의 이미지
보시다시피 이미지는 동일한 설정을 가지고 있습니다. 계속해서 이미지 모듈을 복제합니다. 변경해야 할 것은 이미지뿐입니다. 지금까지 갤러리 페이지는 다음과 같이 표시되어야 합니다.
감사의 말
갤러리 페이지는 일반적으로 결혼식이 끝난 후 결혼식 웹사이트에 나타납니다. 사람들은 찍은 사진을 보고 흥분하므로 모든 손님이 페이지를 방문할 가능성이 높습니다. 그렇기 때문에 갤러리 페이지는 손님에게 마지막으로 한 마디만 하기에 이상적인 장소입니다.
시작하려면 레이아웃에 새 표준 섹션을 추가하십시오. 섹션 내에서 전체 너비 행을 사용합니다.
그런 다음 섹션 설정을 열고 배경 하위 범주 내에서 배경색을 '#fffaf6'으로 변경합니다.
첫 번째 텍스트 모듈
방금 만든 행에 텍스트 모듈을 추가합니다. 콘텐츠 탭의 텍스트 상자에 웹사이트에 표시할 텍스트를 입력합니다. 계속해서 디자인 탭으로 이동하십시오.
디자인 탭에서 텍스트 하위 범주를 선택하여 시작하고 수동으로 찾거나 검색 창에서 검색하여 다음과 같이 변경합니다.
- 텍스트 방향: 중앙
- 텍스트 글꼴 : Tangerine
- 텍스트 글꼴 크기: 70(데스크톱 및 태블릿), 50(전화)
- 텍스트 색상: #9b857b
- 텍스트 줄 높이: 1em
이제 동일한 탭에서 Spacing 하위 범주를 선택하고 하단 여백을 '5%'로 변경합니다.
저장 및 종료를 클릭합니다.
두 번째 텍스트 모듈
생성한 첫 번째 텍스트 모듈 아래에 새 텍스트 모듈을 추가합니다. 콘텐츠 탭의 텍스트 상자에 게스트와 공유하고 싶은 감사 메모를 작성하고 디자인 탭으로 이동합니다.
수동으로 검색하거나 검색 창에서 옵션을 검색하여 디자인 탭에서 다음과 같이 변경합니다.
- 텍스트 방향: 양쪽 맞춤
- 텍스트 글꼴: 레일웨이 라이트
- 텍스트 스타일: 굵게
- 텍스트 글꼴 크기: 14
- 텍스트 색상: #9b857b
- 텍스트 줄 높이: 1.6em
저장 및 종료를 클릭하면 됩니다. 이제 갤러리 페이지는 다음과 같이 표시됩니다.
좋아하는 사진 섹션
감사장 섹션을 마친 후에는 신랑 신부가 가장 좋아하는 사진을 보여주는 섹션으로 이동할 수 있습니다. 이 부분에서는 두 개의 섹션을 사용하고 CSS 코드를 이미지 모듈에 적용하여 폴라로이드처럼 보이게 합니다.
표준 섹션을 추가하여 시작하십시오. 해당 표준 섹션 내에서 전폭 행이 필요합니다. 섹션 설정을 열고 콘텐츠 탭의 배경 하위 범주에서 배경색을 '#9b857b'로 변경합니다.
다음으로 행에 텍스트 모듈을 추가합니다. 설정을 열고 텍스트 하위 범주의 텍스트 상자에 표시할 제목을 입력합니다. 계속해서 디자인 탭으로 이동하여 텍스트 하위 범주에서 다음과 같이 변경합니다.
- 텍스트 방향: 중앙
- 텍스트 글꼴: 귤
- 텍스트 글꼴 크기: 100(데스크톱 및 태블릿), 68(전화)
- 텍스트 색상: #fffaf6
- 텍스트 줄 높이: 1.6em
저장 및 종료를 클릭합니다.
폴라로이드 이미지(데스크탑)
이 부분에는 또 다른 표준 섹션이 필요합니다. 해당 섹션 내에서 4개의 열이 있는 행이 필요합니다. 배경 하위 카테고리의 콘텐츠 탭에서 이 섹션의 배경색을 '#fae4de'로 변경합니다.
행의 첫 번째 열에 이미지 모듈을 추가하여 진행합니다. 이미지 설정을 열고 콘텐츠 탭의 이미지 하위 카테고리에 즐겨찾는 이미지 중 하나를 업로드합니다.
다음으로 고급 탭으로 이동하여 CSS ID 및 클래스 하위 범주를 클릭하고 CSS 클래스 필드에 'polaroid'를 입력합니다. 기본 요소 필드에 다음 코드를 추가합니다.
z-index: 1; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);
이제 '폴라로이드' 클래스를 실행하려면 웹사이트의 백엔드로 이동해야 합니다. Divi > Theme options >로 이동하여 페이지 하단의 Custom CSS 필드에 다음 코드를 삽입합니다.
.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}
.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}
.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}그런 다음 Visual Builder로 돌아갈 수 있습니다. 하나 이상의 폴라로이드 이미지가 필요하므로 이미지 모듈을 7번 복제하고 다른 열에 배치해야 합니다. 모든 열에는 2개의 이미지 모듈이 있어야 합니다.
폴라로이드 이미지가 재미있어 보이도록 하려면 각 이미지 모듈의 기본 요소 필드에서 CSS 코드를 개별적으로 변경해야 합니다. 다른 코드를 적용하기 위해 아래 이미지에서 각 이미지 모듈에 다른 번호를 지정했습니다.
할당된 번호에 따라 Main Element 필드의 코드를 적절하게 변경합니다. 사용자 정의 CSS 하위 카테고리의 고급 탭에서 기본 요소를 찾을 수 있습니다. 디자인 탭의 간격 하위 범주에 있는 사용자 지정 여백 필드에도 값을 추가합니다.
이미지 1
이것은 당신이 만든 첫 번째 이미지 모듈입니다. 그대로 두세요.
이미지 2
맞춤 여백:
상단: -10%
왼쪽: -20%
주요 요소:
z-index: 5; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);
이미지 3
맞춤 여백:
왼쪽: -20%
주요 요소:
없음
이미지 4
맞춤 여백:
상단: -10%
왼쪽: -20%
주요 요소:
z-index: 3; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);
이미지 5
맞춤 여백:
없음
주요 요소:
-webkit-transform: rotate(14deg); -moz-transform: rotate(14deg); transform: rotate(14deg);
이미지 6
맞춤 여백:
상단: -10%
왼쪽: -20%
주요 요소:
-webkit-transform: rotate(-18deg); -moz-transform: rotate(-18deg); transform: rotate(-18deg);
이미지 7
맞춤 여백:
왼쪽: -20%
주요 요소:
z-index: 1; -webkit-transform: rotate(-10deg);l -moz-transform: rotate(-10deg);
이미지 8
맞춤 여백:
상단: -10%
왼쪽: -20%
주요 요소:
z-index: 5; -webkit-transform:rotate(-3deg); -moz-transform: rotate(-3deg);
모든 이미지를 설정한 후 행의 설정을 엽니다. 고급 탭으로 이동하여 가시성 하위 범주 내에서 휴대폰 및 태블릿에 대한 행을 숨깁니다.
또한 콘텐츠 탭의 링크 하위 범주에서 라이트박스를 활성화하여 사람들이 이 섹션의 사진을 열 수 있도록 하십시오.
좋아하는 이미지(태블릿 및 휴대폰)
이미지가 반응하는지 확인하기 위해 동일한 섹션에 다른 행을 추가합니다. 전체 너비 행으로 만들고 1번과 5번 이미지 모듈을 복제합니다. 이 복제된 모듈을 새 행에 배치합니다. 모바일 버전의 경우 우리가 만든 이미지 모듈의 이 두 가지 버전만 사용할 것입니다.
이제 행의 설정을 엽니다. 고급 탭으로 이동하여 가시성 하위 범주 내에서 데스크톱의 행을 숨깁니다.
이러한 모든 변경을 수행한 후 레이아웃은 데스크탑에서 지금까지 다음과 같아야 합니다.
성별 갤러리(데스크톱)
일반적으로 결혼식에서 찍은 사진이 많아서 특정 구조를 찾기가 어려울 수 있습니다. 그래서 우리는 이 갤러리 페이지의 갤러리 섹션을 조금 더 쉽게 만들기로 결정했습니다. 갤러리는 손님의 성을 기준으로 표시되므로 손님이 자신의 사진을 쉽게 찾을 수 있습니다.
이름 목록
시작하려면 성의 목록을 표시하고 이미지를 찾을 페이지 섹션을 연결해야 합니다.
새 표준 섹션을 만들고 여기에 전체 너비 행을 배치합니다. 다음으로 텍스트 모듈을 추가합니다. 콘텐츠 탭의 텍스트 하위 범주에 표시할 텍스트를 입력합니다. 그런 다음 디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 변경합니다.
- 텍스트 방향: 중앙
- 텍스트 글꼴: 귤
- 텍스트 글꼴 크기: 100(데스크톱 및 태블릿), 68(전화)
- 텍스트 색상: #9b857b
- 텍스트 줄 높이: 1.6em
동일한 탭을 아래로 스크롤하여 Spacing 하위 범주에서 위쪽 여백을 '2%'로 변경하고 아래쪽 여백을 '5%'로 변경합니다.
저장 및 종료를 클릭합니다. 이제 세 개의 열이 있는 다른 행을 추가합니다. 행 설정의 디자인 탭에서 간격 하위 범주 내에서 아래쪽 여백을 '5%'로 변경합니다.
다음으로 행의 왼쪽 열에 텍스트 모듈을 추가합니다. 텍스트 모듈 내에서 손님의 성의 1/3을 추가하십시오. 이 성은 각각 가져오려는 웹 사이트 부분에 대한 앵커 링크가 필요합니다. 이름 중 하나를 선택하고 링크 아이콘을 클릭하고 '#' + 이름을 작성합니다. 이 블로그 게시물의 뒷부분에서 이 이름을 특정 섹션에 연결할 것입니다. 목록에 있는 각 이름에 대해 동일한 작업을 반복합니다.
이름 중 하나를 선택하고 링크 아이콘을 클릭하고 '#' + 이름을 작성합니다. 이 블로그 게시물의 뒷부분에서 이 이름을 특정 섹션에 연결할 것입니다. 목록에 있는 각 이름에 대해 동일한 작업을 반복합니다.
디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 조정합니다.
- 텍스트 방향: 오른쪽
- 텍스트 글꼴: 레일웨이 라이트
- 텍스트 스타일: 굵게
- 텍스트 글꼴 크기: 20
- 텍스트 색상: #9b857b
- 텍스트 줄 높이: 1.6em
계속해서 텍스트 모듈을 두 번 복제하고 복제된 모듈을 다른 두 열에 배치합니다. 이 목록의 성을 변경하고 두 번째 열의 경우 텍스트 방향을 '중앙'으로, 세 번째 열의 경우 '왼쪽'으로 변경해야 합니다.
행의 설정을 열고 고급 탭의 가시성 하위 범주에서 가시성을 데스크탑 전용으로 변경합니다.
성별 갤러리(태블릿 및 휴대폰)
웹사이트가 반응형인지 확인하기 위해 태블릿 및 휴대폰에 맞는 새 행을 만들 것입니다. 전체 너비 열이 있는 새 행을 추가합니다. 그런 다음 해당 전각 행에 텍스트 모듈을 추가하고 텍스트 상자에 성을 입력합니다. 콘텐츠 탭의 텍스트 하위 범주에서 텍스트 상자를 찾을 수 있습니다.
링크 아이콘을 클릭하고 URL 상자에 '#' + 이름을 작성하여 이전 행에서 했던 것과 동일한 작업을 반복합니다.
그러나 모든 두 번째 이름에 다른 앵커 링크를 할당해야 합니다. 이 예에서 Avery와 Brown은 모두 데스크톱에서와 다른 앵커 링크를 갖습니다. 웹사이트의 다음 부분에서는 두 번째 갤러리마다 두 개의 다른 갤러리 섹션이 있어야 하기 때문에 이 작업을 수행해야 합니다. 그렇게하면 태블릿과 휴대 전화에 반응합니다.
마지막으로 행의 고급 탭으로 이동하여 가시성 하위 범주에서 데스크톱 행을 비활성화합니다.
갤러리 섹션(데스크탑)
웹사이트의 마지막 부분에서 다른 성을 나타내는 다른 갤러리 섹션을 만들어야 합니다. 두 가지를 만드는 방법을 보여주고 그에 따라 다른 것도 추가할 수 있습니다.
먼저 표준 섹션을 추가합니다. 콘텐츠 탭의 배경 하위 범주에서 배경색을 '#fae4de'로 변경합니다.
계속해서 다음과 같은 행을 추가하십시오.
행 섹션 내에서 사용자 정의 너비를 사용하십시오. 디자인 탭으로 이동하여 크기 조정 하위 범주 내에서 사용자 정의 너비를 선택하고 '60%'로 변경합니다.
그런 다음 디자인 탭으로 이동하여 상단 및 하단 여백을 '5%'로 변경합니다.
텍스트 모듈
이제 텍스트 모듈을 추가하고 콘텐츠 탭의 텍스트 하위 범주에 있는 텍스트 상자에 패밀리의 성을 입력합니다. 계속해서 디자인 탭으로 이동하여 다음과 같이 변경합니다.
- 텍스트 정렬: 가운데
- 텍스트 글꼴: 귤
- 텍스트 글꼴 크기: 60
- 텍스트 색상: #9b857b
- 텍스트 줄 높이: 1.6em
동일한 탭을 아래로 스크롤하고 간격 하위 범주 내에서 상단 여백을 '20%'로 변경합니다.
고급 탭으로 이동합니다. CSS ID 및 클래스 하위 범주의 CSS ID 필드에서 위에서 만든 앵커 링크를 텍스트 모듈에 연결해야 합니다. 따라서 목록의 첫 번째 앵커 링크가 '#adams'인 경우 'adams'를 입력해야 합니다. ID가 이전에 만든 목록의 이름에 연결한 것과 동일한지 확인합니다.
행의 두 번째 열에서 갤러리 모듈을 추가해야 합니다. 일반 탭의 이미지 하위 범주에 있는 이미지 번호 필드에 '8'을 입력하고 8개의 이미지를 선택합니다.
다음으로 디자인 탭으로 이동하여 레이아웃 하위 범주에서 레이아웃이 '격자'이고 썸네일 방향이 '가로'인지 확인합니다.
계속해서 고급 탭으로 이동하십시오. 이 탭에서 사용자 정의 CSS 하위 범주의 서로 다른 두 섹션에 코드를 추가해야 합니다. 주요 요소 및 오버레이.
주요 요소:
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; border: 5px solid #FFFFFF; column-count: 2; column-gap: 0px;
위에 까는 것:
-webkit-filter: brightness(0%);
저장 및 종료를 클릭합니다.
이제 섹션을 복제하십시오. 열 구조를 다음과 같이 변경하고 텍스트 모듈과 갤러리 모듈 간에 위치를 전환합니다.
갤러리의 이미지, 텍스트 상자에 언급된 성 및 클래스 ID를 변경합니다. 이 섹션에는 다른 배경색도 있습니다. '#fffaf6'.
이제 이 행의 고급 탭으로 이동하여 가시성 하위 범주 내에서 태블릿 및 휴대폰에 대해 숨깁니다.
결혼식에 참석한 성의 수에 따라 갤러리 섹션을 계속 만들 수 있습니다.
갤러리 섹션(모바일)
이전에 언급했듯이 모든 두 번째 갤러리 섹션에는 모바일용 대안이 필요합니다. 우리가 만든 첫 번째 갤러리 행을 복제하고 우리가 만든 마지막 갤러리 행의 동일한 섹션에 배치하기만 하면 됩니다.
그런 다음 텍스트 모듈 옵션을 엽니다. 디자인 탭으로 이동하여 간격 하위 범주에서 위쪽 여백을 제거합니다. 그런 다음 고급 탭으로 이동하여 CSS ID 및 클래스 하위 범주의 CSS ID를 'avery1'으로 변경합니다. 이는 태블릿 및 휴대폰에 적용된 목록과 동일한 ID입니다.
그게 다야 이제 레이아웃이 이 블로그 게시물의 시작 부분에서 만들고 보여드린 것과 정확히 같아야 합니다.
다음
이 미니시리즈의 세 번째 파트에서는 웨딩 웹사이트에 추가할 선물 목록 페이지를 만드는 방법을 알아보겠습니다. 이 튜토리얼과 관련하여 질문이 있거나 향후 튜토리얼에 대한 요청이 있는 경우 이 블로그 게시물의 댓글 섹션에 댓글을 남겨야 답변을 받을 수 있습니다!
중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!