Divi 전체 너비 헤더 모듈을 전체 화면으로 만드는 방법

전체 화면 헤더는 방문자의 화면 크기에 관계없이 전체 화면을 차지합니다. 이것은 사용자의 관심을 끌기에 좋습니다. 클릭 유도문안으로 유도하는 데도 좋습니다. 다행히 Divi의 Fullwidth Header Module을 사용하면 전체 화면 헤더를 쉽게 만들 수 있습니다. 이 게시물에서는 전체 너비 헤더를 만들고 전체 화면으로 전환하고 스타일을 지정하는 방법을 보여줍니다. 이 접근 방식을 사용하여 페이지의 전체 화면 영웅 섹션을 만들 수 있습니다!

시작하자.

전체 화면 헤더 미리보기

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

데스크탑

태블릿

핸드폰

Divi의 전체 너비 헤더 모듈로 전체 화면 헤더를 만드는 이유는 무엇입니까?

전체 화면 헤더를 만드는 방법에 대해 논의하기 전에 Divi 사용자가 전체 화면 헤더를 원하는 이유에 대해 이야기해 보겠습니다.

전체 화면 헤더는 포함된 섹션의 특정 요소를 나타냅니다. 이 섹션에서는 주의를 끌고 여러 작업을 수행하는 깔끔한 레이아웃으로 이러한 요소를 제공합니다.

첫째, 방문자를 판매 유입경로로 이끌 수 있는 클릭 유도문안을 표시하는 데 사용할 수 있습니다. 특정 제품이나 서비스를 언급하기에 좋은 곳입니다.

둘째, 웹사이트에 계속 머물게 하는 흥미로운 디자인을 사용자에게 제공할 수 있습니다. 웹사이트는 방문자의 관심을 끌 수 있는 시간이 단 몇 초에 불과합니다.

전체 화면 헤더를 만들 때 염두에 두어야 할 몇 가지 사항이 있습니다.

• 색상 및 글꼴에 대한 일반적인 디자인 방법을 따르십시오. 읽을 수 있고 웹사이트 주제에 맞는지 확인하세요.
• 디자인을 단순하고 깨끗하게 유지하십시오. 이미지, 링크 또는 버튼을 너무 많이 사용하지 마십시오. 몇 가지에 집중하세요. 적은 것이 더 많습니다.
• 전체 화면 헤더가 반응하는지 확인하십시오. 전체 화면 헤더는 멋지게 보이고 모든 화면 크기에서 제대로 작동해야 합니다.

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

작업 중인 페이지에 전체 너비 섹션을 추가하여 시작합니다. 그런 다음 전체 너비 섹션에 전체 너비 헤더 모듈 을 추가합니다.

모듈의 설정이 열립니다. 디자인 탭을 선택합니다. 전체 화면 만들기 라는 옵션을 활성화합니다.

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

전체 화면 헤더 아래로 스크롤 아이콘 활성화

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

모듈 설정에서 레이아웃 옵션 아래에 아래로 스크롤 아이콘이라는 섹션이 표시됩니다. 버튼을 클릭하여 아래로 스크롤 버튼 표시 를 활성화합니다.

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

전체 너비 헤더를 전체 화면으로 만들고 작업을 수행하는 방법을 확인하려는 이유에 대해 논의했으므로 이제 예를 살펴보겠습니다. Divi 레이아웃의 영웅 섹션을 사용하여 전체 너비 헤더를 생성하겠습니다.

이 예에서는 Divi 내에서 사용할 수 있는 무료 사진 스튜디오 레이아웃 팩의 홈페이지에서 영웅 섹션을 사용하고 있습니다. 레이아웃의 글꼴과 색상을 사용하여 이 영웅 섹션을 사용자 지정하여 고유한 전체 너비 헤더를 만듭니다.

전체 화면 헤더 모듈 설정

전체 화면 헤더 모듈의 각 설정 섹션에 대한 단계는 다음과 같습니다.

텍스트

먼저 전체 너비 헤더에 표시될 텍스트를 추가합니다 . 여기에는 제목, 부제목, 콘텐츠(여기서는 Divi의 내장 더미 텍스트를 사용하겠습니다) 및 버튼 텍스트가 포함됩니다.

• 제목: Divi 사진 스튜디오
• 자막: 사진
• 버튼 1: 프로젝트 개요
• 버튼 2: 프로젝트 계획
• 본문: 내용

이미지

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

• 헤더 이미지: 귀하의 선택

배경

배경 까지 아래로 스크롤하고 색상을 #f6f5ee로 설정합니다.

• 색상: #f6f5ee

형세

다음으로 디자인 탭으로 이동합니다. 전체 화면 만들기를 활성화 합니다.

• 전체 화면 만들기: 예

아래로 스크롤 아이콘

그런 다음 아래로 스크롤 아이콘 을 활성화합니다. 색상을 데스크톱 및 태블릿의 경우 검정색으로 변경하고 휴대폰의 경우 흰색으로 변경합니다. 제가 선택한 이미지로 휴대폰 하단의 이미지에 아이콘이 나타나게 되며, 이를 통해 이미지의 색상과 함께 보이게 됩니다. 아이콘 크기를 데스크톱의 경우 70px, 태블릿의 경우 60px, 휴대폰의 경우 50px로 변경합니다.

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

제목 텍스트

다음으로 Title Text 를 조정합니다. 텍스트를 H1으로 설정하고 글꼴에 대해 Inter를 선택합니다. Weight를 굵게, Alignment를 가운데로, Color를 검정색으로 설정합니다.

• 제목: H1
• 글꼴: 인터
• 무게: 굵게
• 정렬: 중앙
• 색상: #000000

