Divi 디자인 쇼케이스: 2019년 12월의 새로운 제출물

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

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

Divi 디자인 쇼케이스: 2019년 12월의 새로운 제출물

1. 장인의 유리 구조물

이 사이트는 Stuart Hingston이 제출했습니다. 전체 화면 비디오는 텍스트를 강조 표시하는 어두운 오버레이와 함께 배경에서 재생됩니다. 오버레이에는 CTA, 제목, 태그라인, 설명 및 버튼이 있는 로고 및 메뉴가 포함됩니다. 스크롤하면 고정된 헤더와 실제 시차의 배경 이미지가 있는 유사한 디자인이 나타납니다. 서비스 및 정보는 그래픽과 함께 슬림 스트립에 표시됩니다. CTA는 한 면에 진정한 시차로 원형 이미지를 표시합니다. 평가 슬라이더는 작업의 예가 되는 배경 이미지 위에 텍스트를 배치합니다. 서비스는 텍스트와 버튼이 있는 긴 이미지를 보여줍니다. 나는 프로젝트 섹션을 좋아합니다. 스타일이 지정된 측면 구분선과 이미지 확대/축소 효과가 있는 다중 열 레이아웃으로 프로젝트를 표시합니다. 같은 크기의 필드를 사용하는 문의 양식도 마음에 듭니다.

웹사이트 방문

2. 클레어 크리에이티브

이 사이트는 Claire Gallagher가 제출했습니다. 영웅 섹션은 따뜻한 배경이 있는 핸드북 CTA를 표시하고 사이트에 대한 설명을 돕습니다. 다음 섹션은 사이트 소유자의 사진과 함께 그래픽이 포함된 평가가 있는 또 다른 CTA를 보여줍니다. 블로그 게시물은 이미지와 그 아래에 기울임꼴로 된 제목이 있는 섹션에 표시됩니다. 이것은 여백이 많은 깔끔한 디자인을 만듭니다. 나는 그들이 눈에 띄는 방식을 좋아합니다. 평가 섹션은 유사한 디자인을 따르지만 더 많은 텍스트를 포함합니다. 페이지는 전체 너비 CTA로 끝납니다. 블로그 페이지는 홈 페이지의 블로그 섹션과 동일한 깔끔한 디자인을 따릅니다. Work WIth Me 페이지는 리드 생성을 위해 만들어졌으며 예약 양식 및 가격표에 대한 고유한 디자인이 포함되어 있습니다. 프로젝트는 블로그 게시물과 동일한 디자인을 따릅니다.

웹사이트 방문

3. 프레시라이트 미디어

이 사이트는 Nicole Marie Zinnanti가 제출했습니다. 이것은 다양한 섹션에 대한 메뉴의 앵커가 있는 한 페이지 디자인입니다. 이 사이트는 전체 화면 헤더부터 시작하여 이미지 위의 제목 뒤에 큰 흑백 이미지, 큰 텍스트 및 노란색을 많이 사용합니다. 여러 섹션에는 이 디자인을 따르는 이미지가 포함되어 있습니다. 다음 섹션은 전체 너비로 정보를 보여줍니다. 서비스는 큰 제목, 설명 및 구분선과 함께 번호가 매겨진 텍스트 블록 내에 표시됩니다. 평가에는 큰 제목도 포함되며 최소한의 디자인을 따릅니다. 정보 섹션은 큰 제목, 텍스트 및 구분선으로 최소한의 디자인을 계속하고 최소한의 연락처 양식으로 끝나는 유사한 섹션이 이어집니다.

웹사이트 방문

4. 힐탑 크레딧 파트너

