Divi 5 초보자 안내서 : 기본을 마스터하는 방법

Divi 5에 대해 듣고 현재 상태에 대해 궁금해한다면,이 Divi 5 초보자 가이드가 당신을위한 것입니다.

Divi 5는 Divi Visual Builder의 미래이며 WordPress 사용자가 신뢰하고 사랑합니다. 처음부터 재건 된 Divi 5는 더 빠른 성능과보다 직관적 인 경험을 제공합니다. 그것은 Divi가 현대적이고 확장 가능한 기초로 유명한 모든 것을 결합하여 모든 사람이 쉽게 웹 디자인을 제공합니다.

이 게시물에서는 Divi를 처음 접했거나 Divi 4에서 전환하든 Divi 5 사용에 대해 자신감을 갖고 자신을 안내해 드리겠습니다.

Divi 5는 알파 단계에 있지만 오늘날 새로운 웹 사이트에서 사용할 준비가되었습니다.

Divi 5는 무엇입니까?

Divi 5는 Divi WordPress 테마의 최신 버전이지만 업데이트 이상입니다. Divi의 웹 사이트 제작 프레임 워크의 완전한 재건으로, 맞춤형 코드를 작성하지 않고도 창의적인 제어를 제공하도록 설계되었습니다.

Divi 5의 중심에는 더 빠르고 현대화 된 시각적 빌더가 있습니다. 가볍고 반응이 좋으며 느린 하중 시간, 부풀린 출력 및 빌더 지연과 같이 Divi 4에서 사용자가 직면 한 일반적인 문제를 제거합니다. 모든 것이 더 빨라지고 매끄럽고 직관적 인 느낌이 듭니다.

전환 도구, 코드 작성 또는 설정시 시간 낭비없이 아이디어에서 시작으로 이동하는 데 도움이됩니다. 방법은 다음과 같습니다.

• 더 빨리 반응하고 가벼워지며 지연과 정밀도로 드래그, 떨어 뜨리고 사용자 정의 할 수있는 실시간 비주얼 빌더 . 여기서 직접 테스트하십시오.
• 다양한 산업 및 목표에 맞는 아름다운 페이지 디자인을 적용하는 데 도움이되는 사전 설계된 디비 레이아웃.
• 텍스트와 이미지에서 슬라이더, 갤러리, 양식, 가격 테이블 등을 처리하는 수십 개의 디비 모듈.
• Divi와 같은 마케팅 도구는 분할 테스트를위한 리드, 이메일 옵트 인 블룸 및 소셜 공유를위한 군주.
• 사전 설정, 디자인 변수 및 글로벌 스타일과 같은 고급 사용자 정의 옵션을 사용하면 디자인을 일관되고 브랜드를 유지할 수 있습니다.

Divi 5가 눈에 띄게 만드는 것은 의도적 인 느낌입니다. 레이아웃에서 인터페이스, 성능에 이르기까지 전체 경험은 더 빠르게 움직이고 정리하고 좌절없는 코드 노드 워크 플로우를 즐길 수 있도록 설계되었습니다.

Divi 4에서 Divi 5로 전환하기가 쉽습니까?

Divi 5는 Divi 4의 후임자이므로 더 좋습니다. 따라서 4를 나누는 데 익숙하다면 전환에 대한 아이디어가 압도적이라고 느낄 수 있습니다. 그러나 Divi 5가 뒤로 호환성 으로 만들어 졌다고 말하면서 시작합시다. 이것은 모든 Divi 4 웹 사이트가 Divi 5와 함께 작동한다는 것을 의미합니다.

Divi 5는 또한 Divi 4에 대해 당신이 사랑하는 모든 것을 유지하지만 더 나아집니다. 전반적인 직관적 인 경험은 익숙하지 않으므로 Divi 5에 빨리 익숙해 질 수 있습니다. Divi 4에서 Divi 5로 전환 해야하는 몇 가지 이유에 대해 논의 해 봅시다.

Divi 5 Builder는 더 빠르고 최적화 된 성능을 제공합니다

Divi 5는 현대 건축을 사용하여 건축되었습니다. 가장 큰 개선 사항 중 하나는 단축 코드를 제거하는 것입니다. 이로 인해 Divi 4에서 부풀린 출력과 성능이 느려집니다. 빌더는 이제 빠르게로드되어 전체적으로 훨씬 가벼워집니다.

