Divi 5로 페이지를 효율적으로 빌드하는 방법

Divi 5는 처음부터 재건 된 Lightning Fast 성능을 자랑하며 현장 전체 스타일을위한 디자인 변수, 무한 레이아웃 깊이를위한 중첩 행 및 워크 플로우를 향상시키기위한 사전 설정 기반 설계와 같은 새로운 기능을 소개합니다. Divi 5를 사용하면 현대적이고 개조 된 시각적 빌더를 사용하면 처음부터 시작하거나 사전 구축 된 수천 개의 레이아웃을 활용하여 거의 노력하지 않고 전문 웹 사이트를 만들 수 있습니다.

이 게시물에서는 Divi 5의 고유 한 기능 및 UI 향상과 페이지를보다 효율적으로 구축하는 데 어떻게 도움이되는지 강조하겠습니다. 반응 형 레이아웃 설정부터 모듈 그룹 및 Divi AI와 같은 혁신적인 기능을 활용하는 것까지 Divi 5가 웹 디자인을 더 빠르고 똑똑하며 창의적인 경험으로 어떻게 전환하는지 알 수 있습니다.

우리가 다이빙하기 전에 한 가지 메모 : Divi 5는 새로운 웹 사이트에서 사용할 준비가되었지만 기존 사이트를 Divi 5로 변환하는 것은 권장하지 않습니다.

그 말로, 다이빙합시다.

Divi 5의 현대 UI 이해

Divi 5의 인터페이스는 속도, 유연성 및 직관적 인 노 코드 설계를 위해 설계된 전임자의 완전한 점검입니다. Visual Builder는 클리너 설정 패널, 반응 형 디자인 토글 및 섹션, 행, 열 및 모듈 그룹의 원활한 탐색을위한 중첩 레이어 인터페이스로 실시간 프론트 엔드 편집을 제공합니다.

더 빠른 기초로 향상된 Divi 5는 무한 레이아웃 깊이를위한 중첩 행, 간소화 된 모듈 관리를위한 모듈 그룹 및 일관된 스타일을위한 설계 변수와 같은 고유 한 기능을 소개합니다. 이러한 발전으로 Divi 5는 초보자가 접근 할 수 있고 전문가에게 강력하게 이루어져 웹 사이트가 WordPress에서 구축되는 방식을 변화시킵니다.

시각적 빌더 진화

Divi 5의 Visual Builder는 강력하고 사용자 친화적 인 간소화 된 경험으로 재 설계된 인터페이스를 자랑합니다. Divi 4와 비교할 때 Divi 5는 클리너의 직관적 인 설정 패널을 소개하여 혼란을 줄이고 옵션을 논리적으로 구성하여 조정을 더 빨리 조정합니다.

새로운 반응 형 디자인 토글을 통해 여러 데스크탑, 태블릿 및 모바일 뷰 사이를 전환 할 수있어 모든 장치에서 디자인이 완벽하게 보일 수 있습니다. 이러한 UI 개선 사항은 Precision Professionals 요구를 제공하면서 초보자가 Divi 5에 접근 할 수있게합니다.

직관적 인 탐색

복잡한 레이아웃 탐색은 Divi 5의 레이어 인터페이스에서 쉽게 적용됩니다. 이 인터페이스는 섹션, 행, 열, 모듈 및 새로운 모듈 그룹을 명확하고 계층 적 구조로 구성합니다. 단일 모듈을 조정하거나 전체 섹션을 재구성하든 디자인의 요소로 쉽게 드릴 다운 할 수 있습니다.

드래그 앤 드롭 인터페이스는 사물을 단순화하는 반면 와이어 프레임 모드는 페이지 구조에 대한 조감도를 제공합니다. Divi 5는 이러한 도구를 결합함으로써 복잡한 레이아웃을 직관적으로 구축하고 편집하여 시간을 절약하고 좌절감을 줄입니다.

반응 형 디자인 컨트롤

Divi 5는 디자인이 장치 전체에 적응하는 방식에 대한 정확한 제어를 위해 맞춤형 브레이크 포인트를 소개합니다. 사전 정의 된 7 개의 중단 점 중에서 선택하거나 특정 장치 해상도와 일치하도록 사용자 정의 값을 설정할 수 있습니다. 이를 통해 수동 CSS 조정이없는 픽셀-완벽한 레이아웃을 보장합니다.

