Divi의 배경 설정으로 그라데이션 배경 오버레이를 만드는 방법

게시 됨: 2017-06-13

오늘의 튜토리얼에서는 새로운 Divi 배경 디자인 기능이 웹사이트에 가져오는 새롭고 우아한 가능성을 탐구할 것입니다. 그라데이션 배경 오버레이를 사용하여

이 새로운 배경 업데이트를 통해 Divi 빌더에 많은 새로운 옵션이 추가되어 자신의 웹사이트나 클라이언트를 위한 웹사이트를 디자인할 때 요구 사항을 충족하는 데 도움이 됩니다. 이러한 새로운 옵션을 사용하면 웹사이트의 모양과 느낌을 마음대로 조정할 수 있습니다.

이 업데이트가 출시되기 전에는 Divi 빌더 내에서 수행할 수 있는 대부분의 변경 사항이 사용자 정의 CSS 코드를 통해 이루어져야 했습니다. 이제 배경 디자인을 변경하는 것이 그 어느 때보다 쉬워졌습니다. 몇 번의 간단한 클릭으로 웹사이트의 모든 다른 섹션에 대한 아름다운 배경을 만들 수 있습니다.

그라데이션 배경 오버레이 예

우리는 새로운 옵션이 웹사이트가 반영하는 전체적인 느낌을 어떻게 향상시키고 특정 "je ne sais quoi" 요소를 부여할 수 있는지 보여 줄 전후 이미지가 있는 세 개의 섹션을 만들었습니다.

영웅 섹션

배경 이미지만 추가할 때 영웅 섹션은 다음과 같습니다.

위의 이미지에 사용된 동일한 배경 이미지에 그라데이션 배경 오버레이를 추가했을 때의 최종 결과는 다음과 같습니다.

블러브 섹션

이것은 단색 배경을 사용할 때 블러브 섹션이 어떻게 보이는지입니다:

패턴 배경에 그라데이션 배경 오버레이를 추가했을 때의 최종 결과는 다음과 같습니다.

가격 섹션

이것은 우리가 하나의 색상(밝고 어두운 톤으로)을 사용할 때 가격 섹션이 어떻게 보이는지 보여줍니다:

그라디언트 배경 오버레이를 사용한 후의 최종 결과는 다음과 같습니다.

각각은 다른 설정을 가지고 있으며 귀하의 웹사이트에서 사용할 수 있도록 이 모양을 만드는 방법을 정확하고 단계별로 보여드리겠습니다.

단계별: 영웅 섹션

이 게시물의 첫 번째 섹션에서는 영웅 섹션을 다시 만들고 있습니다. 이 예는 배경 디자인 기능이 이미지에서 사용되는 색상을 어떻게 변경할 수 있는지를 반영합니다. 그라데이션 배경 오버레이를 사용했지만 변경 사항은 매우 미묘합니다. 다른 색상의 하늘과 함께 이미지에 어두운 톤의 느낌을 더했습니다.

만들기 시작

WordPress 웹 사이트에 새 페이지를 만드는 것으로 시작해 보겠습니다. 이제 전체 너비 행이 있는 해당 페이지에 표준 섹션을 추가합니다. 그런 다음 행에 다른 모듈을 배치합니다. 두 개의 텍스트 모듈과 하나의 버튼 모듈을 사용했습니다.

첫 번째 텍스트 모듈 설정

첫 번째 텍스트 모듈은 영웅 섹션의 제목이 표시되는 곳입니다. 콘텐츠 탭의 텍스트 하위 범주에 있는 콘텐츠 상자에 표시할 텍스트를 입력하고 디자인 탭으로 이동합니다.

디자인 탭에서 텍스트 하위 범주를 다음과 같이 수정합니다.

텍스트 방향: 중앙
텍스트 글꼴 크기: 30
텍스트 글꼴 색상: #FFFFFF

두 번째 텍스트 모듈 설정

이제 다음 텍스트 모듈을 열고 콘텐츠 상자에도 텍스트를 입력합니다. 그런 다음 디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 수정합니다.

