Divi 제품 하이라이트: 궁극의 Divi 모듈 UI 키트

Ultimate Divi Module UI Kit는 다음 Divi 웹사이트를 쉽게 디자인할 수 있도록 2000개 이상의 미리 만들어진 레이아웃을 제공하는 Divi Marketplace 제품입니다. 이 제품은 회사 정보 섹션, 가격표 스타일, 연락처 양식 레이아웃, 버튼 스타일 및 완전히 사용자 정의할 수 있는 일부 한 페이지 웹 사이트 레이아웃을 제공합니다. 이 제품 하이라이트에서는 The Ultimate Divi Module UI Kit를 자세히 살펴보고 다음 프로젝트에 적합한 제품인지 결정하는 데 도움을 드릴 것입니다.

시작하자!

Ultimate Divi 모듈 UI 키트 설치

Ultimate Divi Module UI Kit는 Divi Library .json 파일이 포함된 ZIP 파일로 제공됩니다. 레이아웃을 설치하려면 먼저 파일 압축을 푸십시오. 그런 다음 WordPress 대시보드를 열고 Divi 라이브러리 페이지로 이동합니다.

상단에서 가져오기 및 내보내기를 클릭한 다음 가져오기 탭을 선택합니다. 레이아웃 파일을 선택한 다음 Divi Builder 레이아웃 가져오기를 선택합니다.

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

레이아웃을 찾은 다음 이 섹션 사용 버튼을 클릭하여 레이아웃을 로드합니다.

궁극의 Divi 모듈 UI 키트

Ultimate Divi 모듈 UI 키트는 2000개 이상의 레이아웃과 함께 제공되므로 모든 것을 다룰 수는 없습니다. 각 카테고리의 몇 가지 디자인을 살펴보고 이 제품이 무엇을 제공해야 하는지 그리고 귀하에게 적합한 구매인지 더 잘 이해할 수 있도록 하겠습니다.

탭 모듈

100개의 하단 탭 스타일, 100개의 기본 탭 스타일, 100개의 가로 탭 스타일 및 100개의 세로 탭 스타일이 있는 400개의 서로 다른 탭 모듈 스타일이 있습니다. 모든 탭 모듈은 탭 제목에 호버 애니메이션과 탭 전환 효과를 제공합니다. 탭의 각 스타일에 대한 몇 가지 예를 보여드리겠습니다.

다음은 하단 탭 스타일 1과 79입니다.

이것은 기본 탭 레이아웃의 스타일 9와 38입니다.

다음은 스타일 14 및 52가 포함된 세로 오른쪽 레이아웃입니다. 이 레이아웃은 제품 파일에서 가로로 레이블이 지정되어 있습니다.

마지막으로 이것은 제품 파일에서 수직으로 레이블이 지정된 수직 왼쪽 레이아웃입니다. 이것은 스타일 71과 스타일 95입니다.

선택할 수 있는 다양한 스타일과 레이아웃이 있으며 탭은 모두 자신의 콘텐츠 및 디자인 옵션으로 쉽게 사용자 지정할 수 있습니다.

광고문 모듈

총 100개의 광고 문구 스타일이 있습니다. 각 광고 문구 스타일에는 몇 가지 유형의 호버 효과가 있습니다. 몇 가지를 자세히 살펴보겠습니다.

광고 스타일 4입니다. 마우스를 올리면 두 개의 분홍색 막대가 세로로 바뀌고 아이콘 배경이 분홍색으로 바뀌며 분홍색 그림자 테두리가 있습니다.

Blurb 스타일 9에는 마우스 오버 시 색상과 각도가 바뀌는 두 개의 배경 막대가 있습니다. 마우스를 올리면 아이콘 배경도 변경됩니다.

Blurb 40에는 두꺼운 녹색 테두리와 호버링 시 뒤집히는 아이콘이 있습니다.