유체 스케일링 용 클램프 ()와 같은 고급 장치와 결합 된이 세분화 된 제어는 디자인이 모든 화면 크기에 따라 일관되고 시각적으로 매력적으로 유지되도록합니다.

Divi 5의 고유 한 기능으로 페이지를 구축합니다

Divi 5는 Divi 사용 방법을 재정의하는 혁신적인 도구를 소개합니다. 중첩 행을 사용하면 복잡한 레이아웃에 대한 무한 행 중첩이 허용되는 반면, 모듈 그룹은 스타일링을 단순화하고 여러 모듈을 단일 장치로 단순화합니다. 설계 변수는 색상, 글꼴 등에 대한 사이트 전체 일관성을 가능하게하며 고급 장치는 반응 형 디자인을 위해 Clamp () 및 calc ()과 같은 동적 CSS 기능을 지원합니다. 옵션 그룹의 사전 설정 기반 디자인은 요소를 가로 지르는 스타일을 간소화하고 Divi AI는 컨텐츠 생성을 가속화합니다. 이러한 기능을 통해 사용자는 전문적이고 반응이 좋은 웹 사이트를 효율적으로 만들 수 있습니다.

아래에서는 이러한 도구를 사용하여 웹 페이지를 작성하는 방법에 대해 자세히 설명합니다.

1. 효율적인 스타일을위한 설계 변수

설계 변수는 사이트 전체에 적용 할 수있는 색상, 글꼴, 숫자, 이미지, 텍스트 및 링크에 사용할 수있는 전역 설정입니다. 시각적 빌더에서 글로벌 변수 아이콘을 클릭하여 변수를 정의 할 수 있습니다.

설계 변수를 사용하면 해당 변수의 모든 인스턴스를 업데이트하여 일관성과 시간을 절약 할 수 있다는 것입니다. 예를 들어, 클램프 () 계산을 제목에 할당하기 위해 숫자 값을 설정하면 웹 사이트 전체에 텍스트에 대한 전역 계층 구조를 설정합니다. 빠른 변경을 해야하는 경우 해당 변수가 적용된 제목 또는 텍스트 모듈이 사이트 전체에서 업데이트되므로 모든 인스턴스 전체에 걸쳐 빠른 디자인을 변경할 수 있습니다.

설계 변수를 사용하는 방법

설계 변수의 잠재력을 극대화하려면 설계 프로세스 초기에 통합하십시오. 시작시 변수를 설정하면 일관된 프레임 워크가 생겨 반복적 인 작업보다는 창의성에 집중할 수 있습니다. 시각적 빌더에서 가변 관리자 아이콘을 클릭하여 시작하십시오.

대화 상자가 나타나면 변수를 추가하여 디자인의 기초를 만들 수 있습니다. 예를 들어, 숫자 변수를 사용하여 반응 형 타이포그래피를 설정할 수 있습니다.

숫자 변수는 간격에도 사용될 수 있습니다. 예를 들어, 웹 사이트에서 모든 열과 행에 대한 표준 간격을 설정할 수 있습니다. calc (80% - 60px) 와 같은 calc () 공식을 사용하면 설계 요소의 너비를 컨테이너의 80%로 설정하고 30px의 패딩을 양쪽에 추가합니다. 드롭 다운 메뉴에서 Calc를 선택하여 공식을 적용하십시오.

calc () 공식을 값 필드 에 입력하십시오. 변수 저장 버튼을 클릭하여 변수 관리자에 추가하십시오.

변수가 저장되면 Divi를 사용하면 디자인 전체에 쉽게 적용 할 수 있습니다. 간격을 사용하려면 행, 열 또는 모듈을 클릭하고 디자인 탭으로 이동하여 너비 필드를 찾으십시오.

마지막으로 동적 콘텐츠 삽입 아이콘을 클릭하여 전역 간격 변수를 선택하십시오.

앞서 언급했듯이 디자인 변수를 적용하면 사이트 전체의 일관성이 보장됩니다. 변수 관리자의 속성을 업데이트하면 모든 인스턴스가 즉시 동기화되어 수동 조정 시간이 절약됩니다.

설계 변수 사용을위한 팁

• 변수를 신중하게 구성하십시오. 이름 변수는 묘사하여 복잡한 프로젝트에서 쉽게 식별 할 수 있도록합니다.
• 레버리지 사전 설정 : 디자인 변수를 Divi의 글로벌 사전 설정과 결합하여 모듈에 대한 재사용 가능한 스타일 템플릿을 만들어 새 페이지의 설정 시간을 줄입니다.
• 테스트 대응 성 : 시각적 빌더의 장치를 가로 질러 가변 구동 설계 미리보기 모든 변수가 예상대로 수행되도록합니다.

