Divi 제품 하이라이트: Divi Essential

Divi Essential은 Divi Builder에 60개 이상의 새로운 모듈을 추가하여 구축할 수 있는 디자인의 가능성을 확장하는 플러그인입니다. 이 플러그인을 사용하면 고급 탭, 콘텐츠 토글, 동적 슬라이더, 고유한 이미지 및 콘텐츠 모듈, 팀 섹션, 소셜 모듈 등을 추가할 수 있습니다. 각 모듈에는 복잡한 레이아웃을 쉽게 디자인할 수 있는 강력한 기능과 광범위한 디자인 옵션이 포함되어 있습니다.

Divi Essential에는 모듈을 활용하는 600개 이상의 미리 만들어진 섹션 레이아웃, 30개의 시작 레이아웃, 여러 페이지가 포함된 6개의 전체 템플릿에 대한 액세스도 함께 제공됩니다. 이러한 레이아웃은 모두 Divi Essential 웹사이트에서 다운로드할 수 있으며 디자인 프로세스 속도를 높이는 데 도움이 될 수 있습니다. 이 게시물에서는 Divi Essential이 귀하에게 적합한 제품인지 결정하는 데 도움이 되도록 자세히 살펴보겠습니다.

시작하자!

Divi Essential 설치

Divi Essential은 .ZIP 플러그인 파일로 제공됩니다. 플러그인을 설치하려면 WordPress 대시보드에서 플러그인 페이지를 열고 새로 추가를 클릭하세요. 파일 선택을 클릭하고 컴퓨터에서 플러그인 파일을 선택한 다음 지금 설치를 클릭합니다.

플러그인이 설치되면 플러그인을 활성화하십시오.

Divi Essential은 Divi Builder에 65개의 새로운 모듈을 추가합니다. 모듈 삽입 메뉴에서 Divi Essential 모듈 버튼을 클릭하거나 “다음”을 검색하면 모든 Divi Essential 모듈이 표시되어 추가된 모듈에 접근할 수 있습니다.

Divi 필수 모듈

60개 이상의 새로운 모듈은 Divi Builder에 많은 기능을 추가합니다. 각 모듈에는 모양과 기능을 완벽하게 사용자 정의할 수 있는 콘텐츠, 디자인 및 고급 옵션이 함께 제공됩니다. Divi Essential의 사전 제작 레이아웃을 사용하여 이러한 모듈 중 일부를 자세히 살펴보겠습니다.

크리에이티브 모듈

페이지에 추가할 수 있는 10가지 크리에이티브 모듈이 있습니다. 각 모듈은 레이아웃에 고유한 기능이나 디자인을 추가합니다. 아래에서 강조할 모듈 외에도 Divi Essential에는 플로팅 요소, 고유 구분선, 프로모션 상자, Lottie 애니메이션 및 프로세스를 보여주는 단계 흐름 섹션을 추가하는 모듈이 함께 제공됩니다.

다음 고급 탭

고급 탭 모듈을 사용하면 가로 및 세로 탭 콘텐츠 섹션을 만들 수 있습니다. 각 탭의 제목, 부제, 아이콘/이미지를 설정할 수 있습니다. 이 예는 고급 탭 레이아웃 1입니다.

각 탭의 본문 내에서 표시할 Divi 라이브러리 레이아웃을 선택하거나 제목, 설명, 이미지/아이콘, 버튼을 편집하여 콘텐츠를 추가할 수 있습니다.

이 모듈에는 전체 모듈은 물론 개별 탭에 대한 광범위한 디자인 설정이 함께 제공됩니다. 디자인의 모든 측면을 사용자 정의하고, 요소에 대해 다양한 호버 효과를 선택하고, 선택한 탭에 활성 스타일을 설정하는 등의 작업을 수행할 수 있습니다.

다음 영업 시간

