Divi의 마스크와 배경 패턴 오버레이를 사용하시겠습니까?
마지막으로 배경 마스크 및 배경 패턴 기능의 버전 Divi의 고유한 Hero 섹션을 만들 수 있습니다. 사이트 웹. 영웅 섹션은 첫 번째 섹션입니다. 사이트 웹 그리고 그것이 당신의 첫 번째 것입니다 방문자 스크롤하기 전에 확인하세요 사이트 웹, 그래서 눈길을 끄는 것이 중요합니다!
이 기사에서는 배경 이미지에 적용하여 진정으로 멋진 영웅 섹션을 만들 수 있는 XNUMX가지 고유한 배경 마스크와 패턴 오버레이를 만드는 방법을 보여줍니다.
이 튜토리얼에서는 각 Hero 섹션을 만드는 데 필요한 필수 단계를 다루고 몇 분 만에 웹사이트에 맞는 멋진 Hero 섹션을 만드는 데 필요한 도구를 제공합니다.
시작하자!
측량
다음은 오늘 이 기사에서 만들 XNUMX가지 영웅 섹션에 대한 간략한 개요입니다.
지금 DIVI를 다운로드하세요!!!
디자인은 미묘하고 단순하지만 임팩트가 있습니다.
Divi Builder로 새 페이지 만들기
시작하려면 다음을 수행해야 합니다.
WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.
이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용
그런 다음 클릭 건물 시작 (처음부터 구축)
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
배경 이미지에 적용할 배경 마스크 및 패턴 오버레이의 XNUMX가지 예
먼저 Hero 섹션을 만들어 보겠습니다.
모든 샘플 디자인은 동일한 섹션, 행 및 열 구조를 사용하므로 지금 설정해 보겠습니다.
1. 레이아웃 구조 만들기
페이지에 행을 추가한 다음 녹색 "+" 아이콘을 클릭하여 열 구조를 표시하고 첫 번째 열인 전체 너비 열을 선택합니다.
2. 섹션 간격 추가
행과 열을 정의했으므로 이제 섹션에 간격을 추가할 차례입니다.
간격 탭에서 다음을 업데이트합니다.
- 데스크탑: 400픽셀(상단 및 하단)
- 태블릿: 200픽셀(상단 및 하단); 25px(좌우)
- 전화: 50픽셀(상단 및 하단); 25px(좌우)
영웅 섹션 디자인 #1
첫 번째 영웅 섹션을 디자인해 보겠습니다.
지금 DIVI를 다운로드하세요!!!
1. 헤더 텍스트 추가
회색 "+" 아이콘을 클릭하여 모듈 라이브러리를 불러옵니다. 텍스트로 스크롤하고 클릭하여 로드합니다.
제목 텍스트를 입력한 다음 탭 아래에 제목 텍스트, 다음 설정을 구성합니다.
- 제목 글꼴: Work Sans
- 텍스트 색상: 흰색 #ffffff
- 제목 텍스트 크기:
- 데스크탑: 3em
- 태블릿: 2,2em
- 전화: 1.4em
2. 버튼 모듈 추가
버튼을 추가하고 다음 설정을 구성합니다.
- 탭 아래 내용s: 더 알아보기
- 탭 아래 조정, 선택: 중앙
- 클릭 버튼에 사용자 정의 스타일 사용 그런 다음 구성:
- 버튼 텍스트 크기:
- 데스크탑: 20px
- 태블릿: 16px
- 전화: 14px
- 버튼 텍스트 색상: #ffffff
- 배경: #1d1d1d
- 버튼 테두리 너비: 0
- 테두리 반경: 0
- 문자 간격: 3포인트
- 버튼 글꼴: Work Sans
- 글꼴 스타일: TT
- 버튼 텍스트 크기:
3. 배경 이미지 추가
이제 우리의 내용 구성이 완료되었으면 이제 섹션의 배경 디자인을 시작할 차례입니다.
- 배경 토글로 이동하여 세 번째 탭인 이미지 탭을 클릭한 다음 "배경 이미지 추가"를 클릭합니다.
- 그러면 사진을 선택하거나 새 사진을 업로드할 수 있는 미디어 라이브러리가 나타납니다.
- 사진을 선택했으면 오른쪽 하단 모서리에 있는 "이미지 업로드" 버튼을 클릭합니다.
4. 배경 패턴 추가
이제 배경 이미지를 설정했으므로 패턴을 추가해 보겠습니다.
- 탭에서 배경, 5번째 탭인 탭으로 이동합니다. 배경 무늬을 클릭한 다음 "배경 패턴 추가"를 클릭합니다.
- 선택 술 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 패턴 색상 – rgba(255,255,255,0.31)
- 패턴 변환: 없음
- 사이즈 : 실제 사이즈
- 패턴 반복 원점: 상단 하단
- 패턴 반복: 반복
- 혼합 모드: 일반
5. 배경 마스크 추가
이제 배경 이미지와 패턴을 설정했으므로 배경 마스크를 추가해 보겠습니다.
- 탭에서 배경, 6번째 탭으로 이동합니다. 배경 마스크을 클릭한 다음 "배경 마스크 추가"를 클릭합니다.
- 선택 콩 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 마스크 색상: rgba(0,0,0,0.36)
- 마스크 종횡비: 가로 직사각형
- 크기: 채우기 위해 늘이기
그래서 ! 이제 아름답게 디자인된 영웅 섹션이 있습니다.
섹션 히어로 #2 디자인
이제 두 번째 영웅 섹션을 디자인해 보겠습니다.
1. 배경 이미지를 추가하고 혼합 모드를 오버레이로 설정합니다.
배경 이미지를 선택하고 혼합 모드를 오버레이로 설정하고 rgba(10,10,10,0.64)의 오버레이 색상을 추가합니다.
2. 배경 패턴 추가
이제 배경 이미지를 설정했으므로 배경 패턴을 추가해 보겠습니다.
- 배경 탭에서 5번째 탭으로 이동합니다. 배경 무늬을 클릭한 다음 "배경 패턴 추가"를 클릭합니다.
- 선택 술 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 패턴 색상 – rgba(255,255,255,0.09)
- 패턴 변환: 없음
- 크기: 덮개
- 패턴 반복 원점: 왼쪽 상단
- 패턴 반복: 반복
- 혼합 모드: 일반
3. 배경 마스크 추가
이제 배경 이미지와 패턴을 설정했으므로 배경 마스크를 추가해 보겠습니다.
- 탭에서 배경, 6번째 탭으로 이동합니다. 배경 마스크을 클릭한 다음 "배경 마스크 추가"를 클릭합니다.
- 선택 탈자 부호 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 마스크 색상: rgba(0,0,0,0.36)
- 마스크 변환: 없음
- 종횡비: 가로 직사각형
- 마스크 크기: 채우기 위해 늘이기
- 마스크 혼합 모드: 일반
섹션 히어로 #3 디자인
이제 세 번째 영웅 섹션을 디자인해 보겠습니다.
1. 배경 이미지를 추가하고 혼합 모드를 오버레이로 설정합니다.
배경 이미지를 선택하고 혼합 모드를 오버레이로 설정하고 rgba(10,10,10,0.39)의 오버레이 색상을 추가합니다.
2. 배경 패턴 추가
이제 배경 이미지를 설정했으므로 배경 패턴을 추가해 보겠습니다.
- 탭에서 배경, 5번째 탭으로 이동합니다. 배경 무늬을 클릭한 다음 "배경 패턴 추가"를 클릭합니다.
- 선택 대각선 줄무늬 2 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 패턴 색상 – rgba(0,0,0,0.06)
- 패턴 변환: 없음
- 사이즈 : 실제 사이즈
- 패턴 반복 원점: 왼쪽 상단
- 패턴 반복: 반복
- 혼합 모드: 일반
3. 배경 마스크 추가
배경 이미지와 패턴을 추가했으므로 이제 배경 마스크를 추가해 보겠습니다.
- 탭에서 배경, 6번째 탭으로 이동합니다. 배경 마스크을 클릭한 다음 "배경 마스크 추가"를 클릭합니다.
- 선택 삼각형 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 마스크 색상: rgba(10, 10, 10, 0,61)
- 마스크 변환: 없음
- 종횡비: 가로 직사각형
- 마스크 크기: 채우기 위해 늘이기
- 마스크 혼합 모드: 일반
섹션 히어로 #4 디자인
이제 Hero의 네 번째 섹션을 디자인해 보겠습니다.
1. 배경 이미지 추가
배경 이미지를 선택합니다.
2. 배경 패턴 추가
이제 배경 이미지를 추가했으므로 배경 패턴을 추가해 보겠습니다.
- 탭에서 배경, 5번째 탭으로 이동합니다. 배경 무늬을 클릭한 다음 "배경 패턴 추가"를 클릭합니다.
- 선택 스마일 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 패턴 색상 – rgba(0,0,0,0.2)
- 패턴 변환: 없음
- 크기: 덮개
- 원점 반복: 왼쪽 상단
- 패턴 반복: 반복
- 패턴 혼합 모드: 일반
3. 배경 마스크 추가
이제 배경 이미지와 패턴이 적용되었으므로 배경 마스크를 추가해 보겠습니다.
- 탭에서 배경, 6번째 탭으로 이동합니다. 배경 마스크을 클릭한 다음 "배경 마스크 추가"를 클릭합니다.
- 선택 코너 레이크 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 마스크 색상: rgba(10, 10, 10, 0,61)
- 마스크 변환: 수평
- 종횡비: 수평 직사각형
- 크기: 덮개
- 마스크 위치: 중앙 왼쪽
- 마스크 블렌더 모드: 일반
3. 회선 매개변수 구성
시작하기 전에 이 영웅 섹션에는 고유한 선 스타일이 있습니다. 이것을 설정합시다.
- 사이징:
- 폭: 80%
- 최대 너비: 800px
- 행 정렬:
- 데스크탑: 기본
- 태블릿: 중앙
- 전화: 센터
- 여백:
- 왼쪽: 20vw
섹션 히어로 #5 디자인
이제 다섯 번째 영웅 섹션을 디자인해 보겠습니다.
지금 DIVI를 다운로드하세요!!!
1. 배경 이미지 추가
배경 이미지를 선택합니다.
2. 패턴 추가
이제 배경 이미지를 설정했으므로 배경 패턴을 적용해 보겠습니다.
- 탭에서 배경, 5번째 탭으로 이동합니다. 배경 무늬을 클릭한 다음 "배경 패턴 추가"를 클릭합니다.
- 선택 교차 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 패턴 색상 – #ffffff
- 패턴 변환: 없음
- 크기: 사용자 정의 크기
- 패턴 너비: 10px
- 패턴 높이: 10px
- 반복 원점: 상단 하단
- 패턴 반복: 반복
- 패턴 혼합 모드: 일반
3. 배경 마스크 추가
이제 배경 이미지와 패턴이 적용되었으므로 배경 마스크를 추가해 보겠습니다.
- 탭에서 배경, 6번째 탭으로 이동합니다. 배경 마스크을 클릭한 다음 "배경 마스크 추가"를 클릭합니다.
- 선택 대각선 알약 드롭다운 메뉴에서 다음 설정을 구성합니다.
- 마스크 색상: rgba(10, 10, 10, 0,61)
- 마스크 변환: 수평
- 종횡비: 수평 직사각형
- 크기: 덮개
- 마스크 위치: 중앙 왼쪽
- 마스크 혼합 모드: 일반
3. 회선 매개변수 구성
가기 전에 이 영웅 섹션에도 고유한 선 스타일이 있습니다. 이것을 설정합시다.
- 사이징:
- 폭: 80%
- 최대 너비: 800px
- 행 정렬:
- 데스크탑: 기본
- 태블릿: 중앙
- 전화: 센터
- 간격:
- 여백(오른쪽): 18vw
또한보십시오: Divi: 헤더에 마스크 및 배경 패턴을 추가하는 방법
결론
웹사이트를 위한 독특하고 눈길을 끄는 영웅 섹션을 새로운 옵션으로 쉽게 디자인할 수 있습니다. 배경 및 패턴 마스크 디비에 의해. 각 기능에는 진정으로 창의적인 배경을 만들 수 있는 많은 옵션이 있습니다.
또한 모든 Divi Builder 항목에 배경 패턴과 마스크를 추가할 수 있습니다! 디자인 옵션은 무궁무진합니다.
이 기술이 향후 프로젝트에 유용한 또 다른 디자인 기술을 추가할 수 있기를 바랍니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
