Divi 디자인 쇼케이스: 2020년 6월부터 새로운 제출물

월간 Divi 쇼케이스에서는 커뮤니티 회원이 만든 10개의 놀라운 Divi 웹사이트를 살펴봅니다. 매월 우리는 커뮤니티에서 제출된 최고의 Divi 웹사이트를 선보이며 오늘은 6월 한 달 동안의 상위 10개 웹사이트를 공유하고자 합니다. 게시물 전체에서 각 웹 사이트로 나를 끌어들이는 내가 가장 좋아하는 디자인 기능 중 일부를 지적할 것입니다.

나는 당신이 그들을 좋아하기를 바랍니다!

Divi 디자인 쇼케이스: 2020년 6월부터 새로운 제출물

1. 프레스턴 스마일

이 사이트는 Christian Mauerer가 제출했습니다. 영웅 섹션은 한 면에는 화려한 글꼴과 CTA를 사용하고 다른 면에는 배경 이미지의 주제를 사용하여 타이핑 효과가 있는 애니메이션 텍스트를 표시합니다. 스크롤하면 회사가 본 미디어를 보여주는 로고 슬라이더가 나타납니다. 책에 대한 CTA는 책의 사진과 함께 외부 가장자리를 가리키는 화살표와 함께 중앙에 온라인 상점의 로고를 표시합니다. 스크롤하면 책이 중앙으로 이동합니다. 사이트 소유자에 대한 섹션은 왼쪽에 큰 사진을 표시하고 오른쪽에 정보를 표시합니다. 페이지를 아래로 스크롤하여 서로 겹치는 이미지 갤러리를 볼 때 사진이 더 빠르게 스크롤됩니다. 여러 섹션에는 스타일이 지정된 비디오가 포함됩니다. 나는 특히 소유자의 큰 이미지, Facebook의 평가, 이벤트의 사진을 보여주는 평가 섹션을 좋아합니다.

웹사이트 방문

2. WebDevXd

이 사이트는 Web Dev Xd의 Steph가 제출했습니다. CTA는 세계 지도의 배경 이미지 위에 빨간색 버튼과 흰색 오버레이가 있는 왼쪽에 표시됩니다. 전체 너비 메뉴는 이 섹션 아래에 있으며 스크롤할 때 상단에 고정됩니다. 다음 섹션에서는 한 쪽에는 컴퓨터 화면 내 작업의 예를 표시하고 다른 한쪽에는 브랜드 빨간색과 흰색을 사용하여 설명을 표시합니다. 서비스는 빨간색 아이콘으로 안내문 안에 표시됩니다. 프로젝트 섹션에는 누적된 이미지가 표시됩니다. 이미지가 축소되고 뒤에 있는 이미지가 호버링 시 측면으로 이동합니다. 결과물 섹션은 텍스트와 아이콘을 흰색으로 표시하는 광고 문구와 함께 빨간색 배경을 사용합니다. 제목은 측면에 수직으로 위치합니다. 바닥글은 게시물 슬라이더와 빨간색 배경 위에 여러 위젯을 표시합니다.

웹사이트 방문

3. 무니

이 사이트는 Lethicia Diniz가 제출했습니다. 파란색과 녹색의 색상과 장르에 완벽하게 어울리는 글꼴 스타일을 사용합니다. 헤더에는 CTA에 대한 누적 버튼이 표시됩니다. 영웅 섹션에는 한 면에 주제가 있고 다른 면에 큰 글머리 기호가 있는 배경 이미지가 포함되어 있습니다. 계획은 마우스 오버 시 확대되는 배경색이 다른 텍스트 블록으로 표시됩니다. 레이어로 구성된 전체 화면 CTA가 마음에 듭니다. 한쪽에는 사진, 두 번째 2/3를 덮는 제목, 다른 쪽에는 혜택 목록, CTA 자체와 파란색 배경과 패턴으로 다른 두 개를 겹치는 큰 상자를 표시합니다. 평가 슬라이더가 맨 오른쪽에 배경 패턴과 함께 표시됩니다. 바닥글에는 두 개의 행이 표시됩니다. 첫 번째에는 다양한 색상과 크기, 연락처 정보로 된 자세한 내용을 읽을 수 있는 CTA가 있으며 맨 아래 행에는 위젯이 표시됩니다. 두 행은 시차 배경 패턴 위에 표시됩니다.

웹사이트 방문

4. 삼카라

