Divi의 새로운 배경 설정으로 가능한 10가지 배경 디자인 트릭

Divi의 새로운 배경 옵션 인터페이스가 출시된 이후로 Divi는 더욱 강력해졌습니다. 새로운 기능은 많은 새로운 디자인 가능성을 열어주었습니다. 오늘 저는 여러분이 알지 못할 수도 있는 몇 가지 새로운 디자인 트릭을 소개할 것이며, 바라건대 저는 여러분이 멋진 배경 디자인을 만들도록 영감을 줄 수 있기를 바랍니다.

Visual Builder를 사용하여 만들 수 있는 배경 디자인 조합과 혼합이 셀 수 없이 많습니다. 이 게시물을 위해 제가 정한 10가지 트릭은 표면을 긁는 것일 뿐이지만 다른 개념을 소개하고 관심을 불러일으키기 위한 것입니다. 이러한 디자인 트릭의 대부분은 새로운 그라디언트 배경 옵션과 같은 새로운 배경 옵션을 사용하고 배경 이미지를 그라디언트 색상과 결합하여 수행됩니다.

그래도 경고해야 합니다. 배경 옵션을 파기 시작하면 절대 종료할 수 없습니다! 너무 재미있어요. 글쎄, 적어도 나에게는 그랬다.

즐기다.

다음은 디자인 트릭을 살짝 엿보기입니다.

이 게시물을 팔로우하는 방법

새로운 디자인 트릭을 설명할 때마다 처음부터 다시 시작해야 하는 대신 대부분의 디자인에 동일한 예제 디자인을 사용하고 해당 디자인에 다른 트릭을 추가했습니다. 즉, 대부분의 예제에서는 새 트릭을 적용하기 전에 이전 디자인 트릭을 완료해야 합니다. 트릭 #1-9는 모두 동일한 기본 설정을 따르고 전제 조건으로 트릭 #1이 필요합니다. 따라서 기능을 테스트하는 경우 Trick #1부터 시작하는 것이 좋습니다.

Divi를 사용한 10가지 배경 디자인 트릭

YouTube 채널 구독

트릭 #1: 대각선 오버레이

전각 섹션을 추가한 다음 전각 헤더 모듈을 삽입하십시오.

그런 다음 헤더 모듈 설정을 다음과 같이 업데이트합니다.

콘텐츠 옵션

제목: [제목 입력]
소제목: [소제목 입력]
로고 이미지 URL: [로고 입력]
배경 그라데이션 색상: rgba(12,113,195,0.55), rgba(255,255,255,0)
그라디언트 유형: 선형
기울기 방향: 135deg
시작 위치: 60%
최종 위치: 60%(60% 이하에서는 모두 작동함)

그래디언트가 같은 지점에서 시작되고 끝나기 때문에 기본적으로 그래디언트 효과가 전혀 발생하지 않습니다. 따라서 결과는 60% 마커의 양쪽에 있는 두 가지 색상입니다. 그라디언트 방향의 각도와 결합하여 효과를 만듭니다.

디자인 옵션

텍스트 색상: 라이트
제목 글꼴: 기본값, 굵게(B), 대문자(TT)
제목 글꼴 크기: 40px
부제목 글꼴 크기: 24px

고급 옵션

기본 요소 상자의 사용자 정의 CSS에서 다음 CSS를 추가합니다.

Padding: 150px 0;

이것은 헤더 모듈의 상단과 하단에 추가 패딩을 추가하기 위한 것입니다.

설정 저장

이제 전각 섹션에 배경을 추가할 차례입니다. 보라색 컨트롤 상자에서 톱니바퀴 아이콘을 클릭하여 전체 너비 섹션 설정으로 이동합니다.

그런 다음 섹션 설정 콘텐츠 옵션을 다음과 같이 업데이트합니다.

배경 이미지: [여기에 배경 이미지를 입력하세요. 너비는 1960px 이상이어야 합니다. unsplash.com에서 이 이미지를 선택하고 이미지의 눈에 띄는 부분이 오른쪽에 오도록 잘라냈습니다.]
시차 효과 사용: 예(선택 사항이지만 대각선 오버레이와 잘 작동한다고 생각합니다)
시차 방법: 진정한 시차

그게 다야! 그라디언트 색상의 불투명도와 그라디언트 방향의 정도를 원하는 대로 자유롭게 조정하십시오.

우리는 좋은 출발을 하고 있다고 생각합니다. 두 번째 트릭으로 가자.

트릭 #2 : 대각선 오버레이 레이어링

이 디자인 트릭은 트릭 #1의 연속이므로 계속하기 전에 트릭 #1을 완료했는지 확인하십시오.

트릭 #1에서 우리는 Fullwidth Header Module의 배경 그래디언트 옵션을 사용하여 대각선 오버레이를 중단했습니다.

