Divi 제품 하이라이트: Divi 디자이너 팩

Divi Designer Pack은 Divi Builder와 함께 사용할 수 있는 720개 이상의 디자인 요소가 포함된 레이아웃 팩으로 다음 웹사이트를 쉽게 만들 수 있습니다. 밝고 어두운 레이아웃과 페이지의 각 섹션에 대한 다양한 디자인이 함께 제공됩니다. 이 게시물에서는 Divi Designer Pack과 함께 제공되는 일부 레이아웃을 살펴보고 이 제품이 귀하에게 적합한지 확인합니다.

시작하자!

Divi 디자이너 팩 설치

Divi Designer Pack은 Divi Library .json 파일이 포함된 .ZIP 파일로 제공됩니다. 필요에 따라 모든 레이아웃, 특정 범주의 모든 레이아웃 또는 특정 범주의 모든 밝거나 어두운 레이아웃을 설치할 수 있도록 레이아웃이 패키징됩니다.

레이아웃을 설치하려면 먼저 파일 관리자에서 .ZIP 파일의 압축을 풉니다. 그런 다음 WordPress 대시보드를 열고 Divi 라이브러리 페이지로 이동합니다. 상단에서 가져오기 및 내보내기를 클릭한 다음 가져오기 탭을 선택합니다. 가져올 .json 레이아웃 팩 파일을 선택한 다음 Divi Builder 레이아웃 가져오기를 선택합니다.

레이아웃을 가져오면 Divi Builder에서 페이지를 엽니다. 파란색 더하기 아이콘을 클릭하여 새 섹션을 추가한 다음 라이브러리에서 추가를 선택합니다.

Divi 라이브러리에서 사용하려는 레이아웃을 찾습니다.

그런 다음 이 섹션 사용 버튼을 클릭하여 페이지에 레이아웃을 로드합니다.

디비 디자이너 팩

Divi Designer Pack은 밝은 디자인과 어두운 디자인이 모두 포함된 다양한 웹 사이트 섹션을 위한 720개 이상의 레이아웃과 함께 제공됩니다. 각 레이아웃은 원하는 대로 사용자 정의할 수 있으며 콘텐츠는 모두 자신의 것으로 교체할 수 있습니다. 이 팩과 함께 제공되는 다양한 레이아웃이 있기 때문에 이 게시물에서 모두 다룰 수는 없습니다. Divi Designer Pack으로 얻을 수 있는 디자인에 대한 아이디어를 제공하기 위해 각 카테고리의 몇 가지 레이아웃을 살펴보겠습니다. 라이브 데모 웹사이트에서 모든 레이아웃을 볼 수도 있습니다.

Divi Designer 디자인 섹션

Divi Designer 섹션 정보

섹션 레이아웃은 총 25개입니다. 레이아웃 2에는 이미지와 숫자가 있는 겹치는 텍스트 상자가 있습니다. 일부 광고 모듈과 함께 오른쪽에 텍스트가 있습니다.

다음은 레이아웃 2의 어두운 버전입니다.

레이아웃 11은 왼쪽에 일부 텍스트와 오른쪽에 이미지가 있는 투톤 디자인, CTA 버튼, 소셜 미디어 아이콘이 있는 일부 광고 문구 모듈을 특징으로 합니다.

레이아웃 17 정보는 이미지 주위에 그라데이션 모양을 사용합니다. 화살표 아이콘이 있는 광고 문구 모듈과 함께 왼쪽에 일부 텍스트와 CTA 버튼이 있습니다.

Divi 디자이너 블로그 섹션

어둡고 밝은 변형이 있는 총 7개의 블로그 섹션이 있습니다. 이 섹션에는 블로그에서 선택한 게시물이 표시됩니다. 레이아웃 1은 이미지에 대한 확대 호버 효과와 게시물 제목에 대한 밑줄 호버 효과가 있는 단순하고 미니멀한 디자인입니다.

세 번째 블로그 레이아웃에는 오른쪽 상단의 CTA 버튼과 약간의 그림자 호버 효과가 있는 카드가 있습니다.

