의 그라디언트 반복 옵션을 사용하여 사용자 정의 배경 패턴을 생성하시겠습니까? Divi ?
의 배경 옵션 Divi 배경 패턴을 만드는 다양한 방법을 제공합니다. 그라디언트만 사용하여 배경 패턴을 만들 수도 있습니다. 그라디언트 반복 옵션을 사용하면 이 작업을 간단하고 쉽게 수행할 수 있습니다.
이 기사에서는 Gradient Repeat 옵션을 사용하는 방법을 살펴보겠습니다. Divi 사용자 정의 배경 패턴을 생성합니다.
시작하자.
또한보십시오: Divi: 버튼 클릭 후 나타나는 문의 양식을 만드는 방법
그래디언트 반복이란 무엇입니까?
그라디언트 반복 옵션은 그라디언트 중지를 기반으로 패턴을 만듭니다. 그라디언트 스톱은 그라디언트에서 색상이 나타나고 멈추는 위치를 결정하는 측정값입니다. Divi 그라디언트 빌더는 이러한 정지점을 사용하여 패턴을 만듭니다.
마지막 색상은 그라디언트에서 중단점이 있는 그라디언트를 알려줍니다. 이 중단점 이전에 원하는 만큼 많은 색상을 가질 수 있습니다.
Le 그라디언트 빌더 그런 다음 패턴을 생성하는 화면을 채우기 위해 반복합니다. 옵션은 섹션, 행, 열 또는 모듈에 추가할 수 있으며 함께 사용할 수 있습니다.
"배경 그라디언트"옵션을 활성화하십시오
옵션을 활성화하려면 그라디언트 반복, 톱니바퀴 아이콘을 클릭하여 섹션의 설정을 엽니다. 또한 행, 열 및 모듈.
다음으로 스크롤 배경 . 탭 선택 그라데이션 배경 클릭 배경 그라데이션 추가.
그라디언트 정지 표시줄 아래에는 다음과 같은 설정이 있습니다. 그라디언트 반복 . 기본적으로 비활성화되어 있습니다. 활성화하려면 클릭하기만 하면 됩니다.
이제 그라디언트가 반복되어 그라디언트 정지점과 그라디언트 단위와 같은 다른 그라디언트 설정을 기반으로 패턴을 만듭니다.
기울기 단위
기울기 단위는 측정 단위입니다. 이것은 그라디언트 막대의 그라디언트 스톱 번호가 나타내는 것을 지정하며, 이는 그라디언트 스톱이 측정되는 방법을 결정합니다. 이는 반복 옵션으로 생성된 패턴에 영향을 줍니다.
Divi의 배경 그라디언트 생성기는 15개 단위를 제공합니다. 가장 인기 있는 XNUMX가지 옵션의 예를 살펴보겠습니다. 예제에서 볼 수 있듯이 결과는 그라디언트 정지 수와 설정에 따라 달라집니다.
퍼센트(퍼센트)
백분율은 백분율로 그라데이션 중지를 측정합니다. 이것은 부모 요소를 기반으로 그라디언트 포인트를 계산합니다. 마지막 그라데이션 스티치가 작을수록 패턴이 더 촘촘하게 만들어집니다. 색상 중 하나의 위치를 조정할 때 다른 색상은 제자리에 유지되는 동안 해당 색상은 이동합니다.
픽셀(픽셀)
픽셀은 각 그라디언트 정지점의 픽셀 수를 측정합니다. 이것은 대부분의 다른 단위 유형보다 그라디언트에 더 작은 패턴을 제공합니다. 첫 번째 또는 마지막 색상의 위치를 이동하면 각 색상의 위치가 변경됩니다.
창 높이(vh)
뷰포트는 보이는 브라우저 창의 영역입니다. 높이와 너비를 별도로 측정합니다. 창 높이는 그래디언트 스톱을 사용하여 창 크기 높이의 백분율을 측정합니다. 첫 번째 또는 마지막 색상의 위치를 조정하면 모든 색상에 영향을 줍니다.
창 너비(vw)
창 너비는 그래디언트 스톱을 사용하여 창 크기 너비(또는 브라우저 너비)의 백분율을 측정합니다. 너비에 따라 조정이 변경됩니다. 숫자를 더 크거나 작게 조정하면 해당 특정 색상의 위치가 변경되고 다른 색상은 그대로 유지됩니다.
"그라디언트 반복" 옵션 사용의 예
이 예에서는 무료 침술 레이아웃 팩 디비에서 사용 가능합니다.
섹션의 첫 번째 열을 조정해야 합니다. 열어 라인 매개변수 톱니바퀴 아이콘을 클릭하면 됩니다.
그런 다음 톱니 바퀴 아이콘 첫 번째 열의 경우.
열 XNUMX 그라디언트
첫 번째 열에는 자체 배경 그라데이션이 있습니다. 레이아웃의 일부입니다. 우리는 그것을 바꾸지 않을 것입니다. 우리는 네 가지 예에서 이와 동일한 그라데이션을 사용할 것입니다. 필요한 경우에 대비한 설정입니다.
- 그라데이션 중지:
- 0px: #f4d5b8
- 100픽셀: rgba(244,213,184,0)
그라데이션 설정
- 그라디언트 유형: 선형
- 그라디언트 위치: 180도
- 그라디언트 반복: 아니오
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션: 아니요
간격
열 왼쪽에 간격을 추가합니다. 탭에 액세스 디자인, 스크롤 간격 를 선택하고 태블릿 아이콘 장치 옵션을 엽니다.
데스크톱 및 태블릿 탭에 대해 5% 왼쪽 패딩을 추가합니다. 전화 탭을 선택하고 왼쪽 패딩을 삭제합니다. 현재 설정에서 위쪽 및 오른쪽을 그대로 둡니다.
- 패딩
- 상단: 180px
- 왼쪽: 5%
- 왼쪽: 80px
예 XNUMX
첫 번째 예에서는 가는 선이 있는 대각선 반복 패턴을 만듭니다.
이것은 XNUMX개의 그라디언트 스톱이 있습니다.
- 그라데이션 중지:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
다음 설정을 사용하십시오.
- 그라디언트 유형: 선형
- 기울기 방향: 156도
- 그라디언트 반복: 예
- 그라데이션 단위: 픽셀
- 배경 이미지 위의 정사각형 그라데이션: 아니요
두 번째 예
두 번째 예에서는 더 큰 선이 있는 대각선 반복 패턴을 만듭니다.
이것은 XNUMX개의 그라디언트 스톱이 있습니다.
- 그라데이션 중지:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
그라데이션 설정의 경우
- 그라디언트 유형: 선형
- 기울기 방향: 156도
- 그라디언트 반복: 예
- 그라데이션 단위: 픽셀
- 배경 이미지 위의 정사각형 그라데이션: 아니요
예 XNUMX
세 번째 예에서는 중간 크기의 원으로 반복되는 원형 패턴을 만듭니다.
이것은 XNUMX개의 그라디언트 스톱이 있습니다.
- 그라디언트 정지
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
다음 그라디언트 설정 적용
- 그라디언트 유형: 원형
- 그라데이션 위치: 하단
- 그라디언트 반복: 예
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션: 아니요
예 4
네 번째 예에서는 큰 원이 있는 원형 패턴을 만듭니다.
이것은 XNUMX개의 그라디언트 스톱이 있습니다.
- 그라데이션 중지:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
그라디언트 설정의 경우 다음과 같이 변경합니다.
- 그라디언트 유형: 원형
- 그라데이션 위치: 중앙
- 그라디언트 반복: 예
- 기울기 단위: 백분율
- 배경 이미지 위의 정사각형 그라데이션: 아니요
지금 DIVI를 다운로드하세요!!!
결론
이것은 옵션을 사용하는 방법에 대한 우리의 모습입니다 그라디언트 반복 Divi에서 사용자 정의 배경을 만들 수 있습니다. 그라디언트 설정의 많은 조정은 그라디언트 디자인에 영향을 줍니다.
그라디언트 반복은 이러한 모든 조정과 잘 작동하여 흥미로운 사용자 정의 배경 패턴을 쉽게 만들 수 있습니다.
여기에 제공된 예제를 시도하고 변경하여 그라디언트가 어떻게 영향을 받는지 확인하고 사용자 지정 배경 그라디언트를 만드는 것이 좋습니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