이 사이트는 Xavier Ferre가 제출했습니다. 탐색 메뉴는 왼쪽에 세로로 표시되며 스크롤할 때 화면에 남아 있습니다. 영웅 섹션에는 사이트 제목이 큰 글꼴로 표시되고 그 뒤에 서비스 목록과 클릭 가능한 연락처 CTA가 한쪽에 표시되고 다른 한쪽에는 작은 이미지가 표시됩니다. 정보는 배경색과 이미지 위치가 다른 두 개의 큰 카드로 제공됩니다. 둘 다 처음 두 카드와 유사한 디자인으로 더 큰 양식화된 농구 코트를 위에서 표시하는 다음 섹션과 겹칩니다. 더 많은 카드가 이를 따르고 큰 텍스트 열과 함께 소개됩니다. 이 섹션에는 연락처 양식과 공동 작업자 목록이 포함되어 있습니다. 블로그 게시물은 스크롤할 때 확대되는 스타일 화살표와 함께 소개됩니다. 블로그 섹션은 또한 독자를 로그인 양식으로 안내합니다.

웹사이트 방문

5. 완충보험

이 사이트는 Sean Turner가 제출했습니다. 이 사이트는 색상과 이미지를 잘 활용합니다. 영웅 섹션에는 두 개의 배경 이미지가 표시됩니다. 큰 면에는 파란색 오버레이가 있고 작은 면에는 녹색 오버레이가 있습니다. 전경 이미지는 두 가지가 만나는 곳에 배치되고 방패 모양으로 배경 위에 배치됩니다. CTA는 반대편에 배치됩니다. 전경에는 사이트 전체에 나타나는 패턴의 모양도 포함됩니다. 다음 섹션에서는 동일한 디자인의 큰 상자에 서비스를 표시합니다. 다음 두 섹션은 흰색 또는 파란색 오버레이가 있는 배경 이미지 위에 교대로 레이아웃으로 한쪽에는 긴 광고 문구를 표시하고 다른 한쪽에는 이미지를 표시합니다. 광고 문구는 총알을 표시합니다. 이미지는 영웅 섹션과 동일한 방패를 사용합니다. 전체 너비 게시물 슬라이더는 가장 최근 게시물의 제목과 텍스트를 표시합니다. 또한 텍스트 링크가 있는 메가 메뉴도 포함되어 있습니다.

웹사이트 방문

6. 컬리

이 사이트는 Anthea A. Ancalade가 제출했습니다. 영웅 섹션은 위치를 선택하거나 현재 위치를 사용할 수 있도록 중앙에 검색 상자가 있는 전체 화면 배경 이미지를 표시합니다. 서비스는 CTA 옆에 제목과 오버레이가 포함된 이미지와 함께 표시됩니다. 추천 스타일은 6열 슬라이더에 표시되며 이미지, 제목, 별점 및 위치가 포함됩니다. 슬라이더에는 화살표 및 점 탐색이 모두 포함됩니다. 스타일 중 하나를 클릭하면 해당 제품 페이지로 이동합니다. 새 스타일은 6개의 열에 표시되지만 슬라이더는 없습니다. 블로그 섹션은 두 개의 가장 최근 게시물을 표시하고 해당 라인 아래에 더 많은 것을 볼 수 있는 링크가 있는 줄을 게시물 아래에 배치합니다. 블로그의 자습서는 세 개의 열에 배치되며 동일한 디자인을 따릅니다. 여기에는 6개의 열과 2개의 행이 있는 Instagram 피드와 스타일이 지정된 이메일 양식이 있는 바닥글도 포함됩니다.

웹사이트 방문

7. typogenia

이 사이트는 Eugenia Janakow가 제출했습니다. 그래픽 내에서 굵은 노란색을 많이 사용합니다. 제목은 마치 라벨 메이커로 만든 것처럼 만들어지며 배경은 검은색으로, 텍스트는 흰색으로 만들어 3D 느낌을 줍니다. CTA는 메뉴 중간에 배치됩니다. 영웅 섹션에는 왼쪽에 CTA가 있고 오른쪽에 이미지가 있는 분할 화면이 표시됩니다. CTA는 스크롤 및 마우스 오버 시 애니메이션이 되는 손으로 그린 ​​그래픽을 사용합니다. 사이트 소유자에 대한 정보는 CTA가 있는 원 이미지를 표시하여 더 많은 것을 읽을 수 있습니다. 특히 후기 섹션이 마음에 듭니다. 여기에는 별 등급과 정보 페이지로 이동하는 클릭 가능한 그래픽이 포함된 Google 리뷰가 표시됩니다. 서비스는 안내문 안에 표시되며 손으로 그린 ​​큰 그래픽을 포함합니다. 블로그는 메타에 노란색 브랜드를 사용하고, 문의 양식은 전체 섹션의 배경에 노란색 브랜드를 사용합니다.