다음은 블로그 레이아웃 5의 어두운 변형입니다. 게시물 제목에 밑줄을 추가하고 카드를 약간 위로 이동시키는 호버 효과가 특징입니다.

블로그 레이아웃 7은 상단에 게시물 정보가 있는 카드, 중간에 이미지, 하단에 더 읽기 버튼이 있습니다.

Divi Designer 캐러셀 섹션

16가지 회전 목마 디자인이 있으며 여러 유형의 회전 목마가 있습니다. 첫 번째 예는 팀원 회전 목마인 회전 목마 4입니다. 각 팀원 카드에는 이미지, 이름, 직책, 설명 및 소셜 미디어 아이콘이 있습니다.

레이아웃 7은 추천 캐러셀입니다. 이것은 어두운 레이아웃입니다. 각 캐러셀 항목에는 프로필 사진, 회원 평가 텍스트, 이름 및 직위가 있습니다.

회전 목마 13은 블로그 게시물 회전 목마입니다. 이미지 우측 상단에 블로그 카테고리가 있고 아래에 포스트 제목이 있는 심플한 카드 레이아웃입니다.

Divi Designer 연락처 섹션

Divi Designer는 20개의 접점 섹션 레이아웃과 함께 제공됩니다. 이것은 레이아웃 4로, 왼쪽에는 일부 텍스트와 연락처 정보가 있고 오른쪽에는 연락처 양식이 있습니다.

연락처 레이아웃 6은 왼쪽에 전화번호, 일부 텍스트, CTA 버튼이 있고 오른쪽에 이미지가 있는 간단한 섹션입니다.

레이아웃 15는 그라데이션 배경 위에 오른쪽에 연락처 정보가 있는 왼쪽에 연락처 양식이 있습니다.

이것은 레이아웃 15의 어두운 변형입니다.

Divi Designer 카운터 섹션

총 16개의 카운터 레이아웃이 있습니다. 첫 번째 레이아웃은 무료 견적을 받는 것으로 왼쪽에는 텍스트와 CTA 버튼이 있고 아래에는 이미지와 숫자 카운터가 있습니다.

레이아웃 9는 상단에 텍스트가 있고 아래에 아이콘이 있는 숫자 카운터가 있습니다.

카운터 레이아웃 11에는 페이지가 로드될 때 채워지는 카운터 막대가 있습니다. 이것은 어두운 레이아웃입니다.

카운터 레이아웃 15는 왼쪽에 텍스트가 있고 CTA 버튼이 있으며 오른쪽에 텍스트가 더 있고 그 뒤에 숫자 카운터가 있습니다.

Divi Designer CTA 섹션

Divi Designer Pack에는 15개의 CTA 레이아웃이 있습니다. 이 첫 번째 예는 레이아웃 5입니다. 모바일 앱을 강조하는 CTA 섹션이며 Google Play 스토어 및 App Store에 연결할 수 있는 이미지가 있습니다.

이것은 어두운 변형의 CTA 레이아웃 7입니다. 아이콘, 텍스트 및 두 개의 CTA 버튼이 있는 어두운 오버레이 이미지가 있습니다.

레이아웃 9에는 일부 텍스트가 포함된 광고 문구 모듈과 둥근 모서리가 있는 이미지를 오버레이하는 CTA 버튼이 있습니다.

레이아웃 10에는 일부 텍스트 및 소셜 미디어 아이콘이 있습니다.

Divi Designer FAQ 섹션

15개의 FAQ 섹션 레이아웃이 있습니다. 이것은 FAQ 섹션 1입니다. 한쪽에는 큰 이미지가 있고 오른쪽에는 토글 스타일의 FAQ 질문이 있습니다.

그리고 이것은 FAQ 섹션 1의 어두운 버전입니다.

FAQ 레이아웃 4에는 전체 너비 토글 레이아웃이 있습니다.

마지막으로 FAQ 레이아웃 7 기능은 왼쪽의 FAQ 질문과 오른쪽의 이미지, 일부 텍스트 및 CTA 버튼을 토글합니다.

Divi Designer Hero 섹션

