Divi는 확실히 다음 중 하나입니다. 워드 프레스 테마 요즘 가장 인기있는. 이 테마의 강점을 구성하는 요소 중 하나는 빌더(Divi Builder)입니다. 비주얼 컴포저.

Divi Builder는 표준 "백엔드 빌더"와 "비주얼 빌더"의 두 가지 형태로 제공됩니다. 두 인터페이스 모두 동일한 콘텐츠와 동일한 디자인 매개 변수로 정확히 동일한 유형의 웹 사이트를 구축 할 수 있습니다. 유일한 차이점은 인터페이스입니다. 백엔드 빌더는 WordPress 대시 보드 내에 있으며 다른 모든 표준 WordPress 설정으로 액세스 할 수 있습니다.

WordPress 사용자 인터페이스 내부에 있으며 표준 WordPress 게시물 편집기를 대체합니다. 대시 보드 내부에있는 동안 빠르게 변경하는 데 유용하지만 대시 보드에 의해 제한되며 웹 사이트의 블록 표현으로 렌더링됩니다. 이 튜토리얼은 비주얼 빌더에만 초점을 맞출 것입니다.

DIVI 워드 프레스 테마 다운로드

반면에 완전히 새로운 Visual Builder를 사용하면 웹 사이트의 프런트 엔드에 페이지를 만들 수 있습니다! 놀라운 경험이며 훨씬 더 빠른 디자인을 가능하게합니다. 비주얼 빌더 내에서 콘텐츠를 추가하거나 디자인 설정을 조정하면 변경 사항이 즉시 나타납니다.

페이지를 클릭하고 입력을 시작할 수 있습니다. 텍스트를 강조 표시하고 글꼴과 스타일을 조정할 수 있습니다. 새로운 콘텐츠를 추가하고 페이지를 구축하며 눈앞에서 일어나는 모든 것을 볼 수 있습니다.

Visual Builder를 사용하는 방법

WordPress 대시 보드에 로그인하면 웹 사이트의 프런트 엔드에있는 페이지로 이동하여 WordPress 관리 표시 줄의 "Visual Builder 활성화"버튼을 클릭하여 빌더를 시작할 수 있습니다. 시각적.

대시 보드에서 페이지를 편집하는 경우 Divi Builder 백엔드 인터페이스 상단에있는 "Visual Builder 활성화"버튼을 클릭하여 비주얼 빌더로 전환 할 수 있습니다 (먼저 비주얼 빌더 버튼이 나타나기 전에 Divi Builder를 활성화하십시오).

비주얼 빌더의 기본

Divi의 힘은 콘텐츠 조각을 결합하고 배열하여 거의 모든 유형의 웹 사이트를 구축 할 수있는 "Drag and Drop"과 함께 작동하는 페이지 빌더 인 Visual Builder에 있습니다.

빌더는 섹션, 행 및 모듈의 세 가지 기본 빌딩 블록을 사용합니다. 한꺼번에 사용하면 수많은 레이아웃을 만들 수 있습니다. 섹션은 가장 큰 빌딩 블록이며 행 그룹을 포함합니다. 행은 섹션 내부에 있으며 모듈을 수용하는 데 사용됩니다. 모듈은 행 내부에 배치됩니다. 이것은 각 Divi 웹 사이트의 구조입니다.

섹션

Divi로 레이아웃을 디자인하는 데 사용되는 가장 기본적이고 가장 큰 빌딩 블록은 섹션입니다. 대규모 콘텐츠 그룹을 만드는 데 사용되며 페이지에 가장 먼저 추가합니다. 섹션에는 일반, 특수 및 전체 너비의 세 가지 유형이 있습니다.

일반 섹션은 열 행으로 구성되고 전체 너비 섹션은 화면의 전체 너비를 넓히는 전체 너비 모듈로 구성됩니다. 특수 섹션은 더 고급 측면 레이아웃을 허용합니다.

열

행은 섹션 내부에 있으며 섹션 내부에 원하는 수의 행을 배치 할 수 있습니다. 선택할 수있는 다양한 유형의 열이 있습니다. 행의 열 구조를 정의했으면 원하는 열에 모듈을 배치 할 수 있습니다. 열에 배치 할 수있는 모듈 수에는 제한이 없습니다.

모듈

모듈은 웹 사이트를 구성하는 콘텐츠입니다. 각 Divi 모듈은 모든 열 너비에 적응할 수 있으며 모두 완벽하게 반응합니다.

첫 페이지를 구축

세 가지 기본 빌딩 블록 (섹션, 선 및 모듈)은 페이지를 작성하는 데 사용됩니다.

첫 번째 섹션 추가

페이지에 항목을 추가하려면 먼저 섹션을 추가해야합니다. 파란색 (+) 버튼을 클릭하여 섹션을 추가 할 수 있습니다. 페이지에 이미있는 섹션 위로 마우스를 가져 가면 파란색 (+) 버튼이 아래에 나타납니다. 클릭하면 현재 마우스를 올려 놓은 섹션 아래에 새 섹션이 추가됩니다.

