Divi 5 용 Flexbox 바닥 글 20 개 (무료 다운로드!)

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

시사

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

https://youtu.be/xutcua0rccs

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. 사용자 정의 할 모듈을 선택하십시오

테마 빌더에서 레이아웃을 통해 호버링하고 텍스트 모듈, 소셜 미디어 팔로우 모듈 또는 버튼과 같은 편집하려는 모듈을 클릭하십시오. 모듈의 설정 패널이 열려서 컨텐츠, 디자인 또는 고급 옵션을 수정할 수 있습니다.

예를 들어, 텍스트 모듈을 클릭하고 모듈의 내용을 변경하거나 Divi AI를 사용하여 방문자의 관심을 끌 수있는 컨텐츠를 작성할 수 있습니다.

모듈의 디자인 탭에서는 브랜딩과 일치하도록 글꼴, 색상 및 더 많은 설정을 조정할 수 있습니다.

각 Flexbox 바닥 글은 이미지, 배경색, 글꼴 등을 포함하여 완전히 사용자 정의 할 수 있으므로 비전에 맞게 디자인을 조정할 수 있습니다.

2. 레이아웃 제어를 위해 Flexbox 설정을 조정하십시오

각 바닥 글은 Divi 5의 Flexbox 레이아웃 시스템을 사용하여 설계되었습니다. 즉, 광범위한 Flexbox 컨트롤을 사용하여 레이아웃 방향을 변경하거나, 항목을 정렬하거나 랩핑 할 수 있습니다. 테마 빌더에서 사용자 정의하려는 섹션이나 행을 클릭하십시오. 예를 들어, 디자인 요소 사이의 공간을 조정하려면 행 내 열을 선택하고 디자인 탭으로 이동 한 다음 레이아웃 드롭 다운 메뉴를 선택하십시오.

수직 갭 필드의 값을 조정하여 간격을 제어 할 수 있습니다.

레이아웃 방향 옵션을 사용하면 레이아웃 방향을 변경할 수 있습니다. 예를 들어, 행의 설정에서 모든 디자인 요소를 연속 (수평), 행 반전, 열 (수직) 또는 열 리버스로 표시 할 수 있습니다.

기본 축을 따라 Flex 항목 (열, 행 또는 섹션)의 정렬을 제어하려면 정당한 컨텐츠 설정을 조정할 수 있습니다. 사용 가능한 옵션에는 항목을 시작, 중앙, 끝, 공간 사이, 주변 주위 또는 공간에 균등하게 정렬하는 것이 포함됩니다. 이 설정은 컨테이너의 플렉스 방향 에 의해 결정됩니다. 예를 들어, Flex 방향이 행으로 설정되거나 열로 설정된 경우 수평으로 설정되어 있습니다.

정렬 항목 필드에서는 컨테이너 내의 디자인 요소를 시작, 중앙, 끝 또는 스트레치에 맞게 정렬 할 수 있습니다.

Flex 랩 설정은 컨테이너 내의 Flex 품목이 한 줄에 유지되는지 여부를 제어합니다. 또는 주 축을 따라 모든 공간에 맞을 공간이 충분하지 않은 경우 여러 줄에 랩핑합니다. 랩을 선택할 때 컨테이너가 넘쳐나더라도 모든 플렉스 품목은 단일 라인에 유지해야합니다.

랩은 Flex 품목이 맞을 수 없을 때 추가 라인에 자동으로 포장되도록하고 리버스 랩 내용을 리버스 순서로 랩핑합니다.

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

모든 바닥 글 레이아웃이 상자 밖으로 나갈 준비가되었지만 여전히 링크를 추가해야합니다. 이 예에서는 소셜 미디어에 링크를 추가하여 모듈 또는 개인 정보 보호 정책을 추가합니다. 모듈 설정을 확장하려면 클릭하십시오. 컨텐츠 탭에서 첫 번째 항목을 클릭하여 설정을 표시하십시오.

링크 드롭 다운을 확장하고 계정 링크 URL 필드의 계정 또는 페이지에 링크를 추가하십시오.

테마 빌더를 종료하기 전에 바닥 글을 저장하십시오.

오늘 바닥 글을 만들려면 Divi 5를 사용하십시오

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