이 모듈을 사용하면 귀하의 웹사이트에 영업시간을 쉽게 표시할 수 있습니다. 사진의 예는 디자인 레이아웃 2입니다. 모듈 내에서 각 요일을 항목으로 추가할 수 있습니다. 각 항목은 자체적으로 사용자 정의할 수 있으며, 모듈 디자인 옵션을 사용하여 각 항목에 스타일을 적용할 수도 있습니다.

다음 콘텐츠 토글

콘텐츠 토글 모듈은 콘텐츠 간 전환에 사용할 수 있는 토글을 페이지에 추가합니다. 이 예(레이아웃 2)에서 토글은 단일 라이센스 또는 평생 라이센스의 세부 정보 표시 간을 전환하는 데 사용됩니다.

토글 섹션에 Divi 라이브러리 항목을 추가하도록 선택하거나 모듈 설정 내에 콘텐츠를 추가할 수 있습니다. 각 섹션의 디자인은 물론 토글 디자인도 맞춤 설정할 수 있습니다.

다음 이미지 핫스팟

이 모듈을 사용하면 마우스를 올리면 콘텐츠를 표시하는 이미지에 핫스팟을 추가할 수 있습니다. 공개될 텍스트와 이미지를 추가할 수 있으며, 디자인 옵션으로 각 요소를 맞춤 설정할 수 있습니다. 핫스팟 아이콘과 색상은 쉽게 변경할 수 있으며, 핫스팟 위치는 디자인 설정에서 가로, 세로 위치를 변경하여 설정할 수 있습니다. 아래 예는 레이아웃 1입니다.

다음 타임라인

타임라인 모듈을 사용하여 이벤트, 조직의 역사, 프로세스 등을 시각적으로 표현할 수 있습니다. 타임라인 모듈 내에서 각 타임라인 섹션을 구성하는 개별 타임라인 요소를 추가할 수 있습니다. 각 타임라인 요소에 텍스트, 이미지, 버튼, 아이콘을 추가할 수 있습니다. 각 요소는 디자인 탭에서 맞춤 설정할 수 있어 독특한 타임라인 디자인을 만들 수 있습니다. 아래 그림은 타임라인 레이아웃 11입니다.

슬라이더 모듈

Divi Essential을 사용하여 사이트에 추가할 수 있는 6가지 슬라이더 모듈이 있습니다. 로고 캐러셀, 이미지 및 텍스트 캐러셀, 3D 큐브 슬라이더, 갤러리 슬라이더, 추천 캐러셀, 게시물 캐러셀을 추가할 수 있습니다. 몇 가지 슬라이더 모듈을 자세히 살펴보겠습니다.

3D 큐브 슬라이더

3D 큐브 슬라이더 모듈은 3D 큐브 효과로 뒤집히는 슬라이더를 추가합니다. 이미지, 텍스트, 배경을 사용하여 각 슬라이드를 맞춤설정할 수 있습니다. 슬라이더 설정 내에서 자동 재생, 탐색, 효과 설정은 물론 모든 디자인 옵션을 변경할 수 있습니다. 그림의 예는 레이아웃 4입니다.

다음 Divi 회전목마

캐러셀 레이아웃 17입니다. 선택할 수 있는 레이아웃은 이미지, 텍스트, 이미지 내부 텍스트, 이미지 아래 텍스트 등 4가지입니다. 이를 통해 다양한 레이아웃이 가능해졌습니다.

각 캐러셀 항목은 물론 캐러셀 모듈 자체의 레이아웃과 디자인을 완전히 제어할 수 있습니다. 캐러셀 자동 재생 설정 변경, 탐색 설정 변경, 효과 수정, 라이트박스 기능 추가 등을 수행할 수 있습니다.

이미지 모듈

12개의 다양한 이미지 모듈을 갖춘 Divi Essential은 웹사이트에 이미지를 창의적으로 표시할 수 있는 다양한 방법을 제공합니다. 이미지 돋보기, 벽돌 레이아웃, 이미지에 다양한 로딩 및 호버 효과를 추가하는 모듈, 이미지 호버 상자, 전후 슬라이더 등을 추가할 수 있습니다. 몇 가지 이미지 모듈을 살펴보겠습니다.

