Divi 5의 Flexbox를 사용하여 동일한 열 높이를 만드는 방법

깨끗하고 전문적인 레이아웃을 만드는 것은 효과적인 웹 디자인의 초석이며 동일한 열 높이는 균형 레이아웃에 기여합니다. 제품, 서비스 또는 포트폴리오 항목을 표시하든 사용자 경험을 완벽하게 향상시키는 열을 표시하든. Divi 4에서는 동일한 열이 가능했지만 Divi 5는 테이블에 더 많은 것을 가져옵니다.

Divi 5에서 Flexbox 레이아웃 시스템의 통합은 프로세스를 향상시켜 동일한 열 높이를 생성하는보다 간단하고 유연한 방법을 제공합니다. 이 게시물은 깨끗하고 균형 잡힌 레이아웃을 만드는 것을 안내합니다. 다이빙하자!

Divi 4의 동일한 열 높이

Divi 4에서 높이가 동일한 열을 달성하는 것은 간단하지만 제한적이었습니다. 토글은 가장 높은 열의 높이와 일치하도록 행 내의 모든 열을 활성화했습니다. 이 기능은 시각적 일관성을 유지하기위한 생명의 보살 이었지만 종종 해결 방법이 필요한 제한 사항이있었습니다.

Divi 4의 동일한 높이 효과는 컬럼 컨테이너에 적용되었으며, 이는 배경색, 이미지 또는 경계가 열 레벨에서 설정되어야 함을 의미합니다. 이 접근법은 열 내의 모듈로 확장되지 않았으므로 어색한 차이가 발생할 수 있습니다. 예를 들어, 한 열의 짧은 텍스트 모듈 아래의 버튼은 그 아래에 어색한 공간을 남겨 두는 반면, 다른 열의 더 긴 텍스트 모듈 아래의 버튼이 채워져 불균형 모양이 생성됩니다.

디자이너가 모듈 컨텐츠를 수직으로 정렬하거나 간격 조정과 같은 더 많은 제어를 원했던 경우, 맞춤형 CSS가 종종 필요했습니다. 이것은 세련된 결과를 달성하기 위해 Divi의 Custom CSS 분야에 뛰어 들기 때문에 특히 초보자에게는 도전을 제기했습니다. 예를 들어, 버튼이 Divi 4의 열 바닥에 맞추기를 원한다면 CSS를 사용하여 달성해야합니다.

Divi 5의 Flexbox가 동일한 열을 다루는 방법

Flexbox는 Divi 5에 원활하게 통합되어 동일한 열 높이를 달성하기가 더 쉽습니다. Divi 4의 토글 기반 옵션과 달리 Divi 5는 Flexbox를 활용하여 웹 페이지 디자인을보다 쉽게 설계 할 수있는 내장 컨트롤을 제공합니다.

Flexbox를 사용하면 열이 가장 높은 열에 맞게 자동으로 스트레칭 할 수 있으며 열과 콘텐츠 모두에 대한 정확한 정렬 옵션을 제공 할 수 있습니다. 이를 통해 맞춤형 CSS의 필요성이 없어져 모든 Divi 사용자에게 초보자 및 전문가 모두에게 고급 레이아웃이 가능합니다. Divi 5의 Flexbox 레이아웃 시스템을 통해 설계자는 일관된 전문적인 디자인을 쉽게 만들 수 있습니다.

Divi 5에서 동일한 열 높이를 만드는 방법

Divi 5에서 높이가 같은 열을 만드는 것은 Flexbox 통합 덕분에 산들 바람입니다. 아래 단계에서는 물건을 설정하고 모든 것이 완벽하게 일치하는 방법을 보여줍니다.

1 단계 : 디자인을 만듭니다

새 또는 기존 페이지에서 시각적 빌더를 엽니 다. 검은 색 + 아이콘을 클릭하여 새 행을 추가하십시오 .

새 섹션 대화 상자가 나타나면 동일한 열 에서 3 열 레이아웃을 선택하십시오.

첫 번째 열에 그룹 모듈을 추가하십시오.

다음으로 첫 번째 열의 그룹 모듈에 아이콘 모듈을 추가하십시오.

컨텐츠 탭에서 확인 아이콘을 선택하십시오.

디자인 탭에서 아이콘 색상을 #2EA3F2 로 설정합니다. 그리고 아이콘 크기 는 36px입니다.

다음으로 아이콘 모듈 아래에 제목 모듈을 추가하십시오. 회색 아이콘 대신 Black + 아이콘을 클릭하여 그룹 모듈에 헤딩을 추가하십시오.

콘텐츠 탭 에서 웹 디자인을 제목으로 입력하십시오.

디자인 탭에서 H5를 제목 레벨 로 선택하고, 제목 글꼴 로 인터 , 헤딩 글꼴 무게 로 중간을 선택하십시오. 제목 글꼴 스타일을 대문자 로 설정하고 제목 텍스트 정렬 , 제목 텍스트 색상을 #000000 으로 설정하고 제목 텍스트 크기를 기본 크기 16px 로 유지하십시오.

