Divi로 수평 디바이더를 수직 디바이더로 바꾸는 방법

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.

이번 주에는 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi의 Moving Company Layout Pack을 예로 사용하여 우리 모두가 알고 있는 표준 수평 분할 모듈을 수직 모듈로 바꾸는 방법을 보여 드리겠습니다. 이 접근 방식은 페이지에 타임라인을 만들려는 경우 특히 유용합니다. '작동 방식' 섹션 등에 사용하는 것도 좋습니다. 수직 구분선을 설정한 후 그 위에 Blurb 모듈을 추가하여 타임라인 효과를 만듭니다. 이 튜토리얼은 CSS 코드가 필요하지 않으며 Divi의 내장 옵션만을 기반으로 합니다.

가자!

시사

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

만들기 시작: 새 페이지 추가 및 이사업체 레이아웃 팩의 랜딩 페이지 업로드

새 페이지 추가 및 Visual Builder로 전환

새 페이지를 추가하고 제목을 추가하고 Visual Builder로 전환하여 시작하겠습니다.

미리 만들어진 레이아웃 선택

그렇게 하면 처음부터 빌드하거나 미리 만들어진 레이아웃을 선택하거나 기존 페이지를 복제할 수 있습니다. 우리는 Moving Company Layout Pack의 랜딩 페이지를 사용하여 최종 결과를 생성할 것이므로 미리 만들어진 레이아웃을 탐색합니다.

이사 회사 레이아웃 팩의 방문 페이지 선택

이동 회사 레이아웃 팩이 나타날 때까지 미리 만들어진 레이아웃을 아래로 스크롤하고 방문 페이지를 페이지에 업로드합니다.

수직 구분선 타임라인 만들기 시작

타임라인 섹션 찾기

이제 수평 구분선을 수직 구분선으로 바꾸고 해당 구분선을 사용하여 타임라인을 만들 준비가 되었습니다. 계속해서 방문 페이지에서 다음 섹션을 찾으십시오.

아래에 새 표준 섹션 추가

이 섹션 바로 아래에 표준 섹션을 추가합니다.

새 섹션에 '작동 방식' 행 배치

이전 섹션의 '작동 방식' 행을 새 섹션으로 끌어 계속 진행합니다.

새 행 추가

열 구조

섹션에 방금 배치한 행 바로 아래에 다음 열 구조로 다른 행을 추가합니다.

간격

모듈을 추가하기 전에 행 설정을 열고 상단 여백에 '60px'를 추가하십시오.

열 1에 분배기 모듈 추가

구분선 숨기기

이제 모듈 추가를 시작할 수 있습니다! 첫 번째 열부터 시작하여 완료되면 두 번째 열로 넘어갈 것입니다. 첫 번째 열에서 가장 먼저 필요한 것은 Divider Module입니다. 앞에서 언급했듯이 수직으로 변환할 것입니다. 원하는 결과를 얻기 위한 첫 번째 단계는 Show Divider 옵션을 비활성화하는 것입니다.

그라데이션 배경

실제 디바이더를 사용하는 대신 디바이더 모듈의 배경을 사용하여 디바이더를 생성합니다. 다음 그라데이션 배경을 사용하고 있습니다.

• 색상 1: #e0aa25
• 색상 2: #c11000

사이징

이제 디바이더가 보이지 않는지 확인했습니다. 수직 분할기를 만들기 위한 다음 중요한 단계는 분할기의 너비를 크게 줄이는 것입니다. 우리는 '2%'를 사용하고 있지만 원하는 만큼 두껍게 보이게 할 수 있습니다. 또한 센터 모듈 정렬을 활성화합니다.

간격

Divider 모듈을 수직으로 늘리기 위해 Divider 모듈의 상단 및 하단 사용자 정의 패딩에 '480px'를 추가합니다. 그리고 짜잔, 수직 분할기가 있습니다!