2. 옵션 그룹 사전 설정이있는 사전 설정 기반 설계

Divi 5의 사전 설정 기반 설계 시스템은 요소 사전 설정과 옵션 그룹 사전 설정의 두 가지 강력한 도구로 스타일링을 혁신합니다. 이러한 기능을 사용하면 구성을 저장하고 재사용하여 일관성을 유지하고 프로젝트 워크 플로우를 간소화 할 수 있습니다.

Divi 5 요소 사전 설정

요소 사전 설정을 사용하면 웹 사이트에서 재사용을 위해 텍스트, 색상, 타이포그래피, 간격 및 호버 효과를 포함한 모듈 구성을 저장할 수 있습니다. 예를 들어, 특정 글꼴, 그라디언트 배경 및 호버 애니메이션으로 완전히 스타일링 된 버튼 모듈을 만들 수 있습니다. 요소 사전 설정으로 저장되면 한 번의 클릭으로 사이트의 모든 버튼에 적용하여 동일한 스타일을 유지할 수 있습니다. 배경을 단색으로 변경하는 것과 같이 사전 설정을 업데이트하면 해당 버튼의 모든 인스턴스가 자동으로 업데이트되어 반복 편집을 제거하고 통합 모양을 보장합니다.

Divi 5 옵션 그룹 사전 설정

대조적으로, 옵션 그룹 사전 세트는 대응 디자인을 위해 다른 요소에 적용 할 수있는 타이포그래피, 테두리 또는 그림자와 같은 재사용 가능한 스타일 그룹에 중점을 둡니다. 예를 들어, 5px 반경이있는 1px 검은 색 테두리에 대한 옵션 그룹 사전 설정을 생성하고 버튼, 이미지 및 행에서 사용할 수 있습니다.

나중에 사전 설정을 2px 테두리로 조정하면 모든 연결된 요소가 즉시 업데이트되어 시간을 절약하고 일관성을 유지합니다. 이 모듈 식 접근법을 사용하면 요소에 걸쳐 스타일 그룹을 혼합하고 일치시킬 수 있으며 제어를 희생하지 않고 유연성을 제공합니다.

사전 설정을 효과적으로 사용하는 방법

스타터 사이트 또는 미리 메이드 레이아웃으로 시작할 때 요소 사전 설정이 이미 존재합니다. 그러나 처음부터 웹 사이트를 만들 때 먼저 웹 사이트를 만들어야합니다. 이러한 사전 설정을 만들면 웹 사이트 전체에서 유사한 모듈을 즉시 스타일링하여 설계 프로세스 속도를 높일 수 있습니다.

요소 사전 세트 생성

요소 사전 설정을 만들려면 원하는 설정과 함께 모듈을 스타일링하십시오. 그런 다음 모듈 설정의 오른쪽 상단에 사전 설정된 메뉴를 클릭하십시오 .

현재 스타일에서 새 사전 설정을 클릭하여 새 사전 설정을 만듭니다.

사전 설정에 이름을 지정하고 기본값으로 할당할지 여부를 선택하고 저장하십시오. 기본 사전 설정으로 선택하면 사이트에 추가 한 모든 아코디언이 동일하게 스타일이되므로 웹 페이지를보다 빠르고 효율적으로 만들 수 있습니다.

옵션 그룹 사전 설정을 만듭니다

옵션 그룹 사전 설정을 만드는 프로세스는 약간 다릅니다. 사전 설정을 모듈에 적용하지 않고 다른 유형의 모듈, 열, 행 또는 섹션으로 전달할 수있는 모듈의 측면에 사전 설정을 할당 할 수 있습니다. 옵션 그룹 사전 설정은 경계 스타일링, 변환 컨트롤, 필터, 박스 그림자 등을 추가하여 더 작은 요소를 일관되게 유지할 수 있습니다.

예를 들어, 이미지와 열에 대한 테두리 스타일을 만들고자합니다. 이미지 모듈을 선택하고 디자인 탭으로 이동 한 다음 그룹 사전 설정 아이콘을 선택할 때까지 테두리 설정 위로 마우스를 가져옵니다.

다음으로 새 사전 설정을 추가하십시오 .