글꼴 크기 에는 데스크톱의 경우 75px, 태블릿의 경우 40ps, 휴대폰의 경우 24px의 세 가지 크기를 사용합니다. 라인 높이를 1.2em으로 변경합니다.

• 크기: 75px 데스크탑, 40px 태블릿, 24px 전화
• 줄 높이: 1.2em

본문

다음으로 본문 텍스트 까지 아래로 스크롤합니다. 글꼴에 대해 Open Sans를 선택합니다. Alignment를 Left로, Color를 검정색으로 설정합니다.

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

글꼴 크기 를 데스크톱의 경우 16px, 태블릿의 경우 15px, 휴대폰의 경우 14px로 설정합니다. 라인 높이를 1.8em으로 변경합니다.

• 크기: 16px 데스크탑, 15px 태블릿, 14px 전화
• 줄 높이: 1.8em

자막 텍스트

그런 다음 자막 텍스트 까지 아래로 스크롤합니다. 글꼴을 Inter로 변경합니다. 가중치를 굵게, 스타일을 TT로, 정렬을 중앙으로, 색상을 #ff5a17로 설정합니다.

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

세 가지 화면 크기 모두에 대해 크기 를 14px로 변경합니다. Letter Spacing을 1px로, Line Height를 1.4em으로 변경합니다.

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

버튼 1

그런 다음 버튼 1 까지 아래로 스크롤하고 버튼 에 사용자 지정 스타일 사용 을 선택합니다. 텍스트 색상을 검정색으로 변경합니다.

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

배경색 을 흰색으로 변경하고 테두리 너비와 반경을 0px로 설정합니다.

• 배경색: #ffffff
• 버튼 1 테두리 너비: 0px
• 버튼 하나의 테두리 반경: 0px

글꼴 을 Inter로, 두께를 Bold로 변경합니다.

• 글꼴: 인터
• 무게: 굵게

그런 다음 원하는 아이콘을 선택하고 색상을 검은색으로 변경하고 왼쪽에 버튼 배치를 설정하고 버튼 1에 대해 호버할 때만 아이콘 표시를 비활성화합니다.

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

마지막으로 Button One의 패딩 옵션까지 아래로 스크롤합니다. 각 화면 크기에 대해 다른 패딩을 사용합니다. 데스크탑의 경우 위쪽 및 아래쪽에 20px, 왼쪽 및 오른쪽에 40px를 사용합니다. 태블릿의 경우 상단 및 하단 패딩을 16px로 변경합니다. 휴대폰에서는 상단 및 하단 패딩을 12px로 변경합니다. 세 가지 모두에 대해 왼쪽 및 오른쪽 패딩을 동일하게 둡니다.

• 데스크탑 패딩: 상하 20px, 좌우 40px
• 태블릿 패딩: 상하 16px, 좌우 40px
• 폰 패딩: 상하 12px, 좌우 40px

버튼 2

마지막으로 버튼 2 까지 아래로 스크롤합니다. 버튼에 사용자 정의 스타일 사용을 선택합니다. 글꼴 크기를 데스크톱의 경우 20px, 태블릿의 경우 19ps, 휴대폰의 경우 16px로 설정합니다. 텍스트 색상을 흰색으로 변경합니다.

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

배경색 을 #ff5a17로 변경합니다. 테두리 너비와 반경을 0px로 설정합니다.

• 배경색: #ff5a17
• 버튼 2 테두리 너비: 0px
• 버튼 2 테두리 반경: 0px

그런 다음 글꼴 을 Inter로 변경하고 가중치를 Bold로 변경합니다.

• 글꼴: 인터
• 무게: 굵게

원하는 아이콘을 선택하세요. 색상을 검은색으로 변경하고 왼쪽에 버튼 배치를 설정하고 버튼 2에 대한 호버 시 아이콘만 표시를 비활성화합니다.

• 아이콘: 당신의 선택
• 아이콘 색상: #000000
• 버튼 2 아이콘 배치: 왼쪽
• 버튼 2의 경우 마우스를 가져갈 때만 아이콘 표시: 아니오

마지막으로 Button Two의 패딩 옵션까지 아래로 스크롤합니다. 데스크탑의 경우 위쪽 및 아래쪽에 20px, 왼쪽 및 오른쪽에 40px를 사용합니다. 태블릿에서는 상단 및 하단 패딩을 16px로 변경합니다. 휴대폰의 경우 상단 및 하단 패딩을 12px로 변경합니다. 모듈을 닫고 작업을 저장합니다.

• 데스크탑 패딩: 상하 20px, 좌우 40px
• 태블릿 패딩: 상하 16px, 좌우 40px
• 폰 패딩: 상하 12px, 좌우 40px

전체 화면 헤더 결과

다음은 데스크톱, 태블릿 및 휴대폰에서 전체 너비 헤더가 표시되는 방식입니다.

데스크탑

태블릿

핸드폰

Divi의 전체 너비 헤더 모듈로 전체 화면 헤더 생성에 대한 생각 끝내기

Divi Fullwidth Header Module로 전체 화면 헤더를 만드는 방법을 살펴보았습니다. 프로세스가 간단하고 모든 장치에서 멋지게 보입니다. 아래로 스크롤 버튼을 추가하면 사용자가 스크롤할 수 있음을 나타내는 훌륭한 시각적 효과가 나타납니다. 전체 화면 헤더를 디자인하는 것은 영웅 섹션을 디자인하는 것과 유사합니다. 몇 가지 간단한 지침을 따르면 Divi의 전체 화면 헤더 모듈로 놀라운 전체 화면 헤더를 만드는 데 도움이 될 수 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi Fullwidth Header를 전체 화면으로 만드셨습니까? 의견에 대해 알려주십시오.