또 다른 주요 업그레이드는 더 똑똑한 재 렌더링입니다. Divi 4에서는 작은 변경조차도 레이아웃 전체에서 불필요한 업데이트를 유발할 수 있습니다. Divi 5는 복잡한 페이지에서도 실제로 변화하는 것을 다시 렌더링하고 지연을 줄이고 경험을 매끄럽게 유지합니다.

밀리 초 Divi 4 (왼쪽)가 시각적 빌더를로드하는 데 걸립니다. Divi 5는 거의 즉시로드합니다.

이 속도를 지원하기 위해 설정 패널에서 전환 애니메이션을 제거하고 불필요한 재생비를 최소화하고 업데이트가 실시간으로 적용되는 방법을 개선했습니다. 이러한 작은 변화는 빌더가 클릭 할 때마다 더 반응을 느끼게 만듭니다.

Divi 5는 더 쉽고 간단한 편집 경험을 제공합니다

작은 세부 사항은 종종 구축 방식에 가장 큰 영향을 미칩니다. Divi 5는 빌더 인터페이스를보다 직관적으로 만드는 다양한 미묘하지만 강력한 개선 사항을 도입합니다.

우선, 컨텐츠 편집이 그 어느 때보 다 빠릅니다. 원 클릭 편집을 사용하면 모든 텍스트 나 모듈을 직접 클릭하고 추가 단계가없고 메뉴간에 토글링이없는 타이핑을 시작할 수 있습니다. 그것은 전체 경험을 즉각적이고 힘들게 느끼게 만듭니다. (Divi 4에서는 모듈의 설정 패널을 열려면 여러 번의 클릭이 필요했습니다.)

또 다른 업그레이드는 패널 도킹 으로 설정 패널을 화면의 양쪽으로 고정시킬 수 있습니다. 이렇게하면 변경 사항을 변경하고 작업 영역을 커버하는 것을 방지 할 때 레이아웃을 완전히 볼 수 있습니다. (이 기능은 Divi 4에 존재하지 않습니다.)

설정 패널 상단에있는 새로운 빵 부스러기는 레이아웃 구조의 정확한 위치를 보여 주므로 특히 깊이 중첩 된 요소로 작업 할 때 항상 자신이 어디에 있는지 알 수 있습니다.

Divi 4에는 존재하지 않은 건축업자의 밝은 모드와 다크 모드 를 전환 할 수 있습니다.이 업데이트는 더 깨끗하고 집중된 편집 공간을 제공하여 시각적 혼란과 불필요한 클릭을 줄이므로 작업 공간을 더 잘 제어 할 수 있습니다.

Divi 5는 설정 관리 및 설계 조직을 단순화합니다

Divi 5는 스타일, 레이아웃 설정 및 반응 형 조정을 관리하기위한보다 체계적이고 직관적 인 시스템을 제공합니다.

각 설계 설정 내에서 직접 반응 형 및 호버 상태를 전환하여 뷰를 전환하지 않고 모든 상호 작용 및 화면 크기에 대한 간격, 타이포그래피 또는 효과를 미세 조정하여 미세 조정할 수 있습니다.

마찬가지로, 모듈 사전 설정, 설계 변수 및 옵션 그룹 사전 설정은 사이트 전체에서 쉽게 적용하고 관리 할 수 ​​있습니다. (우리는 이것을 아래 섹션에서 자세히 다룹니다.)

Divi 5를 사용하면 파운데이션을 개선하고 새로운 고급 기능을 추가하여 사용자 정의 코딩없이 웹 디자인 워크 플로우를 최적화하는 데 도움이됩니다. 2 주마다 업데이트가 릴리스되면 여기에서만 더 좋아지고 있습니다.

새로운 Divi 5 기능을 알아야합니다

최근 Divi 5에 추가 한 새로운 기능과 웹 사이트를 더 빨리 구축하는 데 어떻게 도움이되는지 살펴 보겠습니다.

1. 사용자 정의 가능한 중단 점은보다 반응 형 유연성을 제공합니다

Divi 5에서 가장 흥미로운 추가 사항 중 하나는 사용자 정의 가능한 반응 형 중단 점입니다. Divi 4에서는 전화, 태블릿 및 데스크탑의 표준 세 가지 장치 크기로 제한되었습니다. 보다 구체적인 화면 너비에 대해 사용자 정의 코드를 사용하여 레이아웃을 미세 조정해야했습니다.

Divi 5를 사용하면 그 제한이 사라졌습니다. 이제 Phone Wide, Tablet Wide, Widescreen 및 Ultra Wide를 포함하여 7 개의 사전 정의 된 중단 점에 액세스 할 수 있습니다.