텍스트 방향: 중앙
텍스트 글꼴 크기: 16
텍스트 글꼴 색상: #FFFFFF

동일한 탭을 아래로 스크롤하여 Sizing 하위 범주의 Max Width에 '500px'를 추가하고 Spacing 하위 범주의 Bottom Margin에 '2%'를 추가합니다.

버튼 설정

마지막으로 Button Module의 설정을 엽니다. 콘텐츠 탭의 텍스트 하위 범주에 버튼에 연결할 CTA를 입력하고 디자인 탭으로 이동합니다.

디자인 탭에서 단추 하위 범주를 다음과 같이 조정합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 20
버튼 텍스트 색상: #FFFFFF
버튼 배경색: rgba(0,0,0,0)
버튼 테두리 너비: 2
버튼 테두리 색상: #FFFFFF
버튼 테두리 반경: 7

이제 행 섹션을 열고 디자인 모듈의 간격 하위 범주에서 다음과 같이 조정합니다.

최고 마진: 15%
하단 마진: 10%

그라데이션 배경 오버레이 설정

이제 우리는 재미있는 부분에 도달합니다. 배경 이미지에 그라데이션 배경 오버레이를 추가합니다. 계속해서 섹션의 설정을 엽니다. 그런 다음 배경 하위 범주로 이동하여 그라디언트 배경을 추가하여 시작합니다.

우리가 만든 예에서는 다음 설정을 사용했습니다.

첫 번째 색상: #3730ff
두 번째 색상: #e02b20
그라디언트 유형: 선형
기울기 방향: 272deg
시작 위치: 40%
최종 위치: 100%

이제 배경 이미지 탭으로 이동하여 원하는 이미지를 추가합니다. 만들고자 하는 효과를 향상시키기 위해 의도적으로 하늘이 포함된 이미지를 선택했습니다.

이제 같은 탭을 아래로 스크롤하십시오. 배경 이미지를 가운데에 두고 배경 이미지 혼합 드롭다운 메뉴에서 곱하기 옵션을 활성화합니다. 원하는 정확한 결과에 도달하는 데 도움이 되는 다른 옵션도 많이 있습니다.

그리고 거기에 최종 결과가 있습니다.

단계별: Blurb 섹션

만드는 방법을 보여드릴 두 번째 예는 광고 문구 섹션입니다. 우리는 광고의 내용에 계속 초점을 맞추고자 합니다. 그래서 바쁜 배경 대신 패턴 배경을 선택했습니다.

이 예제에 사용된 배경 패턴은 Toptal에서 가져온 것입니다. 상업용을 포함하여 모든 용도로 사용하고 싶은 패턴을 다운로드할 수 있습니다. FAQ에 설명된 대로 웹사이트 소스에 크레딧을 제공하는 것을 잊지 마십시오.

또한 그라디언트 색상이 통과할 수 있도록 광고 아이콘을 약간 투명하게 만들었습니다. 각각의 광고 문구는 동일한 설정을 가지고 있지만 아이콘을 통해 나오는 색상은 약간 다르며 우리가 사용한 그라디언트 색상과 일치합니다.

만들기 시작

새 페이지나 기존 페이지에 표준 섹션을 추가하여 시작하십시오. 해당 섹션 내에서 3개의 열이 있는 행이 필요합니다.

행의 첫 번째 열에 Blurb 모듈을 추가하여 계속하십시오. 각 열에서 동일한 블러브 모듈 설정을 사용합니다. 이것이 우리가 블러브 모듈을 한 번만 만들고 다른 두 열에 대해 복제해야 하는 이유입니다.

블러브 설정

Blurb 모듈의 설정을 열고 콘텐츠 탭의 텍스트 하위 범주에 제목과 콘텐츠를 입력합니다. 디자인 탭으로 이동하여 이미지 및 아이콘 하위 범주를 다음과 같이 조정합니다.