총 30개의 영웅 섹션 레이아웃이 있습니다. 첫 번째 레이아웃 8은 왼쪽에 텍스트가 있고 오른쪽에 투명한 사람 이미지가 있습니다.

Hero 레이아웃 9에는 큰 Hero 텍스트와 검색 표시줄이 있는 어두운 배경 이미지가 있습니다. 검색 표시줄 아래에는 설명 텍스트와 더 읽기 버튼이 있는 3개의 이미지 카드가 있습니다.

레이아웃 19는 크고 어두운 배경 이미지를 사용하며 일부 텍스트와 두 개의 버튼이 있습니다.

Divi Designer 가격 섹션

20가지 가격 레이아웃도 있습니다. 이것은 가격 레이아웃 7입니다. 분홍색 배경과 오른쪽에 텍스트가 있는 두 개의 가격 카드가 있습니다. 각 가격 책정 카드에는 제목과 부제, 가격, 세부 정보, 지금 구매 버튼이 있습니다.

가격 레이아웃 8에는 세 가지 가격 계층이 있습니다. 부제와 함께 제목과 가격이 왼쪽에 있습니다. 기능은 오른쪽에 있고 확인 표시가 있으며 지금 구매 버튼이 오른쪽에 있습니다. 중간 옵션은 녹색으로 강조 표시됩니다.

레이아웃 12에는 아이콘, 제목, 부제 및 가격이 각 카드 상단에 있는 3개의 카드가 있습니다. 상단과 기능을 구분하는 녹색 배너가 있고 기능 목록과 버튼이 있습니다. 각 카드에는 호버에서 카드를 위로 이동시키는 호버 효과가 있습니다.

다음은 가격 레이아웃 19의 어두운 버전입니다. 상단에 기능을 강조 표시하는 요약 아이콘과 3개의 요금제 블록이 있습니다.

Divi Designer 서비스 섹션

Divi Designer Pack은 25개의 서비스 레이아웃과 함께 제공됩니다. 레이아웃 3에는 제목, 설명 텍스트가 있는 어두운 배경의 3개의 블러 모듈 및 버튼이 있습니다.

서비스 레이아웃 14에는 상단에 아이콘이 있는 3개의 카드, 일부 설명 텍스트, 번호가 매겨진 텍스트 목록 및 세부 정보를 볼 수 있는 링크가 있습니다.

레이아웃 19에는 각 서비스를 나타내는 아이콘이 있는 6개의 요약 모듈과 함께 제목 텍스트와 설명 텍스트가 있습니다.

이것은 서비스 레이아웃 25의 어두운 버전입니다. 카드를 어둡게 만드는 호버 효과가 있는 4개의 서비스 섹션이 있습니다.

Divi Designer 슬라이더 섹션

총 15개의 슬라이더 레이아웃이 있습니다. 슬라이더 레이아웃 1에는 각 슬라이드에 숫자, 텍스트 및 버튼이 있는 작은 텍스트 슬라이더가 있습니다. 슬라이더 위에는 녹색 배경의 제목 섹션이 있고 오른쪽에는 이미지가 있습니다.

슬라이더 레이아웃 8은 어두운 오버레이가 있는 큰 이미지 슬라이더입니다. 왼쪽에 텍스트가 있고 아래에 버튼이 있습니다.

슬라이더 레이아웃 12는 각 슬라이드마다 변경되는 흰색 배경에 큰 배경 이미지와 텍스트 슬라이드가 있습니다. 각 슬라이드에는 버튼도 있습니다.

Divi Designer 팀 섹션

총 25개의 팀 섹션 레이아웃이 있습니다. 레이아웃 8에는 호버 효과가 있는 제목과 세 명의 팀원 이미지가 있습니다. 이미지 위로 마우스를 가져가면 어두운 오버레이가 있고 팀원의 이름, 직함, 소셜 미디어 아이콘이 표시됩니다.

다음은 레이아웃 8의 어두운 버전입니다.

