Divi 5의 다른 중단 점에서 요소를 재정렬하는 방법

반응 형 디자인에는 스케일링 레이아웃 이상의 것이 필요하며 장치의 컨텐츠 스택이 어떻게 스택되는지 제어해야합니다. 데스크탑에서 구성된 느낌을주는 디자인은 모바일에서 혼란스러운 순서가 될 수 있으며, 사이드 바 또는 보조 요소는 주요 컨텐츠를 시야에서 밀어 넣습니다. Divi 5는 새로운 Flexbox 시스템을 사용하여 미리 빌드 된 응답 열 구조와 정확한 순서 컨트롤을 소개합니다.

이 게시물에서는 요소 재정렬 요소가 중요한 이유, Divi 5의 Flexbox 도구가 간단하게 만드는 방법을 살펴보고 다른 중단 점에서 레이아웃을 재구성하는 단계를 진행합니다.

요소를 재정렬하고 싶은 이유

레이아웃이 데스크탑에서 모바일로 이동하면 스태킹 순서가 항상 의도 된 경험을 반영하지는 않습니다. 균형 잡힌 3 열 데스크탑 디자인은 왼쪽 열이 항상 오는 수직 스택으로 무너질 수 있으며, 사용자가 볼 수없는 페이지 아래에서 콜 유도, 가입 양식 또는 연락처 정보를 푸시합니다.

YouTube 채널을 구독하십시오

Divi 5의 Flexbox 시스템은 각 중단 점에서 요소를 시각적으로 재정렬 할 수 있도록하여이를 수정합니다. 모바일의 헤드 라인 바로 아래에서 CTA를 이동하거나, 회원 증권을 가격 책정 테이블 위로 가져 오거나, 긴 콘텐츠 전에 연락처 정보를 강조 할 수 있습니다. 브라우저의 기본 스태킹 로직에 붙어있는 대신 계층 구조를 결정합니다. 이것은 가장 중요한 콘텐츠가 항상 가장 중요한 곳에 나타나도록합니다.

Divi 5의 Flexbox가 어떻게 재정렬을 쉽게 만드는가

Divi 5는 요소가 중단 점에 걸쳐 어떻게 쌓이는 지 직접 제어합니다. 사전 제작 된 Flex 열 구조를 사용하여 자연스럽게 적응하는 레이아웃을 설정 한 다음 각 화면 크기에서 열 구조 및 열 순서를 미세 조정할 수 있습니다.

Flexbox는 공간을 기반으로 조정하는 화려한 용기처럼 작동합니다. 컨텐츠가 무작위로 스태킹하는 대신 각 장치의 순서를 제어합니다.

Divi 5는 또한 중첩되고 복잡한 레이아웃을 잘 처리합니다. 컨텐츠 나 코딩을 복사하지 않고 각 중단 점에서 행 구조, 열 크기 및 모듈 순서를 변경할 수 있습니다.

또한 수직 정렬 및 포지셔닝을 자동으로 관리하여 콘텐츠를 의도적이고 완전히 반응하며 무작위로 배열되지 않도록합니다.

Divi 5의 반응 형 재주문에 대한 단계별 안내서

새로운 Flexbox 시스템을 사용하여 Divi 5에서 요소를 정확히 재정렬 할 수있는 방법을 살펴 보겠습니다. 아래 단계는 열 구조를 설정하고 다른 중단 점에서 순서를 조정하여 레이아웃이 모든 장치에서 명확하고 일관성을 유지합니다.

1. 7 가지 사용자 정의 중단 점을 설정하십시오

Divi 5는 3 개 대신 7 개의 중단 점을 제공합니다. 사이트가 모든 장치에서 바로 볼 수 있도록 각 픽셀 값을 변경할 수 있습니다.

작업 표시 줄에서 Ellipsis 메뉴를 클릭하고 중단 점 토글 스위치를 찾으십시오. 각각에는 기본 범위가 있지만 청중에게 더 잘 맞도록이 숫자를 변경할 수 있습니다.

전화 (767px 미만), 전화 너비 (860px 미만), 태블릿 (980px 미만), 태블릿 너비 (1024px 미만), 데스크탑 (981px 이상), 와이드 스크린 (1280px 이상) 및 Ultra Wide (1440px 이상)가 표시됩니다.

켜면 작업 표시 줄에 작은 아이콘이 나타납니다. 모든 아이콘을 클릭하여 사이트가 해당 화면 크기를 즉시 보는 방법을 확인하십시오.

모든 아이콘을 클릭하고 테스트에서 제한되는 대신 캔버스의 가장자리를 잡고 왼쪽 또는 오른쪽으로 드래그 할 수 있습니다. 당기면서 디자인이 수축되거나 팽창하여 레이아웃이 다른 너비에서 어떻게 변하는지를 보여줍니다.

캔버스를 300px로 드래그하고 3 열 데스크탑 레이아웃이 단일 모바일 스택으로 바뀌는 것을보십시오. 1200px로 다시 당기고 콘텐츠가 다시 퍼지는 것을보십시오. 미리보기 모드를 전환하거나 브라우저 창 크기를 조정할 필요가 없습니다.

2. Flex 컨트롤에 액세스하십시오

행의 설정 아이콘을 클릭하여 오른쪽의 설정 패널을 엽니 다. 이 패널 상단의 디자인 탭으로 이동하십시오. 레이아웃 메뉴에는 Divi 5의 Flexbox 컨트롤이 모두 있습니다. 기본적으로 Flex는 레이아웃 스타일로 선택됩니다.

기존 레이아웃에 적용되지 않으면 클릭하여 플렉스로 변경할 수 있습니다.

