Divi의 그라디언트 빌더에서 그라디언트 유형 비교

그라디언트 유형은 새로운 Divi Gradient Builder의 일부입니다. 새로운 Divi 그라디언트 유형을 사용하면 배경에 다양한 모양과 색상을 추가할 수 있습니다. 이 게시물에서는 이러한 그라디언트 유형을 비교하고 이를 사용하여 독특한 배경을 만드는 방법을 보여드리겠습니다!

시작하자.

Divi 그라디언트 유형이란 무엇입니까?

Divi의 새로운 Gradient Builder는 그라디언트 유형을 포함하는 몇 가지 새로운 그라디언트 기능을 추가합니다. 선택할 수 있는 4가지 그라디언트 유형이 있습니다.

• 선의
• 회보
• 타원형
• 원추형

각 유형은 그라데이션을 다르게 표시합니다. 선형 색상 패턴, 원, 타원 또는 원뿔로 표시할 그라디언트의 모양을 지정하는 데 사용됩니다. 예제에서 자세히 살펴보겠습니다.

그라디언트 유형은 위치, 반복 여부, 그라디언트 슬라이더 막대의 측정 단위 및 배경 위에 그라디언트 배치와 같은 다른 컨트롤의 영향도 받습니다.

모든 조정은 그라디언트에 작거나 큰 영향을 줄 수 있습니다. 그라데이션은 미묘할 수도 있고 눈에 띄게 나타날 수도 있습니다. 한 번의 조정으로 작거나 큰 변화를 만들 수 있습니다.

이를 염두에 두고 각 그라디언트 유형을 사용하는 그라디언트의 몇 가지 예를 살펴보겠습니다. 각 그래디언트 유형의 세 가지 예를 보여드리겠습니다. 첫 번째는 웹에서 볼 수 있는 표준 유형의 그라디언트입니다. 다음 두 가지는 그라디언트 유형으로 무엇을 할 수 있는지 알아보기 위해 조금 더 실험적입니다.

그라디언트 유형의 예

그라디언트 유형 예제의 경우 Divi 내에서 사용할 수 있는 무료 B&B 레이아웃 팩 랜딩 페이지의 영웅 섹션을 사용하고 있습니다. 이 섹션에는 이미 그라디언트가 있지만 이를 대체하고 몇 가지 실험을 해보겠습니다. 원래 배경 그라디언트를 삭제하거나 수정할 수 있습니다. 결과는 동일합니다. 편의상 수정하겠습니다.

제목 텍스트를 사용자 정의하여 검정색에서 흰색으로 변경했습니다.

선형 그라데이션 유형

선형 그라디언트는 페이지 전체에 흩어져 있는 것처럼 그라디언트를 표시합니다.

첫 번째 선형 그라디언트 예제

다음은 첫 번째 예를 살펴보겠습니다. 화면 왼쪽에는 더 밝은 색상이 표시되고 오른쪽에는 더 어두운 색상이 표시되며 화면 사이가 부드럽게 전환됩니다.

이 예를 만들려면 두 가지 색상을 추가하십시오. 첫 번째 는 0% 위치에 있는 rgba(92,158,82,0.76)입니다. 두 번째 는 97% 위치에 있는 rgba(0,10,4,0.76)입니다.

• 색상 1: rgba(92,158,82,0.76)(0% 위치에서)
• 색상 2: rgba(0,10,4,0.76)(97% 위치에서)

다음으로 Gradient Type 을 Linear로 변경하고 Direction 을 131deg로 설정합니다. 그것을 반복하지 마십시오 . 단위 를 퍼센트로 설정합니다. 배경 이미지 위에 그라디언트를 배치합니다.

• 그라디언트 유형: 선형
• 방향: 131deg
• 반복: 아니요
• 단위: 퍼센트
• 배경 이미지 위에 그라디언트 배치: 예

두 번째 선형 그라데이션 예

다음은 두 번째 선형 그래디언트 예제입니다. 그것은 첫 번째 것과 같이 작동하지만 더 어두운 그늘이 차지하는 왼쪽에 하드 스톱이 있습니다.

이것을 만들려면 3개의 Gradient Stops를 추가하십시오. 첫 번째 는 13% 위치의 rgba(18,76,41,0.76)입니다. 두 번째 는 13% 위치의 rgba(92,158,82,0.76)입니다. 색상 3 은 34% 위치에서 rgba(18,76,41,0.76)입니다.

