Divi 5의 Flexbox 레이아웃 시스템과 수직으로 정렬하는 방법

현대 웹 디자인에서는 시각적으로 균형 잡힌 반응 레이아웃을 만드는 것이 필수적이며 Divi 5의 새로운 Flexbox 레이아웃 시스템은 수직 정렬을 쉽게 달성하기가 쉽습니다. 이 강력한 새로운 기능을 통해 Divi 사용자는 유연하고 동적 레이아웃을 설계 할 수있어 수직 포지셔닝을 완전히 제어 할 수 있습니다. 섹션 내에서 텍스트를 정렬하거나, 멀티 컬럼 행의 콘텐츠 균형을 유지하거나, 반응 형 디자인을 만들 든 Divi 5는 시각적 빌더에 직접 구축 된 직관적 인 컨트롤로 프로세스를 단순화합니다.

이 게시물에서는 수직 정렬을 마스터하고 실제 예제를 제공하며 반응적이고 세련된 레이아웃을 만들기위한 팁을 제공하는 단계를 안내합니다. Divi 5의 Flexbox 레이아웃 시스템이 접근 방식을 수직 정렬로 변환 할 수있는 방법을 살펴 보겠습니다.

Divi 5의 Flexbox 레이아웃 시스템 이해

Flexbox 또는 Flexible Box 레이아웃은 컨테이너 내의 요소 배열을 단순화하도록 설계된 CSS 레이아웃 모델로서 수평 및 수직 정렬에 이상적입니다. 플로트 나 여백과 같은 전통적인 방법과 달리 Flexbox는 컨텐츠 구성에 대한 간단한 접근 방식을 제공합니다. 요소는 컨테이너의 크기 및 뷰포트를 기반으로 크기, 순서 및 정렬을 동적으로 조정하여 레이아웃이 모든 화면 크기에 따라 일관되고 반응을 보장합니다.

Flexbox를 사용하면 컨텐츠를 쉽게 중앙으로 중앙으로 중앙으로 배포하거나 특정 순서로 요소를 쌓을 수 있습니다. 이러한 유연성은 웹 디자이너에게 필수품이되며 Divi 5는 CSS에 대한 고급 지식 없이도 정교한 레이아웃을 만들 수 있도록 힘을 활용합니다.

Divi 5가 Flexbox를 통합하는 방법

Divi 5는 최근 Flexbox 레이아웃 시스템을 도입했습니다. 이 시스템은 Flexbox를 Visual Builder에 직접 통합하여 사용자가 직관적 인 설정으로 섹션, 행, 열 및 모듈 배열을 제어 할 수 있도록합니다.

주요 기능에는 단일 열에서 멀티 로우 섹션에 이르기까지 다양한 새로운 행 템플릿이 포함되어있어 Divi에서 레이아웃을 쉽게 구축 할 수 있습니다.

Divi 5의 Flexbox 컨트롤을 사용하면 레이아웃의 방향을 제어하고 수평 및 수직 간격을 조정하고 시작, 중앙 또는 종료에 대한 내용을 정당화하고 포장을 활성화하는 등을 가능하게합니다.

Divi 5의 새로운 변경 열 구조 기능은 더 작은 장치에서 열이 어떻게 작동하는지에 대한 더 많은 제어를 제공합니다. 열의 수를 쉽게 변경하거나 재정렬 할 수있어 화면 크기에서 디자인을 멋지게 보이게 할 수 있습니다.

Divi 5는 전문 분야 및 전액 섹션에서 멀어지게됩니다. 이제 구식 섹션 유형에 의존하지 않고 복잡하고 반응 형 디자인을 만들기 위해 행을 서로 내 안에 둥글게 할 수 있습니다. 이러한 발전으로 Divi 5의 Flexbox 레이아웃 시스템은 빌더 내에서 직접 현대적이고 적응 가능한 레이아웃을 구축하기위한 강력한 도구입니다.

Divi 5에서 수직 정렬 설정

Divi 5의 Flexbox 레이아웃 시스템은 시각적 빌더에 원활하게 통합되어 사용자가 유연하고 반응이 좋은 디자인을 만들 수 있습니다. 시작하려면 새 또는 기존 페이지에서 Visual Builder를 열고 섹션과 행을 추가하십시오. 전체 레이아웃을 만들어 다양한 시나리오에서 항목을 세로로 정렬하는 단계를 진행할 수 있습니다.