레이아웃 13의 왼쪽에는 CTA 버튼과 함께 제목과 텍스트가 있습니다. 오른쪽에는 3개의 원형 팀원 이미지가 있습니다. 마지막 디자인과 마찬가지로 이미지 위로 마우스를 가져가면 팀원의 이름, 직함, 소셜 미디어 아이콘이 표시됩니다.

이 디자인은 레이아웃 18이며 ​​팀원 사진, 직위 및 소셜 미디어 링크가 포함된 카드가 있습니다. 오른쪽에는 제목과 설명, CTA 버튼이 있습니다.

Divi Designer 추천 섹션

25개의 서로 다른 평가 섹션이 있습니다. 이것은 레이아웃 1이며 맨 위에 제목과 본문 텍스트가 있고 그 뒤에 세 개의 평가 섹션이 있습니다. 각 평가에는 아이콘, 이미지, 본문 텍스트, 이름, 직책 및 회사가 있습니다.

이 섹션은 레이아웃 2입니다. 어두운 오버레이가 있는 이미지 배경에 인용 아이콘, 텍스트, 이미지, 이름, 직함 및 회사 제목이 있는 두 개의 평가 카드가 있습니다. 왼쪽에는 헤더 텍스트, 본문 텍스트 및 CTA 버튼이 있습니다.

이것은 레이아웃 5의 어두운 버전으로 고객 평가가 포함된 다채로운 섹션이 있습니다.

레이아웃 7은 왼쪽에 추천 슬라이더가 있으며 하단에는 이미지, 추천 텍스트 및 이름이 있습니다. 오른쪽에는 제목 텍스트, 본문 텍스트 및 CTA 버튼이 있습니다.

Divi Designer 테마 빌더 템플릿

다음은 테마 빌더 템플릿입니다. WordPress 대시보드의 Divi 설정에 있는 테마 빌더에서 업로드할 수 있는 머리글, 바닥글 및 본문 템플릿입니다.

Divi Designer 바닥글 템플릿

총 20개의 바닥글 템플릿이 있습니다. 먼저 바닥글 레이아웃 4입니다. 왼쪽에 로고, 소셜 미디어 아이콘, 저작권 표시가 있는 디자인입니다. 오른쪽에는 메뉴 항목의 두 열이 있습니다.

바닥글 레이아웃 13에는 왼쪽에 연락처 양식이 있고 오른쪽에 연락처 정보 및 소셜 미디어 아이콘이 있습니다. 저작권 정보가 있는 하위 바닥글 표시줄도 있습니다.

바닥글 레이아웃 19 왼쪽에는 로고, 주소, 영업시간이 있습니다. 중앙에는 메뉴 표시줄이 있고 오른쪽에는 뉴스레터 가입 양식과 소셜 미디어 링크가 있습니다. 맨 아래에는 저작권 표시가 있습니다.

Divi Designer 헤더 템플릿

Divi Designer Pack에도 20개의 헤더 템플릿이 있습니다. 헤더 7입니다. 연락처 정보와 CTA 버튼이 있는 녹색 보조 메뉴 표시줄이 있습니다. 기본 메뉴 모음은 왼쪽에 로고가 있고 오른쪽에 정렬된 메뉴 항목이 있습니다.

헤더 레이아웃 8은 상단에 인라인 로고가 있는 연락처 정보를 제공합니다. 아래는 메뉴 항목입니다.

헤더 레이아웃 13에는 왼쪽에 소셜 미디어 아이콘, 중앙에 로고, 오른쪽에 CTA 버튼이 있습니다. 아래는 왼쪽에 정렬된 메뉴 항목과 오른쪽에 정렬된 검색 표시줄입니다.

Divi Designer 404 템플릿

25개의 서로 다른 404 페이지 템플릿이 있습니다. 첫 번째 디자인인 레이아웃 6에는 404 오류 텍스트 뒤에 "OOPS" 문자가 있습니다. 이 레이아웃에는 홈 페이지로 이동하는 주황색 버튼도 있습니다.

이것은 레이아웃 9입니다. 홈 페이지로 돌아가는 버튼과 일부 소셜 미디어 아이콘과 함께 그림자가 있는 큰 텍스트와 404 오류가 있습니다.