다음 전 후

비포 앤 애프터 모듈을 사용하면 드래그할 수 있는 슬라이더를 통해 공개되는 비포 및 애프터 사진을 표시할 수 있습니다. 이 레이아웃은 레이아웃 4 전 후입니다.

전후 이미지를 설정하고, 라벨을 수정하고, 슬라이더 방향과 기능을 변경하고, 디자인을 사용자 정의할 수 있습니다.

다음 원형 이미지 호버

원형 이미지 호버 모듈을 사용하면 호버 효과로 콘텐츠를 표시하는 원형 이미지를 만들 수 있습니다.

선택할 수 있는 19가지 호버 효과와 4가지 호버 방향이 있어 디자인에 많은 유연성을 제공합니다.

다음 이미지 아코디언

이미지 아코디언 모듈은 디자인에 대화형 이미지 아코디언을 추가합니다. 아코디언의 이미지 중 하나 위로 마우스를 가져가면 콘텐츠가 확장되어 표시됩니다. 각 이미지에 아이콘, 제목, 설명, 버튼을 추가하도록 선택할 수 있습니다. 이 예에서는 페이지가 로드될 때 세 번째 이미지가 열리도록 설정되어 있습니다. 다른 이미지 위로 마우스를 가져가면 해당 이미지가 확장되고 확장된 상태를 유지합니다.

마우스를 올리거나 클릭할 때 아코디언이 움직이도록 설정할 수 있으며, 수직 또는 수평으로 열리도록 설정할 수 있습니다.

콘텐츠 모듈

콘텐츠 카테고리에는 19개의 모듈이 있습니다. 이 모든 기능을 사용하여 콘텐츠를 동적으로 표시하고 매력적인 레이아웃을 만들 수 있습니다. 상자와 광고 문구, 다양한 텍스트 효과가 포함된 모듈, 버튼, 블로그 게시물 슬라이더 등을 추가할 수 있습니다. 일부 모듈을 살펴보겠습니다.

다음 3D 플립 박스

3D Flip Box 모듈을 사용하면 마우스를 올리면 3D 효과로 뒤집히는 동적 상자를 가질 수 있습니다. 상자 뒷면에 다른 디자인을 적용할 수 있습니다. 이 예는 레이아웃 7입니다.

모듈 설정에서는 앞면과 뒷면에 있는 요소를 맞춤 설정할 수 있습니다. 아이콘, 이미지, 제목 텍스트, 본문 텍스트, 버튼을 추가할 수 있습니다. 디자인 탭에서는 모든 요소의 모양을 맞춤 설정할 수 있습니다.

다음 광고문

광고문 모듈은 매우 다재다능하며 고유한 레이아웃을 만드는 데 사용할 수 있는 다양한 콘텐츠와 디자인 옵션을 제공합니다. 여기에 사용된 광고 문구의 예는 레이아웃 11입니다. 마우스로 움직이는 호버에 대한 기울기 효과가 특징입니다.

모듈 설정에서 사전 제목 활성화, 제목 텍스트 및 제목 태그 설정, 게시물 제목 텍스트 활성화, 설명 추가, 이미지 및 아이콘 추가, 버튼 추가 등을 수행할 수 있습니다. 사용 가능한 광범위한 디자인 옵션을 통해 이미지 마스크, 광고문이나 버튼에 고유한 호버 효과 등을 추가할 수 있습니다.

다음 버튼

버튼 모듈에는 버튼에 매력적인 효과를 추가할 수 있는 다양한 옵션이 포함되어 있습니다. 배경 전환, 호버 효과, 아이콘 호버 효과, 스트로크 효과, 2D 효과를 추가하고, 배경 이미지를 설정하고, 배경 gif를 추가하는 등의 작업을 수행할 수 있습니다. 이 예에서는 2D 효과가 있는 버튼 모음을 사용하고 있습니다. 성장 회전 버튼의 크기가 어떻게 증가하고 마우스를 올리면 약간 회전하는지 확인할 수 있습니다.

