Divi 5로 시작하는 방법

Divi 5는 다른 버전 업데이트뿐만 아니라 차세대 Divi Builder입니다. 그것은 처음부터 (거꾸로 호환성), 더 빠른 성능, 새로운 기능 및 기능, 더 많은 설계 자유 및 장기 확장성에 중점을 둡니다.

Divi 5는 기본적인 개선 외에도 새로운 인터페이스를 얻었습니다. 이 인터페이스는 약간 다르지만 웹 사이트 구축의 Divi 방식을 여전히 인식 할 수 있습니다. 우리는이 튜토리얼을 준비하여 Divi 5를 효과적으로 사용하기 위해 알아야 할 모든 것을 통해 최신 기능 탐색에 이르기까지 여러분을 안내했습니다. 그것에 가자!

Divi 5는 오늘날 새 웹 사이트에서 사용할 준비가되었지만 아직 웹 사이트를 마이그레이션하는 것이 좋습니다.

Divi 5 : WordPress 웹 사이트 빌딩의 미래

Divi 4는 견고한 페이지 빌더이지만 시간이 지남에 따라 기술 부채를 축적했습니다. 이러한 제한 사항을 제거하기 위해 Foundation에서 Divi 5를 재건하고 웹 디자인의 미래를 준비 할 수있는 많은 놀라운 새로운 기능을 포함 시켰습니다. 그러나 Divi 5는 별도의 제품이 아니며, 후진 호환성과 함께 제공되므로, 기존 Divi 4 웹 사이트를 마이그레이션하여 5 개를 더 아래로 내려갈 수 있습니다.

다음은 Divi 5가 귀하의 관심을 끌 수있는 주요 개선 사항입니다.

• Core Architecture Rewrite : Divi 4의 레거시 코드베이스는 버그 나 속도를 도입하지 않고 새로운 기능을 추가하기가 어려워졌습니다. Divi 5는 확장하도록 만들어졌습니다.
• 성능 향상 : Divi 4 Builder는 종종 큰 페이지 및 복잡한 레이아웃의 경우 속도가 느려지고 페이지 속도에 영향을 미쳤습니다. Divi 5는 주요 백엔드 개선을 제공하고 더 적은 수의 시스템 리소스를 사용하여 더 빠르고 반응이 좋은 경험을 제공합니다. (우리는 또한 프론트 엔드가 얼마나 빨리 수행되는지 확인하기 위해 Divi 5 속도 테스트를 수행했습니다.)
• 더 나은 시각적 빌더 경험 : Divi 5는 여전히 친숙해 보이지만 건축업자는 훨씬 더 매끄럽고 빠르게 사용합니다. 설정이 바로 열리고 컨트롤이 더 빠르게 반응하며 더 명확한 사이드 바 및 호버 도구와 같은 작은 변경으로 페이지를 쉽게 빌드하고 편집 할 수 있습니다. 새로운 추가 사항에 대해 알아 보려면 Divi 5 대시 보드 연습을 확인하십시오.
• 많은 새로운 기능 : 우리는 여전히 Divi 5 Alpha 단계에 있지만 전체 웹 사이트 구축 워크 플로를 변경하는 새로운 흥미로운 기능을 이미 출시하고 있습니다.

이러한 업그레이드는 함께 Divi 5를 더 좋게 만들고 더 빠르고 깨끗하며 유지 관리하기 쉬운 현대 웹 사이트를 구축하기위한 더 똑똑한 선택입니다. 더 매끄럽고 미래의 미래 준비된 버전의 Divi를 기다리고 있다면 이것이 바로 그 것입니다.

Divi 5는 새로운 웹 사이트에서 사용할 준비가되었지만 아직 기존 Divi 4 사이트를 마이그레이션하는 것이 좋습니다. 현재 릴리스는 신선한 시작에 이상적이므로 새로운 재단이 제공하는 모든 것을 최대한 활용할 수 있습니다.

Divi 5로 시작하기

Divi 5에 액세스하고 웹 사이트 구축을 시작하려면 웹 호스팅, 도메인 및 WordPress와 같은 필수품이 있는지 확인해야합니다.