테두리 스타일, 이름을 지정하고 사전 설정을 저장하십시오.

Divi 5의 디자인 기반 사전 설정 사용에 대한 팁

요소 사전 설정과 옵션 그룹 사전 설정을 결합하면 확장 가능한 설계 시스템을 구축 할 수 있습니다. 다음은 Divi 5가있는 웹 페이지를 효과적으로 사용하기위한 몇 가지 팁입니다.

• 효율성을 위해 사용하십시오 : 특히 대형 웹 사이트의 경우 페이지 구축 속도를 높이기 위해 요소 사전 설정 또는 옵션 그룹 사전 설정을 만듭니다. 이 메소드는 모듈, 행 또는 섹션을 반복적으로 스타일링하지 못하게합니다. 당신은 스타일을 앞쪽으로 만들고 필요한 곳에 적용합니다.
• 설계 일관성 설정 : 사전 설정은 요소를 가로 지르는 균일 한 스타일을 보장하여 브랜드 아이덴티티와 전문 광택을 강화합니다.
• 사전 세트 편집 사이트가 설계 변경이 필요한 경우 : 사전 설정을 사용하면 개별 요소를 수동으로 편집하지 않고도 글로벌 스타일을 업데이트 할 수 있으므로 설계 반복 또는 클라이언트 개정에 이상적입니다.
• 확장성에 사용하십시오 : 사전 설정을 설계 변수와 결합하여 종종 업데이트가 필요한 사이트에 대한 강력한 프레임 워크를 만들 수 있습니다. 길 아래에 페이지를 추가해야합니까? 사전 설정을 사용하면 더 빠르고 효율적으로 수행 할 수 있습니다.

3. 유연한 레이아웃을위한 중첩 행

Divi 5의 중첩 행은 Divi 4의 특수 섹션을보다 유연하고 무한한 중첩 가능한 시스템으로 대체합니다. 기존 행과 달리 중첩 행을 열 내에 배치하여 거의 모든 구성에서 행, 모듈 또는 추가 중첩 행을 쌓을 수 있습니다.

중첩 행을 만들려면 시각적 빌더를 통해 열에 또는 열 내 모듈 아래에 하나를 추가하여 모듈 또는 추가 중첩 행으로 채우십시오.

이 기능을 사용하면 복잡한 레이어 레이아웃을 구축 할 수 있습니다. 예를 들어, 정보 섹션에서는 텍스트 모듈 아래에 3 열 중첩 행을 배치하여 버튼을 추가하여 사용자를 다른 페이지로 안내 할 수 있습니다.

Divi 5의 다가오는 Flexbox 컨트롤은 포지셔닝 옵션을 향상시켜 가격 테이블, 포트폴리오 또는 다중 계층 컨텐츠 섹션과 같은 복잡한 설계에 대한 정확한 정렬 및 간격을 제공합니다.

중첩 행을 사용하는 방법

중첩 행의 힘을 활용하려면 시각적 빌더의 다음 단계를 따르십시오.

페이지 레이아웃에 표준 행을 삽입하여 시작하십시오. 이것은 기초 역할을 할 것입니다. 다음으로 새 행 탭을 클릭하여 새 중첩 행의 열 옵션을 공개하십시오.

다음으로 첫 번째 열에 대한 모듈을 선택하십시오. 이 예에서는 이미지입니다.

두 번째 열에서 다른 이미지를 추가하십시오. 국경, 상자 그림자 및 변환 효과를위한 옵션 그룹 사전 설정을 만들 수 있습니다.

중첩 행을 다른 열에 또는 첫 번째 열 아래에 추가 할 수 있습니다. 가능성은 끝이 없습니다.

여러 레벨의 깊이 인 고급 레이아웃을 만들 수 있습니다. 예를 들어, 중첩 행이있는 가격 테이블을 만들어 두 개의 버튼이 나란히 제공되는데, 이는 이전 버전의 Divi가 부족한 기능입니다. 중첩 행을 사용하는 방법에는 여러 가지가있어 Divi가있는 웹 페이지를 작성할 때 다재다능한 기능이됩니다. 영웅 섹션, 팀 페이지, 헤더, 바닥 글 등을 구축하는 데 적합합니다.

중첩 행 사용을위한 팁