• 색상 1: rgba(18,76,41,0.76) (13% 위치에서)
• 색상 2: rgba(92,158,82,0.76) (13% 위치에서)
• 색상 3: rgba(18,76,41,0.76)(34% 위치에서)

다음으로 그라디언트 유형 을 선형으로 설정하고 방향 을 90도로 설정합니다. 그것을 반복하지 마십시오 . 단위 를 퍼센트로 변경합니다. 배경 이미지 위에 배치합니다.

• 그라디언트 유형: 선형
• 방향: 90deg
• 반복: 아니요
• 단위: 퍼센트
• 배경 이미지 위에 그라디언트 배치: 예

세 번째 선형 그라데이션 예

세 번째 예에서는 오른쪽 상단 모서리에 대각선으로 밝은 색 선을 배치하여 더 어두운 색 선을 만집니다.

이것은 세 가지 색상이 있습니다. 색상 1 은 13% 위치에서 rgba(92,158,82,0.76)입니다. 색상 2 는 23% 위치에서 rgba(92,158,82,0.76)입니다. 세 번째 색상 은 32% 위치에 있는 rgba(18,76,41,0.76)입니다.

• 색상 1: rgba(92,158,82,0.76) (13% 위치에서)
• 색상 2: rgba(92,158,82,0.76) (23% 위치에서)
• 색상 3: rgba(18,76,41,0.76) (32% 위치에서)

그라디언트 유형 을 209deg 방향 에서 선형으로 설정합니다. 반복하지 않도록 하고 단위 를 퍼센트로 설정하십시오. 배경 이미지 위에 그라디언트를 배치합니다.

• 그라디언트 유형: 선형
• 방향: 209deg
• 반복: 아니요
• 단위: 퍼센트
• 배경 이미지 위에 그라디언트 배치: 예

원형 그라데이션 유형

원형 그라데이션 유형은 색상으로 원을 만듭니다.

첫 번째 원형 그라데이션 예

첫 번째 원형 그래디언트 예제에서는 중앙에 밝은 색상을 배치하고 가장자리 주위에 더 어두운 색상을 배치합니다.

이것은 2가지 색상이 있습니다. 첫 번째 는 0% 위치에 있는 rgba(92,158,82,0.76)입니다. 두 번째 는 62% 위치의 rgba(0,10,4,0.76)입니다.

• 색상 1: rgba(92,158,82,0.76)(0% 위치에서)
• 색상 2: rgba(0,10,4,0.76)(62% 위치에서)

그라디언트 유형 을 원형으로 설정합니다. 방향 을 중앙에 둡니다. 반복하지 않도록 하고 Unit 을 Percent로 변경하고 배경 이미지 위에 배치합니다.

• 그라디언트 유형: 원형
• 방향: 센터
• 반복: 아니요
• 단위: 퍼센트
• 배경 이미지 위에 그라디언트 배치: 예

두 번째 원형 그라데이션 예

이 그라디언트는 화면 중앙에 명확한 원형 가장자리를 배치합니다.

4가지 색상이 있습니다. 두 가지 색상이 겹쳐져 있습니다. 첫 번째 는 13% 위치의 rgba(18,76,41,0.76)입니다. 두 번째 는 33% 위치의 rgba(92,158,82,0.76)입니다. 색상 3 은 51% 위치에서 rgba(92,158,82,0.76)입니다. 색상 4 는 rgba(18,76,41,0.76)입니다. 색상 3 위의 51% 위치에 배치됩니다.

• 색상 1: rgba(18,76,41,0.76) (13% 위치에서)
• 색상 2: rgba(92,158,82,0.76) (33% 위치에서)
• 색상 3: rgba(92,158,82,0.76)(51% 위치에서)
• 색상 4: rgba(18,76,41,0.76) (51% 위치에서)

그라디언트 유형 을 원형으로 설정하고 방향 을 왼쪽 상단에 배치합니다. 반복하지 않도록 하고 Unit 을 Percent로 변경하고 배경 이미지 위에 배치합니다.

• 그라디언트 유형: 원형
• 방향: 왼쪽 상단
• 반복: 아니요
• 단위: 퍼센트
• 배경 이미지 위에 그라디언트 배치: 예