아이콘 색상: rgba(255,255,255,0.36)
원 아이콘: 예
원 색상: rgba(255,255,255,0)
원 테두리 표시: 예
원 테두리 색상: rgba(255,255,255,0.36)
이미지/아이콘 배치: 상단
아이콘 글꼴 크기 사용: 예
아이콘 글꼴 크기: 96px

같은 탭을 아래로 스크롤하여 텍스트 하위 범주에서 텍스트 방향을 '중앙'으로 설정합니다.

계속 스크롤하여 헤더 텍스트 하위 범주를 엽니다. 다음 설정을 사용하십시오.

헤더 글꼴 크기: 18
헤더 텍스트 색상: #FFFFFF
헤더 라인 높이: 1em

이제 변경해야 할 유일한 것은 Body Text 하위 범주입니다. 다음 설정이 적용되는지 확인합니다.

본문 글꼴 크기: 14
본문 색상: #FFFFFF
바디 라인 높이: 1.5em

Blurb 모듈을 두 번 복제하고 나머지 두 열에 배치하고 그에 따라 내용을 변경하는 것을 잊지 마십시오.

행 설정

행 설정을 열고 디자인 탭의 간격 하위 범주로 이동합니다. 당신이해야 할 유일한 것은 상단 및 하단 여백을 '5%'로 변경하는 것입니다.

그라데이션 배경 오버레이 설정

마지막으로 그라데이션 오버레이가 있는 배경 이미지를 추가합니다. 섹션의 설정을 열고 콘텐츠 탭의 배경 하위 범주로 이동합니다.

다음으로 그라디언트 옵션을 다음과 같이 변경합니다.

첫 번째 색상: #52009b
세컨드 컬러: #0edeed
그라디언트 유형: 방사형
방사형 방향: 오른쪽
시작 위치: 28%
최종 위치: 100%

배경 옵션으로 이동하여 선택한 패턴을 업로드하고 다음과 같이 변경합니다.

배경 이미지 위치: 중앙
배경 이미지 반복: 반복(패턴에 따라 다름)
배경 이미지 혼합: 곱하기

그게 다야! 이제 다음과 같은 놀라운 결과가 나타납니다.

단계별: 가격 책정 섹션

이 게시물의 마지막 예는 가격 섹션입니다. 이 섹션에서는 모든 곳에서 그라데이션 배경을 사용할 수 있음을 보여주고 싶었습니다. 섹션뿐만 아니라 컬럼에서도 사용하도록 만들어졌습니다. 두 개의 열에만 그라데이션 배경을 사용하고 두 번째 열에 그라데이션 배경 오버레이를 수행합니다.

이렇게 하는 이유는 주요 가격 패키지를 강조하기 위함입니다. 우리는 다른 두 열보다 더 강렬한 색상을 사용하고 있으며 패턴 배경도 추가하고 있습니다. 이 두 가지를 결합하면 가장 홍보하고 싶은 추천 가격 패키지로 사람들을 끌어들일 가능성이 높아집니다.

만들기 시작

웹사이트의 새 페이지나 기존 페이지에 새 표준 섹션을 추가하는 것으로 시작하십시오. 섹션에는 3개의 열이 있는 행이 필요합니다. 우리가 사용할 모듈은 각 열에 대해 동일하고 동일한 설정을 포함합니다. 이것이 첫 번째 열에 대해 만들고 나중에 다른 두 열에 복제하는 이유입니다.

첫 번째 텍스트 모듈 설정

첫 번째 열에 새 텍스트 모듈을 추가하고 콘텐츠 탭의 텍스트 하위 범주에 있는 콘텐츠 상자에 가격 패키지 유형을 추가한 후 디자인 탭으로 이동합니다.

디자인 탭의 텍스트 하위 범주에 다음 변경 사항을 적용합니다.

텍스트 방향: 중앙
텍스트 글꼴 크기: 24
텍스트 글꼴 색상: #FFFFFF
텍스트 줄 높이: 1.5em

동일한 탭을 아래로 스크롤하여 간격 하위 범주를 다음과 같이 수정합니다.

상단 여백: 50px
하단 여백: 20px