열 1에 이전 섹션의 Blurb 모듈 추가

다음으로 할 일은 이 수직 구분선을 사용하여 타임라인을 만드는 것입니다. 이전 섹션에는 3개의 Blurb 모듈이 있습니다. 계속해서 작업 중인 행의 첫 번째 열인 Divider Module 바로 아래에 각각 배치합니다.

Blurb 모듈 #1 수정

배경색 추가

Blurb 모듈을 편집하는 동안 프로세스 속도를 높이기 위해 Divi의 효율성 기능 중 하나를 사용할 것입니다. 모든 변경 사항을 첫 번째 Blurb 모듈에 적용한 후 모듈 스타일을 복사하여 한 번의 클릭으로 다른 Blurb 모듈에 추가합니다. 첫 번째 Blurb 모듈을 열고 'rgba(255,255,255,0.73)'를 배경색으로 추가합니다.

아이콘 글꼴 크기 변경

다음으로 해야 할 일은 아이콘 글꼴 크기를 '65px'로 변경하는 것입니다.

간격 제거

또한 간격 설정에서 모든 여백을 제거합니다. 나중에 값이 다르기 때문에 각 Blurb 모듈에 여백을 개별적으로 추가합니다.

Blurb 모듈 스타일 복사 및 나머지 Blurb 모듈에 추가

Blurb 모듈 스타일 복사

첫 번째 Blurb 모듈 수정을 완료했습니다. 그것을 마우스 오른쪽 버튼으로 클릭하고 '모듈 스타일 복사'를 선택하십시오. 이것은 우리가 방금 만든 모든 수정 사항을 복사합니다.

나머지 Blurb 모듈에 모듈 스타일 붙여넣기

그리고 나머지 두 개의 Blurb 모듈에 모듈 스타일을 붙여넣습니다. 내용은 변경되지 않고 디자인 설정만 변경되어 많은 시간을 절약할 수 있습니다.

간격 블러브 모듈

블러브 모듈 #1

앞에서 언급했듯이 Blurb 모듈의 간격은 다릅니다. 두 번째 것은 아무것도 없지만 첫 번째 것은 상단 여백에 '-900px'를 사용합니다. 이 음수 여백을 추가하면 Blurb 모듈이 타임라인의 일부가 되는 것을 알 수 있습니다. Visual Builder 내에서 Divider 모듈이 Blurb 모듈 위에 있는 것처럼 보입니다. 그러나 Visual Builder를 종료하면 모든 것이 제자리에 들어가는 것을 볼 수 있으므로 그것에 대해 걱정하지 마십시오.

블러브 모듈 #3

다음에 마지막 Blurb 모듈을 열고 하단 여백에 '150px'를 추가합니다.

2열에 이미지 모듈 놓기

이미지 찾기

이제 2열로 넘어갈 수 있습니다! 우리가 필요로 하는 유일한 모듈은 이미지 모듈입니다. 우리는 이미 우리 페이지에 있는 것을 재사용하고 있으므로 계속해서 찾으십시오.

2열에 이미지 놓기

다음 두 번째 열로 끌어다 놓습니다.

간격 변경

세로로 가운데에 맞추기 위해 약간의 여백을 추가합니다.

• 상단 여백: 300px(데스크톱), 30px(태블릿 및 휴대폰)
• 하단 여백: 50px(태블릿 및 휴대전화)

이전 및 다음 섹션 제거

섹션 생성을 완료했습니다! 마지막 남은 작업은 과도한 섹션을 삭제하는 것입니다.

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에서 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 사용 사례 블로그 게시물에서는 Divi의 Moving Company Layout Pack을 사용하여 수직 구분선을 수직 구분선으로 바꾸는 방법을 보여주었습니다. 이 접근 방식은 추가 코드를 사용하지 않고 페이지에 타임라인을 만들려는 경우에 이상적입니다. 전적으로 Divi의 내장 옵션을 기반으로 합니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!