섹션의 수직 정렬

섹션의 설정에서 디자인 탭 으로 이동하여 Flexbox 컨트롤을 찾을 수있는 레이아웃 옵션을 찾으십시오.

플렉스가 레이아웃 스타일 로 선택되어 있는지 확인하십시오. 이를 통해 섹션에 Flexbox가 활성화되어 있습니다.

기본적으로 START (Flex-Start)는 정당화 컨텐츠 에서 선택됩니다. 컨테이너 시작시 모든 항목을 정렬합니다. 이 예에서는 품목을 수직으로 중앙으로 중앙으로 중앙으로 정렬하려고 할 때 중앙 , 공간 또는 공간에 고르게 정렬 할 수 있습니다. 중첩 행이 포함 된 단일 행이 있으므로 섹션의 모든 디자인 요소는 위에서 언급 한 모든 옵션과 수직으로 중심적으로 중심적입니다.

행의 수직 정렬

또한 행 수준에서 내용을 세로로 정렬 할 수도 있습니다. 그러나이 예에서는 콘텐츠를 정당화하기보다는 정렬 항목을 사용하여 행 내 모듈을 수직으로 정렬합니다. 행의 설계 탭 에서 레이아웃 설정을 찾으십시오. Flex를 활성화하고 정렬 항목 설정을 찾으십시오. 기본적으로 시작이 선택되면 행의 모든 ​​모듈을 컨테이너 상단에 정렬합니다.

요소를 정렬하는 방법에 따라 몇 가지 옵션이 있습니다. 행의 항목을 수직으로 중앙으로 원하는 경우 센터를 선택하십시오. 끝을 선택할 때 모든 항목이 행의 하단에 정렬됩니다. 스트레치는 모든 항목이 행의 높이를 채우게합니다.

멀티 로우 섹션의 수직 정렬

이 시나리오에서는 단일 열 행과 2 열 행을 포함하여 섹션에 3 개의 행이 있습니다. 정당한 컨텐츠 설정을 사용하여 행 내의 모든 컨텐츠를 수직으로 정렬합니다.

섹션에서 열을 레이아웃 방향으로 사용하면 컨텐츠가 수직으로 정렬됩니다. 시작은 기본적으로 선택됩니다. 모든 행을 섹션의 상단에 정렬합니다. 줄은 상단 가장자리에서 시작하여 함께 포장됩니다. 센터는 섹션의 모든 행을 세로로 정렬합니다. 줄은 바닥 가장자리에서 시작하여 함께 포장됩니다. 끝을 선택하면 모든 행이 섹션의 맨 아래에 정렬됩니다. 하단 가장자리에서 시작하여 행이 함께 포장됩니다.

주축 (수직)을 따라 행을 고르게 배포합니다. 첫 번째 행은 섹션의 상단, 하단에 대한 마지막 행, 그 사이의 모든 행은 동일한 양의 공간을 분리하는 것입니다. 주위의 공간은 각 항목 주위에 동일한 공간으로 행을 배포합니다.

인접한 행 사이의 공간은 행 끝에서 공간의 두 배가됩니다 (섹션의 첫 열과 상단 사이의 공간, 마지막 행과 섹션의 하단 사이). 마지막으로, 공간은 주변의 공간과 균등 하게 비슷하지만 각 행 사이의 공간이 동일하고 섹션의 시작과 끝의 공간도 해당 간격과 동일합니다.

모듈 그룹의 수직 정렬

Divi 5의 Flexbox 시스템은 또한 모듈 그룹 내에서 수직 정렬을 단순화합니다. 특히 동적 컨텐츠를 위해 루프 빌더와 같은 기능을 사용할 때. 이미지, 게시물 제목, 게시물 발췌 및 버튼이있는 블로그 게시물을 표시하는 모듈 그룹을 고려하십시오. 적절한 정렬이 없으면 버튼과 같은 요소가 열에 따라 잘못 정렬 될 수 있습니다. 이전의 Divi 버전에서는 동일한 열 높이 및 사용자 정의 CS가 필요했습니다. Divi 5는 Flexbox 로이 프로세스를 간소화합니다.