• 먼저 레이아웃 계획 : 중첩 행을 추가하기 전에 페이지 구조 개요를 스케치하여 멀티 레이어 영웅 섹션, 가격 테이블 또는 팀 그리드와 같은 값을 제공하는 위치를 결정하십시오.
• 모듈 식 디자인에 사용 : 재사용 가능한 구성 요소를위한 중첩 행을 만들고, 이미지가있는 행 및 평가를위한 텍스트가있는 행과 같이 전체 웹 사이트에서 일관된 스타일을 위해 복제하거나 저장하십시오.
• 모듈 그룹과 결합하십시오 : 중첩 행을 모듈 그룹과 쌍으로하여 복잡한 레이아웃을 구성하십시오.
• Divi의 반응 형 중단 점 : 반응 형 토글을 사용하여 Divi 5의 7 개의 중단 점에서 중첩 행을 테스트하여 중첩 요소가 모든 장치에서 올바르게 일치하는지 확인하십시오.

4. 구성된 컨텐츠에 대한 모듈 그룹

모듈 그룹은 Divi 5의 컨테이너 역할을하여 열 내에서 여러 모듈을 그룹화 할 수 있습니다. 스타일, 이동 또는 단일 장치로 복제 할 수 있습니다. 특히 복잡한 디자인을 위해 워크 플로를 단순화하고 다가오는 Flexbox 지원을위한 단계를 설정하여 훨씬 더 정확한 위치 설정 옵션을 잠금 해제 할 수 있습니다.

여기에서 디자인 모듈과 중첩 행을 추가하거나 옵션 그룹 사전 설정을 그룹에 적용하여 Divi 라이브러리 또는 Divi Cloud에 쉽게 복제하거나 저장할 수있는 스타일 레이아웃을 만들 수 있습니다.

모듈 그룹을 사용하는 방법

모듈 그룹을 만들려면 새 행을 추가하고 열 구조를 선택하십시오. Divi 5의 사용 가능한 옵션에서 그룹 모듈을 선택하십시오.

모듈 그룹 내에서 텍스트, 이미지, 버튼 또는 중첩 행과 같은 모듈을 추가 할 수 있습니다. 예를 들어, 제목, 텍스트, 이미지 및 Call to Action 섹션을위한 버튼이 포함 된 그룹을 만들 수 있습니다.

일단 스타일링되면 그룹의 오른쪽 상단에있는 Ellipsis 메뉴를 클릭하여 모듈 그룹을 저장하거나 복제 할 수 있습니다.

모듈 그룹은 팀 멤버 섹션, 호출 문안 섹션, 내부 페이지 헤더 등을 생성 할 수 있습니다. 그러나 더 중요한 것은 Flexbox 및 루프 빌더와 같은 기능이 출시되면 모듈 그룹이 매우 도움이 될 것입니다.

모듈 그룹 사용 팁

• 모듈 그룹 계획 전략적으로 : CTA, 평가, 팀원 또는 제품 카드와 같은 재사용 가능한 구성 요소에 모듈 그룹을 사용합니다. 그들은 건축 과정을 간소화하고 조직을 유지하는 데 도움이됩니다.
• 모듈 그룹을 사전 설정과 결합하십시오 : 여러 그룹에서 균일 한 그림자 나 국경과 같은 일관된 스타일을 위해 옵션 그룹 사전 설정을 모듈 그룹에 적용하십시오.
• Divi Cloud 사용 : 자주 사용되는 모듈 그룹을 Divi Cloud에 저장하여 프로젝트 전체에 빠르게 액세스 할 수 있도록 특히 유사한 설계 요구가있는 클라이언트를 위해.

모듈 그룹을 사용하면 관리하고 스케일링하기 쉬운 모듈 식의 구성 디자인을 만들 수 있으므로 간단하거나 더 복잡한 웹 페이지를 구축하는 데 이상적입니다.

5. 동적 디자인을위한 고급 장치

Divi 5의 Advanced Units 기능은 단일 입력 필드 내에서 Calc (), Clamp (), Min () 및 Max ()와 같은 기능을 더 넓은 범위의 CSS 장치 (PX, VW, REM, %등) 및 동적 및 반응 형 디자인을 지원합니다. 예를 들어, 뷰포트 크기를 기반으로 스케일링하는 유체 타이포그래피의 경우 섹션의 너비를 calc (100% - 40px) 또는 클램프 (20px, 3VW, 40px)로 설정할 수 있습니다.

고급 장치는 또한 설계 변수로 사용하여 글로벌 규칙을 설정하고 사이트 전체에서 설계를 일관되게 유지할 수 있습니다.

