Divi 5의 중첩 행 대 전문성 섹션 (그리고 우리가 그것들을 이상 사용하지 않는 이유)

Divi는 오랫동안 아름다운 웹 사이트를 건설하기위한 강국이었습니다. 특수 섹션은 일반 섹션이 처리 할 수없는 복잡한 중첩 열 구조를 가능하게하여 Divi의 레이아웃 기능을 수년 동안 확장했습니다. 그러나이 접근법은 복잡성과 한계가 있었으며 Divi의 오래된 단축 코드 프레임 워크와 깊이 묶여 있습니다.

이제 Divi 5에는 중첩 행이 제공됩니다.이 기능은 일반 섹션 내에서 어디서나 열 안에 행을 배치 할 수있는 기본 기능입니다. 이 기능은 이전의 제약 조건을 제거하고 단일의 유연한 섹션 유형의 레이아웃 빌딩을 통합합니다. 중첩 행을 사용하면 특수 섹션이 허용하는 것과 동일한 복합체의 비대칭 레이아웃을 만들 수 있지만 더 직관적으로 구축 할 수 있습니다.

이 게시물에서는 전문 섹션에서 멀어지고 중첩 행 및 Divi 5의 재 설계된 레이아웃 시스템이 복잡한 레이아웃을 만드는 방법을 제공하는 방법에 대해 논의 할 것입니다. Divi의 미래는 여기에 있으며, 더 간단하고 유연하며 무제한 창의성을 위해 구축되었습니다.

YouTube 채널을 구독하십시오

Divi 5는 오늘 새로운 웹 사이트에서 사용할 준비가되었습니다.

특수 섹션의 회고

특수 섹션은 Divi (2014)에 소개되어 일반 섹션의 한계를 해결했습니다. 그들은 사이드 바 및 비대칭 레이아웃을 포함하여보다 복잡한 열 구조를 허용했으며, 이는 일반 섹션에서는 불가능했습니다.

Divi의 바로가 코드 기반 프레임 워크는 중첩 깊이를 제한하고 성능 병목 현상을 도입하여 근본적으로 레이아웃 복잡성을 제한합니다. 복잡한 중첩 레이아웃은 구축하기가 어렵고 렌더링 문제가 발생하기 쉽기 때문에 특수 섹션까지는 불가능했습니다.

그러나 특수 섹션이 자신의 것이기 때문에 추가 복잡성을 도입했습니다 (이 섹션의 추가 열 통과 및 CSS 옵션에 주목하십시오). 이것들은 나쁘지 않았지만 일반 섹션, 행 및 열과 분명히 다르게 행동했습니다 .

특수 섹션은 추가 패딩 및 CSS 클래스/ID 필드를 추가했지만 나머지 빌더 옵션과 부적절했습니다.

특수 섹션에서는 단축 코드 규칙을 구부려 의사 소형 열 구조를 활성화하여 일반 섹션에서 불가능한 것을 생성했습니다.

정기적 인 섹션이 필요한 것을 할 수있을만큼 강력하다면 좋지 않을까요?

중첩 행과 페이지를 만드는 더 나은 방법

Divi 5를 사용하면 중첩 행은 공식적으로 다른 행과 열에 행을 배치 할 수 있습니다. 즉, 서로 내부에 무제한 열과 행으로 깊이 중첩 된 레이아웃을 만들 수 있습니다. 특수 섹션이 필요하지 않습니다.

이 새로운 기능은 또한 열에 사이징 옵션을 추가했는데, 이는 모든 컨테이너 요소를 크기와 스타일을 유지하는 일관된 방법이 있습니다.

중첩 행으로 특수 섹션을 쉽게 재현하는 방법

스쿠터 임대 레이아웃 팩 (특히 홈페이지의 영웅 섹션)은 특수 섹션을 사용하여 주요 요소를 배치합니다. 그러나 고유 한 설정이있는 특수 섹션을 사용하는 대신 중첩 행을 사용하여 비슷한 효과를 얻을 수 있습니다.

참고 : Divi 5에는 현재 전문 섹션이 있지만 결국 더 이상 사용되지 않습니다 (그러나 현재 존재하는 페이지에서는 여전히 작동하고 복제 할 수 있습니다).

페이지에 표준 섹션을 추가하고 배경색을 검은 색으로 설정합니다 (레이아웃을 페이지로 가져 오면 상단 중심 위치와 실제 크기를 가진 배경 이미지로 사용하는 닷 하클 이미지가 있습니다).

섹션의 너비와 최대 너비를 100%로 설정하십시오.