웹 호스팅 및 WordPress 설정

안정적인 웹 호스팅을 찾고 있다면 Siteground를 고려하십시오. 탁월한 성능, 강력한 지원 및 쉬운 원 클릭 WordPress 설정을 제공합니다. SiteGroun​​ 이 튜토리얼을 따라 웹 호스팅 및 WordPress를 설정하십시오.

사이트장을 얻으십시오

다운로드, 설치 및 활성화 Divi 5

WordPress 대시 보드에 액세스하면 다음 단계는 Divi 5를 설치하는 것입니다. 우아한 테마 멤버십 영역으로 이동하여 최신 Divi 5 Zip 폴더를 다운로드하십시오.

(Divi를 처음 사용하는 경우 가격 책정 계획을 확인하여 귀하의 요구에 가장 적합한 것을 선택하십시오. 선택할 수 없습니다. Divi AI, Divi Cloud, Divi VIP, Dondivi Collection 등과 같은 모든 멋진 기능에 액세스 할 수있는 Divi Pro 멤버십을 사용하십시오!)

Divi로 시작하십시오

WordPress 대시 보드로 돌아가서 외관> 테마> 새> 업로드 테마를 추가하십시오.

Divi 5 ZIP 파일을 선택하고 지금 설치를 클릭하십시오.

Divi 5가 설치된 후 활성화하십시오 .

다음으로 테마 기능에 액세스하기 위해 Divi 라이센스를 활성화해야합니다. 이렇게하려면 사용자 자격 증명으로 계정에 로그인하십시오.

프로세스를 완료하면 라이센스 상태, Divi 5 업데이트 상태, 페이지, 테마 템플릿 등과 같은 중요한 정보가 표시 되는 Divi Dashboard에 액세스 할 수 있습니다.

새로운 Divi 5 Visual Builder 액세스

모든 웹 사이트에는 홈, 소개, 연락처, 쇼핑 및 블로그와 같은 기본 페이지가 포함됩니다. 그것들을 디자인하려면 먼저 그것들을 만들어야합니다. 페이지를 만들려면 페이지> 추가 페이지로 이동하십시오.

페이지 이름을 지정하고 Divi Builder 사용을 클릭하여 Divi 5 Visual Builder를 활성화하십시오.

Divi 5 Visual Builder에 들어갑니다.

Divi 5 대시 보드 연습

언뜻보기에 새로운 Divi 5 인터페이스는 Divi 4와 동일하게 보일 수 있지만 탐색 할 가치가있는 추가 사이드 바와 새로운 아이콘이 표시됩니다. 각각을 더 자세히 검토합시다.

먼저 다음은 상단 패널 설정의 고장입니다.

• (1) 페이지 설정 패널 : 페이지 제목 (홈) 옆에있는 기어 아이콘을 클릭하면 페이지 설정 패널이 열립니다. 여기에서는 페이지 제목을 편집하고 발췌를 추가하고 주요 이미지를 할당하며 고급 디자인 설정에 액세스 할 수 있습니다. Divi 5는 원 클릭 설정 액세스를 활성화하므로 요소 (모듈, 섹션, 열 또는 행)를 클릭하면 설정 패널이 오른쪽에서 자동으로 열립니다.
• (2) 반응 형 뷰 및 너비 컨트롤 : 이 섹션에서는 데스크탑, 태블릿 및 모바일과 같은 다양한 화면 크기에서 응답 성을 미리보기 및 편집 할 수 있습니다. 또한 캔버스 너비 및 줌 레벨을 조정하여 레이아웃이 다양한 화면 크기에 표시되는 방식을 미세 조정할 수 있습니다.
• (3) 빌더 컨트롤 : 이 영역은 Dark Mode (Divi 5에서 고도로 요청 된 새로운 기능), UNDO/REDO , HISTER , EXPORT/IMPORT, CLEAR LAYOW , LIBRARY에 추가 및 건축업자 를 종료 하는 것과 같은 Builder Action에 빠르게 액세스 할 수 있습니다. 또한 미리보기, 드래프트 저장 또는 라이브 준비가 될 때 페이지를 게시 할 버튼을 찾을 수 있습니다.

