Divi Life의 헤더 레이아웃 팩 개요 및 검토

Divi Life의 헤더 레이아웃 팩은 모든 Divi 웹사이트와 잘 어울리도록 스타일을 지정할 수 있는 Divi 테마 빌더용 헤더 세트입니다. 헤더는 코드와 함께 추가된 새로운 스타일로 군중에서 눈에 띕니다. 레이아웃 팩에는 각각 3가지 스타일이 있는 6가지 헤더 디자인이 포함되어 있습니다. 이 기사에서는 헤더 레이아웃 팩을 살펴보고 요구 사항에 맞는지 결정하는 데 도움이 됩니다.

Divi Life 헤더 레이아웃 팩 가져오기

Divi 테마 빌더에서 레이아웃을 사용하기 전에 Divi 라이브러리로 가져와야 합니다. 다행히도 이것은 간단하고 간단한 프로세스입니다.

1. 레이아웃을 다운로드하여 컴퓨터의 폴더에 압축을 풉니다.
2. 워드프레스 대시보드 메뉴에서 Divi > Divi 라이브러리 로 이동합니다.
3. 화면 상단에서 가져오기 및 내보내기 를 선택합니다.
4. 팝업에서 가져오기 를 선택하고 파일 선택을 선택한 다음 업로드할 레이아웃으로 이동합니다(한 번에 모두 업로드하려면 ALL-Divi-Life-Header-Templates 선택).
5. Divi Builder 레이아웃 가져오기를 클릭하고 업로드가 완료될 때까지 기다립니다.

이제 라이브러리에서 레이아웃을 사용할 수 있습니다. 위의 예에서는 모든 템플릿을 업로드하도록 선택했습니다. 이제 테마 빌더에서 모든 레이아웃에 액세스할 수 있습니다. 헤더 1에 대한 코드와 메뉴 조정만 하면 됩니다. 나머지는 그대로 작동합니다.

Divi 테마 빌더에서 전역 헤더 만들기

Divi 테마 빌더를 열고 클릭하여 글로벌 헤더를 추가합니다. 라이브러리에서 추가를 선택합니다.

저장된 레이아웃 이라는 탭을 선택하고 원하는 레이아웃을 선택합니다. 가져올 때까지 기다리십시오.

편집 아이콘을 클릭하여 레이아웃을 사용자 지정합니다.

저는 Header-1-a를 선택했습니다. 이것은 와이어프레임 보기의 레이아웃을 보여줍니다. 여기에는 사용자 정의 CSS 및 JS가 있는 코드 모듈이 포함됩니다. 많은 모듈에는 사용자 정의 CSS에 대한 클래스 ID가 포함되어 있습니다. 일부 코드는 테마 빌더 미리보기에서 실행되지 않을 수 있습니다. 프론트 엔드에서 헤더를 보는 것이 좋습니다.

변경하고 변경이 이루어질 때까지 헤더를 표시하지 않으려면 테스트 페이지를 만들고 전체 헤더로 만들기 전에 해당 페이지에 헤더를 할당하는 것을 고려할 수 있습니다.

콘텐츠 및 스타일 변경

다음으로, 메뉴를 선택하고, 로고를 추가하고, 웹사이트와 일치하도록 색상을 사용자 지정하기만 하면 됩니다. 헤더는 표준 모듈을 사용하므로 모든 헤더처럼 작동합니다. 위의 예에서 내 메뉴를 선택했습니다.

버튼은 이미 사용자 정의 스타일을 사용하고 있습니다. 디자인한 색상과 글꼴을 추가하기만 하면 됩니다. 클릭하여 변경 사항을 저장합니다.

또한 변경 사항을 메인 화면에 저장해야 합니다. 특정 게시물에 헤더 버전을 추가하여 기본 웹사이트 템플릿에 헤더를 놓고 전역으로 만들기 전에 헤더를 테스트할 수 있습니다.

헤더 예