다음 텍스트 애니메이션

텍스트 애니메이션 모듈을 사용하면 텍스트에 모든 종류의 애니메이션 효과를 추가할 수 있습니다. 이것은 예제 레이아웃 10이며 타이핑 효과를 제공합니다. 전후 텍스트를 설정하고, 애니메이션이 적용되는 텍스트를 추가하고, 애니메이션 효과를 선택할 수 있습니다. 텍스트 스타일은 디자인 탭에서 추가로 사용자 정의할 수 있습니다.

다음 텍스트 색상 모션

텍스트 색상 모션 모듈을 사용하면 텍스트 색상에 애니메이션을 적용할 수 있습니다. 이 예는 레이아웃 9입니다.

여러 가지 애니메이션 스타일 중에서 선택하고 눈길을 끄는 그라데이션 효과를 만드는 네 가지 텍스트 색상을 선택할 수 있습니다.

팀 모듈

Divi Essential에는 5가지 팀 모듈이 포함되어 있어 독특한 섹션과 효과로 팀 구성원을 뽐낼 수 있습니다.

다음 팀 오버레이 카드

팀 오버레이 카드 모듈을 사용하면 마우스를 올리면 설명이나 소셜 미디어 아이콘과 같은 추가 콘텐츠가 표시되는 오버레이로 팀 구성원을 보여줄 수 있습니다. 표시된 예는 독특한 터치를 추가하는 곡선 테두리가 특징인 레이아웃 1입니다.

다음 팀 소셜 공개

이 모듈을 사용하면 마우스를 올리면 팀 구성원 설명 섹션 아래에 소셜 미디어 아이콘이 표시됩니다. 이 예는 레이아웃 1입니다.

소셜 모듈

Divi Essential은 소셜 미디어를 웹사이트에 연결하는 방법을 추가합니다. Facebook의 경우 공유, 좋아요, 삽입된 비디오, 댓글, 삽입된 댓글, 삽입된 게시물, 삽입된 페이지 등의 모듈을 추가할 수 있습니다. Twitter의 경우 타임라인, 트윗, Twitter 버튼 또는 팔로우 버튼을 추가할 수 있습니다.

다음 FB 댓글

다음은 Facebook 댓글 모듈입니다. 이 모듈을 사용하면 사용자가 Facebook 계정으로 사이트 콘텐츠에 댓글을 달 수 있도록 할 수 있습니다. 디자인 탭의 옵션을 사용하여 디자인을 사용자 정의할 수 있습니다.

다음 트위터 타임라인

이 모듈을 사용하면 페이지에 Twitter 타임라인을 추가할 수 있습니다. 설정해야 할 것은 트위터 계정 사용자 이름뿐입니다. 그러면 타임라인이 나타납니다. 디자인 설정을 통해 타임라인을 맞춤 설정할 수 있습니다.

모듈 검토

웹사이트에 고객 리뷰와 사용후기를 표시하는 데 사용할 수 있는 세 가지 리뷰 모듈이 있습니다.

다음 Divi 리뷰

리뷰 모듈을 사용하면 페이지에 고객 리뷰를 추가할 수 있습니다. 이름, 직책, 설명을 추가할 수 있고, 모듈별 별점을 설정할 수 있습니다. 레이아웃 예시 1 입니다.

다음 추천 슬라이더

이 모듈을 사용하면 슬라이더를 추가하여 고객 추천 및 리뷰를 표시할 수 있습니다. 이것은 레이아웃 11입니다. 각 추천 슬라이드는 모듈에 항목으로 추가됩니다. 즉, 각 슬라이드의 디자인을 개별적으로 사용자 정의할 수 있고 슬라이드 디자인 전체를 사용자 정의할 수 있습니다. 각 슬라이드에 등급, 텍스트, 이미지를 추가할 수 있습니다. 슬라이더 설정에서 슬라이더 자동 재생을 선택하고, 슬라이더 전환 설정을 조정하고, 탐색 설정을 변경할 수 있습니다. 디자인 탭의 옵션을 사용하면 원하는 대로 슬라이더의 모양을 사용자 정의할 수 있습니다.

