의 영웅 섹션에 마스크와 패턴을 사용하시겠습니까? Divi ?
Divi의 새로운 마스크와 배경 패턴 우리의 가장 멋진 새로운 디자인 기능 중 하나입니다. 각 마스크와 패턴은 단 몇 번의 클릭으로 셀 수 없이 많은 고유한 조합을 위해 다른 배경 요소(예: 색상, 이미지 및 그라디언트)와 결합할 수 있습니다.
오늘은 사용방법을 알려드리겠습니다 Divi 영웅 섹션을 디자인하기 위한 새로운 마스크와 배경 패턴.
이 튜토리얼에서는 마스크와 배경 패턴을 만드는 데 필요한 중요한 단계를 다룹니다.
마스크 디자인에 맞게 배경 이미지를 배치하는 방법도 보여줍니다. 이것은 당신에게 줄 것입니다 도구 몇 분 안에 사이트에 대한 완벽한 영웅 섹션을 만들어야 합니다.
측량
이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.
흰색 마스크와 패턴이 있는 영웅 섹션의 예.
다음은 검은색 마스크와 패턴이 있는 동일한 영웅 섹션의 어두운 버전입니다.
이 디자인을 사용하면 몇 번의 클릭으로 마스크와 마스크 위치를 쉽게 변경할 수 있습니다!
Divi Builder로 새 페이지 만들기
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi 건축업자
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 디자인을 시작할 빈 캔버스가 생깁니다. Divi.
영웅 섹션에서 Divi의 마스크 및 배경 패턴을 사용하는 방법
1. 레이아웃 구조 생성
이 영웅 섹션에서는 왼쪽에 제목과 클릭 유도문안이 있고 오른쪽에 이미지(또는 시각적 디자인)가 있는 고전적인 레이아웃 구조를 사용합니다.
이 예에서는 Divi의 배경 옵션을 사용하여 시각적 디자인을 만듭니다. 그러나 핵심에 도달하기 전에 섹션 배경 마스크와 패턴 디자인을 보여주기 위해 페이지 오른쪽에 공간을 절약하기 위해 XNUMX열 행을 만들어야 합니다.
2. 제목 및 클릭 유도문안 추가
왼쪽 열(열 1)에서 메인 타이틀용 텍스트 모듈, 자막 텍스트용 텍스트 모듈, 버튼용 버튼 모듈을 추가합니다.
3. 섹션에 세로 간격 추가
배경 디자인을 크고 아름답게 보이게 하려면 섹션에 수직 높이를 추가해야 합니다. 이를 수행하는 간단한 방법은 섹션의 상단과 하단에 패딩을 추가하는 것입니다. 열이 세로로 쌓이면 배경 디자인을 위한 공간을 만들기 위해 태블릿과 휴대폰 화면의 패딩을 조정해야 합니다.
섹션 설정을 엽니다. 디자인 탭에서 다음과 같이 패딩을 업데이트합니다.
- 심:
- 데스크탑: 상단 20vw, 하단 20vw
- 태블릿: 상단 8vw, 하단 48vw
- 전화: 상위 8vw, 하위 70vw
4. 배경 이미지 및 그라디언트 추가
다음으로 섹션에 배경 이미지와 그라디언트를 추가할 수 있습니다. 배경 이미지의 주요 초점은 섹션의 오른쪽에 표시되므로 오른쪽에 보고 싶은 이미지가 있는 이미지를 사용하십시오.
이 예에서는 도시 스카이라인이 있는 이미지를 사용하고 있습니다. 이미지의 오른쪽에는 건물이 더 가깝고 더 잘 보이므로 잘 작동합니다.
탭 아래 배경 이미지, 섹션 배경에 이미지를 업로드합니다.
Divi에서는 배경 이미지에 색상 그라데이션을 쉽게 추가할 수 있습니다. 탭 아래 배경 그라데이션, 섹션의 배경에 다음 그라디언트를 추가합니다.
- 그라데이션 중지:
- 0%: #3e22ff
- 100%: 클리어
- 배경 이미지 위의 정사각형 그라데이션 : 예
5. 섹션의 배경 패턴 만들기
이제 배경 이미지와 그라디언트가 준비되었으므로 배경 패턴을 추가하여 디자인을 완성할 수 있습니다.
이 예에서는 좀 더 독특한 모양을 주기 위해 약간의 질감을 추가하는 미묘한 패턴을 사용할 것입니다.
탭 아래 배경 패턴, 다음을 업데이트합니다.
- 배경 패턴: 터프티드
트릭: 배경 패턴의 경우 일반적으로 미묘하게 유지하는 것이 가장 좋습니다. 더 작은 디자인에 사용자 정의 크기를 사용한 다음 색상 불투명도를 낮추십시오.
6. 섹션의 배경 마스크 만들기
배경 패턴이 준비되면 마침내 디자인을 위한 새로운 배경 마스크를 테스트할 준비가 되었습니다. 선택할 수있는 옵션과 변형이 많이 있습니다. 이 예에서는 벌집형 마스크를 사용합니다.
탭 아래 배경 마스크, 다음을 업데이트합니다.
- 마스크: 벌집
- 마스크 색상: #ffffff
- 크기: 덮개
7. 배경 이미지 위치 조정
배경 마스크를 사용하고 있기 때문에 배경 이미지의 일부가 마스킹(또는 "마스킹"됨)됩니다.
이 예에서는 이미지의 오른쪽 하단이 가장 잘 보이도록 하고 더 많은 건물을 표시하기 위해 약간 오른쪽으로 이동합니다.
이미지 탭에서 다음을 업데이트합니다.
- 배경 이미지 위치: 오른쪽 하단
- 배경 이미지 수평 오프셋: -4vw
8. 블렌딩 모드 사용
이러한 모든 배경 요소로 창의력을 발휘하는 한 가지 방법은 혼합 모드를 추가하는 것입니다. 혼합 모드는 배경 옵션에 추가할 수 있으며 여러 배경 레이어(이미지, 그라디언트, 마스크 등)를 창의적인 방식으로 혼합하는 데 사용할 수 있습니다.
이 예에서는 배경 이미지를 그라디언트 색상과 혼합합니다. 이렇게 하려면 탭을 클릭하십시오. 배경 이미지 다음과 같이 그라디언트 색상을 배경 이미지와 혼합하는 혼합 모드를 추가합니다.
- 배경 이미지 혼합: 곱하기
9. 모바일용 배경 마스크 조정
배경 마스크 디자인이 모바일 장치에서도 멋지게 보이도록 하는 것이 중요합니다. 다행히 기본 제공 옵션을 사용하면 이 프로세스를 더 쉽게 수행할 수 있습니다.
배경 디자인을 위한 공간을 만들기 위해 태블릿과 휴대폰에 이미 추가 패딩을 추가했다는 것을 기억하십시오.
이제 배경 변환 및 종횡비 옵션을 사용하여 모바일용 마스크를 조정하기만 하면 됩니다.
탭 아래 배경 마스크, 반응형 옵션을 활성화하고 다음을 업데이트합니다.
태블릿 버전
- 마스크 변환: 수직 뒤집기, 수평 뒤집기, 회전
- 마스크 종횡비: 정사각형
전화 버전
- 마스크 변환: 수직 뒤집기, 수평 뒤집기, 회전
- 마스크 종횡비: 세로
결과
지금까지 만든 디자인을 확인하세요.
데스크탑 컴퓨터
태블릿 버전
폰 에디션
10. 어두운 버전 만들기
이 디자인의 어두운 버전을 원하면 배경 마스크 색상을 어두운 색상(예: 검정색)으로 변경하면 됩니다.
그런 다음 패턴의 색상을 검정색으로 변경합니다.
그런 다음 제목과 자막 텍스트를 흰색으로 변경합니다. 버튼 색상도 업데이트할 수 있습니다.
다크 버전은 이렇게 생겼습니다.
최종 결과
최종 결과를 다시 한 번 살펴보겠습니다.
지금 DIVI를 다운로드하세요!!!
결론
당신의 영웅 섹션을 디자인하십시오 사이트 웹 와 함께 큰 재미 마스크와 배경 패턴 디비에서. 완벽한 디자인을 얻기 위해 배경 옵션을 쉽게 변경할 수 있습니다. 그리고 훨씬 더 독특한 배경을 만들기 위해 사용할 수 있는 다른 옵션(예: 혼합 모드)이 많이 있습니다.
또한 섹션뿐만 아니라 모든 Divi 요소에 마스크와 패턴을 추가할 수 있습니다. 그럼 즐거운 실험 되세요!
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