마지막으로 블러브 스타일 50은 호버 시 빨간색으로 변경되고 아이콘이 있는 상단의 탭이 오른쪽으로 이동합니다.

사람 모듈

150개의 서로 다른 개인 모듈 스타일이 있습니다.

사람 모듈 스타일 7에는 녹색 색 구성표와 호버링 시 녹색 오버레이 위에 격자 형태로 위로 이동하는 소셜 미디어 아이콘이 있습니다.

스타일 34에는 주황색 테두리가 있는 이름과 위치가 있습니다. 마우스를 올리면 정보가 사진 위로 이동하고 소셜 미디어 아이콘이 표시됩니다.

레이아웃 46입니다. 사진 아래 흰색 상자에 이름과 위치가 표시되어 있습니다. 마우스를 올리면 상자가 확장되어 소셜 미디어 아이콘이 표시됩니다.

레이아웃 127에는 간단한 이미지 레이아웃이 있습니다. 마우스를 올리면 이름, 직책 및 소셜 미디어 아이콘이 표시됩니다.

블로그 모듈

총 100개의 블로그 모듈이 있으며 50개의 그리드 보기 스타일과 50개의 목록 보기 스타일이 있습니다. 각 스타일의 몇 가지를 살펴보겠습니다.

그리드 레이아웃 3은 상단의 탭에 날짜가 있는 카드의 게시물 이미지와 세부 정보를 제공합니다. 마우스를 가져가면 자세히 보기 버튼이 표시되고 이미지 위에 아이콘이 있는 오버레이가 나타납니다.

그리드 레이아웃 40에는 게시물 정보가 포함된 카드와 추천 이미지를 오버레이하는 더 읽기 버튼이 있습니다. 마우스를 올리면 이미지 위에 어두운 오버레이가 나타납니다.

목록 보기 레이아웃 7은 왼쪽에 이미지가 있는 카드에 게시물 정보와 더 읽기 버튼이 있습니다. 날짜는 이미지 위의 파란색 상자에 있습니다.

목록 보기 레이아웃 18은 왼쪽에 이미지가 있고 오른쪽에 게시물 정보가 있는 더 어두운 레이아웃을 특징으로 합니다. 가리키면 카드가 약간 위로 이동하고 이미지가 확장됩니다.

회사 소개 섹션

우리 섹션 디자인에 대한 100가지가 있습니다.

이것은 레이아웃 스타일 7입니다. 아이콘으로 표시된 일부 기능과 함께 왼쪽에 일부 텍스트가 있습니다. 이 아래에 문의 버튼이 있고 오른쪽에 이미지가 있습니다.

이 전체 너비 섹션에는 상단의 일부 텍스트, CTA 버튼, 세 개의 숫자 카운터 및 오른쪽의 이미지가 있습니다.

이 여행 레이아웃은 스타일 17입니다. 왼쪽에는 큰 이미지가 있고 오른쪽에는 일부 텍스트와 아이콘이 있습니다. 아래는 가리키면 확대되고 선택하면 라이트박스에서 열리는 4개의 이미지입니다.

Style 61은 왼쪽에 일부 텍스트, 확인 표시 아이콘으로 강조 표시된 세 가지 기능, 중앙에 이미지가 있습니다. 오른쪽에는 시간이 있는 노란색 상자와 약속을 예약할 수 있는 버튼이 있습니다.

가격 책정 모듈

총 150개의 가격 책정 모듈 스타일이 있습니다.

가격 책정 모듈 스타일 3은 검정 및 녹색 색 구성표를 사용합니다. 마우스를 올리면 가격 상자가 확장되고 머리글이 녹색으로 바뀝니다.

이것은 가격 책정 모듈 29입니다. 마우스를 올리면 가격 오른쪽에 빨간색 화살표가 나타나고 계층 제목이 빨간색으로 강조 표시됩니다.

가격 모듈 스타일 66에는 마우스를 올리면 보라색으로 바뀌는 헤더가 있습니다.

레이아웃 72에는 그라데이션 배경이 있습니다.