세 번째 원형 그라데이션 예

이 예에서는 원의 중앙에서 시작하여 더 어두운 색상 안에 여러 개의 밝은 원을 배치합니다.

이것은 또한이 디자인을 얻기 위해 특정 순서로 두 가지 색상을 쌓습니다. 첫 번째 색상은 13% 위치의 rgba(18,76,41,0.76)입니다. 색상 2 는 44% 위치에서 rgba(18,76,41,0.76)입니다. 세 번째 색상은 두 번째 색상 위에 쌓입니다. 44% 위치에 있는 rgba(92,158,82,0.76)입니다. 색상 4 는 51% 위치에서 rgba(92,158,82,0.76)입니다.

• 색상 1: rgba(18,76,41,0.76) (13% 위치에서)
• 색상 2: rgba(18,76,41,0.76) (44% 위치에서)
• 색상 3: rgba(92,158,82,0.76)(44% 위치에서)
• 색상 4: rgba(92,158,82,0.76)(51% 위치에서)

그라디언트 유형 을 원형으로 변경합니다. 아래쪽에 방향 을 배치합니다. 이것을 반복 하십시오. 단위 를 백분율로 설정하고 배경 이미지 위에 그라디언트를 배치합니다.

• 그라디언트 유형: 원형
• 방향: 바닥
• 반복: 예
• 단위: 퍼센트
• 배경 이미지 위에 그라디언트 배치: 예

타원형 그라데이션 유형

타원형 그라디언트는 색상을 타원 모양으로 배치합니다.

첫 번째 타원형 그라데이션 예

첫 번째 타원 예제에서는 화면 중앙에 밝은 색상의 타원을 배치하고 주변에 어두운 색상의 타원을 배치합니다.

이것은 두 가지 색상이 있습니다. 첫 번째 는 0% 위치에 있는 rgba(92,158,82,0.76)입니다. 두 번째 는 50% 위치의 rgba(0,10,4,0.76)입니다.

• 색상 1: rgba(92,158,82,0.76)(0% 위치에서)
• 색상 2: rgba(0,10,4,0.76)(50% 위치에서)

그라디언트 유형 을 타원형으로 변경합니다. 방향 을 중앙으로 설정합니다. 이것을 반복하지 않도록 하고 단위 를 퍼센트로 설정하고 배경 이미지 위에 배치합니다.

• 그라디언트 유형: 타원형
• 방향: 센터
• 반복: 아니요
• 단위: 퍼센트
• 배경 이미지 위에 그라디언트 배치: 예

두 번째 타원형 그라데이션 예

두 번째 예에서는 그라디언트 전체에 미세한 원형 선을 많이 배치합니다.

두 가지 색상이 있습니다. 첫 번째 는 34pt 위치의 rgba(92,158,82,0.76)입니다. 두 번째 는 39pt 위치의 rgba(0,10,4,0.76)입니다.

• 색상 1: rgba(92,158,82,0.76) (34pt 위치에서)
• 색상 2: rgba(0,10,4,0.76) (39pt 위치에서)

그라디언트 유형 을 타원형으로 변경하고 방향 을 왼쪽으로 설정합니다. 이것을 반복 하십시오. 단위 를 포인트로 변경합니다. 배경 이미지 위에 배치합니다.

• 그라디언트 유형: 타원형
• 방향: 왼쪽
• 반복: 예
• 단위: 포인트
• 배경 이미지 위에 그라디언트 배치: 예

세 번째 타원형 그라데이션 예

세 번째 예에서는 그라디언트 내에 많은 반원을 배치합니다.

이것은 두 가지 색상이 있습니다. 첫 번째 는 34vmin 위치의 rgba(32,68,35,0.73)입니다. 두 번째 는 39vmin 위치의 rgba(0,10,4,0.76)입니다.

• 색상 1: rgba(32,68,35,0.73) (34vmin 위치에서)
• 색상 2: rgba(0,10,4,0.76)(39vmin 위치에서)

그라디언트 유형 을 타원형으로 변경하고 방향 을 위쪽으로 설정합니다. 이것을 반복 하십시오. 단위 를 최소 뷰포트로 변경합니다. 배경 이미지 위에 배치합니다.