설계 요구에 따라 이러한 추가 중단 점을 활성화하거나 비활성화 할 수 있으며 전체 제어를 위해 폭 값을 변경할 수 있습니다. 이는 반응 형 웹 사이트를 구축 할 때 훨씬 더 많은 유연성을 제공합니다.

중단 점을 관리하려면 세 개의 점을 클릭하여 Sitewide Responsive Breakpoints 패널을 열십시오. 추가하려는 새 중단 점을 전환하고 원하는 경우 너비 제어를 위해 새 값을 수정하십시오.

중단 점을 비활성화 할 때 스타일을 잃는 것에 대해 걱정하지 마십시오. Divi는 백그라운드에서 저장하므로 나중에 중단 점을 다시 활성화하면 사용자 정의가 바로 돌아올 것입니다. 이것은 작업을 잃지 않고 다른 반응 형 디자인을 테스트하는 데 적합합니다.

2. 설계 변수는 일관된 브랜딩 시스템을 정의하는 데 도움이됩니다.

디자인 변수는 표면에서 작게 느껴질 수 있지만 사용을 시작하면 워크 플로우를 완전히 변환합니다. 다른 모듈에서 동일한 글꼴, 색상 또는 간격 값을 수동으로 조정하는 대신 한 번 정의하고 사이트에서 재사용합니다. 변수를 업데이트하면 모든 인스턴스가 자동으로 업데이트되어 시간을 절약하고 설계를 일관성있게 유지합니다.

이는 브랜드 일관성이 중요한 다중 페이지 사이트 또는 클라이언트 프로젝트에 특히 도움이됩니다. 바디 텍스트 크기, 제목 색상, 버튼 패딩 또는 링크 스타일과 같은 변수를 설정할 수 있습니다. 모든 H4를 조정 해야하는 경우 모든 블록을 사냥 할 필요는 없습니다. 변수 값을 한 번만 변경하십시오.

설계 속성뿐만 아니라 회사 주소, 제품 링크 및 배경 주제와 같은 일반적으로 반복되는 컨텐츠 값을 저장하여 빠른 액세스를 할 수도 있습니다. 이렇게하면 수동 작업에서 벗어나 반복 콘텐츠를 더 잘 구성하는 데 도움이됩니다.

시각적 빌더 내부에서 변수 관리자 아이콘을 클릭하고 숫자, 텍스트, 이미지, 링크, 색상 및 글꼴의 6 가지 변수 유형 중에서 선택하십시오.

이 예에서는 텍스트 변수를 만들어 봅시다. 변수의 이름을 지정하고 그 값을 추가 한 다음 저장하십시오 .

텍스트 변수를 적용하려면 수정하려는 요소를 클릭하십시오. 우리의 경우 주소. 텍스트 변수이므로 설정 패널의 컨텐츠 로 이동하여 본문 위로 이동하여 동적 컨텐츠 아이콘을 찾으십시오. 이제 저장된 변수를 클릭하여 적용하십시오.

3. 옵션 그룹 사전 설정 사전 설정 기반 설계 시스템을 단순화합니다

옵션 그룹 사전 설정을 통해 배경 설정, 간격, 상자 그림자, 국경 등과 같은 스타일을 저장 및 재사용하면 많은 시간을 절약 할 수 있습니다. 전체 요소 (섹션, 행, 열, 모듈)에 적용되는 Divi 4의 기존 요소 사전 설정에 이미 익숙 할 수 있습니다.

Divi 5의 옵션 그룹 사전 설정은 한 걸음 더 깊이 들어갑니다. 이를 통해 모듈 내의 특정 디자인 옵션 그룹에 사전 설정을 작성하고 적용 할 수 있습니다. 예를 들어, 다른 것에 영향을 미치지 않고 옵션 그룹 사전 설정으로 테두리 설정을 저장할 수 있습니다.

그렇게하려면 먼저 선호하는 설정을 사용자 정의 한 다음 사전 설정으로 저장합니다. 아래에서 버튼 섀도우를 Box Shadow 2 로 저장하고 다른 버튼에 적용했습니다.

특정 호버 효과, 테두리 및 색상으로 버튼 스타일을 재사용하려면 간격 및 텍스트 스타일 만 남겨두면 옵션 그룹 사전 설정을 사용하면 그렇게 할 수 있습니다. 나머지 모듈에 영향을 미치지 않고 필요한 설정 만 적용 할 수 있습니다.

