Divi의 Fullwidth Header 모듈로 Hero 섹션을 만드는 방법을 알고 싶으십니까?
영웅 섹션을 구축하는 것은 관심을 끌 수 있는 좋은 방법입니다. 내용 귀하의 페이지에 중요합니다. 이것은 내용 스토리를 전달하고, 작업에 대한 정보를 공유하고, 제품이나 서비스를 강조하는 데 사용할 수 있는 큰 크기입니다.
Divi의 Fullwidth Header 모듈을 사용하면 제목, 부제목, 두 개의 버튼, 본문 텍스트, 로고 이미지 및 헤더 이미지를 추가할 수 있습니다. 물론 배경 옵션을 사용하여 이미지, 그라디언트, 색상, 패턴 및 마스크를 추가하고 결합할 수도 있습니다.
여러 이미지, 텍스트 및 버튼 모듈 간에 전환하는 대신 모듈 설정에서 이러한 모든 설정을 변경할 수 있습니다.
이 튜토리얼에서는 Divi의 전체 너비 헤더 모듈을 사용하여 매력적이고 눈길을 끄는 영웅 섹션을 만드는 방법을 보여줍니다.
가자 !
측량
다음은 우리가 디자인할 내용의 미리보기입니다.
시작하려면 무엇이 필요합니까?
시작하기 전에 컴퓨터에 최신 버전의 Divi가 있는지 확인하십시오. 사이트 웹.
이제 시작할 준비가 되었습니다!
Divi의 전체 너비 헤더 모듈로 영웅 섹션을 만드는 방법
미리 정의된 레이아웃으로 새 페이지 만들기
Divi 라이브러리에서 미리 정의된 레이아웃을 사용하여 시작하겠습니다. 이 디자인을 위해 우리는 홈페이지를 사용할 것입니다 수의사 레이아웃 팩.
Worpress 대시보드에서 새 페이지를 사이트 웹
제목을 지정한 다음 옵션을 선택하십시오. Divi Builder 사용.
이 예제에서는 Divi 라이브러리에서 미리 정의된 레이아웃을 사용할 것입니다. 그래서 선택 레이아웃 찾아보기.
레이아웃 찾기 및 선택 개 사육자.
선택 이 레이아웃 사용 페이지에 레이아웃을 추가합니다.
이제 디자인할 준비가 되었습니다.
전체 너비 헤더 모듈 추가
Fullwidth Header 모듈을 사용하여 영웅 섹션을 다시 만들 것입니다. 페이지의 기존 헤더 아래에 새 전체 너비 섹션을 추가합니다.
섹션에 전체 너비 헤더 모듈을 추가합니다.
다음으로 원래 헤더 섹션을 삭제합니다.
전체 너비 헤더 모듈 사용자 지정
콘텐츠 추가
모듈 설정을 열고 추가하십시오. 내용 모듈 옆:
- 제목: 수의사
- 자막: 디베트. 우리의 가장 친한 친구에게 봉사
- 버튼 #1: 모든 서비스
- 버튼 #2: 약속 잡기
- 몸체: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.
다음으로 헤더 이미지를 추가합니다.
그라데이션 배경 설정
배경 설정으로 이동합니다. 원래 배경색을 삭제한 다음 배경 그라디언트를 추가합니다.
- 0%: RGBA(255,170,205,0.48)
- 40%: RGBA(110,66,255,0.24)
- 87%: rgba(124,239,255,0.71)
- 그라디언트 유형: 타원형
- 그라데이션 위치: 오른쪽
그런 다음 탭을 선택하십시오. 배경 마스크 그리고 배경 마스크를 추가합니다.
- 마스크 배경: 모서리 얼룩
- 마스크 색상: #FFFFFF
- 변환: 수직
텍스트 사용자 정의
탭으로 전환 디자인 그리고 제목 설정을 변경
- 제목 글꼴: Nunito
- 제목 글꼴 두께: 매우 굵게
- 글꼴 스타일: TT(대문자)
- 제목 텍스트 색상: #a9cb6b
- 텍스트 크기: 14px
- 제목 글자 간격: 2px
섹션으로 이동 본문 글꼴을 사용자 정의합니다.
- 텍스트 색상: #000000
- 본문 텍스트 크기:
- 데스크탑: 18px
- 전화: 14px
- 바디 라인 높이: 1.8em
또한보십시오: Divi: "전각 메뉴" 모듈의 바구니 및 검색 아이콘을 사용자 정의하는 방법
그런 다음 자막 설정을 열고 글꼴을 사용자 지정합니다.
- 자막 글꼴 : Nunito
- 자막 글꼴 두께: 굵게
- 텍스트 색상: #000000
마지막으로 텍스트의 크기를 변경합니다.
- 자막 텍스트 크기:
- 데스크탑: 56px
- 움직일 수 있는: 32px
- 자막 줄 높이: 1.2em
사용자 정의 버튼 #1
다음으로 버튼 스타일을 사용자 정의합니다. 버튼 XNUMX에 대한 사용자 정의 스타일을 활성화하여 시작한 다음 텍스트 크기를 조정하십시오.
- 버튼에 사용자 정의 스타일 사용: 예
- 버튼 하나의 텍스트 크기: 14px
버튼에 배경 그라디언트를 추가합니다. 기울기 값은 다음과 같습니다.
- 58%: #316EFF
- 100%: #1D2B60
- 기울기 방향: 90deg
그런 다음 테두리 설정 및 글꼴 설정을 사용자 지정합니다.
- 버튼 XNUMX:
- 테두리 너비: 0px
- 테두리 반경: 80px
- 문자 간격: 2px
- 글꼴: 누니토
- 글꼴 두께: 매우 굵게
- 스타일: TT(대문자)
- 버튼 하나 아이콘 표시: 아니오
그런 다음 바탕 화면 디자인에 대한 여백 및 패딩 설정을 사용자 지정하고 상자 그림자를 추가합니다.
- 버튼 XNUMX 여백
- 상단: 200px
- 하단: 0px
- 버튼 원 패딩:
- 상단: 16px
- 하단: 16px
- 왼쪽: 2em
- 오른쪽: 50em
- 박스 섀도우: 뷰 캡처
반응형 설정을 사용하여 모바일 장치에서 다른 여백 및 패딩 값을 설정합니다.
- 버튼 25 여백-상단 모바일: XNUMXpx
- 버튼 10 패딩-오른쪽-모바일: XNUMXem
사용자 정의 버튼 #2
먼저 #1 버튼을 마우스 오른쪽 버튼으로 클릭하고 버튼 XNUMX 스타일 복사.
그런 다음 버튼 1를 마우스 오른쪽 버튼으로 클릭하고 버튼 #XNUMX의 스타일을 붙여넣습니다.
이제 버튼 XNUMX를 사용자 정의할 수 있습니다. 텍스트 색상을 변경합니다.
- 버튼 121 텍스트 색상: #60FXNUMX
버튼 XNUMX의 배경 그라디언트를 사용자 정의합니다.
- 30%: RGBA(0,229,198,0)
- 100%: #00e5c6
반응형 설정을 사용하여 모바일 장치의 배경 그라데이션을 조정합니다.
- 0%: RGBA(0,229,198,0)
- 100%: #00e5c6
다음으로 데스크탑 디자인의 여백과 패딩을 조정합니다.
- 버튼 XNUMX 여백:
- 상단: 0px
- 하단: 0px
- 왼쪽: 30%
- 버튼 XNUMX 패딩:
- 상단: 16px
- 하단: 16px
- 왼쪽: 48em
- 오른쪽: 2em
responsifq 설정을 사용하여 모바일 디자인에 대해 다른 여백 및 패딩 값을 설정합니다.
- 버튼 5 여백-왼쪽-모바일: XNUMX%
- 버튼 XNUMX 패딩:
- 레프트 모바일: 35%
- 오른쪽 모바일: 5%
맞춤 CSS
마지막으로 대부분의 디자인 작업이 완료됩니다. 이제 디자인을 완성하기 위해 사용자 정의 CSS를 추가해야 합니다. 탭으로 전환 Advnaced 섹션을 열고 사용자 정의 CSS.
먼저 헤더 이미지에 대한 CSS부터 시작하겠습니다. 이 CSS를 사용하면 헤더 이미지를 버튼 위에 표시할 수 있습니다.
z-index: 1;
position:relative;
다음으로 제목에 사용자 정의 CSS를 입력합니다. 반응형 설정을 사용하여 데스크톱 및 모바일 보기에 대해 다른 값을 설정합니다.
데스크탑 컴퓨터의 경우:
padding-top:50px;
padding-bottom:30px;
모바일:
padding-top:5px;
padding-bottom:10px;
마지막으로 버튼 XNUMX과 버튼 XNUMX에 다음 CSS를 추가합니다.
white-space: nowrap;
최종 결과
다음은 전체 너비 헤더 영웅 섹션의 최종 디자인입니다.
지금 DIVI를 다운로드하세요!!!
결론
Fullwidth Header 모듈을 사용하면 멋진 Hero 섹션을 쉽게 만들어 서비스를 광고하고 방문자 무슨 소리 하는 거야? 사이트 웹.
기본 제공 설정을 통해 헤더의 모든 측면을 쉽게 사용자 지정할 수 있으며 모든 것이 한 곳에서 이루어지므로 영웅 섹션을 구축하기 위해 여러 모듈 간에 전환할 필요가 없습니다.
이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.
상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