다음으로 그룹 모듈 내부의 제목 아래에 텍스트 모듈을 추가하십시오. 설정을 그대로 남겨 둘 수 있습니다.

열의 최종 모듈에 대한 버튼 모듈을 추가합니다. 그러나 그룹 모듈에 추가하는 대신 그 아래에 추가 할 것입니다. 이렇게하면 동일한 열 높이를 생성 할 수 있지만 버튼을 바닥에 맞추어 설계를보다 응집력있게 만듭니다.

디자인 탭을 클릭하고 원하는 스타일 설정을 버튼 모듈에 할당하십시오. 왼쪽 메뉴에서 레이어보기를 보면서 그룹 모듈 외부에 있는지 확인하려면 버튼을 확인하십시오. 완료되면 버튼은 아래의 스크린 샷처럼 보입니다. 왼쪽으로 파란색 배경과 흰색 텍스트가 있습니다.

2 단계 : 복제 열

첫 번째 열에 컨텐츠가 채워지면 첫 번째 열에서 두 번째 열 및 세 번째 열로 내용을 복사하여 몇 가지 변경을 수행합니다. 두 번째 및 세 번째 열을 삭제하고 첫 번째 열을 삭제하거나 그룹 모듈을 복사하여 두 번째 및 세 번째 열에 붙여 넣을 수 있습니다.

다음으로 두 번째 열의 제목 제목을 코딩 으로 변경하고 3 열에서 제목 제목을 마케팅 으로 변경하십시오. 또한 Divi 5가 다양한 컨텐츠 길이로 Flexbox를 처리하는 방법을 보여줄 수 있도록 두 번째 열의 텍스트 모듈의 일부 내용을 삭제합니다. 보시다시피, 열은 고르지 않습니다.

다음 단계로 넘어 가기 전에 첫 번째 열을 클릭하고 열의 모든면에 25px 간격을 추가하십시오.

또한 색상으로 #666666 의 15px 테두리 반경 과 1px 테두리 너비를 추가합니다.

행을 설계하는 마지막 단계는 첫 번째 열에서 디자인 속성을 복사하여 나머지 열에 붙여 넣는 것입니다. 첫 번째 열을 마우스 오른쪽 버튼으로 클릭하고 항목 스타일을 복사 하십시오. 다음으로 두 번째 열을 마우스 오른쪽 버튼으로 클릭하고 항목 스타일을 붙여 넣습니다. 세 번째 열에 대해서도이 작업을 반복하십시오.

3 단계 : 동일한 높이로 Flexbox 설정을 구성합니다

다음으로 행에 대한 Flexbox 설정을 구성해야합니다. Divi 5는 Flexbox 컨트롤을 레이아웃 시스템에 통합하여 Divi 4의 균등 한 열 높이 토글을 넘어서 이동합니다. 행의 설계 탭 으로 이동하여 플렉스 가 레이아웃 에서 선택되도록하십시오.

다음으로, 레이아웃 방향 으로 행을 선택하고 정당화 내용 에서 시작하며 정렬 항목 에서 스트레치가 선택되도록하십시오. 이렇게하면 Divi 5에 열 구조를 유지하고 행 내의 모든 항목을 왼쪽으로 정렬 한 다음 부모 컨테이너 내에서 사용 가능한 공간을 채우도록 지시됩니다.

다음으로 첫 번째 열의 설정을 클릭하십시오. 레이아웃 드롭 다운 메뉴를 클릭하여 디자인 탭 에서 설정을 공개하십시오. 기본적으로 Flex는 레이아웃 에서 선택됩니다. 레이아웃 방향 필드에서 열을 선택하십시오. 정당화 콘텐츠 에서 공간을 선택하십시오. 모든 항목을 시작 (왼쪽)에 정렬하고 레이아웃 포장을 랩없이 설정하십시오.

두 번째 및 세 번째 열에 대한 위의 단계를 반복하십시오. 복사/붙여 넣기 또는 확장 기능을 사용하여 행의 나머지 열에 동일한 설정을 적용 할 수도 있습니다.

그룹 내의 모든 모듈은 사용 가능한 공간을 채우도록 늘어나고 그룹 외부 버튼이 바닥에 정렬됩니다.

4 단계 : 테스트 응답 성

Divi 5의 사용자 정의 가능한 반응 형 중단 점은 모든 장치에서 동일한 열 높이를 쉽게 보이게 할 수 있도록합니다. 반응 형 뷰 토글을 사용하여 시각적 빌더에서 레이아웃을 미리 봅니다. 기본적으로 세 가지 중단 점이 있습니다. 그러나 Divi 5에는 이제 7 개가 있으며, 이는 시각적 빌더 상단의 도구 모음에서 Ellipsis 메뉴를 클릭하여 쉽게 활성화 할 수 있습니다. 원하는 중단 점을 활성화하고 저장을 클릭하여 적용하십시오.