동일한 예를 사용하여 전체 너비 섹션에 추가 배경 그라디언트를 추가합니다. 해당 섹션에 대한 배경 이미지가 이미 있지만 Divi의 새로운 옵션을 사용하여 배경 이미지에 그라디언트 색상을 결합한 다음 특정 효과와 혼합할 수 있습니다.

전체 너비 섹션 설정으로 이동하여 다음 콘텐츠 옵션을 업데이트합니다.

배경 그라데이션 색상: rgba(131,0,233,0.38), rgba(255,255,255,0)
그라디언트 유형: 선형
그라디언트 방향: 135deg(헤더 모듈의 다른 그라디언트 방향과 동일)
시작 위치: 38%
최종 위치: 38%

이제 배경 이미지 아이콘을 클릭하고 다음을 변경합니다.

시차 효과 사용: 아니오
배경 이미지 혼합: 곱하기

이제 독특한 배경 디자인을 위해 쉽게 사용자 정의할 수 있는 2개의 겹치는 대각선 오버레이가 있습니다.

트릭 #3: 원 오버레이

이 디자인 트릭은 트릭 #1의 연속이므로 계속하기 전에 트릭 #1을 완료했는지 확인하십시오.

이제 트릭 #1의 대각선 오버레이를 원형 오버레이로 바꾸겠습니다. 이렇게 하려면 전체 너비 모듈 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

배경 그라데이션 유형: 방사형
방사형 방향: 중심
시작 위치: 30%
최종 위치: 30%

디자인 옵션

텍스트 및 로고 방향: 중앙

이제 새로운 헤더 배경을 확인하십시오.

이 트릭은 멋진 헤더 또는 클릭 유도문안을 만듭니다. 원 오버레이의 크기는 쉽게 조정할 수 있으며 다양한 화면 크기에 잘 반응합니다. 지금은 배경 이미지 위에 반투명 그라디언트 색상을 사용하고 있지만 배경 이미지 없이도 멋지게 보일 것입니다.

다음은 배경 이미지가 없고 더 어두운 텍스트 색상으로 표시되는 예입니다.

트릭 #4 : 원 테두리를 만들기 위한 원 오버레이 레이어링

이것은 전폭 헤더 모듈에 원형 오버레이를 추가하는 것으로 중단한 Trick #3의 연속입니다. 원 오버레이가 배치되면 두 번째 원 오버레이를 추가하여 첫 번째 원의 테두리 역할을 할 수 있습니다. 전체 너비 헤더 모듈 뒤에 있는 전체 너비 섹션에 다른 배경 그라데이션을 추가하여 이 작업을 수행합니다.

전체 너비 섹션 설정으로 이동하여 다음을 업데이트합니다.

콘텐츠 옵션

배경 이미지 탭에서:

시차 효과 사용: 아니요
배경 이미지 혼합: 곱하기

배경 그라데이션 탭에서:

배경 그라데이션 색상: rgba(0,0,0,0.45), rgba(255,255,255,0)
배경 그라데이션 유형: 방사형
방사형 방향: 중심
시작 위치: 34%
최종 위치: 34%

설정 저장

그게 다야

시작 위치의 백분율을 조정하여 배경 그라데이션 원의 크기를 쉽게 변경할 수도 있습니다.

트릭 #5: 역원 오버레이

이것은 전폭 헤더 모듈에서 원형 오버레이로 중단된 Trick #3의 연속입니다. 현재 원은 반투명한 파란색이고 나머지 배경 이미지에는 그라디언트 오버레이 색상이 전혀 없습니다. 이 트릭을 위해 반투명 파란색 그래디언트 오버레이가 원을 둘러싸고 원 안에 배경 이미지가 노출되도록 원 오버레이를 전환하고 반전시킬 것입니다.

이렇게 하려면 전체 너비 헤더 설정으로 이동하여 다음을 업데이트합니다.

콘텐츠 옵션

배경 그라데이션 색상: rgba(255,255,255,0), rgba(12,113,195,0.79)

참고: 여기에서 실제로 하는 일은 왼쪽과 오른쪽의 색상을 바꾸는 것입니다. 이제 투명한 색상이 원 내부에 표시되고 파란색 그라디언트가 원을 둘러싸고 있습니다. 파란색의 불투명도를 높여 조금 더 어둡게 만듭니다.

확인 해봐…

트릭 #6: 비디오 배경이 있는 역원 오버레이

이것은 주변의 파란색 배경과 함께 역원 오버레이를 남겼던 Trick #5의 연속입니다. 현재 원이 그 뒤에 있는 배경 이미지를 노출합니다. 이 원형 오버레이 뒤에 앉을 비디오 배경을 쉽게 추가할 수 있습니다. 너무 산만하지 않은 비디오를 사용하는 것이 좋습니다. 또한 비디오를 사용할 때마다 페이지 로드 시간이 걸리지 않도록 파일 크기가 작은지 확인하십시오.