레이아웃 12는 큰 글꼴로 된 404 숫자를 특징으로 하며 홈 페이지로 돌아가는 버튼이 있습니다.

Divi Designer 블로그 템플릿

Divi Designer 블로그 페이지 템플릿

Divi Designer Pack과 함께 제공되는 20개의 블로그 템플릿이 있습니다. 블로그 레이아웃 1에는 제목과 버튼이 있는 이미지 헤더가 있습니다. 게시물은 추천 이미지, 게시물 정보 및 더 읽기 버튼과 함께 왼쪽에 나열됩니다. 오른쪽에는 검색 표시줄, 최근 게시물 및 최근 댓글이 있는 사이드바가 있습니다. 하단에는 텍스트가 오버레이된 또 다른 이미지가 있습니다.

다음은 블로그 레이아웃 1의 어두운 버전입니다.

블로그 레이아웃 8에는 일부 곡선 섹션 구분선과 상단에 텍스트와 버튼이 있는 헤더 섹션이 있습니다. 블로그 게시물에는 이미지, 게시물 세부 정보 및 더 읽기 버튼이 있는 카드 스타일 레이아웃이 있습니다. 페이지 하단에는 또 다른 텍스트 섹션이 있습니다.

블로그 레이아웃 18에는 텍스트와 버튼이 있는 제목 섹션과 두 개의 블로그 열이 있습니다. 왼쪽 열에는 큰 추천 이미지가 있는 게시물이 표시됩니다. 오른쪽 열에는 게시물의 세부 정보와 더 읽기 버튼만 표시됩니다. 마지막으로 바닥글에 몇 가지 추가 텍스트가 있습니다.

Divi 디자이너 포스트 템플릿

팩과 함께 제공되는 20가지 게시물 템플릿이 있습니다. 게시물 레이아웃 4는 페이지 맨 위에 게시물 제목, 게시물 정보 및 버튼이 오버레이된 추천 이미지가 있습니다. 다음은 게시물 내용과 댓글입니다. 오른쪽에는 검색 표시줄, 최근 게시물 및 최근 댓글이 있는 사이드바가 있습니다. 페이지 하단에 몇 가지 추가 텍스트가 있습니다.

다음은 게시물 레이아웃 5의 어두운 버전입니다. 추천 이미지는 곡선 구분선이 있는 상단에 있습니다. 게시물 콘텐츠와 댓글은 어두운 배경에 있으며, 제안을 홍보하는 이미지와 오버레이된 텍스트가 있는 섹션이 이어집니다.

레이아웃 11은 맨 위에 있는 게시물 제목으로 시작하고 큰 특징 이미지로 시작합니다. 그러면 게시물 내용과 댓글을 찾을 수 있습니다. 오른쪽에는 게시물 정보가 포함된 카드가 있습니다.

게시물 레이아웃 13에는 상단에 제목이 있고 그 뒤에 추천 이미지가 있습니다. 게시물 정보는 이미지 아래에 나열됩니다. 다음은 게시물 내용과 댓글이며 마지막으로 블로그의 다른 게시물과 함께 카드를 표시하는 관련 게시물 섹션이 있습니다.

Divi Designer Woo 템플릿

Woo 템플릿은 Woo Commerce 플러그인과 함께 작동하는 레이아웃입니다.

Divi 디자이너 카트 템플릿

팩과 함께 제공되는 13개의 카트 템플릿이 있습니다. 카트 레이아웃 1에는 파란색 테마가 있습니다. 상단에 제목이 있고, 카트 내용을 보고 쿠폰을 적용하고 카트를 업데이트할 수 있는 카트가 있습니다. 이 아래에 상점으로 돌아가기 버튼이 있습니다. 오른쪽에는 장바구니 합계가 있고 그 뒤에는 결제 진행 버튼이 있습니다.

카트 레이아웃 2에는 카트 아이콘이 있는 제목이 있습니다. 그런 다음 제품을 볼 수 있는 카트가 있습니다. 왼쪽에는 일부 쿠폰 정보가 있고 오른쪽에는 장바구니 합계 및 결제 진행 버튼이 있습니다.

