Divi: 전체 너비 헤더 모듈을 전체 화면으로 표시하는 방법

Divi Fullwidth Header 모듈을 전체 화면으로 표시하시겠습니까?

전체 화면 헤더는 화면 크기에 관계없이 전체 화면을 차지합니다. 방문객. 이는 사용자의 관심을 끄는 데 좋습니다. 다행히도 모듈을 사용하면 전체 화면 헤더를 쉽게 만들 수 있습니다. 전폭 헤더 디비의.

이 기사에서는 전체 너비 헤더를 만들고, 사용자 지정하고, 전체 화면으로 표시하는 방법을 보여줍니다. 이 접근 방식을 사용하여 페이지에 대한 전체 화면 영웅 섹션을 만들 수 있습니다.

시작하자.

측량

이 자습서에서 디자인할 항목의 미리 보기를 살펴보겠습니다.

국

했던 Tablette

전화

Divi 전체 너비 헤더를 전체 화면 헤더로 만드는 방법

작업 중인 페이지에 전체 너비 섹션을 추가하여 시작합니다.

그런 다음 추가 전폭 헤더 모듈 전체 너비 섹션으로 이동합니다.

모듈 설정이 열립니다. 탭 선택 디자인. 라는 옵션을 활성화하십시오. 전체 화면으로 만들기

이제 전체 화면 헤더가 있습니다. 그것만큼 간단합니다.

스크롤 아이콘 활성화

사용자에게 아래로 스크롤하라고 지시하는 버튼을 추가할 수도 있습니다. 그러나 이를 활성화해야 합니다. 이 버튼은 전체 화면 옵션에서 항상 표시됩니다. 전체 화면 헤더 옵션은 항상 헤더의 화면 높이와 일치합니다. 방문객.

아래로 스크롤 버튼 표시: 예

Divi 전체 너비 전체 화면 헤더 예

전폭 헤더 모듈 매개변수

다음은 전체 너비 헤더 모듈 설정의 각 섹션에 대한 단계입니다.

읽기 : Divi: 배경 마스크와 구분 기호를 결합하는 방법

텍스트

모든 먼저 텍스트를 추가하십시오 전체 너비 헤더에 표시됩니다. 여기에는 제목, 부제, 내용 그리고 버튼 텍스트.

제목: 창조하다 블로그 디비와 함께
부제: Blogpascher
Burron #1: 요약
버튼 #2: 일정
본문: (기본값)

이미지

그때 사진 추가. 이것은 전체 너비 헤더의 오른쪽에 표시되고 텍스트를 왼쪽으로 이동합니다.

헤더 이미지: 귀하의 선택

배경

다음으로 스크롤 배경 색상을 #f6f5ee로 설정합니다.

배경색: #f6f5ee

규정

그런 다음 디자인 탭으로 이동합니다.

전체 화면 만들기: 예

아래로 스크롤 아이콘

아래로 스크롤 버튼 표시: 예
아래로 스크롤 아이콘 색상: #000000(데스크톱 및 태블릿), #ffffff(전화)
아래로 스크롤 아이콘 크기: 70px(데스크톱), 60px(태블릿), 50px(전화)

제목 텍스트

다음으로 조정하겠습니다. 제목 텍스트.

표제 수준: H1
글꼴: 인터
글꼴 두께: 굵게
텍스트 정렬: 가운데
텍스트 색상: #000000

제목 텍스트 크기: 75px(데스크톱), 40px(태블릿), 24px(전화)
제목 줄 높이: 1.2em

설명 텍스트

그런 다음 아래로 스크롤하여 본문.

글꼴: Open Sans
정렬: 왼쪽
색상: #000000

텍스트 크기: 16px(데스크톱), 15px(태블릿), 14px(전화)
줄 높이: 1.8em

부제

그런 다음 아래로 스크롤하여 자막 텍스트.

글꼴: 인터
글꼴 두께: 굵게
스타일: TT
정렬: 중앙
색상: #ff5a17

크기: 14px
문자 간격: 1px
줄 높이: 1.8em

버튼 #1

그런 다음 아래로 스크롤하여 버튼 XNUMX.

버튼에 사용자 정의 스타일 사용: 예
텍스트 크기: 20px(데스크톱), 18px(태블릿), 16px(전화)
텍스트 색상: #000000

배경색: #ffffff
테두리 너비: 0px
테두리 반경: 0px

글꼴: 인터
글꼴 두께: 굵게

아이콘: 당신의 선택
아이콘 색상: #000000
배치: 오른쪽
버튼 XNUMX에 대한 호버 시 아이콘만 표시: 아니오

마지막으로 옵션으로 스크롤합니다. 버튼 원 패딩.

심:
- 데스크탑: 20px(상단 및 하단), 40px(좌우)
- 태블릿: 16px(상단 및 하단), 40px(좌우)
- 전화: 12px(상단 및 하단), 40px(좌우)

버튼 #2

마지막으로 아래로 스크롤하여 버튼 XNUMX.

버튼 XNUMX에 사용자 정의 스타일 사용: 예
텍스트 크기: 20px(데스크톱), 18px(태블릿), 16px(휴대폰)
텍스트 색상: #ffffff

배경색: #ff5a17
테두리 너비: 0px
테두리 반경: 0px

글꼴: 인터
글꼴 두께: 굵게

좋아하는 아이콘을 선택하십시오.

아이콘: 당신의 선택
아이콘 색상: #000000
배치: 왼쪽
버튼 XNUMX에 대한 호버 시 아이콘만 표시: 아니오

마지막으로 옵션까지 아래로 스크롤합니다. 버튼 XNUMX 패딩.

심:
- 데스크탑: 20px(상단 및 하단), 40px(좌우)
- 태블릿: 16px(상단 및 하단), 40px(좌우)
- 전화: 12px(상단 및 하단), 40px(좌우)

최종 결과

이것이 데스크톱, 태블릿 및 휴대폰에서 전체 너비 헤더의 모양입니다.

다음과 같이 상담할 수도 있습니다. Divi: 그림자 및 호버 효과를 사용하여 대화형 콘텐츠를 만드는 방법