이제 많은 새로운 아이콘이 포함 된 왼쪽 패널을 살펴 보겠습니다.

• (1) 레이아웃 및 구조 도구 : 왼쪽 패널은 Divi Library 또는 Divi Cloud에서 미리 메이드 또는 저장된 레이아웃을 추가하기위한 Blue Plus 버튼과 같은 핵심 레이아웃 옵션에 액세스 할 수 있습니다. 또한 페이지의 구조화 된 개요에 대한 레이어보기를 열거 나 모듈을 레이블이 붙은 블록으로 표시하는 단순화 된 편집 모드의 와이어 프레임보기 로 전환 할 수 있습니다. 그 사이에는 변수 관리자 아이콘이 있으며, 여기서 디자인 변수를 만들고 구성 할 수 있습니다.
• (2) 시각적 디스플레이 옵션 : 요소 위에 호버링 할 때 액션 아이콘이 나타나는 방식을 사용자 정의 할 수 있습니다. 호버 호버 및 상위 동작 아이콘 의 동작 아이콘이 활성화되어 있으면 호버링 된 요소와 부모 컨테이너 모두에 대한 아이콘이 표시되어 제어에 쉽게 액세스 할 수 있습니다. 또한 X-Ray 모드를 켜면 페이지의 모든 요소를 ​​설명하여 레이아웃의 구조를 시각화하는 데 도움이됩니다.
• (3) 설정 및 도움말 : 패널의 하단에는 인터페이스 기본 설정 및 디스플레이 동작을 조정할 수있는 시각적 빌더 설정이 있습니다. 또한 문서화 및 튜토리얼 비디오에 직접 연결되는 도움 아이콘이 표시되어 건축업자를 떠나지 않고도 쉽게 지원할 수 있습니다.

Divi 5에 익숙해지는 데 약간의 시간이 걸릴 수 있으므로 효과적으로 탐색하는 데 도움이되는 몇 가지 팁을 작성했습니다.

새로운 레이아웃 또는 모듈 추가

이제 Divi 5를 사용하여 디자인을 만드는 방법을 살펴 보겠습니다. 처음부터 건축 한 경우 녹색 플러스 버튼을 클릭하여 행을 추가하십시오. 그 안에는 콘텐츠 모듈을 추가 할 수 있습니다.

오른쪽 설정 패널이 자동으로 변경됩니다. 이것이 선택한 요소의 설정 옵션이기 때문입니다. 제목 요소가 선택되면 오른쪽 패널에 설정이 표시됩니다. 컨테이너 요소 설정에 액세스하려면 빵 부스러기를 사용하십시오. 예를 들어 행을 클릭하여 행 설정에 액세스하십시오.

처음부터 구축하거나 사전 구축 된 디비 레이아웃을 쉽게 가져 오거나 Divi AI를 사용하여 생성 할 수 있으며이를 기본으로 사용할 수 있습니다. 그런 다음 모든 시간을 사용자 정의하고 당신을 만들 수 있습니다. 우리는 다양한 산업과 목적을 위해 2500 개 이상의 전문적으로 설계된 디바 레이아웃을 보유하고 있으므로 영감을 빠르게 찾을 수 있습니다.

왼쪽 패널에서 Blue Plus 버튼을 클릭하고 다음을 선택하십시오.

• 1 : 사전 디자인 된 레이아웃을 가져 오려는 경우.
• 2 : Divi AI로 새로운 레이아웃을 만들려면.

사전 디자인 된 레이아웃을 가져 오는 방법을 보여 드리겠습니다. 가져 오기 전에 디자인을 미리 볼 수도 있습니다.

AI 옵션으로 빌드를 선택한 경우 Divi AI에 생성하려는 페이지 및 웹 사이트에 대해서만 알리면됩니다. 그런 다음 레이아웃 생성을 클릭합니다.

사전 제작 된 레이아웃 사용자 정의

디자인이 가져 오면 요소를 클릭하여 설정을 사용자 정의 할 수 있습니다.

모든 요소 설정 패널에는 컨텐츠, 디자인 및 고급 탭이 포함됩니다 .