태블릿보기 에서 레이아웃을 미리보기하려면 클릭하십시오. 보시다시피, Flexbox는 열을 나란히 쌓아 놓습니다.

열 구조를 변경하여 더 작은 장치에서 열이 수직으로 쌓을 수 있습니다. 태블릿 브레이크 포인트에있는 동안 행의 내용 탭을 클릭하십시오 . 열 구조 변경을 클릭합니다.

대화 상자가 나타나면 클릭하여 동일한 열 아래에서 단일 행을 활성화하십시오. 이렇게하면 3 열 줄을 태블릿 및 모바일 장치의 단일 열로 변경하면서 데스크탑에서 3 열 구조를 보존합니다.

모든 중단 점에서 변경 사항을 미리 볼 때 작은 화면의 레이아웃이 어떻게 전환되는지 알 수 있습니다.

높이 정렬을 자동화함으로써 설계자는 기술 수정보다는 창의성에 집중할 수 있으므로 시간의 일부에 전문 사이트를보다 쉽게 구축 할 수 있습니다. Divi 5의 Flexbox 레이아웃 시스템은 모듈 그룹을 통해 더 나은 콘텐츠 구성을 지원하므로 사용자 지정 CS없이 모듈을 정렬 할 수 있습니다.

일반적인 사용 사례

Divi 5의 Flexbox 시스템은 다양한 사용 사례에 동일한 열 높이를 다재다능하고 효과적으로 만듭니다. 다음은 Divi 5의 Flexbox 시스템이 빛나는 몇 가지 일반적인 방법입니다.

1. 제품 목록

전자 상거래 레이아웃에서 제품 카드는 제목이나 설명으로 인해 컨텐츠 길이가 종종 다릅니다. Divi 5의 Flexbox를 사용하면 각 열이 동일한 높이를 유지하는 제품 카드 그리드를 만들어 깨끗하고 전문적인 외관을 보장 할 수 있습니다. 예를 들어, 간단한 설명이있는 제품은 더 긴 설명이 특징 인 제품과 완벽하게 정렬됩니다. Divi 5의 Flexbox 시스템을 사용하면 어색한 격차를 피하고 사용자의 신뢰와 참여를 촉진하는 응집력있는 경험을 만들 수 있습니다.

2. 특집 섹션

서비스 또는 기능 섹션은 Divi의 Flexbox 시스템에 적합합니다. Divi 5의 Flexbox는 행 내의 모든 모듈에 열 높이가 동일한 열 높이를 보장하여 균형을 잡고 세련된 모양을 만듭니다. 팀 바이오스, 서비스 또는 기능 하이라이트 표시에 관계없이 균등 한 열은 웹 페이지를 쉽게 스캔 할 수 있도록하여 사용자 경험을 향상시킵니다.

3. 포트폴리오 그리드

포트폴리오 그리드는 Flexbox, 특히 프리랜서가 자신의 작업을 전시하는 완벽한 사용 사례입니다. Flexbox는 이미지와 같은 갤러리 항목이 다른 종횡비로 균일하게 정렬되도록합니다. 그룹 모듈을 사용하고 배경 이미지를 할당하고 그에 따라 간격을 조정할 수 있습니다. 이를 통해 작업을 일관되게 보여주는 깔끔하고 전문적인 그리드를 만들어 잠재 고객에게 깊은 인상을주는 사진 작가, 디자이너 또는 대행사에게 이상적입니다.

파일을 다운로드하십시오

무료로 다운로드하십시오

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

다운로드

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

오늘 Divi 5의 Flexbox 기능에 익숙해 지십시오

Divi 5의 Flexbox 레이아웃 시스템은 Divi 4의 열 높이를 평등하게하는 방식에서 상당한 도약을 표시하여 Divi 사용자가 동일한 열을 만드는 방식을 변환합니다. Divi 4가 정제를 위해 종종 맞춤형 CS를 요구하는 엄격하고 배경 의존적 인 방법에 의존하는 경우 Divi 5는 직관적 인 제어와 원활한 응답 성을 제공하기 위해 Flexbox를 활용합니다. 그 결과 사용자 정의 CSS 해결 방법을 제거하고 Divi 사용자가 세련된 전문 레이아웃을 쉽게 구축 할 수있는보다 효율적인 시스템입니다.

Divi 웹 사이트를 높일 준비가 되셨습니까? Divi 5의 Flexbox 설정으로 뛰어 들어 잠금 해제 된 창의적인 가능성을 실험하십시오. 아래에 의견을 공유하거나 소셜 미디어 채널에서 우리와 연결하여 새로운 Flexbox 기능에 대한 귀하의 생각을 공유하십시오.