배경 이미지를 비디오로 바꾸려면 전체 너비 섹션 설정으로 이동하여
배경 비디오 아이콘을 클릭하고 비디오를 추가하십시오.

이제 전체 너비 헤더 설정으로 이동하여 다음을 업데이트합니다.

콘텐츠 옵션

배경 그라데이션 색상: rgba(12,113,195,0.67), #333333

새로운 그라디언트 색상을 사용하면 배경 비디오가 원 내에서만 표시됩니다. 그리고 오버레이 색상이 텍스트를 돋보이게 만듭니다.

트릭 #7: 중심에서 벗어난 역원 오버레이

이것은 역원 오버레이를 남긴 Trick #5의 연속입니다. 전체 너비 헤더 설정으로 돌아가서 방사 방향을 다른 설정으로 조정하여 헤더에 대해 다른 모양을 만들 수 있습니다.

Fulwidth 헤더 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

방사형 방향: 오른쪽

디자인 옵션

텍스트 및 로고 방향: 왼쪽

다음은 최종 결과와 다른 반경 방향의 몇 가지 예입니다.

이러한 예는 분명히 약간의 작업이 필요하지만 아이디어는 얻을 수 있습니다.

트릭 #8: 그림자 효과에 그라디언트 사용

이 트릭은 입이 떡 벌어지지 않을 수 있지만 매우 유용합니다. Photoshop과 같은 사진 편집기를 사용하여 이미지에 그림자를 추가하는 것을 귀찮게 하고 싶지 않은 분들을 위한 것입니다.

이것은 Fullwidth Header Module에서 배경 그래디언트 옵션을 사용하여 대각선 오버레이로 중단된 Trick #1의 연속입니다. 이제 반투명 파란색 오버레이를 이미지의 왼쪽에서 시작하여 오른쪽으로 점차 사라지는 어두운 그림자로 변경해 보겠습니다. 이렇게 하면 오른쪽 이미지의 주요 부분은 그대로 유지되고 왼쪽의 어두운 그림자는 텍스트를 더 읽기 쉽게 만드는 데 도움이 됩니다.

그림자 효과를 추가하려면 전체 너비 헤더 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

배경 그라데이션 색상: rgba(0,0,0,0.55), rgba(0,0,0,0)
기울기 방향: 90deg
시작 위치: 38%
최종 위치: 85%

결과는 다음과 같습니다.

트릭 #9: 배경 이미지 혼합

Divi의 새로운 배경 옵션에는 이미지 사용자 정의를 위한 CSS 혼합 모드가 포함됩니다. 다양한 이미지 블렌드를 탐색하는 것은 매우 재미있고 놀라운 디자인을 만드는 경향이 있습니다. 디자이너가 아닌 경우 이러한 멋진 옵션을 활용하기 위해 채도 또는 광도의 정의를 알 필요가 없습니다. 멋진 효과를 모두 보려면 배경 이미지와 함께 배경색 또는 그라디언트를 설정해야 합니다(배경 이미지만으로는 작동하지 않음). 그런 다음 원하는 모양이 될 때까지 놀아보세요. 결과는 당신을 놀라게 할 수 있습니다.

이 예에서는 전체 너비 헤더 모듈의 배경 그라디언트 옵션을 사용하여 대각선 오버레이를 중단한 트릭 #1부터 계속하겠습니다.

전체 너비 헤더 설정으로 이동하여 콘텐츠 옵션에서 배경 그라디언트를 삭제합니다.

설정 저장

이제 섹션 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

배경 그라데이션 색상: rgba(0,0,0,0.76), #0c71c3
기울기 방향: 90deg
시작 위치: 50%
최종 위치: 50%

아직 변경 사항이 표시되지 않습니다. 괜찮아요. 배경 이미지 탭으로 이동하여 다음을 업데이트하십시오.

시차 효과 사용: 아니요
배경 이미지 혼합: 하드 라이트

그게 다야 결과를 확인하십시오.

참고: 여기에 사용된 색상은 사용하는 배경 이미지에 따라 다른 효과를 만듭니다. 따라서 원하는 색상을 얻을 때까지 색상과 혼합 옵션을 사용하는 것이 좋습니다.

트릭 #10: 레이어링하여 그라데이션 배경에 더 많은 색상을 추가합니다.