웹사이트 방문

8. 부시크래프터

이 사이트는 Simone Talamo가 제출했습니다. 영웅 섹션은 중앙에 주제가 있는 전체 화면 이미지를 표시합니다. 전경에는 CTA 및 소셜 버튼이 있는 태그라인이 표시됩니다. 여러 전체 너비 섹션이 유사한 디자인을 따릅니다. 각 섹션에는 장르에 완벽하게 맞는 들쭉날쭉한 구분 기호가 있습니다. 다음 섹션은 오버레이에 텍스트와 아이콘이 있는 정보에 대한 큰 이미지를 표시합니다. 대부분은 배경이 어둡거나 어두운 배경과 혼합됩니다. 매뉴얼에 대한 하나는 텍스트와 함께 책 표지를 표시합니다. 최신 블로그 게시물은 게시물을 상자 그림자가 있는 카드로 표시합니다. 바닥글에는 이름, 이미지, 별점 및 가격이 포함된 제품이 표시됩니다. 코스 페이지는 동일한 디자인을 따르고 카운트다운 타이머와 스타일 토글을 추가합니다.

웹사이트 방문

9. 크월트 디지털

이 사이트는 Nicolas Peigner가 제출했습니다. 이것은 사이트 전체에 흥미로운 애니메이션, 스타일이 지정된 텍스트, 그래픽 및 화살표가 많이 있습니다. 노란색은 브랜드 색상으로 사용되며 창의적으로 사용됩니다. 영웅 섹션은 입력 효과와 함께 한쪽에 텍스트를 표시합니다. 바는 이 아래에 있으며 서비스를 나열합니다. 오른쪽에는 커서를 가리키고 응답하는 몇 가지 독립적인 그래픽 요소가 있습니다. 다음 섹션에는 한쪽에는 애니메이션 그래픽이 있고 다른 한쪽에는 간단한 CTA가 있는 제목이 표시됩니다. 최신 작업은 이를 따르며 다양한 색상과 패턴의 배경 위에 작업 스크린샷을 제공합니다. 이점을 설명하는 섹션은 2색 아이콘으로 한쪽에 광고 문구를 배치합니다. 이미지는 반대편에 앉아서 독자를 광고 문구로 안내합니다. 짙은 회색 배경 위에 간단한 평가 슬라이더가 배치되어 눈에 띕니다.

웹사이트 방문

10. 탐험

이 사이트는 Ava Charpentier가 제출했습니다. 브랜드 색상에 황갈색 음영을 많이 사용합니다. 스크롤하면 상단 표시줄이 사라지고 로고는 헤더와 영웅 섹션과 겹치며 헤더에는 호버 애니메이션이 포함됩니다. 메인 이미지는 제목, 설명 및 주문 버튼을 표시합니다. 다른 이미지는 진정한 시차의 영웅 이미지에 창으로 배치됩니다. 정보는 사용자 지정 그래픽과 함께 광고 문구와 함께 표시됩니다. 제품 이미지 상단 뒤에 배경색으로 제품이 표시됩니다. 블로그 섹션에도 유사한 배경 디자인이 사용됩니다. 회사에 대해 읽을 CTA는 한쪽에는 텍스트를 표시하고 다른 한쪽에는 이미지를 표시합니다. 평가는 흰색 배경의 상단에 인용문이 있고 황갈색 배경의 하단에 이름이 있는 카드로 제공됩니다. 이 사이트에는 Instagram 피드와 호버 애니메이션이 있는 사용자 지정 바닥글도 포함되어 있습니다.

웹사이트 방문

마감 중

6월 한 달 동안 최고의 커뮤니티 Divi 웹사이트 제출물 10개입니다. 이 사이트는 정말 멋져보이며 언제나처럼 제출해 주신 모든 분들께 감사드립니다!

자신만의 디자인을 고려하고 싶으시다면 언제든지 우아한 테마 닷컴의 nathan 편집자에게 이메일을 보내주십시오. 이메일 제목은 "DIVI SITE SUBMISSION"으로 하십시오.

우리는 또한 당신의 의견을 듣고 싶습니다! 이 웹사이트에 대해 마음에 드는 점과 웹사이트에서 수행한 작업이 있으면 블로그에서 가르치고 싶은 내용을 알려주십시오.

domonku/Shutterstock.com을 통한 추천 이미지