다음은 내 테스트 사이트에서 템플릿이 어떻게 보이는지 살펴보겠습니다. 6개의 레이아웃에는 미리 스타일이 지정된 밝은 색, 어두운 색 및 밝은 색 버전이 있습니다. 이렇게 하면 디자인에 맞는 헤더를 쉽게 선택하고 필요에 맞게 조정할 수 있습니다. 그들은 또한 호버에 색상을 변경하는 버튼이 있습니다.

배경색과 화면 크기가 다른 이들의 조합을 살펴보겠습니다. Pizzeria 레이아웃 팩의 홈페이지 및 방문 페이지 레이아웃을 사용하고 있습니다.

헤더 1 레이아웃

헤더 1에는 코드 모듈, 메뉴, 검색 및 CTA를 생성하는 버튼이 포함됩니다.

가져오기 프로세스는 값을 올바르게 유지하지 않으므로 CSS의 세 줄을 변경해야 합니다.

또한 메뉴의 이름을 변경하고 CSS 클래스를 메뉴에 추가해야 합니다. 다행히도 이러한 모든 조정은 쉽게 수행할 수 있습니다. 지침은 설명서에 있습니다. 이 검토 중에 문서가 필요한 유일한 시간입니다.

결과는 왼쪽에 배치된 주요 3가지 메뉴 항목에 대한 구분선, 오른쪽에 배치된 나머지 메뉴, 검색 필드 내부에 아이콘이 있는 검색 상자, 큰 CTA 버튼이 있는 우아한 메뉴입니다. 다음은 밝은 배경에서 보이는 방법입니다. 그림자는 페이지에서 머리글을 구분합니다.

여기 어두운 배경이 있습니다. CTA 위로 마우스를 가져가면 색상이 변하는 것을 볼 수 있습니다.

스크롤하면 헤더의 높이가 줄어듭니다. 요소는 동일한 크기로 유지됩니다.

다음은 태블릿 보기입니다. 메뉴 항목은 드롭다운 메뉴에 배치됩니다. CSS 클래스가 있는 세 가지 항목에는 나머지 항목과 구별되는 스타일이 포함됩니다.

전화 보기는 로고 아래에 CTA를 쌓고 CSS 클래스가 있는 항목의 스타일도 유지합니다.

헤더 2 레이아웃

헤더 2는 CSS 및 JS, 광고 문구, 이미지, 텍스트, 소셜 미디어, 메뉴 및 버튼 모듈이 있는 코드 모듈을 사용합니다.

헤더 2A입니다. 다음은 어두운 페이지에서 보이는 방법입니다. 헤더가 사이트의 전체 너비를 덮지 않습니다. 상단 메뉴는 투명하고 소셜 버튼을 포함합니다. 하단에는 CTA 및 연락처 정보가 있습니다. 전화번호는 클릭 가능합니다.

다음은 라이트 페이지의 디자인입니다. 나는 이 CTA가 눈에 띄는 방식을 좋아합니다.

스크롤 후 상단 메뉴는 페이지와 함께 스크롤되고 하단 메뉴는 상단에 고정됩니다.

다음은 태블릿 보기입니다. 상단 메뉴는 페이지와 함께 스크롤되는 반면 하단 메뉴는 고정됩니다.

다음은 전화 보기입니다. CTA는 메뉴 아래에 쌓여 있습니다. 헤더가 페이지와 함께 스크롤됩니다.

헤더 3 레이아웃

헤더 3의 모듈에는 코드, 소셜 미디어 팔로우, 메뉴 및 버튼이 포함됩니다.

다음은 밝은 배경의 헤더 3B입니다. 상단 섹션에는 소셜 버튼과 검색이 포함되고 하단 섹션에는 CTA가 추가됩니다.

다음은 어두운 배경에서 보이는 방법입니다.

상단 메뉴는 페이지와 함께 스크롤되며 하단 메뉴는 화면 상단에 고정됩니다.

다음은 태블릿 보기입니다.

전화 보기가 요소를 스택하는 방법은 다음과 같습니다.

헤더 4 레이아웃