평가 모듈

UI 키트와 함께 제공되는 75가지 추천 모듈 스타일이 있습니다. 다음은 몇 가지입니다.

추천글 레이아웃 5입니다. 상단에 주황색 테두리와 따옴표 아이콘이 있고 프로필 이미지, 추천글, 이름, 직업 정보가 표시됩니다.

레이아웃 33은 왼쪽에 평가, 이름, 직책 및 이미지가 포함된 카드가 있습니다. 마우스를 올리면 카드 윤곽선이 녹색으로 표시되고 이름 글꼴이 녹색으로 바뀌며 이미지가 뒤집힙니다.

레이아웃 71은 큰 이미지 배경 위에 왼쪽에 있는 이미지를 특징으로 합니다. 오른쪽에는 견적 상자 안에 있는 평가 슬라이더가 있습니다.

연락처 양식 섹션

선택할 수 있는 100개의 연락처 양식 섹션이 있습니다. 다음은 몇 가지입니다.

레이아웃 1은 왼쪽에 일부 텍스트, 일부 아이콘이 있는 연락처 정보, 소셜 미디어 아이콘 및 파란색 버튼이 있는 연락처 양식이 있는 단순한 디자인입니다.

레이아웃 29는 상단에 큰 지도가 있고 왼쪽에 주소, 전화번호 및 이메일 정보가 있습니다. 오른쪽에는 문의 양식이 있습니다.

접촉 섹션 레이아웃(41)은 노란색 오버레이가 있는 이미지를 특징으로 합니다. 왼쪽에 전화번호가 나열된 CTA 버튼이 있는 텍스트가 있습니다. 연락처 양식은 오른쪽의 흰색 오버레이 위에 있습니다.

레이아웃 75에는 연락처 정보와 노란색 아이콘이 있는 세 개의 상자가 있습니다. 이 아래에는 노란색 버튼이 있는 연락처 양식이 있습니다. 흰색으로 변색되는 이미지 배경에 있습니다.

뉴스레터 섹션

25개의 뉴스레터 가입 섹션이 있습니다.

스타일 2는 시차 이미지 배경에 일부 제목 텍스트와 이메일 가입 양식이 있습니다.

스타일 5는 왼쪽에 이미지가 있고 오른쪽에 일부 제목 텍스트가 있으며 가입 양식이 뒤따릅니다.

이것은 뉴스레터 레이아웃 15입니다. 왼쪽에 제목 텍스트가 있고 가입 양식과 일부 소셜 미디어 링크가 있습니다. 오른쪽에 동그란 이미지가 있습니다.

레이아웃 20은 카드 스타일의 디자인으로 양쪽에 두 개의 카드 스타일 이미지가 있고 중간에 카드에 가입 양식이 있습니다. 상단에 아이콘이 있고 그 뒤에 제목 텍스트와 양식이 있습니다. 하단에는 아이콘이 있는 작은 고지 사항 텍스트가 있습니다.

아코디언 모듈

총 40개의 아코디언 스타일이 있습니다.

스타일 2는 회색 상자에 녹색 제목과 아코디언 콘텐츠가 있습니다. 각 탭의 버튼은 오른쪽에 있습니다.

아코디언 스타일 8은 주황색 탭과 흰색 콘텐츠 상자를 사용합니다. 열린 탭을 가리키는 검은색 화살표가 있습니다.

아코디언 스타일 14에는 흰색 콘텐츠 섹션이 있는 둥근 스타일 탭이 있습니다.

마지막으로 스타일 36에는 각 탭에 보라색 아이콘이 있으며 활성 탭에 밑줄을 긋는 보라색 테두리가 있습니다.

슬라이더 모듈

Ultimate Divi Module UI 키트는 100가지 슬라이더 모듈 스타일과 함께 제공됩니다.

슬라이더 2에는 어두운 오버레이가 있는 큰 시차 이미지 위에 큰 제목 텍스트와 CTA 버튼이 있습니다.

