Divi의 그라디언트 반복 옵션을 사용하여 사용자 정의 배경 패턴을 만드는 방법

Divi의 배경 옵션은 배경 패턴을 만드는 다양한 방법을 제공합니다. 그라디언트만 사용하여 배경 패턴을 만들 수도 있습니다. 그라디언트 반복 옵션을 사용하면 이를 간단하고 쉽게 수행할 수 있습니다. 이 게시물에서는 Divi의 그라디언트 반복 옵션을 사용하여 사용자 정의 배경 패턴을 만드는 방법을 살펴보겠습니다.

시작하자.

그라디언트 반복이란

그라디언트 반복 옵션은 그라디언트 정지를 기반으로 패턴을 생성합니다. 그라디언트 중지는 색상이 표시되고 그라디언트 내에서 중지되는 위치를 결정하는 측정값입니다. Divi의 Gradient Builder는 이러한 정지점을 사용하여 패턴을 생성합니다.

마지막 색상은 그라디언트 내에서 정지점이 있는 위치를 그라디언트에 알려줍니다. 그 정지 지점 이전에 원하는 만큼의 색상을 가질 수 있습니다. 그런 다음 Gradient Builder는 패턴을 생성하는 화면을 채우기 위해 반복합니다. 옵션은 섹션, 행, 열 또는 모듈에 추가할 수 있으며 함께 사용할 수 있습니다.

그라디언트 반복 옵션 활성화

그라디언트 반복 옵션을 활성화하려면 톱니바퀴 아이콘을 클릭하여 섹션 설정을 엽니다. 이것은 행, 열 및 모듈에서도 작동합니다.

배경 까지 아래로 스크롤합니다. 배경 그라디언트 탭을 선택하고 배경 그라디언트 추가 를 클릭합니다.

그라디언트 정지 막대 아래에는 그라디언트 반복 이라는 설정이 있습니다. 기본적으로 비활성화되어 있습니다. 활성화하려면 클릭하기만 하면 됩니다.

이제 그라디언트가 반복되어 Gradient Stops 및 Gradient Unit과 같은 다른 그라디언트 설정을 기반으로 패턴이 생성됩니다.

기울기 단위

기울기 단위는 측정 단위입니다. 이것은 그라디언트 막대의 그라디언트 스톱 번호가 나타내는 것을 지정하며, 이는 그라디언트 스톱이 측정되는 방법을 결정합니다. 반복 옵션으로 생성된 패턴에 영향을 줍니다.

Divi의 Background Gradient Builder에는 15개의 유닛이 있습니다. 가장 인기 있는 4가지 옵션의 예를 살펴보겠습니다. 예제에서 볼 수 있듯이 결과는 Gradient Stops 및 설정의 수에 따라 변경됩니다. 저는 예제의 색상을 사용하고 있으며 더 쉽게 볼 수 있도록 반복하도록 설정했습니다. 다음 설정에서 세 가지 색상을 사용하겠습니다.

• 색상 1: #fff6ee(14% 위치)
• 색상 2: #ede3dc(46% 위치)
• 색상 3: #e8ded7(82% 위치)

그라디언트 설정

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

퍼센트

Percent는 Gradient Stops를 백분율로 측정합니다. 이것은 부모 요소를 기반으로 그라디언트 포인트를 계산합니다. 마지막 그라디언트 포인트가 작을수록 생성되는 패턴이 더 촘촘해집니다. 색상 중 하나의 위치를 ​​조정할 때 다른 색상은 제자리에 유지되는 동안 해당 색상은 이동합니다.

픽셀

픽셀은 각 그라디언트 정지의 픽셀 수를 측정합니다. 이것은 다른 많은 단위 유형보다 그라디언트에 더 작은 패턴을 제공합니다. 첫 번째 또는 마지막 색상의 위치를 ​​이동하면 각 색상의 위치가 변경됩니다.

뷰포트 높이(vh)

뷰포트는 표시되는 브라우저 창의 영역입니다. 높이와 너비가 별도로 측정됩니다. 뷰포트 높이는 Gradient Stops를 사용하여 뷰포트 크기 높이의 백분율을 측정합니다. 첫 번째 또는 마지막 색상의 위치를 ​​조정하면 모든 색상에 영향을 줍니다.

뷰포트 너비(vw)

Viewport Width는 Gradient Stops를 사용하여 뷰포트 크기의 너비(또는 브라우저 너비)의 백분율을 측정합니다. 너비에 따라 조정이 변경됩니다. 더 크거나 작은 숫자를 조정하면 해당 특정 색상의 위치가 변경되고 다른 색상은 그대로 유지됩니다.

그라디언트 반복 옵션 예

이 예에서는 Divi 내에서 사용할 수 있는 무료 Acupuncture Layout Pack 랜딩 페이지의 클릭 유도문안 섹션을 사용하고 있습니다.

섹션의 첫 번째 열을 조정해야 합니다. 톱니바퀴 아이콘을 클릭하여 행의 설정 을 엽니다.

그런 다음 첫 번째 열의 톱니바퀴 아이콘 을 선택합니다.

열 1 그라디언트

열 1에는 자체 배경 그라데이션이 있습니다. 이것은 레이아웃의 일부입니다. 우리는 이것을 바꾸지 않을 것입니다. 네 가지 예제 모두에서 이 동일한 그라디언트를 사용합니다. 필요한 경우에 대비한 설정입니다.

• 색상 1: #f4d5b8(0px 위치)
• 색상 2: rgba(244,213,184,0) (100px 위치)

