배경 마스크와 구분 기호를 결합하시겠습니까? Divi 숭고하고 독특한 배경을 가지려면?
섹션 구분선이 있는 배경 마스크의 조합 Divi 이미 강력한 배경 디자인 옵션에 창의성의 또 다른 레이어를 추가합니다.
배경 옵션 외에도 섹션 구분선을 통해 사용자는 배경 디자인을 향상시킬 수 있습니다.
이 튜토리얼에서는 배경 마스크와 섹션 구분 기호를 결합하는 방법을 보여줍니다. Divi. 이 기술을 사용하여 Divi 섹션의 배경 디자인을 만드는 방법에 대한 단계별 지침을 제공합니다.
또한 몇 가지 간단한 조정으로 대체 디자인을 만드는 방법도 설명합니다.
시작하자!
측량
다음은 이 튜토리얼의 도면 미리보기입니다.
개념
이 튜토리얼의 기본 개념은 배경 마스크와 섹션 구분선을 결합하여 더욱 독특한 마스크 모양을 만드는 것입니다.
먼저 배경 마스크를 추가합니다.
다음으로 섹션 구분선을 추가하여 마스크 모양을 창의적으로 완성합니다.
Divi Builder로 새 페이지 만들기
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
Divi에서 배경 마스크와 디바이더 결합
섹션 크기 및 간격 추가
시작하려면 생성자의 기존 섹션에 크기와 간격을 추가합니다. 한 줄 또는 전체 추가를 중단하겠습니다. 내용 그래서 우리는 섹션의 배경을 디자인하는 데 집중할 수 있습니다.
섹션 설정을 엽니다. 탭 아래 디자인, 다음과 같이 크기와 간격을 업데이트합니다.
- 최소 높이: 50 폭스바겐
- 패딩(상단 및 하단): 0px
배경 그라데이션 만들기
섹션의 높이가 일정하면 섹션에 배경 그라디언트를 추가할 준비가 됩니다.
탭 아래 내용, 탭을 클릭하십시오. 배경 그라데이션 배경 옵션에서. 그런 다음 다음과 같이 그라디언트를 추가합니다.
- 그라디언트 정지
- 20%: #1a2a6c
- 60%: #b21f1f
- 100%: #fdbb2d
배경 마스크 만들기
이제 색상 그라디언트가 있으므로 배경 마스크를 만들 준비가 되었습니다.
탭 아래 배경 마스크, 다음을 업데이트합니다.
- 마스크: 헤링본
- 마스크 색상: #000000
- 변환: 반전
- 마스크 종횡비: 스크린샷 참조
섹션 구분 기호 추가(Dividers)
마스크가 제자리에 있으면 섹션 구분선을 사용하여 마스크의 모양을 추가로 수정할 수 있습니다.
이 예에서는 위쪽과 아래쪽에 반원 섹션 구분선을 추가합니다. 이렇게 하면 배경 마스크가 압축되어 멋진 화살표 디자인처럼 보입니다.
이렇게 하려면 탭을 클릭하십시오. 디자인 다음 구분 기호를 추가하십시오.
먼저 탭 아래에 상단 구분 기호를 추가하십시오. Top.
- 구분선 스타일: 스크린샷 참조
- 색상: #000
- 디바이더 높이: 10 vw
그런 다음 탭 아래에 하단 구분 기호를 추가하십시오. 바닥.
- 구분선 스타일: 스크린샷 참조
- 색상: #000
- 디바이더 높이: 10 vw
- 디바이더 플립: 수직 플립
결과
지금까지의 결과입니다.
더 많은 디자인을 위해 배경 옵션 및 구분선 조정
이제 기본 아이디어가 준비되었으므로 섹션 구분선을 쉽게 사용하여 더 많은 패턴을 만들 수 있습니다.
대체 디자인 #1
첫 번째 대체 디자인의 경우 기존 배경 마스크를 회전합니다. 다음으로 우리는 반원형 섹션 디바이더를 삼각형으로 바꿀 것입니다.
이렇게 하려면 기존 섹션 설정을 열고 탭을 클릭합니다. 배경 마스크 다음을 업데이트하십시오.
- 마스크 변환: 수직 뒤집기, 회전
- 마스크 종횡비: 스크린샷 참조
다음으로 섹션 구분 기호를 다음과 같이 업데이트합니다.
상부 디바이더
- 구분선 스타일: 스크린샷 참조
- 디바이더 높이: 13 vw
하단 디바이더
- 구분선 스타일: 스크린샷 참조
- 높이: 13 폭스바겐
- 디바이더 플립: 비활성화
결과
결과는 다음과 같습니다.
대체 디자인 #2
두 번째이자 마지막 대체 디자인의 경우 마스크를 교체할 것입니다. 셰브론 마스크로 대각선 막대 2 또한 새로운 상단 섹션 구분선을 제공합니다.
이렇게 하려면 기존 섹션 설정을 열고 탭을 클릭합니다. 배경 마스크 다음을 업데이트하십시오.
- 마스크: 대각선 막대 2
- 마스크 변환: 수평 뒤집기
- 종횡비: 스크린샷 참조
다음으로 섹션 구분 기호를 다음과 같이 업데이트합니다.
상부 디바이더
- 구분선 스타일: 스크린샷 참조
- 디바이더 플립: 수평 플립
하단 디바이더
- 디바이더 스타일: 없음
결과
결과는 다음과 같습니다.
최종 결과
이러한 배경이 어떻게 보일지에 대한 더 나은 아이디어를 제공하기 위해 내용, 제목이 있는 열에 행을 추가했습니다.
지금 DIVI를 다운로드하세요!!!
결론
배경 디자인을 위해 마스크와 섹션 구분선을 결합하면 이러한 기본 제공 마스크에 대해 고유한 모양을 만들 수 있는 가능성이 더 커집니다.
다양한 조합을 자유롭게 탐색해 보세요.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