새 페이지를 시작하면 첫 번째 섹션이 자동으로 추가됩니다.

첫 줄 추가

첫 번째 섹션을 추가 한 후 내부에 열 행 추가를 시작할 수 있습니다. 섹션에는 여러 행이 포함될 수 있으며 다양한 유형의 열에서 행을 혼합하고 일치시켜 다양한 레이아웃을 만들 수 있습니다.

행을 추가하려면 빈 섹션 안에있는 녹색 (+) 버튼을 클릭하거나 현재 행 위로 마우스를 가져 가면 나타나는 녹색 (+) 버튼을 클릭하여 아래에 새 행을 추가합니다. 녹색 (+) 버튼을 클릭하면 열 유형 목록이 표시됩니다. 원하는 열을 선택하면 첫 번째 모듈을 추가 할 준비가 된 것입니다.

첫 번째 모듈 추가하기

모듈은 행 내부에 추가 될 수 있으며 각 행은 여러 모듈을 포함 할 수 있습니다. 모듈은 페이지의 콘텐츠 요소이며 Divi는 빌드하는 데 사용할 수있는 40 개 이상의 다양한 요소와 함께 제공됩니다.

텍스트, 이미지 및 버튼과 같은 기본 모듈이나 슬라이더, 포트폴리오 갤러리 및 전자 상거래 상점.

모듈을 추가하려면 빈 열 안에있는 회색 (+) 버튼을 클릭하거나 페이지의 모듈 위로 마우스를 가져 가면 존재하는 회색 (+) 버튼을 클릭하여 아래에 새 모듈을 추가하세요. . 버튼을 클릭하면 모듈 목록이 표시됩니다.

원하는 모듈을 선택하면 페이지에 추가되고 모듈의 제어판이 나타납니다. 이 제어판을 사용하여 모듈 구성을 시작할 수 있습니다.

이것이 이 튜토리얼의 내용입니다. 오늘 배운 내용으로 Divi로 레이아웃을 만들 수 있습니다. 우리는 주제에 대한 고급 자습서로 돌아올 것입니다. 당신은 이미 다운로드 할 수 있습니다 디비 테마.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target ="blank "layout =" 확장된 "align ="center "font_family =" Raleway "font_weight = 700 ″ 스타일 = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI 테마 다운로드 [/ vcex_button] [/ width_column] [»vc_column] » 1/2 ″] [vcex_button URL = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" 대상 = "빈" 레이아웃 = "확장" 정렬 = "중앙" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] 템플릿 다운로드 DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

다른 Divi 자습서

• 레스토랑 이용 디비 테마 5 웹 사이트
• Divi WooCommerce 제품에 텍스트를 추가하는 방법
• Divi 페이지 간의 메뉴 색상을 변경하는 방법
• Divi로 블로그 그리드를 개인화하는 방법
• 어떻게 워드 프레스의 역할 디비 편집기를 사용하는
• 전체 화면 Divi 슬라이더를 만드는 방법
• Divi 페이지 간의 메뉴 색상을 변경하는 방법
• Divi에 대해 잘 모르는 기능
• WordPress에 Divi Builder를 사용하는 방법
• Divi 비디오 스크롤 모듈을 사용하는 방법
• Divi Builder Flip 모듈을 사용하는 방법
• Divi Builder에서 회원 평가 모듈을 추가하는 방법
• Divi 텍스트 모듈을 사용하는 방법
• Divi에서 슬라이더를 만드는 방법
• Divi 사용자 역할을 편집하는 방법
• Divi Social Media 모듈 사용 방법
• 테마 WordPress Divi에서 상점 모듈을 사용하는 방법
• Divi 사이드 바 모듈을 사용하는 방법
• Divi Price 테이블 모듈을 사용하는 방법
• Divi 발행물의 제목 모듈을 사용하는 방법
• Divi의 비디오 모듈을 추가하는 방법
• 기사 탐색 모듈을 사용하는 방법
• Divi 검색 모듈 사용 방법
• Divi 지갑 모듈 사용 방법
• Divi Builder에서 person 모듈을 사용하는 방법
• Divi 필터와 함께 Wallet 모듈을 사용하는 방법
• 전체 너비 슬라이더 모듈을 사용하는 방법
• Divi Builder 이미지 모듈을 사용하는 방법
• Divi Builder의 전체 너비 탐색 모듈을 사용하는 방법
• 이미지 갤러리 모듈을 사용하는 방법
• Divi Builder Full-Width Module을 사용하는 방법
• Divi Full Width 포트폴리오 모듈을 사용하는 방법
• Divi 전폭 헤더 모듈 사용 방법
• Divi Counter Module 사용 방법
• Divi Builder에서 아티클 슬라이더를 사용하는 방법
• Divi Email Optin 모듈을 사용하는 방법