인기 있는 WordPress 테마인 Divi는 웹사이트 디자이너와 개발자가 멋진 레이아웃을 쉽게 만들 수 있도록 지원하는 다용도 모듈로 유명합니다. 인상적인 모듈 무기고 중에서 Divi Divider 모듈은 사용자가 매력적인 디바이더를 만들 수 있는 독특한 도구로 돋보입니다. 이 블로그 게시물에서 우리는 매력적인 그라디언트 분할기의 세계를 탐구하고 Divi Divider 모듈을 활용하여 디자인을 향상시킬 수 있는 방법을 살펴보겠습니다. 그라디언트 구분선이 어떻게 작동하는지 자세히 살펴보고 창의력에 불을 붙일 수 있는 영감을 주는 예시를 제공하겠습니다.
시사
다음은 그라디언트 디자인이 최종적으로 어떻게 보일지에 대한 미리보기입니다.
Divi의 디바이더 모듈을 사용하여 그라디언트 디바이더를 만드는 방법
Divi의 Divider Module을 사용하여 구분선을 구성하는 방법에는 여러 가지가 있습니다. 기본적으로 모듈은 구분선으로 선을 표시합니다. 그러나 이 줄을 비활성화하고 모듈의 배경 설정을 활용하여 색상, 그라데이션, 이미지 등과 같은 다양한 배경 옵션을 사용하여 사용자 정의할 수 있는 구분선을 생성할 수 있습니다. 실제 구분선을 표시하기보다는 구분선의 용기 스타일링에 집중하여 독특한 스타일의 구분선을 제작해보겠습니다.
구분선 숨기기
절차는 쉽습니다. 먼저 레이아웃에 구분선 모듈을 추가한 다음 콘텐츠 탭 아래에서 구분선을 숨깁니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작
분배기 배경
다음으로, 콘텐츠 탭의 배경 설정 메뉴에서 사용하려는 배경 유형을 선택하세요. 이 게시물에서는 배경 그라데이션 옵션에 중점을 둘 것입니다.
크기 및 간격 추가
어떤 크기나 모양으로든 세련된 구분선을 만들려면 디자인 탭의 크기 및 간격 옵션을 사용하여 구분선 컨테이너의 높이와 너비를 조정하세요. 원하는 크기를 생성하려면 너비와 높이, 최대 너비와 최대 높이, 모듈 정렬, 위쪽 및 아래쪽 패딩을 사용하세요.
테두리 반경 추가
모양의 스타일을 추가로 지정하려면 테두리 반경과 같은 테두리 옵션을 추가하세요. 모서리를 함께 또는 개별적으로 조정하여 매혹적인 모양을 만들 수 있습니다. 특별한 디자인의 경우 테두리 너비, 스타일 등을 추가로 추가할 수 있습니다.
그라데이션 분배기
첫 번째 그래디언트 구분선을 위해 Divi에 포함된 무료 Home Baker Layout Pack 의 랜딩 페이지를 활용하겠습니다. 이 레이아웃 팩의 아트웍은 갈색 색상의 그라디언트와 강력하고 어두운 윤곽선을 특징으로 합니다. 레이아웃 팩의 색상 팔레트를 사용하여 이를 그라데이션으로 복제하겠습니다. 첫 번째 일러스트레이션에서는 영웅 섹션에 이미 있는 구분선 모듈을 사용하겠습니다. 이것은 간단하면서도 시각적으로 큰 영향을 미칩니다. 참조용으로 Divider 모듈을 추가하기 전의 레이아웃은 다음과 같습니다.
시계
Divider 모듈의 가시성 옵션에서 Show Divider에 대해 아니요를 선택합니다.
- 쇼 분배기: 아니다
구배
배경까지 아래로 스크롤하여 배경 그라데이션 탭을 선택합니다. 여기에는 5개의 Gradient Stop을 추가하겠습니다. 다른 그라데이션 매개변수의 기본값이 사용됩니다. 각 그라데이션 중지점에 대한 매개변수는 아래에 나열되어 있습니다.
- 첫 번째 그라데이션 정지: 0px, #dcc087
- 두 번째 그라데이션 정지점: 16px, #e6b060
- 세 번째 그라데이션 정지점: 22px, #f19d33
- 네 번째 그라데이션 정지점: 31px, #f49826
- 다섯 번째 그라데이션 정지점: 48px, #3b261e
픽셀은 그라데이션 단위로 사용되어야 합니다. 우리가 찾고 있던 색상을 이제 사용할 수 있습니다. 이제 남은 일은 크기를 최적화하는 것뿐입니다.
- 그라데이션 단위: 픽셀
사이징
그런 다음 디자인 탭을 선택하십시오. 크기 조정 아래의 너비를 100%로 입력합니다. 세 가지 장치 크기 모두 높이가 40px로 설정되어 있어야 합니다. 모듈식 클로저로 설정이 저장됩니다.
- 폭: 100%
- 높이: 40px
최종 미리보기
이제 실제 그래디언트 디자인의 최종 미리보기가 표시됩니다.
결말 생각
이것으로 Divi 의 Divider 모듈을 사용하여 그래디언트 분할기를 만드는 방법에 대한 논의를 마무리합니다. 사용자 정의 그래디언트 구분선을 만들려면 Divider 모듈의 그래디언트 옵션을 사용하세요. 테두리 모서리, 간격 및 크기 조정 옵션을 활용하여 다양한 크기와 모양의 그라데이션 구분선을 만들 수 있습니다. 우리는 몇 가지 기본 선택만으로 군중 속에서 눈에 띄는 독특한 그라데이션 구분선을 디자인할 수 있습니다.