디자인 변수는 글꼴, 색상 및 간격과 같은 핵심 값을 제어하는 ​​데 도움이되지만 옵션 그룹 사전 설정은 한 레벨 더 깊게 이동합니다. 그들은 전체 스타일 섹션을 글로벌 사전 설정으로 그룹화하고 재사용 할 수 있도록합니다. 이들은 함께 사전 설정 기반 설계 시스템을 형성하여 사용자 정의 코드를 작성하지 않고도 일관된 레이아웃을 신속하게 구축 할 수 있도록 도와줍니다.

4. 복잡한 레이아웃 설계를위한 중첩 행

중첩 행은 복잡한 레이아웃 자유를 원하는 디자이너를 위해 제작되었습니다. 중첩 행을 사용하면 여러 섹션이나 코드 해결 방법을 지속적으로 저글링하지 않고도 더 정교한 레이아웃을 구축 할 수 있습니다.

그들은 특히 착륙 페이지, 제품 쇼케이스, 멀티 컬럼 블로그 레이아웃 또는 비대칭 포트폴리오에서 최고의 작품을 선보일 때 복잡한 레이아웃을 쉽게 관리하고 편집하기에 직관적으로 만듭니다.

중첩 행을 컨텐츠 모듈로 추가하십시오. Black Plus 버튼을 클릭하고 새 행 으로 전환 한 다음 선호하는 행 유형을 선택하십시오.

일단 삽입되면 최상위 행과 똑같이 동작합니다. 또한 각 중첩 행은 완전한 반응 형 설정을 유지하므로 중단 점에서 동작 방식을 제어 할 수 있습니다. 더 이상 기본 행과 열에서 생각하는 것에 국한되지 않습니다. 중첩 행을 사용하면 디자인 워크 플로우를 깨끗하고 시각적으로 유지하면서 층으로 생각합니다.

5. 모듈 그룹을 구성하는 모듈 그룹

모듈 그룹은 Divi 5의 새로운 컨테이너 요소입니다. 이들은 여러 관련 모듈을 시각적 빌더 내의 단일 접을 수있는 그룹으로 번들로 제공 할 수 있습니다. 이렇게하면 특히 반복 요소 나 중첩 디자인으로 가득 찬 복잡한 레이아웃을 처리 할 때 페이지의 큰 섹션을보다 관리하기 쉽게 만들 수 있습니다.

제목, 이미지, 설명, 버튼 및 라인 분배기가있는 제품 쇼케이스 블록을 상상해보십시오. 디자인을 복제하거나 조정할 때마다 각 모듈을 개별적으로 선택하거나 이동하는 대신 한 번 그룹화하여 하나의 장치로 취급 할 수 있습니다.

모듈 그룹은 다른 Divi 5 모듈로 존재합니다. 그룹 모듈을 선택하여 추가하십시오. 더 많은 모듈을 추가 할 수 있으며 모두 하나의 모듈 그룹으로 그룹화됩니다.

6. 고급 장치는 더 똑똑한 반응 형 디자인을 최적화하는 데 도움이됩니다.

Divi 4에서 대부분의 스타일 입력은 픽셀 및 백분율과 같은 기본 단위로 제한되었습니다. 고급 장치를 사용하면 Divi 5의 시각적 설정으로 Clamp () 와 같은 강력한 CSS 기능을 포함하여 REM, EM, VW, VH, % 및 강력한 CSS 기능을 포함하여 훨씬 더 넓은 범위의 CSS 장치를 사용할 수 있습니다.이 기능은 반응 형 디자인 및 확장 가능한 타이포그래피에 관심을 갖는 설계자에게 도움이됩니다.

예를 들어, Clamp ()를 사용하여 패딩 또는 글꼴 크기의 최소, 이상적, 최대 값을 설정하여 수십 개의 사용자 정의 중단 점을 만들지 않고도 장치에서 디자인이 세련되게 보일 수도 있습니다. 제목의 클램프 (36px, 4VW, 48px)는 글꼴 크기를 36px에서 시작하도록 설정하고 뷰포트 너비의 4%를 기준으로 스케일로 설정하고 48px에서 성장을 중단합니다.

이 값은 모든 설정에 포함됩니다. 고급 단위 값을 정의하여 숫자 설계 변수를 만들 수도 있습니다.

