Divi의 새로운 옵션으로 행 및 열 배경을 창의적으로 결합하는 방법

게시 됨: 2017-10-02

이 Divi 튜토리얼에서는 행과 열 배경 옵션을 결합하여 놀라운 결과를 만드는 방법을 보여 드리겠습니다. 올바른 조합과 설정을 선택하면 웹 사이트의 전체적인 모양과 느낌을 향상시키는 디자인을 얻을 수 있습니다. 우리가 말하는 내용을 보여주기 위해 단계별로 구축하는 데 도움이 되는 예를 만들었습니다. Divi 내장 옵션만 사용하여 이 결과를 생성했으므로 추가 CSS를 추가할 필요가 없습니다.

결과

이 자습서를 단계별로 수행하면 다음과 같은 결과를 얻을 수 있습니다.

이 결과를 얻기 위해 세 개의 다른 행을 사용했지만 모두 더 큰 그림의 일부인 것처럼 보입니다. 시작하자!

비주얼 빌더로 전환

새 페이지를 만들고 Divi Builder를 활성화하고 Visual Builder로 전환하십시오.

섹션 만들기

가장 먼저 해야 할 일은 새 표준 섹션을 만드는 것입니다. 만들고 서로 결합할 모든 행이 이 섹션의 일부가 됩니다. 행에 상자 그림자 효과를 만들기 위해 다음 섹션 그라데이션 배경을 추가합니다.

첫 번째 색상: rgba(61,65,86,0.59)
두 번째 색상: #f7f7f7
그라디언트 유형: 방사형
방사형 방향: 하단
시작 위치: 31%
최종 위치: 76%

1열 행 추가

다음으로 해야 할 일은 섹션에 1열 행을 추가하는 것입니다. 이 행은 최종 결과의 다음 부분을 나타냅니다.

행 및 열 설정

행을 전체 너비로 만들기

계속해서 디자인 탭에서 행을 전체 너비로 만드십시오.

행 배경 설정

그런 다음 콘텐츠 탭으로 돌아가 다음 그라데이션 배경을 추가할 수 있습니다.

첫 번째 색상: #3d4156
두 번째 색상: rgba(114,81,114,0.91)
그라디언트 유형: 선형
기울기 방향: 180deg
시작 위치: 0%
최종 위치: 65%

배경 이미지(이 경우 패턴)를 업로드하고 배경 이미지 혼합으로 '곱하기'를 선택합니다.

열 배경 설정

그런 다음 아래로 스크롤하여 행의 열에 다음 그라데이션 배경 설정을 할당합니다.

첫 번째 색상: rgba(255,255,255,0.15)
두 번째 색상: rgba(214,44,104,0)
기둥 그라데이션 유형: 선형
기둥 기울기 방향: 161deg
컬럼 시작 위치: 43%
열 끝 위치: 43%

간격

행에 다음 패딩을 추가하여 계속하십시오.

상단: 20px
오른쪽: 30px
왼쪽: 30px

열에 대한 일부 패딩도 있습니다.

상단: 200px
하단: 200px

텍스트 모듈 추가

다음으로 할 일은 행에 텍스트 모듈을 추가하고 해당 텍스트 모듈의 텍스트 하위 범주를 다음과 같이 변경하는 것입니다.

텍스트 글꼴: Playfair 디스플레이
텍스트 글꼴 크기: 77px(데스크톱), 64(태블릿), 51(전화)
텍스트 색상: #f7f7f7
텍스트 줄 높이: 1.7(데스크톱), 1em(태블릿 및 휴대폰)

디바이더 모듈 추가

계속해서 방금 만든 텍스트 모듈 아래에 구분선 모듈을 추가하고 가시성 하위 범주 내에서 '분할자 표시' 옵션을 활성화합니다.

동일한 탭을 아래로 스크롤하고 'rgba(114,57,114,0.91)'를 배경색으로 사용합니다.

디자인 탭으로 이동하여 구분선 색상으로 '#3d4156'을 선택합니다.

스타일 하위 범주를 열고 '단색'을 구분선 스타일로 사용하고 '상단'을 구분선 위치로 사용합니다.

그런 다음 크기 조정 하위 범주에 다음 설정을 할당합니다.

디바이더 무게: 11px
높이: 23px
폭: 0%
모듈 정렬: 왼쪽

마지막으로 Custom Padding 옵션에 '48%'의 왼쪽 패딩을 추가합니다.

3열 행 추가

섹션에 추가할 다음 행은 별도로 만들어지지만 이전 행의 확장처럼 보입니다.

행 및 열 설정

행을 전체 너비로 만들기

새 행을 전체 너비로 만들어 다시 시작하십시오.

행 배경 설정

그런 다음 다음 배경 설정을 사용합니다.

첫 번째 색상: rgba(114,81,114,0.91)
두 번째 색상: #f7f7f7
그라디언트 유형: 선형
기울기 방향: 180deg
시작 위치: 9%
최종 위치: 100%

배경 패턴을 추가하고 배경 이미지 블렌드로 '곱하기'를 사용합니다.

열 배경 설정

탭을 아래로 스크롤하여 각 열의 배경색으로 '#f7f7f7'을 사용합니다.

간격

Spacing 하위 범주 내에서 각 열의 위쪽, 아래쪽, 오른쪽 및 왼쪽 패딩에 '30px'를 할당하여 시작합니다. 그런 다음 행의 데스크톱 버전에 다음 패딩을 추가합니다.

상단: 19px
오른쪽: 200px
왼쪽: 200px

태블릿의 패딩은 약간 다릅니다.

상단: 0px
오른쪽: 70px
하단: 0px
왼쪽: 70px

그리고 모바일의 패딩은 다음과 같습니다.

상단: 0px
오른쪽: 50px
하단: 30px
왼쪽: 50px

첫 번째 텍스트 모듈 추가

계속해서 행의 첫 번째 열에 텍스트 모듈을 추가합니다. 그런 다음 디자인 탭의 텍스트 하위 범주에 대해 다음 설정을 사용합니다.

텍스트 글꼴: Raleway
글꼴 스타일: 굵게 및 대문자
텍스트 글꼴 크기: 23px
텍스트 색상: #3d4156
텍스트 줄 높이: 1.7em
텍스트 방향: 중앙

두 번째 텍스트 모듈 추가

이전 모듈 바로 아래에 다른 텍스트 모듈을 추가하고 대신 다음 설정을 사용하십시오.

텍스트 글꼴: Raleway
텍스트 글꼴 크기: 12px
텍스트 색상: #3d4156
텍스트 줄 높이: 1.7em
텍스트 방향: 왼쪽

텍스트 모듈 복제 및 다른 열에 배치

두 개의 텍스트 모듈을 만든 후에는 복제하여 나머지 두 열에도 배치합니다.

1열 행 추가

추가할 마지막 열은 이전 열과 겹칠 열입니다. 이렇게 하는 이유는 이 방법으로 다양한 그라디언트 배경을 결합할 수 있기 때문입니다. 우리가 만들고 있는 세 개의 행은 별개이지만 하나인 것처럼 느껴질 것입니다. 그 동안 하나가 아닌 여러 그라디언트 배경을 즐길 수도 있습니다.