슬라이더 스타일 31에는 어두운 오버레이가 있는 이미지의 제목 텍스트와 CTA 버튼도 있습니다. 제목 텍스트 뒤에 빨간색 원이 있습니다.

슬라이더 72는 상단의 텍스트 콘텐츠를 변경하는 슬라이더와 하단의 CTA 버튼으로 콘텐츠가 더 많습니다. 이 아래에는 아이콘과 일부 설명 텍스트가 있는 세 개의 콘텐츠 상자가 있습니다.

마지막으로 슬라이드 레이아웃 86은 왼쪽에 각 슬라이드를 변경하는 일부 텍스트 콘텐츠와 두 개의 CTA 버튼이 있습니다. 오른쪽에 동영상이 있고 그 뒤에 또 다른 CTA 버튼이 있습니다.

타임라인 섹션

선택할 수 있는 100가지 타임라인 스타일이 있습니다.

타임라인 스타일 4에는 타임라인의 각 단계에 대한 아이콘과 텍스트가 있는 카드가 있습니다.

다음으로 타임라인 12에는 한쪽에는 타임라인 아이콘이 있고 다른 쪽에는 타임라인 설명 텍스트가 있습니다.

타임라인 스타일 32에는 각 단계에 대한 아이콘이 있는 점선이 있습니다. 설명 텍스트는 해당 아이콘을 가리키는 상자 안에 포함되어 있습니다.

타임라인 91은 중앙에 아이콘이 있고 양쪽에 타임라인 설명 텍스트가 있는 간단한 레이아웃입니다.

한 페이지 레이아웃

UI 키트는 또한 다양한 산업 및 사용 사례를 다루는 42개의 서로 다른 단일 페이지 웹 사이트 레이아웃과 함께 제공됩니다. 몇 가지만 살펴보겠습니다.

이것은 여행 및 관광 레이아웃입니다. 로고, 주소, 시간 및 연락처 정보가 나열된 보조 메뉴 표시줄로 시작합니다. 기본 메뉴 모음에는 메뉴 항목과 로그인 또는 등록 버튼이 있습니다. 제목은 약간의 텍스트와 CTA 버튼이 있는 큰 이미지입니다. 그 다음에는 여행 목적지를 설명하는 이미지와 텍스트가 있는 번호가 매겨진 섹션이 이어집니다. 노란색 배경의 섹션에는 일부 숫자 카운터 모듈이 있으며 다음 섹션에는 아이콘이 있는 일부 모듈이 있습니다.

아래는 평가 슬라이더와 가격표입니다. 다음은 소셜 미디어 링크가 있는 팀 섹션, 텍스트 및 회사 로고가 있는 섹션, 텍스트 및 아이콘이 있는 또 다른 섹션입니다. 바닥글에는 텍스트, 연락처 정보 및 연락처 양식에 대한 정보가 있습니다.

스타트업 에이전시 레이아웃입니다. 로고, 메뉴 항목 및 CTA 버튼이 있는 메뉴 모음이 있습니다. 헤더에는 일부 텍스트, 오른쪽 그림, 두 개의 CTA 버튼이 있습니다. 다음은 일부 회사 로고와 일부 아이콘으로 강조 표시된 세 가지 기능입니다. 두 개의 버튼이 있는 CTA 섹션과 사진 및 소셜 미디어 아이콘이 있는 팀 섹션이 이어집니다. 그 다음에는 일부 텍스트, 그림 및 확인 표시로 구분되는 일부 기능이 있는 두 섹션이 있습니다.

다음은 고객 리뷰이며 아이콘과 설명 텍스트가 있는 또 다른 기능 섹션입니다. 가격표, FAQ 섹션, 그림이 있는 다른 CTA 섹션 및 일부 최근 게시물이 있습니다.