• 내용 : 이곳은 텍스트, 이미지, 버튼, 링크, 배경 등과 같은 모듈의 기본 컨텐츠를 추가 및 편집하는 곳입니다. 일반적으로 요소를 사용자 정의 할 때 시작하는 첫 번째 장소입니다.
• 디자인 : 이 탭을 사용하여 모듈을 시각적으로 스타일링하십시오. 여기에는 글꼴, 색상, 간격, 경계, 그림자, 정렬 및 기타 설계 중심 컨트롤에 대한 옵션이 있습니다.
• 고급 : 이 섹션은 사용자 정의 CSS 추가, 조건 적용, 가시성 설정 조정 등과 같은 더 많은 제어를위한 것입니다.
• 작은 노트북 아이콘을 사용하면 응답 모드 (모바일, 노트북, 태블릿 및 호버 오버) 설정간에 전환 할 수 있습니다.

또한 작은 (기본 사전 설정) 드롭 다운도 알 수 있습니다. 이것은 Divi 4의 상징적 인 사전 설정 옵션이지만 최근에 더욱 진보 된 것을 시작했으며 새로운 기능 릴리스 섹션에서 논의 할 것입니다. (힌트 : 옵션 그룹 사전 설정을 찾으십시오!)

컨텐츠 생성에 도움이 필요한 경우 Divi AI를 사용하십시오. 개별 컨텐츠 요소는 AI를 사용하여 별도로 편집 할 수도 있습니다. 신체 섹션 위로 마우스를 가져 가서 작은 AI 아이콘을 클릭하면됩니다.

Divi AI는 콘텐츠뿐만 아니라 이미지, 코드 및 전체 레이아웃을 생성하는 데 도움이 될 수 있습니다. 시작할 작은 AI 아이콘을 찾으십시오.

Divi AI를 확인하십시오

요소의 시각적 설정을 수정하려면 디자인 탭으로 이동합니다. 그곳에서 글꼴, 크기, 색상 등을 조정할 수 있습니다.

컨텐츠와 브랜딩을 추가하려면 페이지 레이아웃의 모든 요소를 ​​살펴보십시오. 완료되면 드래프트를 저장 하고 디자인을 미리 봅니다 . 모든 것이 좋아 보이면 게시하십시오.

Divi 5의 새로운 기능이 탐구되었습니다

Divi 5는 확장 성을 위해 진화 할 준비가되었습니다. 여전히 알파 단계이지만 디자인 워크 플로우를 개선하는 데 도움이되는 많은 새로운 기능을 이미 출시했습니다.

• 옵션 그룹 사전 설정 : 테두리 반경, 타이포그래피 등과 같은 특정 설정에 대한 사전 설정을 만들 수 있습니다. 사전 설정이 적용되면, 모든 설계 업데이트는 해당 사전 설정을 사용하여 모든 요소에 자동으로 반영됩니다. 이를 통해 일관성을 유지하고 시간을 절약 할 수 있습니다.
• 설계 변수 : 색상, 글꼴 및 간격과 같은 설계 속성에 대한 재사용 가능한 값을 저장합니다. 즉, 기본 색상이나 제목 크기를 변경하려면 변수를 한 번만 업데이트하면 모든 인스턴스가 쉽게 업데이트됩니다. 디자인 변수는 브랜딩 파운데이션을 구축하는 데 적합합니다.
• Advanced Units : Divi 5는 이제 clamp (), min (), max () 및 calc ()와 같은 최신 CSS 기능을 지원합니다. 이러한 고급 장치는 사용자 정의 코드 또는 미디어 쿼리없이 장치 전체에서 유동적으로 조정하는 반응 형 디자인을 훨씬 쉽게 만들 수 있습니다.
• 중첩 행 : 이제 한 행을 다른 행 안에 배치 할 수있어 복잡한 레이아웃에 대한 유연성이 더 높습니다. 이는 페이지 구조를 손상시키지 않고 정렬, 간격 또는 컨텐츠 그룹화에 대한 자세한 제어가 필요할 때 유용합니다.
• 모듈 그룹 : 여러 모듈을 열 내 단일 컨테이너에 결합합니다. 관련 컨텐츠를 구성하거나 공유 스타일을 적용하거나 레이아웃 섹션을 한 장치로 이동하는 쉬운 방법입니다.

