Divi 5에 대한 20 개의 Flexbox 헤더 (무료 다운로드!)

Flexbox는 깨끗하게 보이고 다른 화면 크기에 아름답게 적응하는 헤더를 만들 수 있으며 Divi 5에서는 간단합니다.이 무료 팩에는 정확한 정렬 및 반응 형 제어를 위해 Divi 5의 Flex 레이아웃 시스템으로 구축 된 20 개의 고유 한 Flexbox 헤더 디자인이 있습니다. 사이트의 기존 글로벌 스타일을 사용하든 기성품 디자인으로 시작하든 여기에는 두 가지 옵션이 모두 있습니다.

미리보기 및 라이브 데모

이 팩의 20 개의 Flexbox 헤더를 모두 살펴 보겠습니다. 이 팩은 게시물 아래로 더 다운로드 할 수 있습니다.

YouTube 채널을 구독하십시오

라이브 데모를보십시오

Divi 5 용 20 개의 Flexbox 헤더를 다운로드하십시오

기본 및 사전 시스템 버전을 포함하여 20 개의 Flexbox 헤더를 무료로 받으십시오. 각 헤더는 Divi 라이브러리로 가져와 테마 빌더에 사용할 준비가되었습니다. 다운로드하고 건축을 시작하십시오.

파일을 다운로드하십시오

무료로 다운로드하십시오

Divi 뉴스 레터에 가입하면 Ultimate Divi Landing Page Layout Pack의 사본과 다른 놀라운 무료 Divi Resources, Tips 및 Tricks를 이메일로 보내 드리겠습니다. 따라 오면 당신은 곧 Divi Master가 될 것입니다. 이미 구독 한 경우 아래의 이메일 주소를 아래에 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

당신은 성공적으로 구독했습니다. 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하려면 이메일 주소를 확인하십시오!

포함 된 내용 (42 수출)

폴더를 다운로드하여 압축 해제하면 42 개의 레이아웃 내보내기가 모두 기본 및 프리 스타일 버전으로 개별 헤더 및 전체 "모든 헤더"팩으로 깔끔하게 구성됩니다.

기본 - 개별 헤더 (20) → 글로벌 스타일을 사용합니다.
기본값 - 모든 헤더 (1) → 전체 스타일을 사용한 전체 팩.

Prestyled-개별 헤더 (20) → 즉시 기성품 모양을위한 인라인 스타일이 포함되어 있습니다.
사전 시스템 - 모든 헤더 (1) → 인라인 스타일이 적용되는 전체 팩.

레이아웃을 설치하는 방법

다운로드 폴더를 가깝게 유지하려면 Divi 웹 사이트로 가져 오기 시작하십시오.

1. 레이아웃을 Divi 라이브러리로 가져옵니다

Divi → Divi Library로 이동하십시오.

거기에 있으면 가져 오기 및 내보내기 버튼을 클릭하여 파일을 설치하십시오.

Flexbox 헤더 레이아웃 (모두) 파일을 찾고 클릭하여 가져 오십시오.

2. 새 헤더 템플릿을 만듭니다

Divi → 테마 빌더로 이동하십시오.

새 헤더 템플릿을 만들거나 기존 템플릿을 열십시오.

3. 헤더 레이아웃 업로드

헤더 영역 안에 있으면 Divi 라이브러리를 사용하여 선택한 헤더 레이아웃을 선택할 수 있습니다. 테마 빌더의 왼쪽 상단에있는 레이아웃 버튼을 클릭하십시오.

저장된 레이아웃을 선택하십시오.

테마 빌더에 추가하려는 헤더 레이아웃을 클릭하십시오.

이 레이아웃 버튼을 클릭하여 헤더를로드하십시오.

새 헤더 및 테마 빌더 변경을 저장하십시오.

기본 대 사전 스타일 : 어느 것을 선택해야합니까?

다운로드 폴더를 열면 모든 헤더의 두 가지 버전이 표시됩니다 : ** Default ** 및 ** Prestylede **. 그들은 똑같은 방식으로 만들어졌습니다. 차이점은 스타일링을 처리하는 방법입니다.

기본 헤더는 글로벌 스타일에서 외관을 상속합니다. 브랜드 색상, 글꼴 및 버튼 스타일이 자동으로 적용됩니다. 이미 글로벌 스타일을 설정 한 경우 기본적 으로이 헤더를 사이트에 추가하고 디자인에 즉시 일치하는 가장 빠른 방법입니다.

Prestyled 헤더는 모든 스타일이 구운 상태로 제공됩니다. 색상, 글꼴 및 버튼 디자인은 인라인입니다. 그들은 상자에서 바로 미리보기처럼 보입니다. 빠른 데모를 구축하거나 아이디어를 테스트하거나 변수를 만지지 않고 스크린 샷에서 볼 수있는 정확한 디자인을 가져 오려는 경우 좋습니다.