이러한 기능을 통해 유연하고 반응이 좋으며 일관된 웹 사이트를보다 쉽게 ​​구축 할 수 있습니다. 사용자 정의 CSS를 작성하거나 해결 방법에 의존하지 않고도 빌더 내에서 직접 디자인을 더 많이 제어 할 수 있습니다.

그러나 이것은 단지 시작일뿐입니다. 지금까지 본 것은 Divi 5가 제공하는 것의 일부일뿐입니다. 우리는 더 똑똑하고 빠르게 구축하도록 설계된 더 많은 기능을 적극적으로 작업하고 있습니다. Divi 5는 핵심적으로 웹 디자인을 더 똑똑하게 만드는 것입니다. 모든 업데이트는 워크 플로를 단순화하고 덜 노력하면서 아름다운 웹 사이트를 구축 할 수있는 도구를 제공하는 데 중점을 둡니다. 지금부터 Divi 5를 마스터 링하는 이점이 최종 출시 준비가되기 전에 이점을 제공 할 것입니다.

Divi 5 내부의 모습

Divi 5가있는 웹 사이트 구축이 어떻게 보이는지 봅시다. 그렇게하려면 먼저 작업 WordPress 설정이 필요합니다. 이는 웹 호스트를 선택하고, 도메인 이름을 등록하고, 사이트에 WordPress를 설치하는 것을 의미합니다. 이 게시물의 다음 부분에 집중하기 전에이 실행이 있다고 가정하겠습니다.

1. Divi 5를 다운로드, 설치 및 활성화합니다

다음은 Divi를 구매, 설치 및 활성화하기위한 비디오 자습서입니다.

구매가 성공하면 우아한 테마 멤버십 영역에 로그인 할 수 있습니다. 이제 Divi 5 Zip 폴더를 다운로드하십시오.

WordPress 대시 보드로 돌아갑니다. 이 쿼리를 따르십시오 : 모양> 테마> 테마 추가> 테마 업로드. 그런 다음 컴퓨터에서 Divi 5 Zip 파일을 업로드하고 지금 설치를 클릭하십시오.

설치되면 테마를 활성화하십시오 .

마지막으로, Divi 라이센스를 활성화하십시오. 그렇게하면 선택한 서비스에 효과적으로 액세스 할 수 있습니다. 프로세스는 자동이므로 ET 멤버십 로그인 자격 증명으로 한 번 더 로그인하십시오.

이 작업을 마치면 Divi 5 대시 보드에 액세스 할 수 있습니다. 대시 보드는 Divi 라이센스 상태, 업데이트, 페이지, 템플릿 등과 같은 정보를 제공합니다. 웹 사이트 기반을 구축하는 데 사용할 Divi Quick 사이트도 표시됩니다.

Divi로 시작하십시오

2. Divi 5를 사용하여 웹 사이트를 만듭니다

Divi 5를 사용하여 전체 웹 사이트를 구축하는 가장 빠른 방법은 Divi 빠른 사이트를 사용하는 것입니다.

두 가지 옵션 중에서 선택합니다.

• 미리 만든 스타터 사이트를 사용하면 Divi 5는 선택한 사이트의 브랜딩 및 컨텐츠를 사용하여 기본 웹 사이트를 구축합니다.
• 또는 Divi AI에 고유 한 웹 사이트를 만들도록 지시하기 위해 AI로 사이트를 생성하십시오 .

스타터 사이트를 사용하여 프로세스가 어떻게 보이는지는 다음과 같습니다. 스타터 사이트를 선택하고 웹 사이트 로고 및 작성하려는 페이지와 같은 몇 가지 세부 정보를 작성하십시오.

그리고 AI에서 작동하는 방법은 다음과 같습니다. 당신은 당신의 웹 사이트에 대해 divi ai에게 말하고 그것을 요리 할 때까지 기다립니다.

Divi 빠른 사이트는 웹 사이트 구축 프로세스 속도를 높이려면 완벽합니다. 자신의 브랜딩, 컨텐츠 및 스타일로 더 자세히 사용자 정의 할 수있는 기성품 구조를 제공합니다. 빈 페이지에서 시작하거나 모든 레이아웃을 처음부터 디자인 할 필요는 없습니다.

새 페이지를 처음부터 작성하거나 Divi Visual Builder에 액세스하려면 페이지를 추가하십시오.

이제 페이지의 이름을 지정하고 Divi Builder 사용을 클릭하십시오.

Divi Visual Builder에 들어갑니다.

3. Divi 5 Visual Builder 기본 사항에 대해 배우십시오