고급 장치를 사용하는 방법

고급 장치를 사용하는 몇 가지 방법이 있지만 가장 효과적인 방법은 설계 일관성을 위해 설계 변수와 결합하는 것입니다. 그러나 모듈 수준에서 할당하려는 인스턴스가있을 수 있습니다.

좋은 예는 텍스트입니다. 물론, 변수 관리자에서 clamp () 공식을 설정하여 전체 사이트에서 크기를 제어 할 수 있지만, 공간을 추가하여 더 나은 공간을 추가하여 더 효과적으로 제목을 만들려면 어떻게해야합니까? 그것이 고급 유닛이 들어오는 곳입니다.

시연하려면 클릭하여 웹 페이지에 제목 모듈을 추가하십시오. 디자인 탭에서 사이징 필드로 이동하십시오.

너비 필드 옆에 아이콘을 클릭하여 고급 장치 옵션을 공개하십시오.

드롭 다운 메뉴에서 VW (뷰포트 너비)를 선택하고 50을 입력하십시오. 이것은 제목이 뷰포트 너비의 50%를 차지하도록 지시 할 것입니다. 뷰포트는 웹 브라우저 창의 가시 영역입니다. 따라서 브라우저 창이 얼마나 넓은 지에 관계없이 항상 브라우저 창의 너비의 절반이됩니다.

헤드 라인이 다른 화면 크기에서 어떻게 보이는지 미리 볼 때, 제목이 같은 너비를 유지하는 것을 알 수 있습니다.

고급 장치 사용 팁

• 간단한 시작 : 간단한 설계를 위해 px 또는 %와 같은 기본 단위로 시작한 다음 Clamp (), calc (), VH 또는 VW를 실험하여 반응 형 효과를 얻으십시오.
• 타이포그래피에 클램프를 사용하십시오 : 클램프 ()를 글꼴 크기 또는 간격에 적용하여 수동 브레이크 포인트없이 화면 크기에 적응하는 유체, 접근 가능한 디자인을 만듭니다.
• 설계 변수와 결합 : 제목 및 바디 텍스트에 자주 사용되는 단위를 설계 변수로 저장하여 일관성을 유지하고 업데이트를 단순화합니다.

Advanced Units는 Divi의 No-Code 인터페이스 내에서 사용자 정의 CS의 정밀도를 제공하므로 모든 장치에 완벽하게 적응하는 동적이고 전문적인 웹 페이지를 쉽게 구축 할 수 있습니다.

6. Divi Ai 통합

Divi AI는 자연어 프롬프트를 기반으로 텍스트, 이미지, 코드 또는 전체 섹션 및 레이아웃을 생성하여 설계 프로세스를 향상시킵니다. Divi 5의 Visual Builder 내에서 작동하여 약간의 디자인이나 카피 라이팅이 필요할 때 쉽게 도움이됩니다.

예를 들어, "헤드 라인, 버튼 및 배경 이미지가있는 현대적인 영웅 섹션 만들기"와 같은 프롬프트를 사용할 수 있습니다. Divi AI는 완전히 스타일의 레이아웃을 생성하여 비전에 맞게 수동으로 세분화 할 수 있습니다.

Divi AI를 사용하면 디자인 프로세스 속도를 높이거나 작가의 블록을 극복하거나 필요할 때 약간의 창의적 추진력을 얻을 수 있습니다.

Divi ai를 사용하는 방법

Divi 5에서 웹 페이지를 작성할 때 Divi AI를 최대한 활용하려면 브랜드 사본을 작성하거나 이미지를 작성하거나 기존 모듈에 CSS를 추가하거나 섹션을 생성하는 데 도움이 될 수 있습니다. Divi AI는 방문자와 공감하는 아름다운 웹 페이지를 만드는 데 도움이됩니다.

기존 텍스트 모듈에서 Divi AI를 사용하려면 텍스트 영역 위로 가져 가서 컨텐츠 탭에서 Divi AI 아이콘을 클릭하십시오.

여러 옵션이있는 대화 상자가 나타납니다. 기존 컨텐츠를 작성하고 교체하고, 연장, 단축 또는 단순화하거나, 철자 및 문법을 고치거나, 번역하거나, 톤을 변경할 수 있습니다.

옵션을 선택하면 Divi AI는 기존 컨텐츠에 따라 사본을 변경합니다. 완료되면 텍스트를 사용하거나 재 시도하거나 AI로 개선하거나 몇 가지 안내 단어로 결과를 개선 할 수 있습니다.

