의 Gradient Builder를 사용하시겠습니까? Divi 하지만 어떤 유형의 그라디언트를 선택해야 할지 모르십니까?
그라디언트 유형은 새로운 Divi 그라디언트 빌더 . 새로운 유형의 그라디언트 Divi 배경에 다양한 모양과 색상을 추가할 수 있습니다.
이 기사에서는 이러한 유형의 그라디언트를 비교하고 이를 사용하여 독특한 배경을 만드는 방법을 보여줍니다!
시작하자.
Divi 그라디언트 유형은 무엇입니까?
Divi의 새로운 Gradient Builder는 그라디언트 유형을 포함하는 몇 가지 새로운 그라디언트 기능을 추가합니다. XNUMX가지 유형의 그라디언트 중에서 선택할 수 있습니다.
- 선의
- 원형의
- 타원형
- 원추형
각 유형은 그라데이션을 다르게 표시합니다. 원, 타원 또는 원뿔 형태의 선형 색상 패턴으로 표시될 그라디언트의 모양을 지정하는 데 사용됩니다. 우리는 우리의 예에서 그것들을 자세히 볼 것입니다.
그라디언트 유형은 위치, 반복 여부, 그라디언트 스크롤 막대의 측정 단위 및 배경 위의 그라디언트 배치와 같은 다른 컨트롤의 영향도 받습니다.
각 조정은 그래디언트에 작거나 큰 영향을 줄 수 있습니다. 그라데이션은 미묘하거나 두드러질 수 있습니다. 단 한 번의 조정으로 작거나 큰 변화를 만들 수 있습니다.
이를 염두에 두고 각 그라디언트 유형을 사용하는 그라디언트의 몇 가지 예를 살펴보겠습니다. 각 유형의 그래디언트에 대한 세 가지 예를 보여 드리겠습니다.
첫 번째는 웹에서 볼 수 있는 표준 그라디언트 유형입니다. 다음 두 가지는 그라디언트 유형으로 무엇을 할 수 있는지 알아보기 위해 조금 더 실험적입니다.
그라디언트 유형의 예
그래디언트 유형의 예는 홈페이지의 Hero 섹션을 사용합니다. 무료 침대 및 아침 식사 레이아웃 팩 디비에서 사용 가능합니다. 이 섹션에는 이미 그라디언트가 있지만 이를 대체하고 몇 가지 실험을 해보겠습니다.
원래 배경 그라디언트를 제거하거나 수정할 수 있습니다. 결과는 동일합니다. 단순화를 위해 수정하겠습니다.
제목 텍스트를 검은색에서 흰색으로 변경하여 사용자 정의했습니다.
선형 그라데이션 유형
선형 그라디언트는 그라디언트가 페이지 전체에 펼쳐진 것처럼 그라디언트를 표시합니다.
선형 그래디언트 유형의 첫 번째 예
다음은 첫 번째 예의 미리보기입니다. 화면 왼쪽에는 더 밝은 색상이 표시되고 오른쪽에는 더 어두운 색상이 표시되며 화면 사이가 부드럽게 전환됩니다.
이 예를 만들려면 두 가지 색상을 추가하십시오. 그만큼 수상 92,158,82,0.76% 위치에서 rgba(0)입니다. 그만큼 초 0,10,4,0.76% 위치에서 rgba(97)입니다.
- 그라데이션 중지:
- 0%: RGBA(92,158,82,0.76)
- 97%: RGBA(0,10,4,0.76)
그런 다음 변경 타입 그라디언트를 선형으로 설정하고 방향 131도 이상. 그가 반복하지마. 설정통일 백분율에. 배경 이미지 위에 그라디언트를 배치합니다.
- 그라디언트 유형: 선형
- 기울기 방향: 131deg
- 그라디언트 반복: 아니오
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션 : 예
선형 그래디언트 유형의 두 번째 예
다음은 두 번째 선형 그래디언트 예제의 미리보기입니다. 그것은 첫 번째와 같이 작동하지만 더 어두운 그늘이 차지하는 왼쪽에 하드 스톱이 있습니다.
이것을 만들려면 XNUMX개의 Gradient Stops를 추가하십시오. 그만큼 수상 18,76,41,0.76% 위치에서 rgba(13)입니다. 그만큼 초 92,158,82,0.76% 위치에서 rgba(13)입니다. 색상 3 18,76,41,0.76% 위치에서 rgba(34)입니다.
- 그라데이션 중지:
- 13%: RGBA(18,76,41,0.76)
- 13%: RGBA(92,158,82,0.76)
- 34%: RGBA(18,76,41,0.76)
그런 다음 설정 타입 그라디언트를 선형으로 설정하고 방향 90도 이상. 그가 반복하지마 . 변경통일 백분율. 배경 이미지 위에 배치합니다.
- 그라디언트 유형: 선형
- 기울기 방향: 90deg
- 그라디언트 반복: 아니오
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션 : 예
선형 그래디언트 유형의 세 번째 예
세 번째 예에서는 오른쪽 상단 모서리를 가로질러 대각선으로 밝은 색상의 선을 배치하고 더 어두운 색상의 선을 터치합니다.
이것은 세 가지 색상이 있습니다. 색상 1 92,158,82,0.76% 위치에서 rgba(13)입니다. 색상 2 92,158,82,0.76% 위치에서 rgba(23)입니다. 그만큼 세 번째 색상 18,76,41,0.76% 위치에서 rgba(32)입니다.
- 그라데이션 중지:
- 13%: RGBA(92,158,82,0.76)
- 23%: RGBA(92,158,82,0.76)
- 32%: RGBA(18,76,41,0.76)
정의 타입 선형에 대한 그라디언트 방향 209도. 태어난 반복하지마 그리고 설정통일 백분율에. 배경 이미지 위에 그라디언트를 배치합니다.
- 그라디언트 유형: 선형
- 기울기 방향: 209deg
- 그라디언트 반복: 아니오
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션 : 예
원형 그라데이션 유형
원형 그라데이션 유형은 색상으로 원을 만듭니다.
원형 그래디언트 유형의 첫 번째 예
첫 번째 원형 그래디언트 예제에서는 중앙에 밝은 색상을 배치하고 가장자리 주위에 더 어두운 색상을 배치합니다.
이것은 2가지 색상이 있습니다. 그만큼 수상 92,158,82,0.76% 위치에서 rgba(0)입니다. 그만큼 초 0,10,4,0.76% 위치에서 rgba(62)입니다.
- 그라데이션 중지:
- 0%: RGBA(92,158,82,0.76)
- 62%: RGBA(0,10,4,0.76)
정의 타입 원형에 그라데이션입니다. 중앙에 방향 . 그가 반복하지마 , 변경통일 백분율로 표시하고 배경 이미지 위에 배치합니다.
- 그라디언트 유형: 원형
- 그라데이션 위치: 중앙
- 그라디언트 반복: 아니오
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션 : 예
원형 그래디언트 유형의 두 번째 예
이 그라디언트는 화면 중앙에 명확한 원형 가장자리를 배치합니다.
XNUMX가지 색상이 있습니다. 두 가지 색상이 중첩됩니다. 그만큼 수상 18,76,41,0.76% 위치에서 rgba(13)입니다. 그만큼 초 92,158,82,0.76% 위치에서 rgba(33)입니다. 색상 3 92,158,82,0.76% 위치에서 rgba(51)입니다. 색상 4 rgba(18,76,41,0.76)입니다. 색상 51 위의 3% 위치에 배치됩니다.
- 그라데이션 중지:
- 13%: RGBA(18,76,41,0.76)
- 33%: RGBA(92,158,82,0.76)
- 51%: RGBA(92,158,82,0.76)
- 51%: RGBA(18,76,41,0.76)
정의 타입 원형으로 그라디언트를 배치하고 방향 왼쪽 상단 모서리에. 그가 반복하지마 , 변경 통일 백분율로 표시하고 배경 이미지 위에 배치합니다.
- 그라디언트 유형: 원형
- 그라데이션 위치: 왼쪽 상단
- 그라디언트 반복: 아니오
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션 : 예
원형 그래디언트 유형의 세 번째 예
이 예에서는 원의 중앙에서 시작하여 가장 어두운 색으로 여러 개의 밝은 원을 배치합니다.
이것은 또한이 디자인을 달성하기 위해 특정 순서로 두 가지 색상을 쌓습니다. 그만큼 첫날 색상은 18,76,41,0.76% 위치에서 rgba(13)입니다. 색상 2 18,76,41,0.76% 위치에서 rgba(44)입니다. 그만큼 세 번째 색상이 두 번째 색상과 겹칩니다. 92,158,82,0.76% 위치에 있는 rgba(44)입니다. 색상 4 92,158,82,0.76% 위치에서 rgba(51)입니다.
- 그라데이션 중지:
- 13%: RGBA(18,76,41,0.76)
- 44%: RGBA(18,76,41,0.76)
- 44%: RGBA(92,158,82,0.76)
- 51%: RGBA(92,158,82,0.76)
그것을 변경 그라데이션 유형 원형으로. 두는 방향 아래에. 반복 이 하나. 설정통일 on Percentage를 선택하고 배경 이미지 위에 그라디언트를 배치합니다.
- 그라디언트 유형: 원형
- 그라데이션 위치: 하단
- 그라디언트 반복: 예
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션 : 예
타원형 그라데이션 유형
타원형 그라디언트는 타원 모양으로 색상을 배치합니다.
타원형 그래디언트 유형의 첫 번째 예
첫 번째 타원형 예제는 밝은 색의 타원을 화면 중앙에 배치하고 주변에 더 어두운 색을 배치합니다.
이것은 두 가지 색상이 있습니다. 그만큼 수상 92,158,82,0.76% 위치에서 rgba(0)입니다. 그만큼 초 0,10,4,0.76% 위치에서 rgba(50)입니다.
- 그라데이션 중지:
- 0%: RGBA(92,158,82,0.76)
- 50%: RGBA(0,10,4,0.76)
그것을 변경 그라데이션 유형 타원형으로. 설정 방향 센터에. 이것을 확인하십시오 반복하지마 , 조정통일 퍼센트에 놓고 배경 이미지 위에 놓습니다.
- 그라디언트 유형: 타원형
- 그라데이션 위치: 중앙
- 그라디언트 반복: 아니오
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션 : 예
타원형 그래디언트 유형의 두 번째 예
두 번째 예에서는 그라디언트 전체에 많은 얇은 원형 선을 배치합니다.
두 가지 색상이 있습니다. 그만큼 수상 92,158,82,0.76pt 위치에서 rgba(34)입니다. 그만큼 초 위치 0,10,4,0.76pt에서 rgba(39)입니다.
- 그라데이션 중지:
- 34pt: rgba(92,158,82,0.76)
- 39pt: rgba(0,10,4,0.76)
그것을 변경 타입 그라디언트를 타원형으로 조정하고 방향 왼쪽에. 이것을 가지고 반복하다. 변경통일 점에서. 배경 이미지 위에 배치합니다.
- 그라디언트 유형: 타원형
- 그라데이션 위치: 오른쪽
- 그라디언트 반복: 예
- 그라데이션 단위: 도트(pt)
- 배경 이미지 위의 정사각형 그라데이션 : 예
타원형 그래디언트 유형의 세 번째 예
세 번째 예에서는 그라디언트에 많은 반원을 배치합니다.
이것은 두 가지 색상이 있습니다. 그만큼 수상 위치 32,68,35,0.73vmin에서 rgba(34)입니다. 그만큼 초 위치 0,10,4,0.76vmin에서 rgba(39)입니다.
- 그라데이션 중지:
- 34vmin: RGBA(32, 68, 35, 0.73)
- 39vmin: rgba(0,10,4,0.76)
그것을 변경 타입 그라디언트를 타원형으로 조정하고 방향 높은. 이것을 가지고 반복하다. 변경통일 뷰포트 최소에서. 배경 이미지 위에 배치합니다.
- 그라디언트 유형: 타원형
- 그라데이션 위치: 상단
- 그라디언트 반복: 예
- 그라데이션 단위: 뷰포트 최소값(vmin)
- 배경 이미지 위의 정사각형 그라데이션 : 예
원뿔형 그라데이션 유형
또한보십시오: Divi: 요소 간에 배경 전환을 만드는 방법
원뿔형 그라디언트 유형은 원뿔형을 위에서 본 것처럼 그라디언트를 원뿔형으로 표시합니다.
원뿔형 그래디언트 유형의 첫 번째 예
이 예에서는 그라디언트의 중심에서 왼쪽으로 대각선을 배치하고 한쪽에는 밝은 색상을, 다른 한쪽에는 어두운 색상을 배치합니다.
두 가지 색상이 있습니다. 그만큼 수상 92,158,82,0.76% 위치에서 rgba(0)입니다. 그만큼 초 0,10,4,0.76% 위치에서 rgba(50)입니다.
- 그라데이션 중지:
- 0%: RGBA(92,158,82,0.76)
- 50%: RGBA(0,10,4,0.76)
그것을 변경 그라데이션 유형 원추형. 조정 방향 221도 이상. 중앙에 위치 et 그것을 반복하지 마십시오 . 이미지 위에 그라디언트를 배치합니다.
- 그라디언트 유형: 원추형
- 기울기 방향: 221deg
- 위치: 센터
- 그라디언트 반복: 아니오
- 배경 이미지 위의 정사각형 그라데이션 : 예
원뿔형 기울기 유형의 두 번째 예
이 예는 이전 예와 유사하지만 중심선을 위로 배치합니다.
이렇게 XNUMX가지 색상이 있습니다. 그만큼 수상 20,40,20,0.76% 위치에서 rgba(7)입니다. 색상 2 30,73,25,0.68% 위치에서 rgba(24)입니다. 색상 3 103,132,30,0.68% 위치에서 rgba(65)입니다. 그만큼 네번째 색상은 38,86,26,0.68% 위치에서 rgba(85)입니다.
- 그라데이션 중지:
- 7%: RGBA(20,40,20,0.76)
- 24%: RGBA(30,73,25,0.68)
- 65%: RGBA(103,132,30,0.68)
- 85%: RGBA(38,86,26,0.68)
정의 그라데이션 유형 원추형 및 방향 0도에서. 중앙에 위치 . 태어난 반복하지마 그리고 그것을 이미지 위에 놓습니다.
- 그라디언트 유형: 원추형
- 기울기 방향: 0deg
- 위치: 센터
- 그라디언트 반복: 아니오
- 배경 이미지 위의 정사각형 그라데이션 : 예
원뿔형 기울기 유형의 세 번째 예
우리의 마지막 예는 그라디언트의 상단 중앙에서 모든 방향으로 바깥쪽으로 선 버스트를 배치합니다.
이것은 두 가지 색상이 있습니다. 그만큼 수상 30,73,25,0.68deg 위치에서 rgba(5)입니다. 그만큼 초 20,40,20,0.76deg 위치에서 rgba(7)입니다.
- 그라데이션 중지:
- 5도: rgba(30,73,25,0.68)
- 7도: rgba(20,40,20,0.76)
설정 그라디언트 유형 원뿔 및 방향 221도에서 두는 위치 위. 반복하다 이것을 배경 이미지 위에 놓으십시오.
- 그라디언트 유형: 원추형
- 기울기 방향: 221deg
- 위치: 상단
- 그라디언트 반복: 예
- 배경 이미지 위의 정사각형 그라데이션 : 예
지금 DIVI를 다운로드하세요!!!
결론
이것은 Divi의 Gradient Builder에서 그라디언트 유형을 비교한 것입니다.
이 예에서 볼 수 있듯이 설정은 간단하지만 그 중 하나가 그라디언트 디자인에 큰 차이를 만들 수 있습니다.
최상의 결과를 얻으려면 방향과 위치가 다른 그라디언트 유형을 실험하고 반복 옵션을 켜거나 끄면 무엇을 만들 수 있는지 확인합니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