그라디언트 설정

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

간격

열 왼쪽에 약간의 간격을 추가합니다. 디자인 설정으로 이동하여 간격 까지 아래로 스크롤한 다음 태블릿 아이콘 을 선택하여 장치 옵션을 엽니다. 데스크탑 및 태블릿 탭의 경우 왼쪽에 5% 패딩을 추가합니다. 전화 탭을 선택하고 왼쪽 패딩을 제거합니다. 현재 설정에서 위쪽 및 오른쪽을 그대로 둡니다.

• 상단 패딩: 180px
• 왼쪽 패딩: 5%
• 오른쪽 패딩: 80px

예 1

첫 번째 예에서는 가는 선이 있는 대각선으로 반복되는 패턴을 만듭니다.

이것은 3개의 그라디언트 스톱이 있습니다. 첫 번째 색상은 #fff6ee이며 4px 위치에 배치됩니다. 두 번째 는 9px 위치에 배치된 #ede3dc입니다. 마지막 은 14px 위치에 배치된 #e8ded7입니다. 이것은 그라디언트가 반복이 시작되는 14픽셀에서 중지됨을 의미합니다. 색상 정지점은 서로 가까이 있어 패턴을 작게 유지합니다.

• 색상 1: #fff6ee(4px 위치)
• 색상 2: #ede3dc(9px 위치)
• 색상 3: #e8ded7(14px 위치)

그래디언트 설정의 경우 그래디언트 유형 을 선형으로 변경하고 방향 을 156deg로 설정합니다. 반복 그라디언트 를 활성화합니다. 단위 로 픽셀을 선택합니다.

• 유형: 선형
• 방향: 156deg
• 반복 기울기: 예
• 단위: 픽셀
• 배경 이미지 위에 그라디언트 배치: 아니요

예 2

두 번째 예에서는 더 큰 선이 있는 대각선 반복 패턴을 만듭니다.

이것은 3개의 그라디언트 스톱이 있습니다. 첫 번째 는 4px 위치에 배치된 #fff6ee 색상입니다. 두 번째 색상은 43px 위치에 배치된 #ede3dc입니다. 마지막 은 50px 위치에 배치된 #e8ded7입니다. 이 그라디언트는 50px에서 멈추고 패턴을 반복합니다.

• 색상 1: #fff6ee(4px 위치)
• 색상 2: #ede3dc(43px 위치)
• 색상 3: #e8ded7(50px 위치)

그라디언트 설정의 경우 유형 으로 선형을 선택하고 방향 을 156deg로 설정합니다. 반복 그라디언트 를 활성화하고 단위 를 픽셀로 변경합니다.

• 유형: 선형
• 방향: 156deg
• 반복 기울기: 예
• 단위: 픽셀
• 배경 이미지 위에 그라디언트 배치: 아니요

예 3

세 번째 예에서는 중간 크기의 원으로 반복되는 원형 패턴을 만듭니다.

이것은 3개의 그라디언트 스톱이 있습니다. 첫 번째 색상은 #fff6ee이며 4px 위치에 배치됩니다. 색상 2 는 #e8ded7이며 7px 위치에 배치됩니다. 마지막 색상은 8px 위치에 배치된 #ede3dc입니다. 이 그라디언트는 8픽셀에서 멈추고 다른 색상은 서로 가까워서 촘촘한 패턴을 만듭니다.

• 색상 1: #fff6ee(4px 위치)
• 색상 2: #e8ded7(7px 위치)
• 색상 3: #ede3dc(8px 위치)

그래디언트 설정의 경우 유형 을 원형으로 변경하고 방향 을 하단으로 설정합니다. 반복 그라디언트 를 활성화하고 단위 를 퍼센트로 변경합니다.

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

예 4

네 번째 예에서는 큰 원이 있는 원형 패턴을 만듭니다.

이것은 3개의 그라디언트 스톱이 있습니다. 첫 번째 는 4px 위치에 배치된 #fff6ee입니다. 두 번째 는 23px 위치에 배치된 #e8ded7입니다. 세 번째 는 31px 위치에 배치된 #ede3dc입니다. 이 그라디언트는 색상이 더 멀리 떨어져 있고 31픽셀에서 멈추는 더 큰 패턴을 만듭니다.

• 색상 1: #fff6ee(4px 위치)
• 색상 2: #e8ded7(23px 위치)
• 색상 3: #ede3dc(31px 위치)

그라디언트 설정의 경우 유형 을 원형으로 변경하고 방향 을 중앙으로 설정합니다. 반복 그라디언트 를 활성화하고 단위 를 퍼센트로 변경합니다.

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

마무리 생각

Divi의 그래디언트 반복 옵션을 사용하여 사용자 정의 배경을 만드는 방법을 살펴보았습니다. 그라디언트의 디자인에 영향을 주는 그라디언트 설정 내에는 많은 조정이 있습니다. 그라디언트 반복은 이러한 모든 조정과 잘 작동하여 흥미로운 사용자 정의 배경 패턴을 쉽게 만들 수 있습니다. 여기에 제공된 예제를 시도하고 변경하여 그라디언트가 어떻게 영향을 받는지 확인하고 사용자 지정 배경 그라디언트를 만드는 것이 좋습니다.

우리는 당신의 의견을 듣고 싶습니다. 사용자 정의 배경에 Divi의 그라디언트 반복 옵션을 사용합니까? 의견에 대해 알려주십시오.