헤더 3에는 코드, 여러 광고 문구, 버튼, 메뉴 및 소셜 미디어 팔로우 모듈이 포함됩니다.

다음은 밝은 배경에 대한 헤더 3C입니다. 상단에는 연락처 정보와 CTA가 포함되고 하단에는 소셜 버튼이 표시됩니다.

다음은 어두운 배경에서 보이는 방법입니다. 원래 색상은 이 배경과 잘 어울립니다. 이 예에서 CTA 위로 마우스를 가져갑니다.

다음은 스크롤 후의 모습입니다. 상단 섹션은 사이트로 스크롤되고 하단 섹션은 고정됩니다.

태블릿 화면입니다.

전화 보기는 요소를 스택합니다.

헤더 5 레이아웃

헤더 5에는 코드 모듈, 몇 가지 광고 문구, 소셜 미디어 팔로우 및 메뉴 모듈이 포함됩니다.

다음은 어두운 배경에 대한 헤더 5C입니다. 상단에는 클릭 가능한 전화번호, 소셜 버튼 및 연락처 양식 링크가 포함되어 있습니다. 빨간색과 짙은 회색이 잘 어울립니다.

밝은 배경에서도 잘 보입니다. 상자 그림자가 더 눈에 띕니다.

메뉴의 상단 절반은 화면 상단에 하단 절반이 고정되면서 계속 스크롤됩니다.

다음은 태블릿 보기입니다.

폰뷰입니다. 나는 상단 섹션의 콘텐츠가 쌓이는 방식을 좋아합니다.

헤더 6 레이아웃

헤더 6은 코드 모듈, 4개의 문구, 소셜 미디어 팔로우 모듈 및 메뉴 모듈을 포함합니다.

이것은 어두운 배경의 헤더 6B입니다. 이 섹션에는 세 개의 섹션이 있습니다. 상단에는 소셜 버튼이 있고, 가운데에는 연락처 정보가 있고, 하단에는 메뉴 링크가 있습니다.

다음은 밝은 배경에 대한 헤더입니다.

헤더의 상단 2개 섹션이 스크롤되고 하단 섹션이 고정됩니다. 화면 상단에 붙을 때 하단 메뉴에 상자 그림자를 추가합니다.

다음은 태블릿 보기입니다. 전화번호를 맨 위로 이동합니다.

다음은 전화 보기의 디자인입니다.

구입

헤더 레이아웃 팩은 Divi Life에서 $49에 구입할 수 있습니다(올해 남은 기간 동안 $5에 판매). 귀하와 귀하의 클라이언트를 위한 무제한 사이트에서 사용하고 모든 향후 업데이트에 대한 액세스를 포함합니다. 여기에는 지원 및 문서도 포함됩니다.

마무리 생각

Divi Theme Builder용 헤더 레이아웃 팩은 흥미로운 레이아웃 세트입니다. CSS와 JavaScript는 일반적으로 헤더에서 사용할 수 없는 스타일을 추가합니다. 이것은 헤더가 표준 헤더와 훨씬 다른 모양을 갖도록 하는 데 도움이 됩니다. 각 디자인에는 미리 스타일이 지정된 옵션이 여러 개 있기 때문에 많은 수정 없이 웹사이트에 맞는 것을 쉽게 찾을 수 있습니다. 스타일링은 이미 ET의 무료 Divi 레이아웃에 맞습니다.

헤더는 전문적으로 디자인된 것처럼 보이며 사용하기 쉽습니다. 나는 그 중 몇 가지만 살펴보았다. 헤더 1 작업은 복잡한 단계가 필요한 유일한 레이아웃입니다. 지침을 읽는다면 그렇게 어렵지 않습니다(내가 어떻게 아는지 추측). 다른 것보다 더 많은 단계가 필요하다는 것을 명심하십시오.

전문적으로 디자인된 Divi Theme Builder용 헤더에 관심이 있다면 Divi Life의 The Header Layout Pack을 살펴볼 가치가 있습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi Life의 헤더 레이아웃 팩을 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

PureSolution/Shutterstock.com을 통한 주요 이미지