이 사이트는 Rolando S. Bouza가 제출했습니다. 영웅 섹션은 제목과 태그라인 뒤에 있는 비디오를 재생하고 스타일이 지정된 섹션 구분선이 있는 다음 섹션으로 이어집니다. 다음 섹션에서는 대체 레이아웃의 여러 CTA를 보여줍니다. 첫 번째 CTA에는 큰 제목, 짧은 설명 및 버튼이 있는 이미지가 표시되고 두 번째 CTA에는 두 개의 버튼이 포함됩니다. 전체 너비 블로그 슬라이더는 추천 이미지를 거의 전체 화면으로 표시합니다. 다음은 이미지와 견적이 있는 소유자에 대한 섹션입니다. 나는 어두운 배경 이미지 위에 스타일 테두리가 있는 정보를 표시하는 정보 섹션을 좋아합니다. 접촉 형태는 거울에서 유사한 모양을 사용하며 단색 배경을 포함합니다. 다른 페이지는 유사한 디자인을 따르지만 그래픽 내에 많은 지원 정보를 추가합니다. 블로그 페이지는 공지 사항을 보여주기 위해 스타일이 지정된 사이드바를 추가합니다. 또한 깔끔한 레이아웃과 큰 텍스트가 포함된 블로그 게시물 디자인이 마음에 듭니다.

웹사이트 방문

5. 인사이트 호스팅

이 사이트는 Steve Doig가 제출했습니다. 텍스트와 오버레이의 주요 하이라이트 색상으로 볼드한 핫 핑크를 많이 사용하여 아름답게 돋보입니다. 영웅 섹션에는 화면 반대편에 CTA와 함께 비행기가 화면에서 날아가는 모습이 표시됩니다. 비행기 자체와 CTA는 핫 핑크로 음영 처리됩니다. 계획이 있는 섹션은 블록 내 계획과 가격을 보여줍니다. 여기에는 핫 핑크 호버 애니메이션이 포함됩니다. 전체 너비 CTA는 중앙에 분홍색 치타가 있고 한쪽에는 텍스트가 있고 다른 하나는 체스 세트와 분홍색 요소가 있는 텍스트를 보여줍니다. 여러 섹션에서 광고 문구 내에서 이점을 보여줍니다. 내가 가장 좋아하는 것 중 하나는 그들이 제공하는 비즈니스 유형에 대해 논의하는 섹션입니다. 이미지는 오버레이가 번갈아 가며 5열 그리드로 표시됩니다. 이미지는 마우스 오버 시 축소되고 오버레이를 제거합니다. 바닥글 메뉴도 흥미롭다. 각 제목에 대해 스타일이 지정된 첫 글자로 제목을 표시합니다.

웹사이트 방문

6. 케렌 헤레라

이 사이트는 Edgar Herrera가 제출했습니다. 이 사이트는 청중을 끌어들이기 위해 부드러운 색상을 많이 사용합니다. 영웅 섹션은 한 면에 CTA가 있고 다른 면에 소유자가 있는 전체 화면 이미지를 보여줍니다. 다음은 한 면에 이미지를 표시하고 양식 위에 설명을 표시하는 우아한 이메일 가입 양식입니다. 스타일 테두리가 있는 이미지는 다양한 정보 페이지에 대한 링크를 제공합니다. 정보 섹션은 중심 평가를 제공하는 다음 섹션과 겹치는 이미지를 보여줍니다. 다음 여러 섹션에는 교대 레이아웃 내에서 여러 섹션과 겹치는 이미지가 포함됩니다. 이 섹션에서는 정보와 CTA를 제공합니다. 문의 양식은 대리석 테이블의 배경 이미지 위에 배치되며 단색 배경에서 두드러집니다. 책 CTA는 두 개의 열에 겹치는 사진과 함께 표시됩니다. 바닥글은 Instagram이 백그라운드에서 여러 사진과 함께 CTA를 팔로우하는 것을 보여줍니다.

웹사이트 방문

7. 핀빙고

이 사이트는 Prashant Karandikar가 제출했습니다. 하이라이트를 위한 많은 색상으로 깔끔한 레이아웃을 가지고 있습니다. 영웅 섹션의 한 면에는 소개가 표시되고 다른 면에는 한 줄의 광고 문구와 혼합되는 그래픽이 표시됩니다. 정보는 글머리 기호를 만들기 위한 안내문과 함께 2열 레이아웃 내에 표시됩니다. 몇 가지 정보 CTA는 교대 레이아웃의 한쪽에 그래픽을 표시합니다. 서비스는 그래픽과 텍스트가 있는 카드 안에 표시됩니다. 블록 세트를 생성하는 컬러 안내문에 더 많은 정보가 제공됩니다. 숫자 카운터는 각 숫자를 눈에 띄게 다른 색상으로 표시합니다. 2열 평가는 사이트의 색상 디자인과 일치합니다. 많은 페이지가 비슷한 디자인을 따르고 상자 그림자가 있는 콘텐츠를 추가하여 눈에 띄게 만듭니다.