Divi 5 Visual Builder에 처음으로 액세스하는 경우 많은 아이콘이 표시되므로 여기에는 빠른 연습이 있습니다.

• (1.) 왼쪽 사이드 바 패널 : 이 패널에는 빌더 도구가 포함되어 있습니다. 사전 제작 된 레이아웃을 추가하고, 레이아웃 라이브러리에 액세스하고, 레이어를 사용하여 구조를보고, 와이어 프레임보기로 전환하고, 디자인 변수를 저장하고, 빌더 설정을 조정하고, 도움을받을 수 있습니다.
• (2) 상단 막대 : 응답 모드간에 전환 할 수 있습니다. 너비 및 줌 컨트롤은 중단 점에서 레이아웃 간격을 미세 조정하는 데 도움이됩니다. 또한 UNDO/REDO, CLEAR LAYOUT, HISTER 및 SAING 옵션을 여기에서 찾을 수 있습니다. 또한 출구, 미리보기, 드래프트 저장 및 게시 버튼을 게시하여 진행 상황을 관리합니다.
• (3) 오른쪽 사이드 바 : 모듈을 클릭하면 오른쪽에서 설정이 열립니다. 콘텐츠를 추가하고 스타일링하며 여기에 사용자 정의 CS를 추가 할 수 있습니다. 상단의 빵 부스러기 (페이지> 섹션> 행> 열)는 레이아웃 내에서 모듈이 어디에 있는지 정확히 보여줍니다.

다음으로, 섹션 (파란색으로 표시)과 행 (항상 녹색)의 컨테이너 요소가 있습니다. 내부 행에는 모듈을 추가 할 수있는 열이 있습니다 (검은 색) .

섹션을 추가하려면 Blue Plus 버튼을 클릭합니다. 행의 경우 녹색 플러스 버튼이고 모듈의 경우 검은 색입니다. 선택할 수있는 다양한 유형의 행 옵션이 제공됩니다. 줄 안에는 열이 있습니다.

내부 행과 열면 제목, 이미지 등과 같은 콘텐츠 모듈을 추가합니다. Divi 5는 연락처 양식, 회원 평가 등을 추가하려는 모든 목적으로 200 개가 넘는 컨텐츠 모듈을 제공합니다.

최근 모듈 그룹 모듈을 사용하면 다른 요소를 그룹화하여 자체 모듈을 작성하고 저장할 수 있습니다. ( 회색 색상은 모듈 그룹을 나타냅니다.)

4. Divi 5로 사이트 페이지를 만듭니다

Divi Quick 사이트를 사용하지 않더라도 사전 제작 된 레이아웃을 가져 오거나 Divi AI를 사용하여 전체 레이아웃을 생성 할 수 있습니다. Blue Plus 버튼을 클릭하십시오.

(1.) 2500 개 이상의 사전 제작 레이아웃 중에서 선택할 수 있으며 (2) Divi AI에게 페이지를 생성하도록 지시 할 수 있습니다. 미리 메이드 레이아웃을 가져 오는 방법은 다음과 같습니다.

Divi AI로 빌드하기로 선택한 경우 빌드하려는 페이지에 대해서만 알려야합니다.

페이지 디자인 사용자 정의

Divi Quick Site, Pre-Made Layout 또는 Divi AI를 사용하여 페이지를 만든 경우이를 사용자 정의해야합니다. 웹 사이트 전체에 지속적으로 브랜딩을 추가하려면 가장 쉬운 방법은 디자인 변수를 정의하는 것입니다.

이러한 글로벌 값 (예 : 기본 색상 및 글꼴)은 사용하는 곳마다 자동으로 적용됩니다. 이를 수정하려면 변수 관리자의 변수 값을 변경하십시오.

모든 모듈을 편집하려면 모듈을 클릭하면 오른쪽 패널에서 설정이 나타납니다.

모든 모듈 설정 패널에는 세 가지 탭이 포함됩니다.