마지막으로 연락처 양식과 큰 지도 위에 연락처 정보와 소셜 미디어 링크가 있는 또 다른 상자가 있고 그 뒤에 로고, 소셜 미디어 링크, 메뉴 항목 및 연락처 정보가 있는 바닥글이 있습니다.

포트폴리오 모듈

기본 포트폴리오 모듈 스타일 40개, 필터링 가능한 포트폴리오 스타일 40개, 캐러셀 포트폴리오 스타일 40개 등 총 120개의 포트폴리오 스타일이 있습니다. 각 스타일의 몇 가지를 살펴보겠습니다.

첫 번째 기본 포트폴리오 모듈은 간단한 그리드 레이아웃과 두 개의 녹색 테두리 막대, 제목 및 연도가 있는 이미지 위에 나타나는 오버레이를 특징으로 합니다.

포트폴리오 레이아웃 29는 유사한 그리드 레이아웃을 사용하며 분홍색 화살표와 프로젝트 제목 및 연도가 있는 오버레이가 나타납니다.

필터링 가능한 포트폴리오 레이아웃 2에는 상단에 주황색 필터 막대가 있고 하단에 검은색 탐색 표시줄이 있습니다. 마우스를 올리면 프로젝트의 제목과 연도가 표시된 어두운 오버레이가 나타납니다.

필터링 가능한 포트폴리오 레이아웃 14에는 파란색 버튼이 있는 필터 막대와 하단에 검은색 탐색 막대가 있습니다. 마우스를 올리면 파란색 오버레이가 표시되고 제목과 날짜가 흰색 테두리 안에 포함됩니다.

회전식 포트폴리오 레이아웃 7에는 탐색할 수 있도록 양쪽에 두 개의 파란색 화살표가 있습니다. 마우스를 올리면 파란색 모양의 오버레이와 프로젝트 정보가 표시됩니다.

회전식 레이아웃 11에는 탐색을 위한 주황색 화살표와 마우스를 가져가면 표시되는 프로젝트 정보가 포함된 주황색 슬라이드가 있습니다.

바닥글 섹션

UI 키트와 함께 제공되는 100개의 바닥글 섹션이 있습니다.

바닥글 레이아웃 3은 맨 위에 있는 연락처 정보를 큰 아이콘과 함께 제공합니다. 텍스트, 소셜 미디어 아이콘, 메뉴 링크 및 시간에 대한 정보를 찾을 수 있습니다. 하단에는 저작권 정보와 이용 약관에 대한 링크가 포함된 보조 바닥글 표시줄이 있습니다.

바닥글 레이아웃 26입니다. 상단에 큰 아이콘이 있는 두 개의 모듈이 있고 그 뒤에 연락처 양식과 연락처 정보가 있습니다. 하단에는 일부 링크와 저작권 정보가 있습니다.

바닥글 43 맨 위에는 이메일 가입 양식이 있습니다. 메뉴 항목, 일부 연락처 정보, 결제 로고 및 저작권 정보에 대한 여러 열이 있습니다.

바닥글 스타일 84에는 어두운 오버레이가 있는 배경 이미지가 있습니다. 로고는 소셜 미디어 아이콘과 함께 왼쪽에 있습니다. 여러 메뉴 항목과 뉴스레터 가입 양식이 있습니다. 연락처 정보는 맨 오른쪽에 기재되어 있으며 마지막으로 저작권 정보는 맨 아래에 있습니다.

바 카운터 모듈

선택할 수 있는 50가지 바 카운터 스타일이 있습니다.

스타일 3에는 검은색 백분율 표시기가 있는 파란색 막대가 있습니다.

스타일 13은 맨 왼쪽에 제목이 있고 백분율은 막대 끝에 어두운 빨간색 배경으로 강조 표시됩니다.

바 카운터 스타일 32는 왼쪽에 제목이 있고 바 안에 백분율이 있는 둥근 디자인입니다.

마지막으로 레이아웃 37에는 막대 위에 제목이 있고 끝이 둥글며 각 막대 끝에 백분율이 포함된 둥근 섹션이 있습니다.