두 번째 텍스트 모듈 설정

동일한 열에 다른 텍스트 모듈을 추가합니다. 콘텐츠 탭의 텍스트 하위 범주에 있는 콘텐츠 상자에 패키지 가격을 적고 디자인 탭으로 이동합니다.

디자인 탭에서 다음과 같이 조정합니다.

텍스트 방향: 중앙
텍스트 글꼴 크기: 82px
텍스트 글꼴 색상: #FFFFFF
텍스트 줄 높이: 1.1em

같은 탭을 아래로 스크롤하여 하단 여백에 '10px'를 추가합니다.

세 번째 텍스트 모듈 설정

마지막 텍스트 모듈의 경우 콘텐츠 탭의 텍스트 하위 범주에 있는 콘텐츠 상자에 텍스트를 추가합니다. 그런 다음 디자인 탭으로 이동하여 텍스트 하위 범주를 다음과 같이 변경합니다.

텍스트 방향: 중앙
텍스트 글꼴 크기: 16
텍스트 글꼴 색상: #FFFFFF
텍스트 줄 높이: 1.1em

동일한 탭을 아래로 스크롤하고 Spacing 하위 범주의 하단 여백에 '33px'를 추가합니다.

버튼 설정

이 열에 추가할 다음 모듈은 버튼 모듈입니다. 콘텐츠 탭의 텍스트 하위 범주에 있는 콘텐츠 상자에 표시할 CTA를 입력하고 디자인 탭으로 이동합니다.

디자인 탭 내에서 Alignment 하위 카테고리의 Button Alignment를 'Center'에 놓고 Button 하위 카테고리를 다음과 같이 변경합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 13
버튼 텍스트 색상: #FFFFFF
버튼 배경색: rgba(255,255,255,0.11)
버튼 테두리 너비: 2
버튼 테두리 색상: #FFFFFF
버튼 테두리 반경: 4
버튼 문자 간격: 1

디바이더 설정

마지막으로 열에 구분선을 추가하여 공간을 만듭니다. 콘텐츠 탭에서 '디바이더 표시 안 함'을 선택하고 높이 필드에 '25px'를 입력한 디자인 탭으로 이동합니다.

이제 모든 모듈을 추가했으므로 해당 모듈을 복제하고 다른 열에도 넣어야 합니다.

그라데이션 배경 오버레이 설정

이 예에서는 다른 열에 대해 두 가지 다른 배경 설정을 사용할 것입니다. 첫 번째 열과 마지막 열은 동일하고 두 번째 열은 약간 다릅니다.

행 설정으로 이동하여 내용 탭의 배경 하위 범주에 있는 첫 번째 및 세 번째 열의 그래디언트 옵션에 다음 변경 사항을 적용합니다.

첫 번째 색상: rgba(10,122,178,0.57)
두 번째 색상: rgba(142,0,142,0.47)
열 1 그라디언트 유형: 방사형
열 1 방사형 방향: 왼쪽 상단
열 1 시작 위치: 0
열 1 끝 위치: 100%

다음으로 2열로 이동하여 그래디언트 옵션을 다음과 같이 변경합니다.

첫 번째 색상: #0a7ab2
두 번째 색상: #8e008e
2열 그라디언트 유형: 선형
열 2 기울기 방향: 180deg
열 2 시작 위치: 0
열 2 끝 위치: 100

배경 이미지 옵션으로 이동하여 배경 이미지를 업로드하고 설정을 변경합니다.

2열 배경 이미지 위치: 왼쪽 상단
2열 배경 이미지 반복: 반복
열 2 배경 이미지 혼합: 곱하기

마지막 생각들

이 블로그 게시물에서 보여준 예는 새로운 배경 디자인 기능을 사용하면서 얻을 수 있는 결과의 극히 일부일 뿐입니다. 다음 포스트에서 우리는 당신이 만드는 웹사이트를 위한 훌륭한 디자인을 만드는 데 도움이 될 다른 예도 확실히 다룰 것입니다. 질문, 의견 또는 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

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