섹션 내부의 행에 2 열 구조와 3/5 + 2/5 분할이 있는지 확인하십시오. 또한 행의 너비와 최대 너비를 100%로 설정하십시오.

다른 새로운 기능을 사용하려면 내부에 두 개의 모듈 그룹이있는 단일 열만 추가하십시오. Divi의 기본 열 구조에 의존하는 대신 그룹에 사이징 옵션을 사용합니다.

왼쪽 열에는 더 복잡한면 (모듈 측면에서)을 수용하고 오른쪽 열에는 큰 주요 이미지가 있습니다.

레이아웃을 얻기 위해 모든 모듈을 추가 할 것입니다. 여기에는 먼저 헤딩 또는 텍스트 모듈, 중첩 행 (동일한 폭의 두 열), 왼쪽 열의 이미지 모듈, 오른쪽 열에있는 텍스트 모듈 및 버튼 모듈이 포함됩니다. 오른쪽 열에있는 상위 행으로 돌아가서 하나의 이미지 모듈을 추가하십시오.

우리는 데스크탑에서 간격/크기를 복제하여 중첩 행을 사용하여 전문 섹션을 재현하는 방법을 설명합니다. 계속해서 컨텐츠와 이미지를 추가하십시오 (다시 사이트의 페이지로 레이아웃을 가져올 때 이미지를 사용할 수 있습니다). 적합한대로 일치하도록 텍스트 및 색상 스타일을 수정할 수도 있습니다. 오른쪽 열의 기본 이미지는 배경 이미지와 나중에 얻을 수있는 악센트 이미지가있는 이미지 모듈로 적용되어야합니다.

섹션 바로 아래의 행의 왼쪽 열의 경우 ~ 10% 왼쪽 패딩을 추가하여 왼쪽에서 공간을 공간화합니다 (이 방법을 사용하면 각 중단 점에 대해 사물을 크기를 조정해야합니다).

이제 상위 행 바로 아래의 오른쪽 열 설정을 엽니 다. 열 배경 이미지를 사용하십시오.

이 열 내부의 이미지 모듈에는 필터> 블렌드> 오버레이가 설정되어 있어야합니다. 고급> 위치에서 이미지는 절대적으로 배치되어 왼쪽 하단에 고정되어 있습니다.

그리고 그것은 전문 섹션 (데스크탑)의 레크리에이션을위한 것입니다. 사전 설정 열 구조 (3/5 + 2/5 열)를 사용했기 때문에 Divi는 다루어야하는 다양한 중단 점에서 기본 크기 및 위치를 가지고 있습니다. 단일 상위 열이지만 모듈 그룹을 사용 하여이 섹션의 왼쪽 및 오른쪽의 내용을 보유하여이를 피할 수 있습니다.

그러나 적어도이 시점에서, 당신은 행을 중첩하고 특수 섹션을 재현 할 수 있다는 것을 알고 있습니다.

새로운 미래에 들어 섰습니다

Divi 5는 베타 릴리스에 가깝지만 Divi의 설계 시스템을 점검하기 위해 이미 상당한 노력을 기울였습니다.

• Flexbox 레이아웃 (곧 출시) : 행 내 공간의 정렬 및 분포를 더 많이 제어 할 수 있습니다.
• 중첩 행 : 원시 플로트 기반 행 시스템과 상당히 복잡성을 생성하는 행 및 열 구조의 끝없는 중첩.
• 고급 열 사이징 : 열 폭과 높이에 대한 누락 된 사이징 컨트롤이 추가되었습니다.
• 모듈 그룹 : 관리 및 스타일을 더 쉽게하기위한 모듈 그룹화를 활성화합니다.
• 설계 변수 : 모든 요소 및 필드에서 글로벌 변수 (색상, 글꼴, 간격, 이미지, 텍스트)를 정의하고 재사용합니다.
• HSL이있는 상대 색상 (곧 출시 예정) : 색조, 채도 및 가벼움에 기반한 역동적이고 브랜드와 일관성있는 색상 제어.

이러한 특징은 모두 Divi의 재창조의 일부이며 복귀에 중추적입니다. 우리는 지난 2 년 동안 우리가 지은 기초가 그만한 가치가 있음을 증명하고 있습니다. D4에서는 불가능한 기능을 구축 할 수 있으며 몇 주 안에 각각을 만들고 있습니다.

Divi 5는 오늘 새로운 웹 사이트에서 사용할 준비가되었습니다.

Divi 5에 대해 Divi 5Learn을 더 다운로드하십시오