Divi AI 사용에 대한 팁

• 프롬프트와 구체적으로 설명하십시오. Divi AI를 사용하여 이미지 또는 섹션을 만들 때 톤, 색상 또는 레이아웃 환경 설정과 같은 세부 정보를 포함하십시오. 텍스트와 코드도 마찬가지입니다. 더 구체적 일수록 출력이 더 좋습니다.
• 필요에 따라 반복 : 초기 출력이 이상적이지 않으면 프롬프트를 개선하거나 여러 가지 변형을 생성하여 가장 적합한 것을 찾으십시오.
• 영감을 위해 사용하십시오 : Divi AI를 사용하는 가장 좋은 방법 중 하나는 웹 페이지를 크게 사용자 정의 할 계획이더라도 레이아웃 개념이나 태그 라인을 생성하는 것과 같은 아이디어를 브레인 스토밍하는 것입니다.

Divi 5로 웹 페이지를 구축하기위한 모범 사례

Divi 5의 기능에 대한 전략적 접근 방식을 채택하는 것은 잠재력을 극대화하는 데 필수적입니다. 디자인 시스템을 선불 계획부터 시작하십시오. 기본 및 보조 색상, 관련 링크, 타이포그래피 설정 및 글꼴과 같은 핵심 설계 변수를 정의하십시오.

페이지를 작성할 때는 버튼 호버 효과, 그림자 또는 타이포그래피와 같은 재사용 가능한 스타일을위한 옵션 그룹 사전 설정을 설정하여 워크 플로우 속도를 높이고 사이트 전체에서 응집력있는 미학을 유지하십시오.

조기에 테스트하고 종종 긍정적 인 결과에 중요합니다. Divi 5의 반응 형 중단 점을 사용하여 고급 장치를 미리보기하여 모든 장치에서 잘 보이도록하십시오. Divi 5의 반응 형 토글은 탐색 할 7 가지 중단 점을 제공하여 다양한 크기의 화면에 디자인이 어떻게 나타나는지에 대한 더 나은 아이디어를 제공합니다.

요소 사전 설정을 옵션 그룹 사전 설정과 결합하여 유연성과 일관성의 균형을 맞 춥니 다. 스타일링 된 CTA 모듈과 같은 특정 모듈에 요소 사전 설정을 사용하십시오. 대조적으로, 균일 성을 유지하려면, 국경 스타일이나 그림자와 같은 공유 속성에 대한 옵션 그룹 사전 설정을 적용하십시오. 업데이트가 필요한 경우 개별 요소를 수동으로 편집하지 않고 전역 변경에 대해 이러한 사전 설정 그룹을 조정할 수 있습니다.

마지막으로, 성능과 유용성을 유지하기 위해 디자인을 간단하게 유지하십시오. 필요한 경우에 대한 초과 줄을 피하거나 복잡한 calc () 공식에 의존하지 않으면 편집을 복잡하게 할 수 있습니다. 마찬가지로 웹 사이트에서 재사용하려는 필수 설계에 대한 모듈 그룹을 만듭니다.

Divi 5로 더 똑똑한 웹 페이지를 구축하십시오

Divi 5는 WordPress 웹 디자인을 재정의하여 놀랍고 반응이 좋은 웹 페이지를 쉽게 구축 할 수 있습니다. 현대적인 시각적 빌더, 직관적 인 제어, 혁신적인 기능 및 Divi AI는 프로세스를 간소화하여 최소한의 노력으로 전문적인 결과를 보장합니다. 기술 수준에 관계없이 이러한 도구는 효과적이고 역동적 인 웹 사이트를 더 빠르고, 더 똑똑하며, 창의적으로 구축 할 수 있습니다.

Divi 5의 잠재력을 탐색 할 준비가 되셨습니까? 오늘 Divi 5 알파 릴리스를 다운로드하고 최신 기능을 실험하여 비전을 생생하게하십시오. Divi 5는 새로운 사이트에 적합하지만 아직 기존 사이트를 변환하는 데 권장되지 않습니다.

우리는 당신의 생각을 듣고 싶습니다! 아래에 댓글을 달면 피드백을 공유하십시오. 더 좋은 점은 소셜 미디어에 대한 Divi 5 경험에 대해 게시하여 단어를 전파하는 데 도움이됩니다.