카트 레이아웃 8은 제목으로 시작하고 카트 콘텐츠가 뒤따릅니다. 아래에는 광고 문구 아이콘과 상점으로 돌아가기 버튼이 있습니다. 다음은 장바구니 합계와 결제 진행 버튼입니다. 오른쪽에는 몇 가지 FAQ가 있는 아코디언 모듈이 있습니다.

카트 레이아웃 8의 어두운 버전이 있습니다.

Divi Designer 결제 템플릿

총 13개의 결제 템플릿이 있습니다. 체크아웃 레이아웃 3은 상단의 상점 및 카트 페이지에 대한 링크와 쿠폰 입력 섹션을 제공합니다. 왼쪽 아래에는 청구 내역 및 추가 정보가 표시되고 오른쪽에는 주문 총액 및 결제 금액이 표시됩니다. 이것은 어두운 버전입니다.

4번째 템플릿입니다. 상단에는 카트와 상점에 연결된 여러 아이콘과 쿠폰 코드 입력이 있습니다. 왼쪽에는 청구 내역 및 추가 정보가 있고 오른쪽에는 주문 총액 및 지불 방법이 있습니다.

다음은 결제 레이아웃 4의 어두운 버전입니다.

체크아웃 레이아웃 10은 상단에 제목과 쿠폰 항목이 있으며 청구 세부정보 및 추가 정보가 뒤따릅니다. 오른쪽에는 총 주문, 결제 및 일부 광고 모듈이 있습니다.

Divi Designer 제품 템플릿

13개의 제품 템플릿도 있습니다. 상단에 제품의 큰 이미지가 있는 레이아웃 2입니다. 그 다음에는 제품 이름, 비용, 설명 및 장바구니에 담기 버튼이 있습니다. 아래는 관련 제품 및 리뷰입니다.

제품 레이아웃 6은 배경이 더 어둡고 왼쪽에는 제품 사진이 있고 오른쪽에는 제품 정보가 있으며 카트에 추가 버튼이 있습니다. 아래는 설명, 리뷰 및 관련 제품입니다.

제품 레이아웃 10에는 왼쪽에 제품 정보 및 장바구니에 추가 버튼이 있는 카드 레이아웃이 있습니다. 오른쪽은 제품 이미지입니다. 아래는 리뷰 및 관련 제품입니다.

다음은 제품 레이아웃 10의 어두운 버전입니다.

Divi Designer Shop 템플릿

마지막으로 Divi Designer Pack과 함께 제공되는 10개의 상점 템플릿도 있습니다. 이것은 레이아웃 4로, 이미지가 있는 머리글과 사이드바 및 제품이 차례로 표시됩니다. 하단에는 큰 아이콘이 있는 광고 문구 모듈이 있습니다.

상점 레이아웃 8에는 텍스트와 이미지가 포함된 제목, 테두리가 있는 제품 아래, 일부 광고 모듈이 있습니다.

상점 레이아웃 8의 어두운 버전입니다.

마지막으로 상점 레이아웃 9에는 이미지가 있는 제목, 왼쪽에는 제품, 오른쪽에는 사이드바, 하단에는 광고 문구 모듈이 있습니다.

Divi 디자이너 팩 구매

Divi Designer Pack은 Divi Marketplace에서 사용할 수 있습니다. 무제한 웹 사이트 사용 및 평생 업데이트 비용은 $19입니다. 가격에는 30일 환불 보장도 포함되어 있습니다.

마지막 생각들

우리는 이 기사에서 빙산의 일각에 불과했습니다. Divi Designer 팩에는 모두 다양한 스타일과 용도를 가진 훨씬 더 많은 레이아웃이 있습니다. 물론 모든 레이아웃은 자신의 콘텐츠로 완전히 사용자 지정하고 특정 사용 사례에 맞게 변경할 수 있으며 다양한 섹션 레이아웃을 결합하여 전체 페이지 레이아웃을 쉽게 만들 수 있습니다. Divi Designer Pack으로 얻을 수 있는 다양한 레이아웃을 모두 미리 보려면 라이브 데모를 살펴보십시오.

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