Divi 5 독점 기능 (지금까지)

우리는 빠른 속도로 새로운 Divi 5 기능을 출시하고 있으며 각 기능은 성능을 향상시키고 워크 플로를 간소화하며 강력한 디자인 기능을 손끝에 가져 오도록 설계되었습니다. 개요가 필요하십니까? 이 게시물은 체크 아웃 할 가치가있는 Divi 5 독점 기능을 다룰 것입니다. 그리고 이것은 시작일뿐입니다. Flexbox 및 Loop Builder와 같은 흥미로운 새로운 기능이 곧 나옵니다. 우리의 업데이트는 매일 Divi를 사용하는 디자이너와 개발자로부터 들었던 일반적인 통증 포인트를 다룹니다 .

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

Divi 5에 전용되는 8 가지 기능 (및 작동 방식)

Divi 5는 웹 사이트 디자인에 대한 혁신적인 업그레이드를 소개하고 설계 작업을 재창조하고 가속화하는 다양한 도구를 사용하여보다 직관적입니다. 다음 8 가지 기능은 새로 재개 된 Divi의 잠재력을 보여줍니다.

1. 사용자 정의 가능한 중단 점

2025 년 2 월 6 일에 출시 된 기능

Divi 5는 맞춤형 브레이크 포인트 시스템을 통해 반응 형 디자인의 유연성 향상을 도입합니다. 대부분의 페이지 빌더는 사용자를 3 개의 표준 뷰로 제한하지만 Divi 5는 최대 7 개의 고유 한 중단 점을 허용하며, 이는 모두 사용자 정의 픽셀 값으로 설정할 수 있습니다.

이를 통해 사용자는 일반적으로 고정 된 장치 크기를 고수하고 제한된 조정 옵션을 제공하는 다른 인기있는 건축업자보다 더 많은 제어를 제공합니다. 많은 플랫폼이 강성 경계 내에서 설계하도록 강요하지만 Divi 5를 사용하면 디자인이 특별한주의를 기울여야하는 정확한 화면 너비를 타겟팅 할 수 있습니다.

표준 트리오 너머

대부분의 웹 사이트 빌더는 데스크탑, 태블릿 및 모바일 트리오가 간단하기 때문에 고수합니다. Divi 5는 이것이 오늘날 사람들이 실제로 수십 가지 화면 크기로 웹을 탐색하는 방식과 일치하지 않는다는 것을 인식했습니다.

Divi 5를 사용하면 다음에 대한 중단 점을 설정할 수 있습니다.

• 전화 (<767px)
• 전화 와이드 (<860px) - 조경 모바일보기에 적합합니다.
• 태블릿 (<980px)
• 넓은 태블릿 (<1024px) - 더 큰 태블릿과 유사한 장치를 잡습니다.
• 데스크탑 (> 981px)
• 와이드 스크린 (> 1280px)
• Ultra Wide (> 1440px)

다른 WordPress 페이지 빌더는 일부 중단 점 제어 기능을 제공하지만 Divi 5의 정밀도 및 사용 편의성과 일치하지 않습니다. 이 시스템은 모든 중단 점에 걸쳐 적용되는 동일한 친숙한 Divi 컨트롤과 함께 직관적입니다.

시각적 중단 점 처리

Divi 5는 대부분의 다른 빌더와 차별화되는 기능인 캔버스 스케일링을 소개합니다. 고정 장치 미리보기 사이를 전환하는 것으로 제한되는 대신 캔버스의 가장자리를 드래그하여 원하는 폭으로 레이아웃을 볼 수 있습니다.

이 접근법은 웹 브라우저 내에서 직접 작업하는 것처럼 즉각적이고 현실적인 피드백을 제공합니다. 현재 창보다 넓은 중단 점을 설계 할 때 캔버스는 비례 적으로 조정되므로 작은 화면에서도 디자인을 정확하게 살펴 봅니다.

중단 점 사이를 이동함에 따라 경험은 일관성이 있습니다. 컨트롤은 같은 방식으로 행동하며 레이아웃이 예기치 않게 이동하지 않습니다. 이 신뢰성은 반응 형 디자인의 추측 및 문제 해결을 줄이며 다른 페이지 빌더의 두통이 될 수 있습니다.

자세히 알아보십시오

2. 옵션 그룹 사전 설정

2025 년 3 월 11 일에 출시 된 기능

옵션 그룹 사전 설정은 Divi 5에서 가장 흥미로운 새로운 기능 중 하나이며, 귀하에게 적합한 설계 시스템을 구축하는 기능을 확장합니다. 옵션 그룹 사전 설정은 디자인의 빌딩 블록입니다. 요소 사전 설정은 특정 요소를 스타일링하는 데 잠그지 만 Divi 5의 옵션 그룹 사전 설정은 모든 요소 유형에서 작동합니다.

타이포그래피, 테두리, 그림자 또는 배경과 같은 특정 디자인 특성에 대한 재사용 가능한 스타일을 만들고이 스타일을 다른 요소에 혼합 할 수 있습니다. 예를 들어, 제목 스타일에 대한 사전 설정, 버튼 스타일에는 다른 것, Box Shadows의 경우 3 분의 1을 만들 수 있습니다.

일단 설치되면 텍스트 모듈, 블러 브, 동작 유도 또는 섹션 및 행과 같은 컨테이너에 관계없이 클릭하여 이러한 스타일을 클릭하여 호환 가능한 요소에 적용 할 수 있습니다.

이것이 당신의 워크 플로에 중요한 이유

디자인을 업데이트해야 할 때 타임 절약입니다. 사이트 전체의 요소에서 테두리 반경을 변경하기로 결정했다고 가정 해 봅시다. 각 버튼, 이미지 및 섹션을 찾는 대신에 테두리 사전 설정을 한 번 편집하고 사전 설정을 사용하는 모든 요소가 자동으로 업데이트됩니다.

다른 요소 유형에서 작업하는 기능은 Divi 5의 옵션 그룹 사전 설정을 정말로 도움이됩니다. 동일한 테두리 스타일은 모듈, 열, 행 또는 섹션에 적용 할 수 있습니다. 이 교차 요소 호환성은 몇 시간의 반복 스타일 작업을 절약합니다.

이 유연성은 한 걸음 더 나아갑니다. Divi의 옵션 그룹 사전 설정은 기본 스타일 옵션을 넘어 확장됩니다. 또한 조건부 디스플레이, HTML 배경 비디오 및 스크롤 효과와 같은 스크립트 기반 기능도 다룹니다. 이를 통해 사이트 전체의 정적 스타일 및 대화식 동작을 일관되게 제어 할 수 있습니다.

자세히 알아보십시오

3. 고급 장치

2025 년 3 월 19 일에 출시 된 기능

Divi 5는 CSS 장치의 취급을 개선하여 반응 형 디자인이 더 쉬워졌습니다.

이제 빌더 내부의 오늘날 웹 디자인에 필요한 전체 범위의 CSS 장치에 액세스 할 수 있습니다. 즉, 픽셀 (PX), 백분율 (%), EMS (EM), 루트 EM (RET EMS), 뷰포트 유닛 (VW, VH, VMIN, VMAX) 및 그리드의 문자 폭 (CH) 또는 분수 유닛 (FR)과 같은 고급 선택을 사용할 수 있습니다.

이것은 처음에는 사소한 업데이트처럼 보일 수 있지만 실제로 반응 형 레이아웃을 구축 할 수있는 유연성이 훨씬 높아집니다.

다른 유닛이 중요한 이유

전화, 태블릿 및 데스크탑에서 잘 보이고 싶은 사이트를 만들 때 픽셀 만 사용하면 두통이 생길 수 있습니다. 300px 너비의 요소는 데스크탑에서는 괜찮아 보이지만 모바일에서 레이아웃을 분해 할 수 있습니다.

Viewport와 같은 고급 장치를 사용하면 동일한 요소를 80VW (뷰포트 너비의 80%)로 설정할 수 있으며 모든 장치에서 완벽하게 확장됩니다. 또는 rem 단위를 사용하여 텍스트를 기본 글꼴 크기에 비례하여 접근성 조정을 훨씬 쉽게 만듭니다.

이제 Calc (), min (), max () 및 clamp ()와 같은 CSS 기능과 단위를 결합하고 실제 마법이 발생합니다. Divi 5는이 모든 것을 지원하므로 화면 크기에 적응하는 진정한 유동적 인 레이아웃을 만들 수 있습니다.

예를 들어, 섹션 높이를 calc (80vh - 60px)로 설정하여 헤더를위한 공간을 남기면서 대부분의 화면을 차지하도록 할 수 있습니다. 또는 화면과 함께 성장하지만 읽을 수있는 한계 내에 유지되는 텍스트에는 클램프 (16px, 4VW, 22px)를 사용하십시오.

클램프 ()의 유연성

Clamp () 함수는 많은 반응 형 디자인 문제를 해결하기 때문에 특별한주의를 기울여야합니다. 한 번에 최소, 선호 및 최대 크기를 설정하여 Clamp ()를 많은 웹 디자이너의 가장 좋아하는 기능으로 만들 수 있습니다.

화면 크기로 성장하지만 읽을 수있는 제목을 원할 수도 있습니다. 제목 모듈에서 텍스트 크기를 클램프 (36px, 5VW, 72px)로 설정할 수 있습니다. 제목은 36px보다 작거나 72px보다 크지 않지만 그 크기 사이에서 뷰포트 너비의 5%로 확장됩니다.

이로 인해 중단 점이없는 화면 크기 사이의 원활한 전환이 발생합니다. 태블릿에서 너무 큰 텍스트 또는 큰 모니터에서 너무 작은 텍스트는 문제가되지 않습니다. 타이포그래피는 레이아웃으로 호흡합니다.

우리는 또한 다른 디자인 요소가 다른 장치가 필요하다는 것을 이해하기 때문에 Divi 5의 Advanced 유닛은 타이포그래피뿐만 아니라 여백, 패딩 및 기타 간격 값과 함께 가질 수있게 작동하는 이유를 이해합니다.

• 텍스트의 경우, rem 단위는 모든 것을 비례 적으로 유지합니다. 신체 텍스트를 1REM으로 설정하고 제목을 2.5REM으로 설정하면 기본 글꼴 크기를 변경하면 모든 것이 비례 적으로 업데이트됩니다.
• 레이아웃의 경우 고정 및 유체 장치를 혼합 해보십시오. 사이드 바는 300px에서 가장 잘 작동 할 수 있지만 주요 내용은 Calc (100% - 350px)을 사용하여 나머지 공간을 채울 수 있습니다.
• 간격을 위해 EM 장치는 텍스트 크기로 스케일링하는 패딩을 만듭니다. 이렇게하면 텍스트 크기가 변경 되더라도 설계 비율이 일관되게 유지됩니다.

또한 논의 된 다른 기능들과도 잘 작동합니다

특히 좋은 점은 이러한 장치를 사용하기 위해 맞춤 CSS를 작성할 필요가 없다는 것입니다. 그들은 시각적 인터페이스에 바로 만들어졌습니다. 다른 값으로 실험하고 결과를 즉시 볼 수있어 학습 곡선을 손으로 코딩하는 것보다 훨씬 온화합니다.

이 단위는 Divi 5의 다른 기능과 통합되어 있습니다. 원하는 단위를 설계 변수로 사용하여 값을 저장 한 다음 옵션 그룹 사전 설정을 통해 사이트 전체에 적용 할 수 있습니다. 이것은 전체 사이트를 통해 흐르는 좋은 디자인의 연쇄 반응을 만듭니다. 예를 들어:

• 제목 크기와 같은 숫자 변수를 만듭니다 : 클램프 (26px, 5VW, 82px); H1 제목. 이 변수를 제목 텍스트 사전 설정에 적용하십시오. 제목은 이제 모바일의 26px와 데스크탑에서 82px 사이에서 원활하게 확장되며 해당 크기 사이의 유체 5VW 계산이 있습니다.
• 클램프 (20px, 5VW, 80px)로 숫자 변수를 설정 한 다음 마진으로 사용하면 데스크탑에서 모바일과 넉넉한 호흡 공간이 꽉 찼습니다.
• 숫자 가변 공간 단위 : 20px를 사용하여 기본 간격을 설정하고 레이아웃 사전 설정에서 calc ()와 함께 사용하십시오. 예를 들어, 더 큰 간격에 대해 calc (var (–space-unit) * 2)를 적용하고 더 단단한 공간의 경우 calc (var (–space-unit) / 2)를 적용하십시오. 기본 값을 업데이트하면 모든 파생 간격이 비례 적으로 조정됩니다.

이것은 단지 표면을 긁습니다. 이러한 구성을 혼합하여 Divi의 단순성과 새로운 기능을 활용하는 웹 사이트를 만들 수 있습니다.

자세히 알아보십시오

4. 디자인 변수

2025 년 4 월 3 일에 출시 된 기능

대부분의 웹 사이트 빌더에는 글로벌 색상과 글꼴을 설정하는 방법이 있습니다. Divi 5는이 아이디어를 받아들이고 그것과 함께 실행됩니다. 색상과 글꼴뿐만 아니라 숫자, 이미지, 일반 텍스트 및 웹 링크에 대한 변수를 만들 수 있습니다.

이것에 대해 생각해보십시오 : 대부분의 빌더는 어디에서나 업데이트하는 기본 색상을 설정할 수 있습니다. 그러나 여러 페이지에서 전화 번호를 변경하려면 어떻게해야합니까? 아니면 사이트 전체에 사용 된 반복 이미지를 교체합니까? Divi 5는 이러한 상황을 쉽게 처리합니다.

모든 변수는 Visual Builder 's 사이드 바의 간단한 패널에 있습니다. 깨끗하고 찾기 쉽고 모든 것을 한 지점에 넣습니다.

사전 설정과 완벽하게 일치합니다

디자인 변수 및 사전 설정 (옵션 그룹 사전 설정 및 요소 사전 세트 모두)이 함께 작동하여 유지 관리 가능하고 확장 가능한 설계를 만듭니다. 변수를 참조하는 사전 설정을 작성하여 유연한 설계 시스템을 생성 할 수 있습니다.

예를 들어, 메인 헤딩 글꼴에 대한 설계 변수를 생성 한 다음 제목 타이포그래피 사전 설정에서 해당 변수를 사용할 수 있습니다. 나중에 글꼴을 변경하기로 결정한 경우 사전 설정 자체가 아닌 변수를 한 번만 업데이트하면됩니다. 이것은 대부분의 건축업자가 단순히 제공하지 않는 또 다른 제어 계층을 만듭니다.

이 2 층 접근법은 다른 건축업자보다 더 많은 제어를 제공합니다. 당신은 어떤 것의 모양 (변수)이 나타나는 위치 (사전 세트)를 분리합니다.

calc () 및 clamp ()과 같은 CSS 기능과 함께 숫자 변수를 사용하여 다양한 화면 크기에 완벽하게 적응하는 반응 형 디자인을 만들 수 있습니다. 사이트 간격 리듬에 대한 변수를 설정하고 레이아웃 전체에 적용하여 아름답게 확장되는 일관된 비율을 위해 적용하십시오.

변수를 변경하면 IT를 사용하는 모든 것이 즉시 업데이트됩니다. 이것은 몇 시간의 작업을 몇 초 동안 클릭 한 후에 바꿉니다.

이것이 유지 가능한 디자인을 만드는 데 도움이되는 방법

행동중인 디자인 변수에 대한 몇 가지 실제 예를 살펴 보겠습니다.

• 브랜드를 어디에서나 똑같이 유지하십시오 : 색상, 글꼴 및 간격에 대한 변수를 설정하십시오. 일관된 모양을 위해 사이트 전체의 사전 설정에 사용하십시오.
• 휴일 판매 실행 : 캠페인 그래픽 및 홍보 사본에 대한 텍스트 변수에 대한 이미지 변수를 만듭니다. 시즌이 끝나면 한 번 업데이트하여 전체 사이트를 새로 고치십시오.
• 테두리 스타일 : 10px와 같은 테두리 반경의 숫자 변수를 생성하고 모든 버튼 사전 설정, 이미지 모듈 및 카드에 적용하십시오. 디자인 방향이 변경되면 하나의 업데이트는 사이트 전체의 모든 둥근 모서리에 영향을 미칩니다.
• 클라이언트 업데이트를 쉽게 만들 수 있습니다 : 업데이트를 해야하는 고객을위한 사이트를 구축 할 때는 디자인 변수가 빛납니다. 연락처 정보 나 영업 시간과 같이 자주 변경되는 콘텐츠 변수를 설정합니다. 디자인 설정을 터치하지 않고도 업데이트 할 수 있습니다.

디자인 변수는 Divi의 테마 빌더와도 작동합니다. 이는 헤더, 바닥 글 및 템플릿이 페이지와 동일한 변수 풀을 사용 함을 의미합니다. 단단한 패턴으로 당신을 잠그는 다른 시스템과 달리 Divi 5의 변수는 조직 상태를 유지하는 데 도움이되는 것을 유연하게 유지합니다.

자세히 알아보십시오

5. 중첩 행

2025 년 4 월 17 일에 출시 된 기능

Divi 5는 중첩 행을 소개하여 레이아웃을 더 많이 제어 할 수 있습니다. 이 추가로 열을 열 내부에 배치하여 사용자 정의 코드가없는 이전 버전에서는 불가능한 복잡한 레이아웃을 생성 할 수 있습니다.

중첩 행을 사용하면 훨씬 적은 노력으로 고급 그리드 레이아웃, 잡지 스타일 컨텐츠 블록 및 카드 기반 디자인을 구축 할 수 있습니다. 자체 멀티 컬럼 레이아웃이 포함 된 열이있는 섹션이 필요하십니까? 이제 건축업자에서 바로 할 수 있습니다.

깊이있는 건물

중첩 행을 추가하는 것은 모듈을 추가하는 것과 마찬가지로 작동합니다. 섹션을 선택하고 더하기 버튼을 클릭하고 옵션에서 "행"을 선택하십시오. 거기에서 줄을 추가하여 중첩 행을 만들고 내용으로 채울 수 있습니다.

이 간단한 변화는 많은 디자인 가능성을 열어줍니다. 자체 열 구조로 사이드 바 위젯을 만들거나 중첩 된 갤러리가있는 제품 쇼케이스를 만들거나 복잡한 레이아웃이있는 디자인 기능 비교 테이블을 만들 수 있습니다.

가장 중요한 부분은 자연스럽게 워크 플로에 맞는 방법입니다. 배울 새로운 것은 없습니다. 당신은 더 많은 장소에서 줄을 사용하고 있습니다. Divi로 구축하는 방법을 알고 있다면 이미 중첩 행을 사용하는 방법을 알고 있습니다.

중첩 행은 사이트 빌더의 실제 문제를 해결합니다. 각 서비스가 고유 한 2 열 레이아웃이있는 서비스 섹션을 만들고 싶습니까? 이전에는 맞춤형 CSS 또는 복잡한 해결 방법이 필요합니다. 이제 바로 제작되었습니다.

콘텐츠가 많은 사이트의 경우 혼합 열 폭과 중첩 콘텐츠 영역을 갖춘 잡지 스타일 레이아웃을 만들 수 있습니다. 각 기사 또는 기능은 페이지 레이아웃을 유지하면서 자체 열 구조를 가질 수 있습니다.

첫 번째 단계입니다

중첩 행은 Divi 5의 레이아웃 진화의 시작일뿐입니다. 팀은 DIVI를 더욱 유연하게 만들기 위해 완전한 FlexBox 기반 레이아웃 시스템을 향해 노력하고 있습니다.

향후 업데이트는 추가 레이아웃 컨트롤을 소개하여 사용자 정의 코드없이 복잡한 디자인을 만들기위한 더 많은 옵션을 제공합니다. 이 체계적인 접근 방식은 다음 새로운 기능을 다음에 이동하기 전에 완벽하게 작동하도록합니다.

Divi Development Team은 반 구운 기능을 서두르지 않고 레이아웃 디자인의 미래를위한 암석 기반을 구축하고 있습니다. 각 단계는 마지막 단계를 바탕으로 미래를 방지하고 사용하기 쉬운 시스템을 만듭니다.

자세히 알아보십시오

6. 모듈 그룹

2025 년 5 월 1 일에 출시 된 기능

웹 사이트 구축은 종종 동일한 컨텐츠 패턴을 반복적으로 작성하는 것을 의미합니다. 완벽한 팀원 카드를 디자인 한 다음 다음 사람을 위해 20 분을 재현합니다. 모듈 그룹은 관련 요소를 재사용 가능한 단위로 함께 패키지하여이를 해결합니다.

변경 사항은 다음과 같습니다. 각 조각을 개별적으로 처리하는 대신 전체 블록으로 작업합니다. 제품 카드는 개별적으로 선택 해야하는 6 가지 모듈이 아니라 이동하는 한 가지가됩니다. 50 개의 제품 카드에서 간격을 조정 해야하는 경우 각 카드를 수동으로 편집하는 대신 그룹 템플릿을 한 번 업데이트합니다.

실제 혜택은 더 큰 사이트에 나타납니다. 수십 명의 팀원, 제품 카탈로그 또는 서비스 목록이있는 고객 프로젝트를 관리 할 수 ​​있습니다. 당신은 반복적 인 조립 작업을하고 있지 않습니다-당신은 콘텐츠와 미세 조정에 중점을두고 있습니다.

사용자 정의 모듈 조합 생성

모듈 그룹은 단일 모듈이 일반적으로 처리 할 수없는 가능성을 열어줍니다. 배경 이미지, 오버레이 아이콘, 헤드 라인, 설명 및 두 개의 액션 버튼이 필요한 서비스 카드를 작성하십시오.

모듈 그룹을 사용하면 이러한 요소를 원하는 방식으로 정확하게 계층화합니다. 이것은 표준 템플릿에 맞지 않는 콘텐츠에 도움이됩니다.

가격 책정 테이블의 경우 모듈 그룹 내에서 3 개의 중첩 행을 사용할 수 있습니다. 첫 번째 행의 제목, 두 번째 가격의 가격 세부 사항 및 세 번째 기능 목록. 이를 통해 내장 가격 테이블 모듈이 제공하지 않는 글꼴, 색상 및 간격을 개별적으로 제어 할 수 있습니다.

동일한 접근법은 그룹 구조 내에 배열 된 아이콘, 이미지, 헤딩 및 텍스트 모듈을 사용하여 평가에 대해 작동합니다. 표준 평가 모듈보다 더 많은 레이아웃 유연성을 얻는 동시에 모든 것을 단일 장치로 관리 할 수 ​​있습니다.

주요 장점은 여러 요소를 한 조각으로 취급하는 편의성과 처음부터 건물의 레이아웃 제어를 결합하는 것입니다.

재사용 가능한 구성 요소 라이브러리 구축

효과적인 모듈 그룹을 만들면 글로벌 요소로 저장하십시오. 이것은 각 프로젝트마다 성장하는 구성 요소 라이브러리를 만듭니다. 스타일을 개선 할 때 20 페이지에 걸쳐 평가 학적 레이아웃 업데이트와 제품 쇼케이스는 디자인을 반복하는 동안 일관성을 유지합니다.

페이지를 만들 때마다 처음부터 시작하는 대신 일관된 레이아웃으로 시작하여 새로운 페이지 및 레이아웃 요구 사항에 적응합니다.

Divi Cloud 통합의 용이성을 수용하십시오. 이 도구를 사용하면 구성 요소가 프로젝트에서 프로젝트로 쉽게 이동할 수 있습니다. 특정 클라이언트 사이트에 대한 강력한 모듈 그룹 세트를 개발한다고 가정 해 봅시다. 이제 다가오는 과제의 기초로 활용할 수 있습니다. 이런 식으로 모든 프로젝트는 이전 솔루션의 이점을 얻지 만 뚜렷한 미학을 유지합니다.

Divi 5의 디자인 시스템에서 완벽하게 작동합니다

모듈 그룹은 디자인 변수 및 옵션 그룹 사전 설정과 함께 사용할 때 정말 흥미로워집니다. 인용문, 저자 이름, 회사 및 사진 인 평가 그룹을 구축한다고 가정 해보십시오.

고정 된 색상을 설정하는 대신 브랜드 색상 변수를 참조하십시오. 견적 스타일의 경우 사용자 정의 글꼴, 크기 및 라인 높이가 포함 된 타이포그래피를위한 옵션 그룹 사전 설정을 만듭니다. 저자 이름의 경우 다른 제목 옵션 그룹 사전 설정을 적용합니다.

이제 해당 모듈 그룹을 글로벌 요소로 저장하십시오. 이 옵션 그룹 사전 설정은 사이트 전체의 모든 평가를 디자인 시스템에 연결합니다. 클라이언트가 더 어두운 회색을 원한다면 변수를 한 번 변경하면 모든 평가 그룹 모듈이 업데이트됩니다. 견적 스타일을 조정 해야하는 경우 타이포그래피 옵션 그룹 사전 설정을 편집하십시오. 모든 증언 인용문은 즉시 변경됩니다.

이것은 모든 곳에서 흩어져있는 개별 모듈을 관리하는 것입니다. 모듈 그룹은 경계, 배경 및 텍스트 스타일에 대한 옵션 그룹 사전 설정을 사용하므로 모든 그룹화 된 요소를 통해 사전 설정된 흐름을 자동으로 업데이트합니다.

자세히 알아보십시오

7. 속성 관리자

2025 년 5 월 16 일에 출시 된 기능

Call to Action 모듈에서 버튼을 스타일링했습니다. 색상이 작동하고 호버 효과가 좋아 보입니다. 이제 연락처 양식에서 동일한 버튼 스타일을 원하지만 CTA의 헤드 라인이나 배경을 원하지 않습니다.

정기적 인 사본-페이스트는 여기서 작동하지 않습니다. 모든 것을 얻거나 아무것도 얻지 못할 것입니다. Divi 5를 사용하면 속성 관리 기능 덕분에 버튼 부품 만 복사 할 수 있습니다. CTA를 마우스 오른쪽 버튼으로 클릭하고 복사 할 내용을 선택하고

그런 다음 해당 버튼 스타일 만 연락처 양식에 붙여 넣습니다.

여행을 선택하고 선택하십시오

Divi 5는 모든 요소를 ​​다른 유형의 속성으로 분할합니다. 복사 할 것을 선택합니다.

• 모든 속성 - 모든 것이 복사됩니다
• 디자인 속성 - 색상, 간격, 사전 설정이지만 텍스트 나 이미지가 없습니다.
• 스타일 속성 - 사용자 정의 변경
• 컨텐츠 속성 - 텍스트 및 이미지 만
• 사전 설정 - 사전 설정 할당 만

버튼의 스타일을 원하지만 텍스트가 아니라고 가정 해보십시오. 디자인 속성을 복사하십시오. 섹션의 배경 사전 설정을 원하지만 패딩이 필요하지 않습니까? 사전 설정 만 복사하십시오.

다른 모듈 사이에서 작동합니다

한 유형의 모듈에서 속성을 복사하여 다른 유형에 붙여 넣을 수 있습니다. 예를 들어, Call to Action 모듈에서 복사하여 연락처 양식에 붙여 넣을 수 있습니다. Divi 5는 두 모듈 모두에서 어떤 설정이 작동하는지 확인하고 나머지는 무시합니다.

이것은 다른 모듈 유형에 걸쳐 동일한 스타일이 필요한 사이트를 구축 할 때 도움이됩니다. 모든 형태, 평가 또는 버튼을 사용하는 기타 모듈에 대해 버튼 색상을 재현 할 필요는 없습니다.

그룹 수준 바로 가기

속성 시스템은 선택적 그룹 관리와 함께 더 깊어집니다. 설정 패널을 완전히 건너 뜁니다. 상황에 맞는 메뉴에서 직접 특정 속성 그룹을 마우스 오른쪽 버튼으로 클릭하고 적용하십시오.

완벽한 버튼 사전 설정된 모듈을 복사 했습니까? 선택적 메뉴를 통해 해당 버튼 만 사전 설정할 수 있습니다. 탭 헌팅이없고 세팅 다이빙이 없습니다.

동일한 정밀도가 재설정하기 위해 작동합니다. 컨텐츠를 그대로 유지하면서 모든 디자인 속성을 닦으십시오. 또는 사용자 정의 스타일링을 보존하는 동안 사전 설정 만 재설정하십시오.

바로 가기를 통한 속도

모든 동작에는 컨텍스트 메뉴에 바로 나타나는 키보드 단축키가 나타납니다. 몇 가지 주요 조합과 스타일이 가속화하십시오. 바로 가기는 모든 속성 유형에서 일관성을 유지하므로 손가락이 패턴을 빠르게 배웁니다.

이것은 클릭을 저장하는 것 이상입니다. 수백 개의 요소가있는 현장을 구축 할 때, 이들 미세 효율은 몇 시간의 절약 된 시간으로 합성됩니다. 반복적 인 수동 작업은 빠르고 타겟팅 된 행동이됩니다.

디자인 시스템으로 훌륭하게 재생합니다

속성 관리자는 Divi 5의 사전 설정 생태계에 직접 연결됩니다. 이러한 시스템 연결은 옵션 그룹 사전 설정 및 설계 변수를 사용하여 모듈을 복사 할 때 따라 이동합니다.

사전 설정을 포함하는 속성과 해당 새로운 요소가 즉시 글로벌 스타일 시스템에 연결됩니다. 사전 설정을 업데이트하면 모든 복사 된 요소가 변경 사항을 자동으로 반영합니다. 디자인 시스템은 요소를 빠르게 구축하고 복제 할 때 연결되어 있습니다.

자세히 알아보십시오

8. 검색 및 필터링 설정

2025 년 5 월 29 일에 출시 된 기능

웹 사이트 구축은 설정을 조정하는 것을 의미합니다. Divi 모듈은 패널에 수십 개의 옵션을 포장하고, 하나의 컬러 필드에 대한 탭을 통해 사냥하면 하루를 먹을 수 있습니다. Divi 5는 Divi 4에서 검색 기능을 다시 가져 오지만 더 잘 작동합니다.

모든 설정 패널 상단에 검색 막대가 있습니다. 필요한 것을 입력하고 Divi는 일치하는 옵션 만 보여줍니다. “국경”을 찾고 계십니까? 모든 테두리 관련 설정은 나타나고 다른 모든 것은 사라집니다. "패딩"을 조정해야합니까? 모든 간격 컨트롤이 즉시 나타납니다.

이렇게하면 작업 속도가 느려지는 클릭 및 스크롤이 제거됩니다. 탭을 열고 그룹을 통한 사냥 대신 몇 초 안에 필요한 것을 찾을 수 있습니다.

변경 한 내용으로 필터링하십시오

실시간 구역은 "수정 된"필터입니다. 클릭하고 이미 조정 한 설정 만 볼 수 있습니다. 이것은 레이아웃 팩이나 스타터 사이트를 잡고 맞춤화 된 것을보고 싶을 때 도움이됩니다.

비즈니스 레이아웃을 가져 오지만 색상을 변경하고 싶다고 가정하십시오. 수정 된 필터를 누르고 모든 모듈을 파헤 치지 않고 모든 사용자 정의 색상 선택을 발견하십시오. 어떤 글꼴이 변경되었는지, 어떤 간격이 조정되었는지, 어떤 효과가 추가되었는지 알 수 있습니다.

이것은 고객 프로젝트에도 좋습니다. 누군가가 귀하의 사이트에서 사용자 정의 한 내용을 물으면 수정 된 필터는 귀하의 작업을 명확하게 보여줍니다.

스마트 필터링 옵션

수정 된 필터 외에도 유형을 설정하여 정렬됩니다. 팔레트를 업데이트 할 때 "색상"필터는 모든 색상 필터가 한 번에 표시됩니다. 타이포그래피 변경이 필요한 경우 "글꼴 패밀리"및 "글꼴 무게"필터는 모든 모듈에서 텍스트 설정을 보여줍니다.

시스템은 어떤 설정이 가장 중요한지 알고 있습니다. 색상과 글꼴은 사람들이 변화하는 가장 일반적인 변화이기 때문에 필터를 얻습니다. 간격 조정이 자주 발생하기 때문에 크기가 그룹화됩니다.

이 필터는 사이트 전체를 변경할 때 클릭을 저장합니다. 모든 모듈을 개별적으로 열지 않고 수정해야 할 설정의 필터링 목록을 통해 작업합니다.

자세히 알아보십시오

인기있는 옵션에 대해 5 개의 쌓인 방법

웹 사이트 Builder Market은 옵션으로 혼잡하지만 Divi 5는 진정으로 새로운 기능 덕분에 두드러집니다. 다음은 Divi 5가 다른 점을 살펴 봅니다.

이것이 당신의 프로젝트에 의미하는 바

Divi 5의 기능 조합은 다른 빌더가 일치 할 수없는 설계 시스템을 만듭니다. 옵션 그룹 사전 설정 및 모듈 그룹만으로는 Divi 5를 경쟁 업체보다 앞서 놓았습니다.

디자인 변수가 사전 설정 및 모듈 그룹과 함께 작동하면 다용도를 얻을 수 있습니다. 사전 설정 내부의 참조 변수, 그룹화 된 요소에 적용하며 값 변경 값 변경 사이트 전체의 모든 요소가 사이트 전체에 자동으로 업데이트됩니다. 다가오는 Flexbox 및 Loop Builder 기능을 믹스에 추가하면 사용자 지정 코딩이 필요하지 않고 웹 사이트를 만들 수 있습니다.

다음에 무슨 일이 일어날까요?

Divi 5 로드맵에는 곧 착륙 할 지속적인 업데이트가 표시됩니다. 우리의 개발자는 7 개의 팀으로 나뉘어 다른 기능에 대해 풀 타임으로 일하고 최소 2 주마다 배송 업데이트를 운송합니다. 앞으로 몇 주 안에 기대할 수있는 것에 대한 몰래 엿보기가 있습니다.

Flexbox 레이아웃

가장 큰 변화는 완료에서 몇 주 거리에있는 완전한 Flexbox 레이아웃 시스템입니다. 이것은 레이아웃을 구축하는 방법을 완전히 대체합니다. 사용자 정의 CSS 대신 시각적 컨트롤을 통해 새로운 행 템플릿, 자동 수직 중심, 컨텐츠 포장 및 간격 분포를 얻을 수 있습니다.

모듈 그룹은 방금 관련 모듈을 묶는 컨테이너로 배송했습니다. Flexbox와 결합하여 잡지 레이아웃, 높이가 일치하는 제품 쇼케이스 및 이전에 필요한 해결 방법을 만들 수 있습니다. Flexbox가 도착하면 특수 섹션이 사라집니다.

루프 빌더 및 WooCommerce 업데이트

Flexbox 레이아웃 시스템 및 모듈 그룹을 기반으로 루프 빌더를 사용하면 단일 모듈, 그룹 또는 전체 섹션 등 모든 것을 반복 할 수 있습니다. 템플릿에 당신을 잠그는 다른 빌더와 달리 반복되는 내용을 정의하고 동적 컨텐츠에 연결합니다. 중첩 루프도 작동합니다. 예를 들어, 게시물을 통해 루프하는 블로그 카테고리, 각 게시물에는 루프 리뷰가 표시됩니다.

WooCommerce 모듈은 Divi 5의 아키텍처를 사용하여 처음부터 재건됩니다. 현재 모듈은 뒤로 호환성을 통해 작동하지만 사전 설정 또는 변수와 상호 작용하지 않습니다. 신제품 모듈은 몇 주 안에 완료되어 WooCommerce 지원이 베타에 맞게 진행됩니다.

고급 색상

색조, 채도 및 가벼움 (HSL) 지원이있는 상대 색상을 사용하면 수학적 색상 관계를 구축 할 수 있습니다. 기본 색상을 한 번 설정 한 다음 기본을 변경할 때 업데이트되는 "1 차 파란색이지만 20% 가벼운"또는 보완 음영과 같은 변형을 자동으로 생성하십시오.

베타 및 마이그레이션 계획

베타는 세 가지 목표가 완료되면 시작됩니다. 기존 사이트의 역 호환성 향상, 완전한 WooCommerce 모듈 지원 및 Alpha 피드백을 기반으로 계속 버그 수정.

현재 진행 상황에 따라 가면 몇 달 안에 베타가 나타납니다. 팀은 또한 백엔드에서 작업하고 있으므로 Divi 4 사이트는 변경없이 마이그레이션 할 수 있습니다. Divi Marketplace의 타사 모듈은 완전한 호환성이 필요합니다.

새로운 프로젝트의 경우 Divi 5 Alpha는 대부분의 빌드에 충분한 기능을 제공합니다. 성능 향상만으로는 스위치를 정당화합니다. 기존 사이트는 특정 새로운 기능이 필요하지 않은 한 베타를 기다리는 데 도움이됩니다.

베타가 도착하면 완전한 기능 세트와 철저한 테스트로 인한 신뢰를 얻습니다. 공식 릴리스는 얼마 지나지 않아 향후 프로젝트를위한 탄탄한 토대를 제공합니다.

Divi 5를 시도 할 준비가 되셨습니까? 시작 방법은 다음과 같습니다

이 Divi 5 독점 기능은 서로 다른 것을 만들기 위해 함께 작동합니다. 일관된 설계를 위해 건축업자와 싸우는 대신 자신을 유지하는 시스템을 설정합니다. 같은 스타일을 반복적으로 재건하는 대신 한 번만 만들고 모든 곳에서 재사용하십시오. 이것은 시작에 불과합니다!

따라서 Divi 5를 사용하여 새로운 웹 사이트를 구축하여 오늘 곡선을 앞서 가십시오. 모든 Divi 회원이 무료로 제공됩니다. 계정 영역으로 가서 사본을 잡으십시오.

WordPress가 설치되면 일반 테마 : 외관> 테마> 새> 업로드 테마를 업로드 할 때 Divi 5를 업로드하십시오. 테마를 활성화하고 자격 증명으로 로그인하고 구축하십시오! 첫 번째 빌드는 왜 우리가 처음부터 모든 것을 재건했는지 보여줍니다.

기억하십시오 : 지금 새 웹 사이트에만 Divi 5를 사용하십시오. 알파 단계에서 기존 사이트를 마이그레이션하는 것이 좋습니다.