• 내용 : 모듈의 실제 컨텐츠를 추가하거나 편집하는 곳입니다. 또한 링크를 추가하거나 배경을 선택하거나 관리자 레이블을 변경하여 모듈을보다 쉽게 ​​식별 할 수 있습니다.
• 디자인 : 디자인 탭으로 전환하면 모듈의 시각적 모양을 스타일링 할 수 있습니다. 글꼴 크기, 무게, 색상, 선 높이, 간격, 정렬 등을 변경할 수 있습니다. 모듈마다 설정 옵션이 다릅니다.
• 고급 : 고급 탭을 사용하면 더 많은 기술 옵션을 완전히 제어 할 수 있습니다. 사용자 정의 CSS를 추가하고 반응 형 가시성을 설정하는 등을 설정하십시오. 디자인 탭이 제공하는 것 이상으로 사용자 정의하려는 경우 특히 유용합니다.
• 노트북 아이콘을 사용하면 응답 형 모드와 호버 모드를 전환 할 수 있습니다. 하나의 모드로 전환하면 모든 설정을 사용자 정의하고 저장할 수 있습니다.
• 기본 사전 설정 버튼은 Divi의 사전 설정 기능입니다. 요소 사전 설정과 옵션 그룹 사전 설정의 차이점은 다음과 같습니다.

작가의 블록을 다루는 경우 Divi AI를 사용하여 내용 (텍스트, 이미지 및 코드)을 추가하십시오. 거의 모든 모듈을 사용하면 AI를 사용할 수 있습니다. 작은 AI 아이콘을 찾기 만하면됩니다.

페이지를 사용자 정의 한 후에는 드래프트를 저장하는 것을 잊지 마십시오. 그런 다음 모든 것이 올바르게 작동하는 것을 보고 페이지를 게시하십시오 .

Divi로 시작하십시오

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

Divi 5는 흥미 진진한 단계 - 공개 알파 단계에 있습니다. 지상 업그레이드 및 주요 성능 향상을 거칩니다. 이제 남은 것은 새로운 기능 릴리스와 사소한 수정 사항입니다.

이것은 또한 건축을 시작하기에 완벽한 시간입니다. 빨리 시작할수록 Divi 5 베타가 완전히 시작될 때 더 편안합니다. 다음은 Divi 회원 자격을 최대한 활용하는 몇 가지 방법입니다.

1. 새로운 릴리스로 업데이트하십시오

새로운 기능 업데이트는 수정 또는 성능 조정뿐만 아니라 웹 사이트 구축 방법을 변경하는 강력한 도구도 있습니다. 사용자 정의 가능한 중단 점에서 디자인 변수, 중첩 행 및 고급 장치에 이르기까지 각 추가 기능은 Divi 5의 새로운 기초를 구축하여 더 많은 제어와 속도를 제공합니다.

루프에 머무르려면 Nick이 정기적으로 연습 및 발표 공유를 공유하는 Elegant Themes YouTube 채널을 구독하십시오.

YouTube 채널을 구독하십시오

2. 새로운 Divi 5 Builder를 실험하십시오

Divi 5 Visual Builder는 빠르고 반응이 좋으며 효율성을 위해 구축됩니다. 모든 새로운 기능이 추가되면 워크 플로우를 최적화하는 데 기여하며 새로운 전략을 개발하기 위해 실험을 계속하는 것이 좋습니다. 도움을주기 위해 우리는 접근 방식을 공유하기위한 새로운 기능 자료를 게시합니다. 예를 들어, 다른 행 구조에 대한 게시물은 중첩 행을 사용하여 지능형 레이아웃을 만드는 방법을 보여줍니다.

우아한 테마 블로그를 정기적으로 방문하여 Divi 5를 사용할 수있는 창의적인 방법을 찾는 습관을 가지십시오.

3. Divi 커뮤니티의 Divi 5 팁 및 요령에 대한 공유 및 검색

Divi 5로 실험을 시작하면 다른 사람들이 어떻게 사용하는지 보는 것이 중요합니다. 전 세계의 디자이너와 개발자도 동일한 새로운 기능을 탐색하고 창의적인 레이아웃을 시도하고 결과를 공유하고 있습니다.

스마트 한 브레이크 포인트에서 시간을 절약하는 디자인 변수 설정에 이르기까지 다른 사람들이 자신의 빌드에 어떻게 접근하는지 지켜 볼 수있는 것이 많이 있습니다. 공식 Divi Facebook 그룹 또는 Divi 중심 포럼에 가입하여 튜토리얼을 발견하고 질문을하며 Divi 5와 함께 일하는 사람들로부터 신선한 아이디어를 얻으십시오. 기술을 키우고 최신 상태를 유지하는 가장 빠른 방법 중 하나입니다.

4. Divi 5로 새로운 웹 사이트를 구축하십시오