Divi Essential 스타터 레이아웃

위에서 살펴본 모듈 및 모듈 레이아웃 외에도 Divi Essential에는 사용할 수 있는 30개의 시작용 단일 페이지 레이아웃도 제공됩니다. 하나를 자세히 살펴보겠습니다.

투어 레이아웃

투어 구성입니다. 디자인은 애니메이션과 대화형 요소로 가득 차 있습니다. 제목은 다중 제목 모듈을 사용하며 표시 효과가 있습니다. 아래에는 로고 캐러셀, 광고문 3개, 목적지를 표시하는 캐러셀이 있습니다. 다음은 오른쪽에 떠 있는 이미지와 일부 콘텐츠 및 숫자 카운터가 있는 섹션입니다. 지도 섹션에서는 핫스팟 모듈을 활용하여 목적지를 정확히 찾아내고 호버에 대한 정보를 표시합니다. 마지막으로 추천 슬라이더, 뉴스레터 가입, 바닥글이 있습니다.

Divi Essential 사전 구축된 웹사이트

Divi Essential에는 여러 페이지가 포함된 6개의 전체 웹사이트 템플릿도 제공됩니다.

정원사 템플릿

정원사 템플릿의 홈 페이지를 살펴보겠습니다. 이 페이지 외에도 템플릿에는 회사 소개, 서비스, 갤러리, 프로젝트, 프로젝트 세부 정보 및 연락처 페이지가 포함되어 있습니다.

페이지는 여러 제목, 큰 이미지, 부동 요소, 버튼 및 여러 배경 그래픽이 포함된 히어로 섹션으로 열립니다. 다음 섹션에는 서비스를 강조하는 4개의 광고 모듈이 있습니다. 다음은 떠다니는 효과가 있는 일부 텍스트와 이미지가 포함된 또 다른 섹션입니다. 제목 콘텐츠에는 공개 애니메이션이 있습니다. 아래 서비스 섹션도 Divi Essential 광고 모듈을 활용하고 회전 애니메이션이 포함된 플로팅 요소와 마우스를 올리면 콘텐츠를 확장하고 표시하는 이미지 아코디언이 이어집니다.

다음은 광고 모듈이 있는 또 다른 섹션이고, 그 뒤에는 전체 너비 배경 이미지와 플로팅 그래픽이 있는 섹션이 있습니다. 이 아래에 가격표 섹션이 있습니다.

홈페이지를 계속 진행하면 로고 슬라이더와 이전/이후 슬라이더가 있고 그 뒤에 추천 슬라이더가 있습니다. 마지막으로 페이지는 뉴스레터 가입 양식으로 끝납니다.

Divi Essential 구입처

Divi Essential은 Divi 마켓플레이스에서 구매하실 수 있습니다. 무제한 웹사이트 사용과 1년 지원 및 업데이트 비용은 79달러입니다. 가격에는 30일 환불 보장도 포함되어 있습니다.

마지막 생각들

Divi Essential에는 웹사이트에 새로운 기능과 동적 레이아웃을 추가하는 모듈이 포함되어 있습니다. 저는 각 모듈과 함께 제공되는 사용자 정의 가능성과 광범위한 옵션에 깊은 인상을 받았습니다. Divi Essential과 함께 제공되는 데모 레이아웃, 시작용 한 페이지 레이아웃 및 사전 구축된 웹 사이트 템플릿은 모두 자신의 디자인 목적에 맞게 쉽게 사용하고 수정할 수 있는 고품질 디자인인 것 같습니다. Divi로 디자인할 수 있는 가능성을 확장할 올인원 플러그인을 찾고 있다면 Divi Essential이 훌륭한 선택입니다.

우리는 당신의 의견을 듣고 싶습니다! Divi Essential을 사용해 보셨나요? 의견을 통해 이에 대해 어떻게 생각하는지 알려주세요!