요소를 정렬하려면 모듈 그룹의 첫 번째 열을 클릭하고 디자인 탭 으로 이동하여 Flex 설정을 찾으십시오. 컨텐츠를 공간 으로 정당화하십시오. 이렇게하면 열 내의 모듈을 균등하게 배포하여 사용자 정의 CS없이 모든 열에서 더 많은 버튼을 읽습니다 . 이 접근법은 블로그 그리드 또는 제품 목록과 같은 동적 콘텐츠에 대한 일관되고 전문적인 레이아웃을 보장합니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

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

다운로드

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

반응 형 수직 정렬을위한 팁

Divi 5의 Flexbox 레이아웃 시스템은 수직으로 컨텐츠를 쉽게 정렬 할 수 있지만 고려해야 할 몇 가지 팁이 있습니다. Divi 5는 반응 형 디자인을위한 강력한 도구를 제공하여 모든 장치에서 수직 정렬을 미세 조정할 수 있습니다. 영웅 섹션의 콘텐츠를 중심 또는 다중 열 레이아웃에서 버튼을 정렬하든 다음 팁을 사용하면 Divi 5의 기능을 활용하여 일관되고 전문적인 레이아웃을 유지하는 데 도움이됩니다.

Divi 5의 사용자 정의 가능한 반응 형 중단 점을 사용하십시오

Divi 5의 Flexbox 시스템을 사용하면 다양한 화면 크기에 대한 모듈 주문 및 정렬을 사용자 정의 할 수 있으므로 레이아웃이 모든 화면 크기에 적응할 수 있습니다. Visual Builder에서는 7 개의 사용자 정의 가능한 응답 형 중단 점을 사용하여 장치에 레이아웃이 어떻게 나타나는지 제어 할 수 있습니다.

수직 정렬을 최적화하려면 태블릿 및 모바일 장치의 열 구조를 조정할 수 있습니다. 이렇게하면 레이아웃이 모든 화면 크기에서 완벽하게 보이도록합니다. 예를 들어 태블릿에 두 개의 열과 모바일 장치에 하나만 원할 수 있습니다.

Divi 5의 Flexbox 레이아웃 시스템을 사용하면 모바일 장치에서 열 순서를 변경하여 모바일 사용자가 섹션이나 행에서 먼저 보는 내용을 제어 할 수 있습니다.

Divi 5의 디자인 변수를 사용하십시오

Divi 5의 설계 변수 기능은 반응 형 뷰에서 일관된 간격 및 정렬을 유지하는 데 적합합니다. 설계 변수를 사용하면 패딩, 여백 및 글꼴 크기와 같은 속성에 대한 재사용 가능한 값을 정의하여 레이아웃의 균일 성을 보장 할 수 있습니다. 수직 정렬의 경우 수직 패딩의 변수를 만들어 행이나 섹션 내에서 간격을 표준화 할 수 있습니다. 예를 들어, Divi의 변수 관리자에서 수직 패딩이라는 설계 변수를 30px 로 설정하십시오.

변수를 행에 적용하려면 디자인 탭으로 이동하려면 간격 드롭 다운 메뉴를 클릭하고 동적 컨텐츠 아이콘을 클릭하여 사용하십시오.

Flexbox는 수직 정렬을 쉽게 만듭니다

Divi 5의 Flexbox 레이아웃 시스템은 세로 정렬을 쉽게하여 세련된 레이아웃을 만들기위한 유연하고 반응이 좋은 솔루션을 제공합니다. Flexbox를 Visual Builder에 통합함으로써 Divi 5를 사용하면 CSS에 대한 고급 지식이 필요없이 섹션, 행, 열 및 모듈 그룹의 정렬을 정밀하게 제어 할 수 있습니다. 이 기능은 모든 장치에서 일관되고 전문적인 설계를 보장합니다. 컨텐츠를 중심, 동적 모듈 그룹을 정렬하거나 멀티 로우 레이아웃 구축에 관계없이 Divi 5는 결과를 전달하면서 프로세스를 단순화합니다.

최신 Divi 5 알파를 다운로드하고 새로운 프로젝트에서 Flexbox 레이아웃 시스템을 실험하십시오.