Divi 5 (현재)를 사용하는 가장 좋은 방법은 새로운 웹 사이트를 처음부터 구축하는 것입니다. 새로운 프로젝트를 시작하면 기다릴 이유가 없습니다. 더 빠른 성능, 클리너 코드 및 더 나은 편집 경험을 얻을 수 있습니다.

그러나 기존 Divi 4 사이트에서 작업하는 경우 Divi 5로 마이그레이션하기 전에 조금 더 기다리는 것이 좋습니다.

Divi 5는 여전히 활발한 개발 중이므로 일부 Divi 4 모듈 및 타사 확장은 아직 완전히 지원되지 않을 수 있습니다. 즉, 모든 웹 사이트가 다르기 때문에 매번 그렇지는 않습니다. 확실하지 않은 경우 가장 좋은 방법은 사이트의 호환성을 확인하는 것입니다. 도움을주기 위해 Divi 5 Migrator 도구를 만들었습니다.

기존 Divi 4 사이트를 스캔하고 어떤 모듈이 호환되는지, 그렇지 않은 모듈 및주의가 필요한 모듈을 알려줍니다. 이를 통해 라이브 사이트를 위험에 빠뜨리지 않고 정보에 입각 한 결정을 내릴 수 있습니다.

그러나 우리는 베타 릴리스에 매우 가깝기 때문에 Divi 5를 사용하는 새로운 웹 사이트를 만들고 Divi 4 사이트를 전환하기 전에 조금 더 기다리는 것이 좋습니다.

5. Divi Design 시스템을 구축하십시오

Divi 5는 많은 기능을 소개하므로 어떤 기능을 사용할 것인지, 어떤 기능을 사용해야하는지 결정하는 것이 혼란 스러울 수 있습니다. 예를 들어, 설계 변수를 정의하는 경우 옵션 그룹 사전 설정도 사용해야합니까? 이것을 파악하는 가장 좋은 방법은 자신에게 맞는 것을 실험하고 알아내는 것입니다. 새로운 기능이 출시되면 프로세스를 계속 개선 할 수 있습니다.

일관성을 위해 설계 변수로 웹 사이트 빌드를 시작한 다음 옵션 그룹 및 요소 사전 설정 내부에서 사용할 수 있습니다. 이 구조화 된 접근 방식은 시간을 절약하고 브랜딩을 유지하며 몇 번의 클릭만으로 글로벌 스타일을 업데이트 할 수 있습니다.

6. 버그를보고 할 때 버그를보고하십시오

Divi 5는 여전히 활발한 개발 중이므로 그 과정에서 몇 가지 버그가 발생할 수 있습니다. 당신이 할 때, 우리는 당신이 그것들을보고하기를 바랍니다. 팀이 문제를 더 빨리 해결하는 데 도움이되고 베타 릴리스에 한 걸음 더 가까이 다가갑니다. 또한 Divi 5의 의심에 대해 우리에게 의존하는 것을 환영합니다. 우리의 지원 팀은 신속하게 응답하고 여기에 도움을 줄 수 있으며, Pro 사용자는 긴급한 모든 것에 대한 24/7 VIP 지원을받습니다.

웹 디자인 여행을 시작하려면 Divi 5를 선택하십시오

Divi 5는 완전한 웹 사이트 구축 프레임 워크를 제공하며, 지상에서 현대화되고 재건됩니다. 그것의 모든 부분은 워크 플로를 단순화하고, 성능을 높이고, 웹 디자인의 미래를 설정하도록 설계되었습니다.

• 경쟁보다 낫다 : 대부분의 빌더는 화려한 기능에 중점을 두지 만 Divi 5는 제어, 속도 및 실제 사용성에 중점을 둡니다. 그것은 당신에게 대항하지 않고 당신과 함께 일하도록 만들어졌습니다.
• Divi 4 : Divi 4의 주요 업그레이드는 이미 WordPress 사용자에게 사랑을 받았습니다. Divi 5는 사람들이 좋아하는 모든 것을 유지하고 자신이하지 않은 모든 것을 수정합니다. 더 빠르고 가볍고 확장 가능합니다.
• 한 곳의 모든 도구 : 시각적 편집에서 AI 컨텐츠, 클라우드 스토리지, 빠른 사이트 제작 및 마케팅 도구에 이르기까지 Divi 5는 강하게 시작하고 빠르게 성장하는 데 필요한 모든 것을 제공합니다.

오늘 웹 디자인 여행을 시작하는 경우 Divi 5로 시작하십시오. 웹이 어디로 가고 있는지가 아닌 곳을 위해 구축되었습니다.

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