웹사이트 방문

8. 우쿠니

이 사이트는 Vernon Joyce가 제출했습니다. 제품에 중점을 둔 깔끔한 레이아웃입니다. 메가 메뉴는 정보와 이미지를 보여주는 한쪽에 여러 링크가 있는 3개의 열을 보여줍니다. 영웅 섹션은 사무용 가구용 그래픽 세트를 보여줍니다. 그 중 하나 위에 마우스를 올리면 다른 가구가 오버레이로 덮이고 가구를 설명하는 제목이 있는 작은 팝업이 표시됩니다. 팝업은 색상이 다릅니다. 추천 제품의 ​​한쪽에는 큰 그래픽이 표시되고 다른 한쪽에는 설명이 표시됩니다. 그 다음은 전폭적인 상담 CTA이며 그 다음에는 주요 제품 디자인과 일치하는 정보 섹션이 있습니다. 제품 페이지에는 팝업과 유사한 제목의 제품이 표시되고 기능에 대한 글머리 기호 목록이 포함됩니다. 서비스 페이지는 흥미롭습니다. 그것은 제품의 많은 그래픽을 보여주고 광고 내에서 이점을 표시합니다.

웹사이트 방문

9. 건축가 연구실

이 사이트는 Mischa Groenen이 제출했습니다. 탐색으로 화살표가 있는 텍스트로 링크가 있는 단일 전체 화면 페이지를 표시합니다. 화면은 흰색 배경에 제목과 링크가 있고 다른쪽에 노란색 배경에 설명으로 대각선으로 나뉩니다. 마우스 커서를 이동하면 제목이 화면에 그려집니다. 링크 위로 마우스를 가져가면 확대/축소 효과가 표시됩니다. 링크 중 하나를 클릭하면 메인 화면의 디자인을 따르는 헤더가 있는 페이지가 열립니다. 포트폴리오 페이지는 사이트 디자인과 일치하는 필터를 추가하고 호버 애니메이션 및 제목을 포함하는 그리드 내에 이미지를 표시합니다. 팀 페이지는 한쪽에는 팀 이미지가 있고 중앙에는 사람 슬라이더가 있고 다른 쪽에는 양식이 있는 3열 디자인이 표시됩니다. 정보 페이지는 그들이 하는 일에 대한 스타일이 있는 그래픽을 보여줍니다. 심플하고 흥미롭고 독특한 디자인입니다.

웹사이트 방문

10. 노화 다음

이 사이트는 Nicolle Principe가 제출했습니다. 이 사이트는 주황색과 녹색을 훌륭하게 사용하고 몇 가지 추가 강조 표시를 추가했습니다. 보조 메뉴에 CTA가 있습니다. 영웅 섹션은 오버레이에 간단한 CTA와 함께 진정한 시차로 전체 화면 배경 이미지를 보여줍니다. 페이지에 대한 링크는 전체 너비의 슬림 섹션에 색상 및 텍스트 블록으로 만들어집니다. 여러 전체 너비 CTA는 한 면에는 이미지를 표시하고 다른 면에는 텍스트를 번갈아 가며 표시합니다. Blurbs는 또한 원형 아이콘과 스타일이 지정된 버튼으로 CTA를 만듭니다. 기부 섹션에는 목표와 현재 금액이 있는 바 카운터가 표시됩니다. 많은 섹션에 겹치는 아이콘이 있습니다. 나는 한쪽에 텍스트가 있고 다른쪽에 두 개의 이미지가 있는 이야기 섹션을 좋아합니다. 각 이미지에는 정보를 표시하는 호버 효과와 자세한 내용을 읽을 수 있는 링크가 포함되어 있습니다. 또한 이벤트 캘린더, 스타일 블로그 등이 포함되어 있습니다. 이 사이트에는 쉬운 글꼴 크기 제어 및 언어 선택을 포함하여 개인화 조정이 많이 있습니다.

웹사이트 방문

결론

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

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

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

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