Divi로 만든 편집 스타일 섹션 레이아웃의 5가지 예

게시 됨: 2017-11-05

새로운 Divi 옵션은 수많은 가능성을 제공합니다. 모듈, 행 및 열은 그 어느 때보다 멋지고 사용자 친화적인 웹 디자인을 향한 여정에서 서로에게 힘을 실어줍니다. 할 수 있는 일 중 하나는 놀라운 편집 스타일 섹션을 만드는 것입니다. 이것이 바로 이 게시물에서 보여드릴 내용입니다. 다른 웹사이트 내에서 사용할 수 있는 5가지 편집 스타일 섹션 레이아웃. 가장 좋은 부분? 게시물은 각 모듈, 행 및 열에 대한 올바른 설정을 사용하여 작성됩니다.

만드는 방법을 보여드릴 다섯 가지 예를 살펴보겠습니다.

첫 번째 예

데스크탑

이동하는

두 번째 예

데스크탑

이동하는

세 번째 예

데스크탑

이동하는

네 번째 예

데스크탑

이동하는

다섯 번째 예

데스크탑

이동하는

Divi로 만든 편집 스타일 섹션 레이아웃의 5가지 예

YouTube 채널 구독

첫 번째 예제 만들기 시작

첫 번째 편집기 스타일 레이아웃을 만들어 시작하겠습니다.

새 섹션 추가

새 페이지를 추가하고 Divi Builder를 활성화한 다음 Visual Builder로 전환하십시오. Visual Builder에 있으면 표준 섹션을 추가하십시오.

3열 행 추가

해당 표준 섹션 내에서 3열 행이 필요합니다.

그라데이션 배경

행 설정을 열고 다음 그라데이션 배경을 추가하십시오.

첫 번째 색상: #636363
두 번째 색상: rgba(255,255,255,0)
그라디언트 유형: 방사형
방사형 방향: 중심
시작 위치: 0%
최종 위치: 47%

2열 배경색

또한 '#d8d8d8'을 열 2 배경색으로 설정해야 합니다.

사이징

디자인 탭으로 이동하여 크기 조정 하위 범주에 대해 다음 설정을 사용합니다.

사용자 정의 너비 사용: 예
사용자 정의 너비: 100%
사용자 지정 거터 너비 사용: 예
거터 폭: 1

간격

Spacing 하위 범주를 열고 두 번째 열의 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩에 '50px'를 추가합니다.

첫 번째 열 이미지 모듈

그라데이션 배경

행의 첫 번째 열에 이미지를 추가하고 다음 그라데이션 배경을 사용합니다.

첫 번째 색상: rgba(255,255,255,0)
두 번째 색상: #086191
그라디언트 유형: 선형
기울기 방향: 107deg
시작 위치: 60%
최종 위치: 60%

조정

디자인 탭으로 이동하여 왼쪽 이미지 정렬을 사용하고 '모바일에서 항상 중앙 이미지' 옵션을 활성화합니다.

간격

그런 다음 Spacing 하위 범주를 열고 다음 여백 및 패딩 설정을 사용합니다.

상단 여백: 100px(데스크톱), 0px(태블릿 및 휴대폰)
상단 패딩: 20px
하단 패딩: 20px

두 번째 열 텍스트 모듈

텍스트 설정

다음으로 행의 두 번째 열에 텍스트 모듈을 추가합니다. 디자인 탭으로 이동하여 텍스트 하위 범주에 대해 다음 설정을 사용합니다.

텍스트 글꼴 크기: 12px
텍스트 색상: #000000
텍스트 방향: 중앙

사이징

크기 조정 하위 범주를 열고 너비 '84%'를 사용하고 가운데 모듈 정렬을 선택합니다.

간격

마지막으로 상단 및 하단 여백에 '50px'를 추가합니다.

세 번째 열 이미지 모듈

그라데이션 배경

세 번째 열에 다른 이미지 모듈을 추가하고 다음 그라데이션 배경을 사용합니다.

첫 번째 색상: #a36100
두 번째 색상: rgba(255,255,255,0)
그라디언트 유형: 선형
기울기 방향: 73deg
시작 위치: 40%
최종 위치: 40%

조정

디자인 탭으로 이동하여 왼쪽 이미지 정렬을 선택하고 '모바일에서 항상 중앙 이미지' 옵션을 활성화합니다.

간격

마지막으로 다음 사용자 지정 여백 및 패딩을 추가합니다.

상단 여백: 300px(데스크톱), 0px(태블릿 및 휴대폰)
상단 패딩: 20px
하단 패딩: 20px

결과

데스크탑에서 결과를 다시 살펴보겠습니다.

그리고 모바일: