지금 Divi 5 Alpha 데모를 사용해 보세요!

저는 또 다른 Divi 5 업데이트로 돌아왔습니다. 오늘 Divi 5 데모 웹사이트를 이용할 수 있다는 소식을 알려드리게 되어 기쁩니다. 몇 가지 추가 기능을 마무리하고 발견한 버그를 해결한 후 웹사이트에서 다운로드하여 테스트할 수 있는 공개 알파를 출시할 예정입니다. 그동안 우리는 2주마다 데모를 업데이트할 예정이며, 따라하실 수 있습니다.

Divi 5 데모를 사용해 보세요

또한 Divi 5의 새로운 랜딩 페이지를 설정했는데, 여기에서 데모 웹사이트 링크와 모든 월간 Divi 5 업데이트 목록을 확인할 수 있습니다.

아래 비디오에서 모든 세부 사항을 확인하십시오.

Divi 5 데모 살펴보기

Visual Builder의 새 버전이 거의 완성되었음을 알 수 있습니다. 몇 가지 누락된 기능에는 빠른 작업, 찾기 및 바꾸기, 사전 설정, WooCommerce 모듈 및 일부 조건 옵션이 포함됩니다. 데모에서 뭔가 빠졌다면 그것은 우리가 그것을 제거했기 때문이 아닙니다. 아직 추가되지 않았습니다.

이것은 사전 알파 빌드입니다 . 인터페이스에서 버그와 이상한 점을 발견하게 될 것입니다. 그 중 대부분은 이미 우리의 레이더에 있습니다. 버그를 발견하면 지원팀에 신고해 주세요. 우리는 여전히 작업을 마무리하고 있으며, 이 데모를 출시하면 공개 알파가 출시되기 전에 훨씬 더 나은 모습을 갖추게 될 것입니다.

Divi 5에서는 무엇이 바뀌었나요?

Divi 5는 약간 다르게 보입니다. 모든 것이 Divi 4와 거의 동일한 방식으로 작동하지만 주목해야 할 몇 가지 변경 사항이 있습니다.

1. 사용자 정의 가능한 인터페이스: Divi 5는 다중 패널, 결합된 패널 창 및 사용자 정의 도킹 구성을 지원합니다.
2. 더욱 쉬워진 반응형 편집: 옵션 수준에서 반응형 편집을 활성화하는 대신 응용 프로그램 수준에서 반응형 편집이 제어됩니다. 어떤 보기로든 전환하면 해당 보기에서 변경한 내용이 자동으로 적용됩니다.
3. 새로운 상호 작용 모드: Divi 5에서는 상호 작용 모드도 다릅니다. 이제 "상호 작용 레이어"라고 부르며 요소 옵션, 상위 요소 옵션 및 요소 윤곽선을 포함하여 마우스를 올리면 표시되는 요소 레이어를 선택할 수 있습니다. 요소를 클릭하면 해당 설정 패널이 열립니다. 기어 아이콘을 두 번 클릭하거나 클릭할 필요가 없습니다. 모든 작업은 마우스 오른쪽 버튼 클릭을 통해 사용할 수 있으므로 인터페이스를 단순화하고 중복을 방지하기 위해 모든 것을 숨기려는 경우 실행 가능한 옵션입니다.
4. 직관적인 탐색: 도킹된 레이어 패널과 설정 패널 내의 탐색경로 덕분에 페이지 탐색도 더 쉽습니다.
5. 놀라운 성능: Divi 5는 훨씬 더 빠르며, 이는 즉시 알 수 있습니다. 게다가, 크고 복잡한 디자인에도 얽매이지 않을 것입니다. 주변을 클릭하고, 빠르게 복제하고, 다양한 설정을 시도해 보면 얼마나 빠른지 알 수 있습니다.
6. 간단하고 효율적인 인터페이스: Divi 5 인터페이스가 더욱 간소화되었습니다. 더 작고 더 효율적입니다. 더 빠르고 불필요한 애니메이션과 효과가 없습니다. 각 패널에는 구식 저장 및 취소 버튼이 없습니다. 다크 모드도 함께 제공됩니다. Divi 4의 더 크고, 느리고, 더 재미있는 디자인이 편안함을 느낄 수도 있지만 일단 Divi 5에 익숙해지면 새로운 장점을 높이 평가하게 될 것입니다.

미래를 바라보며

Divi 5의 가장 중요한 변화는 눈에 보이지 않는 것입니다. 배후에 있는 새로운 기반은 개발 관점에서 Divi의 역량을 더욱 강화하여 우리 팀과 커뮤니티가 Divi 4에서는 불가능했던 새로운 기능을 구축할 수 있도록 지원합니다.

Divi 5를 출시하면 여러분이 원하는 모든 기능을 만들기 위해 전진할 것이기 때문에 진정한 재미가 시작됩니다! 날 믿어; 루프 빌더, Flexbox 및 CSS 그리드, 향상된 접근성, 더 많은 모듈, 더 나은 메뉴 및 헤더 옵션 등 많은 필수 기능이 필요하다는 것을 알고 있습니다. 이 모든 것이 우리의 레이더에 포착되어 있고, 빨리 이 장애물을 극복하여 우리가 일을 할 수 있기를 기대합니다.

이번 달에 우리가 성취한 것

다음으로, 월간 진행 보고서를 알려드리겠습니다. 우리는 계속해서 새로운 인터페이스를 개선하고 이러한 개선 사항을 Divi의 다른 영역으로 확장하여 테마 빌더, 테마 옵션, 역할 편집기 및 Divi 라이브러리에 새로운 페인트칠을 제공했습니다. 우리는 버그 수정 임무를 계속하여 100개 이상의 버그를 추가로 수정하고 관리 가능한 항목으로 목록을 정리했습니다. 우리는 전체 색상과 대부분의 레이어 뷰를 마무리하고 동적 자산 및 정적 CSS 파일 생성을 포함한 일부 나머지 프런트엔드 기능에 대한 작업을 시작했습니다.

또한 Divi Cloud를 Divi Library의 새 버전에 연결하여 소규모 Divi AI/Cloud 팀을 구성하여 이러한 기능을 구현하고 Divi 5가 결승선을 좀 더 빠르게 통과하도록 돕습니다.

다음은 최신 Divi 5 변경 로그 항목입니다.

• VB에 사전 설정 선택 구성 요소가 추가되었습니다.
• VB의 모듈 요소에 사전 설정된 항목 클래스를 추가했습니다.
• 관리 표시줄이 비활성화된 경우 잘못된 상단 여백을 수정했습니다.
• 경우에 따라 중단점 및 상태 출력에 대한 CSS가 올바른 순서를 따르지 않게 만드는 CSS 렌더링의 버그가 수정되었습니다.
• 업로드 글꼴 입력 스타일을 업데이트했습니다.
• VB에서 모듈을 저장/미리 보는 동안 발생하는 오류를 수정했습니다.
• 팝업 스타일 저장 오류가 수정되었습니다.
• 확장된 아이콘 선택기 모달 크기 및 위치가 수정되었습니다.
• 여러 모듈에서 마우스 오른쪽 버튼 클릭 > 레이어로 이동 옵션을 클릭하면 왼쪽 사이드바에서 레이어 보기가 여러 번 렌더링되는 문제를 수정했습니다.
• 사용 가능한 뷰포트 높이에 자동 맞춤되도록 모달 높이 추가를 설정합니다.
• 전체 색상이 없거나 0인 경우 색상 추가 버튼이 표시되지 않고, 전체 색상이 하나인 경우 해당 색상이 숨겨지고 색상 추가 버튼만 표시되는 문제를 해결했습니다.
• 전역 색상을 추가하면 모듈 영역 상호 작용/쥐덫이 비활성화되는 문제가 수정되었습니다.
• 이식성 모달로의 가져오기 및 내보내기 탭에 대한 동적 작업 레이블 문제를 수정했습니다.
• 리디렉션 활성화 버튼이 꺼져 있지만 URL 필드가 표시되는 설정 패널 문제를 수정했습니다.
• 래퍼 구성 요소에 전달된 투명 레이어 모달 크기를 수정했습니다.
• 게시물/페이지를 저장할 때 일부 비하인드 코드를 정리했습니다.
• 전체 색상 동기화가 게시/미리 보기가 아닌 초안에서만 수행되는 문제가 해결되었습니다.
• 삭제된 전체 색상이 저장 시 레이아웃에서 제거되지 않는 문제를 수정했습니다.
• 색상 선택기가 검은색에서 흰색까지의 색상 범위에서 결함이 있는 문제를 해결했습니다.
• 수정됨: 모달을 열면 모듈 설정 값이 변경됩니다.
• 전체 색상이 많은 경우 저장된/최근 색상 탭을 확장한 다음 전체 색상 탭을 열면 색상 견본이 저장된/전체/최근 탭 제목 위에 겹치는 문제가 해결되었습니다.
• 전체 색상 속성 값이 복사/붙여넣어졌는지 확인하기 위해 클립보드 복사/붙여넣기 기능에 대한 테스트가 추가되었습니다.
• TextArea 필드 구성 요소에 showPlaceholderOnEmpty 속성에 대한 지원이 추가되었습니다.
• 콘텐츠 길이가 '콘텐츠 표시'로 설정된 경우 블로그 모듈에 설정을 숨기는 기능이 추가되었습니다.
• 사용자가 레이어 보기에서 열을 삭제하면 삭제되는 버그가 수정되었습니다.
• 사용자가 빌더에서 일부 텍스트를 선택할 때 인라인 편집기 도구 모음의 올바르지 않고 예측할 수 없는 위치를 수정했습니다.
• D5 블로그 모듈의 "페이지 매김 표시" 옵션이 비활성화된 경우 프런트 엔드에서 페이지 매김이 숨겨지지 않는 문제가 수정되었습니다.
• D5 블로그 모듈에서 '요약 표시' 옵션을 비활성화해도 Visual Builder 미리 보기에서 발췌가 숨겨지지 않는 문제가 수정되었습니다.
• @wordpress/hooks로 인해 반응형 콘텐츠가 중단되는 문제를 FE의 멀티뷰 스크립트에 대한 종속성으로 등록하여 외부 종속성으로 이동했습니다.
• 서식 있는 텍스트 필드의 잘못된 업데이트 순서를 수정했습니다.
• 잘못된 div 스타일 정적 스타일 렌더링 순서로 인해 버튼에 원치 않는 텍스트 밑줄이 추가되는 문제를 수정합니다.
• 누락된 페이지 바로가기 추가(페이지 저장, 페이지를 초안으로 저장, 시각적 빌더 종료, 이식성 열기, 반응형 확대/축소, 와이어프레임 모드로 전환)
• 처음 열 때 이식성의 잘못된 위치를 수정하고 라이브러리 모달에 저장했습니다.
• 호버 스타일을 재설정하면 데스크탑 스타일이 재설정되는 문제가 해결되었습니다.
• 버튼 그라데이션이 데스크탑 상태에서 중지되고 호버 그라데이션 중지에서 사용되는 값으로 값이 변경되는 문제를 해결했습니다.
• 드래그하는 동안 요소의 원래 위치에 보이는 부분이 숨겨지는 문제를 수정했습니다.
• 눈에 보이는 선택/선택 취소에 따라 "비활성화" 재설정 아이콘이 숨기거나 표시되는 문제를 수정했습니다.
• 키보드 단축키가 올바르게 작동하지 않는 문제를 수정했습니다.
• 확인란과 함께 작동하지 않는 재설정 버튼을 수정했습니다.
• 전문 섹션에 누락된 열 기능을 추가합니다.
• 관리 표시줄을 비활성화하는 빌더 설정 옵션이 추가되었습니다.
• 레이어 보기에 모듈을 끌어다 놓은 후 VB에 드롭된 모듈로 스크롤하는 기능이 추가되었습니다.
• 레이어 보기에 모듈을 끌어다 놓은 후 VB에 드롭된 모듈로 스크롤하는 기능이 추가되었습니다.
• 페이지 표시줄에 명확한 레이아웃 버튼이 추가되었습니다.
• 페이지 표시줄에 색상 모드 토글이 추가되었습니다.
• 추가된 기능은 드래그된 모듈이 올바른 모듈 하위 항목인 경우에만 레이어 그룹이 확장되도록 보장합니다.
• 사용자가 모듈을 드래그하고 200ms 후에 레이어 그룹 위로 마우스를 가져가면 레이어를 확장하는 기능이 추가되었습니다.
• 레이어 보기 모달에 마우스를 올렸을 때 레이아웃의 실제 모듈을 강조 표시하는 기능이 추가되었습니다.
• 자체 JSON 파일에 모듈의 `default` 및 `defaultPrintedStyle` 속성을 선언하는 메커니즘이 추가되었습니다.
• HTML, 스타일 및 스크립트 데이터를 생성하는 속성을 추출하기 위한 메커니즘이 추가되었습니다.
• 시각적 빌더를 종료하기 위해 페이지 표시줄 버튼을 추가했습니다.
• 프런트 엔드에 빌더의 현재 상태를 미리 볼 수 있는 페이지 표시줄 버튼이 추가되었습니다.
• 행의 유일한 열이 제거되거나 다른 행으로 이동되지 않도록 방지 기능이 추가되었습니다.
• 사전 설정 모달의 프로토타입을 추가했습니다.
• 레이어 보기가 열리면 왼쪽 사이드바에 자동으로 고정됩니다.
• 이제 "라이브러리에서 추가" 모달이 페이지 영역 내 중앙에 표시되는지 확인하세요. 최대 너비와 높이는 프레임의 4개 측면 모두 가장자리에서 32픽셀과 동일합니다.
• 호버 선택기에 대한 Blurb 모듈의 버그를 수정하여 호버 상태를 선택할 때 VB에서 스타일이 렌더링되지 않게 했습니다.
• 모듈 설정에서 고정 상태를 선택할 때 고정 상태 스타일이 VB에서 렌더링되지 않는 Divi 5의 버그가 수정되었습니다.
• 동적 속성과 관련된 PHP 8.3의 Deprecated 메시지를 수정했습니다.
• PHP 8.2+에서 발생한 Email Optin 모듈의 PHP 지원 중단 알림을 수정했습니다.
• 모듈 설정 또는 와이어프레임 모드에서 변경하면 레이어 보기 모달 내에서 관리 라벨이 동기화되지 않는 문제를 수정했습니다.
• 특정 카테고리를 선택한 경우에도 비주얼 빌더의 블로그 모듈에 모든 게시물이 표시되는 문제를 수정했습니다.
• 오버레이 배경색과 오버레이 아이콘이 프런트 엔드에서 올바르게 렌더링되지 않는 문제가 수정되었습니다.
• 상단/하단 창 뷰포트 가까이 모듈을 끌 때 자동 스크롤이 깨지는 문제를 수정했습니다.
• 문의 양식 및 이메일 옵션 모듈의 설정 패널에 있는 이메일 계정 및 스팸 방지 필드의 버튼 배경색과 버튼 텍스트 색상을 수정했습니다.
• 처음 로드될 때 아이콘 모듈의 기본 아이콘 선택이 수정되었습니다.
• 아코디언과 같은 모듈의 하위 요소에 대한 제목 설정에 동적 콘텐츠가 표시되는 문제를 수정했습니다.
• Yarn test-unit 명령을 실행하는 동안 발생하는 오류가 수정되었습니다.
• 잘못된 추천 모듈 클래스 이름을 수정했습니다.
• 인라인 편집기의 잘못된 고정 위치가 수정되었습니다.
• 초안을 저장하면 항상 페이지가 대신 게시되는 문제가 해결되었습니다.
• 일부 모델과 선택 메뉴가 초기의 잘못된 위치에서 올바른 위치로 깜박이는 문제를 수정했습니다.
• 탭 모듈에 탭이 표시되지 않는 문제를 해결했습니다.
• 와이어프레임 보기에서 지연 드래그 앤 드롭 문제를 해결했습니다.
• Person 모듈에서 누락된 이미지 애니메이션 클래스를 수정했습니다.
• 배경 탭에서 누락된 툴팁을 수정했습니다.
• 클릭 시 모듈 옵션 동작이 작동하지 않는 문제를 수정했습니다. 대신 모듈 설정을 엽니다.
• 호버 상태에서 아코디언 모듈에 추가 하단 공간이 표시되는 문제를 해결했습니다.
• 레이어를 아래에서 위로 드래그할 때 부드럽게 스크롤되는 현상이 수정되었습니다.
• 어두운 모드에 있는 동안 서식 있는 텍스트 편집기 콘텐츠의 텍스트 색상을 수정했습니다.
• 광고문 모듈의 아이콘 호버 문제를 수정했습니다.
• 레이어 모듈 목록의 맨 아래에 모듈을 드롭하게 만드는 맨 아래 영역의 드롭존 문제를 수정했습니다.
• 레이어 모듈을 더 이상 가리키지 않아도 모듈 옵션이 표시되는 문제를 수정했습니다.
• 갤러리 모듈 FE에서 낮은 품질의 갤러리 이미지가 표시되는 문제를 수정했습니다.
• 행 설정에서 하위 열 이름 업데이트를 수정하고 드래그할 때 열을 재정렬했습니다.
• 색상 선택기 구성 요소에 향상된 기능을 도입하여 더 많은 확장성과 모듈성을 허용합니다.
• 중복 변환 CSS를 해결하는 새로운 변환 필드용 기본 구성 요소를 소개합니다.
• 모달의 도킹/도킹 해제 상태를 유지하여 마지막 닫힌 상태에 따라 다시 열리도록 합니다.
• 만들어진 모듈 드래그 앤 드롭은 모든 모듈 표면 영역에서 초기화될 수 있습니다.
• 관리 표시줄에서 종료 버튼 제거
• 라이브러리 모달의 로드에서 드래그 가능 및 크기 조정 가능을 제거했습니다.
• 레이어 보기 모달의 전문 섹션 열에서 모듈 옵션이 제거되었습니다.
• 문제를 적절하게 수정한 후 로그인 모듈에 대한 중복 호버 선택기를 제거했습니다.
• 사용하지 않는 키보드 단축키를 제거했습니다.
• Divi 4의 모드 기반 UX를 상호 작용 레이어 UX로 대체했습니다.
• 간소화된 시각적 빌더 UI(필드 및 모달 구성 요소)
• 기록이 작성될 때까지 페이지 표시줄에서 실행 취소 및 다시 실행 버튼을 일시적으로 숨깁니다.
• 새로운 전역 색상 ID 형식과 모듈 속성에 대한 더 나은 지원을 도입하여 전역 색상 기능을 업데이트하고 개선했습니다.
• CSS 변수를 사용하여 레이어 뷰 색상을 설정하고, 레이어 드래그 핸들 구성요소의 불필요한 useSelect 사용을 대체하여 성능을 최적화했으며, 레이어 뷰의 useSelect 사용 내에서 선택기 이름을 지정하기 위해 selectStore를 일관되게 사용했습니다.

추가 업데이트를 계속 지켜봐 주시기 바랍니다

이번 달 진행 보고서는 여기까지입니다. 더 많은 업데이트를 계속 지켜봐 주시기 바랍니다. 이메일로 팔로우하고 YouTube 채널을 구독하여 소식을 놓치지 마세요. Divi 5는 방대한 프로젝트입니다. 하지만 저는 매달 돌아와 진행 상황에 대해 알려드리겠습니다.