또한 Flexbox 기반 레이아웃 및 향상된 WooCommerce 모듈과 같은 새로운 기능을 추가하기 위해 노력하고 있습니다. 이 업데이트는 Divi 5가 이미 잘 수행하는 일을 계속 기반으로합니다. 워크 플로를 간소화하고 빌더 경험을 현대화하십시오.

새로운 기능 추가를 놓치지 않으려면 YouTube 채널을 구독하십시오. Nick은 일반적으로 새로운 기능을 먼저 발표하므로 항상 곡선보다 앞서 있습니다.

YouTube 채널을 구독하십시오

Divi 5를 최대한 활용하기위한 팁

Divi 4에 이미 익숙하다면 Divi 5로 전환하는 것이 얼마나 쉬운 지 알게 될 것입니다. Divi 4에 대해 사랑하는 모든 것을 포함하지만 더 안정적이고 현대적이며 빠릅니다. 일찍 Divi 5에 익숙해지기 시작하면 더 좋습니다. 다음은 새로운 Divi 5 기능을 사용하여 설계 유연성을 향상시키는 데 도움이되는 몇 가지 팁입니다.

• 디자인 변수 설정 먼저 : 브랜드 색상, 글꼴, 간격 등에 대한 설계 변수를 작성하여 스타일을 중앙 집중화하고 향후 편집을 더 빠르고 일관성있게 만듭니다.
• 글로벌 제어에 CSS 변수를 사용하십시오 :보다 기술적 인 유연성을 위해 설계 변수와 함께 CSS 변수를 설정하십시오. 최소한의 코드로 테마 전체에서 일관된 스타일을 적용 할 수 있습니다.
• 기본 사전 설정을 일찍 적용하십시오. 설계를 시작하기 전에 모듈, 섹션 및 행에 기본 사전 설정을 할당하십시오. 이를 통해 모든 새로운 요소가 처음부터 스타일 시스템과 일치합니다.
• 사전 설정 기반 디자인을 염두에두고 구축 : 사전 설정을 작성하십시오. 페이지에서 재사용 할 수 있습니다. 이렇게하면 워크 플로우 속도가 빨라지고 업데이트를 훨씬 쉽게 관리 할 수 ​​있습니다.
• 유연한 간격을 위해 calc ()를 사용하십시오 : calc () i 사이드 패딩 또는 마진 필드를 적용하여 단위 ( 100% - 80px )를 혼합하고 단단한 브레이크 포인트없이 스크린 크기에 적응하는 레이아웃을 만듭니다.
• 레이아웃 제어를 위해 최소 () 및 max ()를 추가하십시오 : Min () 또는 Max ()를 사용하여 다른 장치에서 제목이 너무 작거나 너무 커지는 것과 같은 지능형 크기 제한을 설정하십시오.
• 유체 타이포그래피에는 Clamp ()를 사용하십시오 : clamp ()를 사용하면 글꼴 크기가 미디어 쿼리없이 화면 크기에 따라 매끄럽게 성장하거나 수축 할 수 있습니다. 읽을 수 있고 반응이 좋은 텍스트를위한 최신 솔루션입니다.

Divi 5는 웹 디자인의 미래를 위해 구축되었습니다.

Divi 5는 단순한 업데이트가 아닙니다. 웹 사이트 워크 플로우를 향후 방지하도록 설계된 완전히 재건축입니다.

Divi 5의 모든 것은 더 빠른 성능에서 모듈 식 사전 세트, 디자인 변수 및 고급 레이아웃 도구에 이르기까지 더 똑똑하고 스케일을 작동시키는 데 도움이됩니다. 새로운 프로젝트를 시작하거나 최신 디자인 기술을 실험하든이 버전은 더 나은 웹 사이트를 구축 할 수있는 기초를 제공합니다.

Divi 5는 오늘 새로운 웹 사이트를 준비하고 있으므로 최신 기능을 테스트하고 얼리 어답터가 되십시오!