레이아웃 방향 필드를 찾으려면 아래로 스크롤하십시오. 이렇게하면 열이 나타나는 순서와 방법 (나란히 또는 위 또는 아래)이 결정됩니다.

다음은 정렬 및 분포를 제어하기위한 정당한 컨텐츠 옵션입니다. 한편, 정렬 항목 옵션은 포지셔닝 옵션 바로 아래에 나타납니다.

3. 각 화면 크기에 대한 미세 조정 레이아웃 구조

Flexbox 컨트롤은 이제 활성화되었지만 데스크탑 레이아웃에는 작은 화면에 대한 구조 조정이 필요할 수 있습니다. 3 열 레이아웃은 데스크탑에서 아름답게 작동하지만 태블릿에서 압도적이고 혼잡 해져서 대신 2 × 2 그리드가 필요합니다.

다행히 컨트롤 오른쪽 상단에있는 장치 아이콘을 사용하면 다른 화면에서 레이아웃을 미리보고 각 중단 점의 Flexbox 설정을 미세 조정할 수 있습니다. 이를 통해 디자인을 조정하여 모든 장치에서 잘 작동하고 잘 작동합니다.

태블릿 브레이크 포인트로 전환하고 열 변경 구조 버튼을 클릭하십시오. 현재 설정 대신 2 × 2 대칭 레이아웃을 선택하십시오. 이것은 각 행에 더 적은 카드를 보여줌으로써 즉시 뷰를 덜 압도적으로 만듭니다. 균형 잡힌 모양을 위해 필요에 따라 수직 및 수평 간격을 조정하십시오. 그런 다음 CTA 열을 선택하고 크기 조정 설정에서 열 클래스를 Fullwidth로 설정 한 다음“Grow To Fill”을 선택하십시오.

태블릿 버전에는 이제 두 개의 카드가 동시에 표시되어 균일 한 모양을 유지합니다. 호출 항목 버튼은 하단의 행에 잘 자리 잡고있어 데스크탑 레이아웃과 비슷하게 눈에 띄게됩니다. 이 업데이트는 너무 많은 옵션의 혼란스러운 느낌을 피하는 더 깨끗하고 매력적인 경험을 만드는 데 도움이됩니다.

모바일의 경우 Change Column 구조 옵션을 사용하여 단일 열 구조로 전환하십시오. Flexbox 컨트롤에서 레이아웃 방향을 열 역전으로 설정하십시오. 콘텐츠에 가장 적합한 내용으로 간격을 조정하십시오.

4. 중단 점을 통해 열을 재정렬

주문 값을 사용하는 것은 다양한 화면 크기에 걸쳐 Flex Containers의 하위 요소 (종종 열)의 순서를 수동으로 결정하는 좋은 방법입니다. 행 설정의 순서 탭은 각 열에 브라우저에“위치 1 에이 열을 표시, 위치 2에있는이 열을 표시하는 것 등을 알려주는 숫자를 제공합니다. 더 낮은 숫자가 먼저 나타나고 더 높은 숫자가 마지막으로 나타납니다. 그렇게 간단합니다.

주문 "0"또는 "-1"과 같은 음수를 사용하여 다른 값에 관계없이 특정 컨텐츠가 먼저 나타나도록 할 수도 있습니다.

각 브레이크 포인트는 자체 주문 시스템을 지원하므로 장치 전체의 요소 위치를 완전히 제어 할 수 있습니다.

실질적인 예를 살펴 보겠습니다. 데스크탑에서 1 열을 선택하고 순서를 1로 설정하십시오. 열 2를 선택하고 주문을 "2"로 설정하고 나머지 열의 나머지 부분에 대해 동일하게 수행하십시오. 데스크탑 레이아웃은 자연스럽게 왼쪽에서 오른쪽으로 흐르며 작업 유도 문안으로 끝납니다.

태블릿 및 모바일에서 주문을 사용자 정의합니다

이제 장치 토글을 사용하여 태블릿 브레이크 포인트로 전환하십시오. 열 순서를 변경하십시오.

중간 행에 열 6 (Call-to-Action)을 "3"로 설정하십시오. 열 1과 2를 그대로 유지하고, 3 열은 4로, 나머지는 원하는대로 남겨 둡니다. 태블릿 사용자는 값 제안 직후에 귀하의 호출 호환을보고 지원 세부 사항을 볼 수 있습니다.

그런 다음 장치 토글을 사용하여 모바일로 전환하십시오. CTA 열 순서를 "3"로 변경하고 처음 두 열의 순서를 그대로 두십시오. 열의 나머지 순서를 태블릿 배열과 유사하게 만듭니다.

콘텐츠의 기본 소스 순서는 동일하게 유지되지만 CTA는 데스크탑 레이아웃에 영향을 미치지 않고 마지막 위치에서 세 번째로 이동합니다. 이렇게하면 컨텐츠를 복제하거나 재구성하지 않고 섹션이 다른 중단 점에 어떻게 나타나는지 제어 할 수 있습니다.

Divi 5로 모든 것이 어떻게 쌓이는 지 제어하십시오

Divi 5의 새로운 Flexbox 시스템은 컨텐츠가 장치에 걸쳐 쌓이는 방식을 정확하게 제어 할 수 있습니다. 7 개의 사용자 정의 가능한 중단 점과 라이브 캔버스 스케일링을 사용하면 화면 크기로 레이아웃을 실시간으로 미리보기 및 조정할 수 있습니다.

브라우저의 기본 스태킹 순서에 의존하는 대신 사이드 바, CTA 및 키 컨텐츠가 나타나는 위치를 정확하게 결정합니다. Flexbox를 사용하면 추가 해결 방법이나 코드없이 모든 장치에서 계층 구조와 명확성을 유지할 수 있습니다.