상자 정보 섹션

50개의 상자 정보 스타일이 있습니다.

상자 정보 섹션 레이아웃 2에는 흰색 테두리, 파란색 제목 텍스트, 설명 텍스트 및 CTA 버튼이 있는 이미지가 있습니다. 마우스를 올리면 상자 주변의 그림자가 강해집니다.

스타일 6에는 둥근 모서리가 있는 이미지, 아이콘, 두 가지 제목 텍스트 스타일 및 자세히 보기 버튼이 있습니다. 마우스를 올리면 상자가 위로 이동합니다.

박스 스타일 11은 큰 이미지 위에 아이콘이 있고 제목과 본문 텍스트가 있는 카드가 있습니다. 마우스를 올리면 사진 위에 어두운 오버레이가 나타나고 아래쪽 테두리 색상이 검은색으로 바뀌며 더하기 버튼이 나타납니다.

레이아웃 47에는 이미지, 아이콘 및 텍스트가 있습니다. 마우스를 올리면 검은색 오버레이와 흰색 테두리가 이미지 위에 나타나고 이미지가 약간의 각도로 확대됩니다. 아이콘 컨테이너가 꺼지고 배경이 검은색으로 바뀝니다. 마지막으로 텍스트 배경이 주황색으로 바뀝니다.

스킬 섹션

총 50개의 스킬 섹션이 있습니다.

스킬 섹션 레이아웃 7은 오른쪽에 큰 이미지가 있고 왼쪽에 일부 텍스트, 스킬 막대 및 숫자 카운터가 있습니다.

스킬 섹션 17에는 텍스트, 스킬 표시줄, 왼쪽에 아이콘이 있는 두 개의 설명 섹션이 있습니다. 오른쪽에는 두 개의 이미지가 있습니다.

스킬 레이아웃 21에는 왼쪽에 이미지, 일부 텍스트 및 버튼이 있습니다. 오른쪽에는 두 개의 추가 텍스트 섹션과 스킬 바가 있습니다.

레이아웃 38입니다. 왼쪽에 오버레이 텍스트 상자가 있는 이미지가 있습니다. 오른쪽에는 화살표가 있는 제목 텍스트, 본문 텍스트 및 기술 막대가 있습니다.

버튼

마지막으로 일반 버튼 스타일 100개와 이중 버튼 스타일 25개 등 총 150개의 버튼 스타일이 있습니다.

일반 버튼 스타일 30입니다. 마우스를 올리면 분홍색 배경이 나타나고 텍스트 색상이 흰색으로 변경됩니다.

일반 버튼 스타일 116은 호버 시 확장되어 버튼의 배경을 채우는 작은 분홍색 상자를 특징으로 합니다. 마우스를 올리면 텍스트도 분홍색으로 변경됩니다.

듀얼 버튼 스타일 3에는 호버 시 상단 또는 하단으로 이동하는 막대가 있습니다.

듀얼 버튼 스타일 7은 마우스를 올리면 아래로 이동하고 아래쪽 테두리가 되는 어두운 배경을 특징으로 합니다. 마우스를 올리면 아이콘도 표시됩니다.

Ultimate Divi 모듈 UI 키트 구매

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

마지막 생각들

Ultimate Divi Module UI Kit는 다양한 스타일과 사용 사례가 있는 인상적인 수의 레이아웃과 함께 제공됩니다. Divi의 옵션으로 모든 것을 사용자 정의할 수 있으며 다음 프로젝트의 디자인에 맞게 레이아웃을 수정할 수 있습니다. 다음 디자인에서 시간을 절약할 수 있는 광범위한 레이아웃 팩을 찾고 있다면 이 제품이 적합할 것입니다. 우리는 당신의 의견을 듣고 싶습니다! The Ultimate Divi Module UI 키트를 사용해 보셨습니까? 의견에 대해 어떻게 생각하는지 알려주세요!