마스크와 배경 패턴으로 독특하고 멋진 배경을 만들고 싶습니까? Divi ?
의 새로운 배경 마스크 및 패턴 기능 Divi 페이지의 섹션에 가장 일반적으로 사용됩니다. 그러나 헤더에 추가할 수도 있습니다!
이 튜토리얼에서는 헤더 템플릿에 마스크와 배경 패턴을 추가하는 방법을 보여 드리겠습니다. Divi 생성자를 사용하여 테마.
완전히 독특한 헤더 디자인을 만들 수 있는 좋은 방법입니다. 사이트 웹.
시작하자.
측량
이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.
Divi의 테마 빌더로 이동하여 글로벌 헤더 만들기 시작
WordPress 대시보드에서 Divi > 테마 빌더
클릭 "글로벌 헤더 추가"
선택 “글로벌 헤더 구축”.
그런 다음 Divi Builder를 사용하여 새 헤더 디자인을 시작할 수 있습니다.
Divi 헤더에 배경 마스크 및 패턴을 추가하는 방법
배경색과 패턴으로 단면 배경 만들기
시작하려면 기존 섹션의 설정을 엽니다.
탭 아래 내용, 다음 설정으로 배경 옵션을 업데이트하십시오.
배경색:
- 배경: #262d3f
배경 패턴:
- 모델: 알약
- 패턴 색상: rgba(255,255,255,0.1)
- 패턴 크기: 사용자 정의 크기.
- 패턴 너비: 1px
패딩
탭 아래 디자인, 다음과 같이 섹션 패딩을 업데이트합니다.
- 패딩(상단 및 하단): 0px
이렇게 하면 헤더의 수직 공간이 약간 줄어듭니다.
다음 열 레이아웃으로 행 추가
추가된 자리 표시자 헤더 콘텐츠(메뉴 및 버튼)
행의 왼쪽 열에 새 메뉴를 추가합니다.
메뉴를 선택하세요.
그런 다음 로고를 추가하고 설정을 사용하여 원하는 대로 메뉴와 로고를 사용자 정의합니다.
오른쪽 열에 버튼 모듈을 추가하고 원하는 대로 사용자 지정합니다.
그라디언트, 마스크 및 패턴으로 선 배경 만들기
그라데이션
메뉴와 버튼이 포함된 행 설정을 엽니다. 그런 다음 다음 배경 설정으로 배경 옵션을 업데이트합니다.
배경 그라데이션:
- 그라디언트 스톱 1(50%): 클리어
- 그라디언트 정지점 2(75%): #ff4c00
- 조향: 90도
무늬
- 모델: 알약
- 패턴 색상: rgba(38,45,63,0.48)
- 패턴 크기: 1픽셀
- 수직 오프셋: 20px
참고: 패턴의 수직 오프셋은 라인 위 섹션에 20px 상단 패딩이 있기 때문에 20px로 설정됩니다. 이렇게 하면 섹션 패턴이 행 패턴과 정렬됩니다.
배경 마스크
- 마스크: 헤링본
- 마스크 색상: #262d3f
참고: 헤더의 경우 마스크 디자인을 손상시키지 않고 수평 공간을 덮을 수 있도록 마스크 크기를 "채우기까지 확장"으로 설정하는 것이 가장 좋습니다.
라인의 마지막 터치
디자인을 완성하기 위해 경계 반경을 추가하고 선에 몇 가지 수정 사항을 추가합니다.
반경, 테두리 및 테두리 간격
탭 아래 디자인, 다음과 같이 패딩을 업데이트합니다.
- 패딩(상단 및 하단): 5px
그런 다음 추가 디자인 요소를 위해 행에 멋진 둥근 모서리를 제공합니다.
- 둥근 모서리 : 50px
- 왼쪽 테두리 너비: 50px
- 왼쪽 테두리 색상: #262d3f
둥근 모서리에도 불구하고 마스크의 정사각형 가장자리가 행을 넘을 것이기 때문에 행의 왼쪽에 테두리를 제공해야 합니다.
최종 결과
최종 결과를 보자.
그래디언트가 약간 미묘하므로 어떻게 보이는지 살펴보겠습니다.
다음은 데스크탑 및 모바일 헤더 디자인입니다.
지금 DIVI를 다운로드하세요!!!
결론
헤더 배경 디자인은 빙산의 일각에 불과합니다. Divi에서 사용할 수 있는 배경 옵션과 관련하여 많은 탐색이 있습니다.
이 튜토리얼이 Divi의 배경 마스크와 패턴이 함께 작동하여 헤더에 대한 고유한 배경 디자인을 만드는 방법을 이해하는 데 도움이 되었기를 바랍니다.
자신의 디자인에 맞게 더 많은 배경 디자인 조합을 자유롭게 실험해 보세요. 사이트 웹 또는 다가오는 프로젝트.
상담도 가능합니다 우리의 자원, 인터넷 사이트 작성 프로젝트를 수행하기 위해 더 많은 요소가 필요한 경우.
주저하지 말고 가이드와 상의하세요. 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