• 그라디언트 유형: 타원형
• 방향: 상단
• 반복: 예
• 단위: 뷰포트 최소
• 배경 이미지 위에 그라디언트 배치: 예

원뿔형 그라데이션 유형

원뿔형 그래디언트 타입은 원뿔이 위에서 본 것처럼 원뿔 모양으로 그래디언트를 표시합니다.

첫 번째 원뿔형 그라디언트 예제

이 예에서는 한 면에는 밝은 색상이, 다른 면에는 어두운 색상이 있는 왼쪽으로 그라디언트 중심에서 대각선을 배치합니다.

두 가지 색상이 있습니다. 첫 번째 는 0% 위치에 있는 rgba(92,158,82,0.76)입니다. 두 번째 는 50% 위치의 rgba(0,10,4,0.76)입니다.

• 색상 1: rgba(92,158,82,0.76)(0% 위치에서)
• 색상 2: rgba(0,10,4,0.76)(50% 위치에서)

그라디언트 유형 을 원추형으로 변경합니다. 방향 을 221deg로 설정합니다. 위치 를 중앙에 두고 반복하지 않도록 합니다. 이미지 위에 그라디언트를 배치합니다.

• 그라디언트 유형: 원추형
• 방향: 221deg
• 위치: 센터
• 반복: 아니요
• 배경 이미지 위에 그라디언트 배치: 예

두 번째 원뿔형 그라디언트 예

이 예제는 이전 예제와 유사하지만 중앙에서 위쪽으로 선을 배치합니다.

이렇게 4가지 색상이 있습니다. 첫 번째 는 7% 위치의 rgba(20,40,20,0.76)입니다. 색상 2 는 24% 위치에서 rgba(30,73,25,0.68)입니다. 색상 3 은 65% 위치에서 rgba(103,132,30,0.68)입니다. 네 번째 색상은 85% 위치에 있는 rgba(38,86,26,0.68)입니다.

• 색상 1: rgba(20,40,20,0.76) (7% 위치에서)
• 색상 2: rgba(30,73,25,0.68) (24% 위치에서)
• 색상 3: rgba(103,132,30,0.68)(65% 위치에서)
• 색상 4: rgba(38,86,26,0.68)(85% 위치에서)

그라디언트 유형 을 원뿔형으로 설정하고 방향 을 0deg로 설정합니다. 위치 를 중앙에 놓습니다. 그것을 반복하지 말고 이미지 위에 배치하십시오.

• 그라디언트 유형: 원추형
• 방향: 0deg
• 위치: 센터
• 반복: 아니요
• 배경 이미지 위에 그라디언트 배치: 예

세 번째 원뿔형 그라디언트 예

우리의 마지막 예는 그라디언트의 상단 중앙에서 모든 방향으로 바깥쪽으로 선 버스트를 배치합니다.

이것은 두 가지 색상이 있습니다. 첫 번째 는 5deg 위치의 rgba(30,73,25,0.68)입니다. 두 번째 는 7deg 위치의 rgba(20,40,20,0.76)입니다.

• 색상 1: rgba(30,73,25,0.68) (5deg 위치에서)
• 색상 2: rgba(20,40,20,0.76) (7deg 위치에서)

eth 그라디언트 유형 을 원뿔형으로, 방향 을 221deg로 설정합니다. 위치 를 맨 위에 놓습니다. 이것을 반복 하고 배경 이미지 위에 배치하십시오.

• 그라디언트 유형: 원추형
• 방향: 221deg
• 위치: 상단
• 반복: 예
• 배경 이미지 위에 그라디언트 배치: 예

마무리 생각

이것이 Divi의 Gradient Builder에서 그라디언트 유형을 비교하는 방법입니다. 이 예에서 볼 수 있듯이 설정은 간단하지만 그 중 하나가 그라디언트 디자인에 큰 차이를 만들 수 있습니다. 최상의 결과를 얻으려면 방향과 위치가 다른 그라디언트 유형을 시도하고 반복 옵션을 활성화 또는 비활성화하여 생성할 수 있는 것을 확인하십시오.

우리는 당신의 의견을 듣고 싶습니다. Divi Gradient Builder에서 다양한 그라디언트 유형을 사용해 보셨습니까? 의견에 귀하의 경험에 대해 알려주십시오.