요컨대, 헤더가 기존 사이트 스타일과 원활하게 혼합하려면 기본값으로 이동하십시오. 미리보기에 기성품 모양을 원한다면 사전 시스템을 선택하십시오.

헤더 사용자 정의

Divi 5의 Flexbox 레이아웃 시스템은 모든 것을 응답하면 레이아웃을 조정하는 강력한 도구를 제공합니다. 사이트 스타일에 맞게이 헤더를 사용자 정의하는 방법은 다음과 같습니다.

1. 플렉스 설정을 조정하십시오

헤더 요소가 포함 된 행을 선택하십시오. 디자인 탭에서 레이아웃 드롭 다운 메뉴를 찾으십시오. Flexbox 설정을 공개하도록 확장하십시오.

여기서 레이아웃 방향을 행에서 행 역전, 열 또는 열 리버스로 변경할 수 있습니다. 이 기능을 사용하면 레이아웃 방향을 변경할 수 있습니다.

정당화 된 컨텐츠 설정을 사용하면 플렉스 항목이 메인 축을 따라 분산되는 방법 (레이아웃 방향으로 정의 된 Flex 컨테이너의 기본 방향을 제어 할 수 있습니다. 레이아웃 방향에 따라 품목의 간격 및 정렬을 결정합니다.

정렬 항목을 사용하면 Flex 항목이 열, 행 또는 섹션 내에서 정렬되는 방법을 제어 할 수 있습니다. 컨테이너 내의 크로스 축을 따라 플렉스 품목이 서로에 대해 어떻게 배치되는지 결정합니다. 시작, 중앙, 끝 및 스트레칭을 선택할 수 있습니다.

마지막으로, 레이아웃 랩핑 제어 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤 컨트롤은 플렉스 컨테이너의 항목이 단일 라인으로 강제되거나 컨테이너의 너비를 초과 할 때 여러 줄로 감싸도록 허용합니다 (또는 레이아웃 방향이 열로 설정된 경우 높이).

2. 다른 중단 점에서 요소를 표시/숨기십시오

Divi 5를 사용하면 특정 중단 점에서 섹션, 행, 열 또는 개별 모듈의 가시성을 전환 할 수 있습니다. 이는 보조 CTA 버튼을 숨기거나 전체 메뉴를 모바일로 교체하는 등 작은 화면의 레이아웃을 단순화하는 데 유용합니다.

예를 들어, 모바일 화면에 공간을 절약하기 위해 헤더에 소셜 미디어 아이콘을 숨길 수 있습니다. 데스크탑 브레이크 포인트에있는 동안 고급 탭으로 이동하십시오. 가시성 드롭 다운 메뉴를 확장하십시오. 다음으로 전화 및 태블릿 중단 점을 클릭하여 요소를 숨 깁니다.

Divi 5의 반응 형 미리보기를 사용하여 헤더를보십시오. 전화 브레이크 포인트에서 레이아웃을 볼 때 숨겨진 요소가 보이지만 회색으로 표시되므로 프론트 엔드에 숨겨져 있음을 나타냅니다.

3. 필요한 경우 링크를 추가하십시오

모든 헤더 레이아웃이 상자 밖으로 나갈 준비가되었지만 여전히 링크를 추가해야합니다. 이 예에서는 소셜 미디어 팔로우 모듈에 링크를 추가합니다. 모듈 설정을 확장하려면 클릭하십시오. 컨텐츠 탭에서 첫 번째 소셜 미디어 아이콘을 클릭하여 설정을 공개하십시오.

링크 드롭 다운을 확장하고 계정 링크 URL 필드에서 소셜 미디어 계정에 링크를 추가하십시오.

테마 빌더를 종료하기 전에 헤더를 저장하십시오.

아직 그렇게하지 않았다면 웹 사이트 메뉴를 만들어야합니다. 시각적 빌더를 종료하고 모양 → 메뉴로 이동하십시오. 메뉴 이름 필드에 이름을 추가하십시오.

기본 메뉴 확인란을 클릭 한 다음 메뉴 작성을 클릭합니다.

메뉴에 페이지를 추가하려면 모든 탭보기를 클릭하고 메뉴에 표시 할 페이지를 선택하십시오. 메뉴에 추가를 클릭하여 할당하십시오.

테마 빌더로 돌아가서 필요에 따라 추가 변경을 수행하십시오. 예를 들어 헤더가 루프 빌더를 사용하는 경우 링크 순서를 조정해야 할 수도 있습니다.

오늘 헤더를 구축하려면 Divi 5를 사용하십시오

이 20 개의 Flexbox 헤더는 기존의 글로벌 스타일에서 작업하든 미리 설계된 모양으로 시작하든 Divi 5 빌드 속도를 빠르게 높이는 방법입니다. 그것들을 다운로드하고 테마 빌더에 넣고 자신의 것입니다. Flexbox는 디자인에 집중할 수 있도록 정렬을 처리합니다.