기본적으로 모든 섹션, 행, 열 및 모듈에는 두 가지 색상 그라디언트가 있을 수 있습니다. 그러나 그것들을 결합하고 서로의 위에 레이어링하면 그라디언트 배경에 대해 5가지 색상을 만들 수 있습니다. 그리고 이 5가지 색상이 함께 혼합되면 꽤 멋진 스펙트럼을 만들 수 있습니다.

방법은 다음과 같습니다. 먼저 1 열 구조 행이 있는 일반 섹션을 추가합니다. 그런 다음 행 내부에 Blurb 모듈을 추가합니다.

다음과 같이 Blurb 모듈 설정을 업데이트합니다.

콘텐츠 옵션

제목: [제목 입력]
내용: [내용 입력]

디자인 옵션

텍스트 색상: 라이트
텍스트 방향: 중앙
헤더 글꼴: 기본값, 굵게(B)
헤더 글꼴 크기: 56px
본문 글꼴 크기: 22px
맞춤 패딩: 상단 100px, 하단 100px

광고 문구가 흰색 배경에 흰색이기 때문에 아직 볼 수 없지만 괜찮습니다. 당신은 곧 것입니다. 이제 그라디언트 색상을 추가할 차례입니다.

우리는 뒤에서 앞으로, 왼쪽에서 오른쪽으로 작업할 것입니다. 시작하려면 섹션 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

배경 그라데이션 색상: #ff0077, #0c71c3
기울기 방향: 90deg
시작 위치: 0%
최종 위치: 30%

디자인 옵션

맞춤 패딩: 상단 0px, 하단 0px

이제 다음 단계의 그래디언트 색상인 행을 업데이트하겠습니다. 행 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 옵션

배경 그라데이션 색상: rgba(255,255,255,0), #8300e9
기울기 방향: 90deg
시작 위치: 25%
최종 위치: 50%
열 1 배경 그라데이션 색상: rgba(255,255,255,0), #e02b20
기울기 방향: 90deg
시작 위치: 50%
최종 위치: 75%

디자인 옵션
이 행을 전체 너비로 만들기: 예
사용자 지정 거터 너비 사용: 예
거터 폭: 1
맞춤 패딩: 상단 0px, 하단 0px

설정 저장

이제 그라디언트의 마지막 레이어에 대해 Blurb 모듈로 이동하여 다음을 업데이트해야 합니다.

콘텐츠 옵션
배경 그라데이션 색상: rgba(255,255,255,0), #edf000
기울기 방향: 90deg
시작 위치: 75%
최종 위치: 100%

디자인 옵션

맞춤 패딩: 상단 100px, 하단 100px

그게 다야 이제 5가지 그라디언트 색상이 혼합되어 매우 다채로운 배경을 만들 수 있습니다.

그라디언트 유형을 방사형(원형)으로 변경하고 디자인을 완전히 변경할 수도 있습니다(약 20초 소요).

모든 레이어(섹션, 행, 열 및 블러브 모듈)에 대해 그라디언트 유형을 방사형으로 변경하면 다음과 같은 결과가 나타납니다.

보너스 트릭

다음은 시차를 사용하여 배경 이미지를 레이어링하는 방법의 예입니다. True Parallax를 사용한 배경 이미지가 있는 일반 섹션입니다. 섹션 내부에는 전체 너비로 만들어지고 패딩 없이 섹션의 전체 너비로 늘어나는 1열 행이 있습니다. 행에 CSS Parallax 방법을 사용하여 일부 그라데이션 원(거품처럼 보이는 것으로 가정)이 있는 투명한 배경 이미지를 추가했습니다. 그런 다음 투명한 배경이 있는 행에 행동 유도 모듈을 추가했습니다. 이 조합은 페이지의 섹션을 아래로 스크롤할 때 움직임을 만듭니다.

이 트릭은 Divi 외부에서 사용자 지정 사진을 만들어야 하기 때문에 조금 더 복잡합니다. 가능성을 보여주길 바랄 뿐입니다.

몇 가지 더 많은 예

이 게시물에서 언급한 것과 동일한 트릭을 테스트하는 동안 구축한 몇 가지 디자인 예제로 이 글을 마치겠습니다.

마지막 생각들

이 새로운 배경 옵션을 탐색하는 것을 즐겼기를 바랍니다. 그리고 이러한 옵션은 섹션, 행, 열 및 모듈에서 사용할 수 있으므로 웹사이트의 어느 부분에나 이러한 디자인 트릭을 적용할 수 있습니다. 아직 하지 않았다면 시간을 내어 좀 더 깊이 파고들어 창의적인 주스가 흐르도록 하십시오. 시간을 할애하여 배경 옵션을 직접 탐색하면 다음 프로젝트에서 이를 구현하는 데 들뜨게 될 것이라고 확신합니다. 나는 당신이 무엇을 생각해 낼지 기다릴 수 없습니다.

귀하의 의견을 기다리겠습니다.