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

게시 됨: 2019-09-01

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

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

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

1. 매트릭스 루핑

이 사이트는 Christian McMinn이 제출했습니다. 전체 화면 배경 이미지를 사용하여 사용 가능한 작업 유형을 표시하고 오버레이에 CTA를 배치합니다. 회사에 대한 정보는 한 면에는 이미지가 있고 다른 면에는 글머리 기호가 있는 2열 레이아웃에 배치됩니다. 더 읽기 버튼은 독자를 회사 소개 페이지로 안내합니다. 유사한 2열 섹션은 더 많은 것을 읽을 수 있는 링크가 있는 평가를 보여줍니다. 서비스는 큰 단색 아이콘이 있는 안내문으로 표시됩니다. 정보에 대한 추가 링크는 어두운 오버레이가 있는 CTA 내에 배치됩니다. 바닥글에는 기본적으로 스크롤되지 않는 흑백 지도가 포함되어 있습니다. 나는 다른 색깔의 지붕을 가진 같은 집을 보여주는 Color Guide 페이지를 좋아합니다.

웹사이트 방문

2. 브라이트웍스 그룹

이 사이트는 Britt Baue가 제출했습니다. 회전하는 제목 텍스트 뒤에 어두운 배경 패턴이 있습니다. 각진 구분선은 영웅 섹션을 다음 섹션과 구분하며, 여기에는 마우스를 올리면 확대되는 굵은 녹색 텍스트로 세로 텍스트, 태그라인 및 서비스가 표시됩니다. 다음 섹션에는 위쪽과 아래쪽에 각진 구분선이 있는 회색 배경이 표시됩니다. 큰 텍스트는 독자를 CTA 다운로드로 안내합니다. 서비스 섹션에는 제목에 대해 세로로 정렬된 텍스트가 포함되어 있으며 서비스를 안내문에 표시합니다. 큰 제목과 함께 간단한 평가 슬라이더가 도입되었습니다. 다른 각진 섹션은 클라이언트 로고를 보여줍니다. 연락처 섹션은 CTA를 생성하고 연락처 정보를 제공합니다. 로고가 메뉴의 중앙에서 오프셋되는 방식이 마음에 듭니다.

웹사이트 방문

3. 이슬라

이 사이트는 Saskia Lund가 제출했습니다. 이 사이트는 영웅 섹션에 실제 시차로 배경 이미지를 포함하여 이용 가능한 휴양지의 유형을 보여줍니다. 오버레이에는 스크립트 글꼴의 태그라인과 특정 편의 시설에 대한 고급 검색을 수행할 수 있는 탭이 있는 검색 상자가 포함됩니다. 호버 효과가 있는 크고 얇은 광고 문구는 이미지와 예상되는 휴가 유형에 대한 설명을 보여줍니다. 스페셜 섹션은 슬라이더로 휴가를 보여줍니다. 각각은 이미지와 설명이 있는 키가 큰 카드이며 호버 효과가 포함되어 있습니다. 대여 섹션에는 이미지, 설명 및 정보가 포함된 카드 내의 위치가 표시됩니다. 이벤트는 전체 화면 슬라이더로 표시됩니다. 블로그 섹션은 키가 큰 카드 디자인과 일치하며 호버 효과도 포함합니다. 잡지 페이지는 여러 열 레이아웃의 범주 내 기사를 표시합니다.

웹사이트 방문

4. 헤드셰드

이 사이트는 Gustav Espenes가 제출했습니다. CTA와 그래픽은 실제 시차로 배경 패턴 위에 배치됩니다. 그래픽에는 팝업 오버레이에서 비디오를 재생하는 버튼이 포함되어 있습니다. 유사한 그래픽이 사이트 전체에서 CTA, 광고 문구 및 배경이 있는 요소로 사용됩니다. 이 사이트에는 배경을 만드는 데 도움이 되는 많은 스타일 구분선이 포함되어 있습니다. Blurbs는 흥미로운 수직 디자인을 만들고 배경과 혼합되는 색상을 갖기 위해 서로 오프셋됩니다. 질문 섹션에는 토글 내에 답변이 표시됩니다. 광고 문구의 또 다른 섹션은 아이콘의 이점을 보여줍니다. 또한 전체 너비의 평가 슬라이더, 클라이언트 로고 및 스타일이 지정된 문의 양식이 포함되어 있습니다. 나는 팀 구성원을 위한 단일 열 개인 모듈과 깔끔한 ​​디자인의 블로그 페이지를 좋아합니다.

웹사이트 방문

5. 리치먼드 이머지

이 사이트는 Christian Schick이 제출했습니다. 이 사이트는 레이아웃에 흥미롭지만 최소한의 디자인을 제공하기 위해 물결 모양의 섹션 구분선과 함께 많은 녹색 강조 표시를 사용합니다. 영웅 섹션은 섹션 구분선과 겹치는 한 면에 CTA를 배치하고 다른 면에 제품 예시를 배치합니다. 다음 섹션에서는 한 면에 유사한 제품이 있고 다른 면에 이점이 있습니다. 다른 섹션에는 서비스를 표시하기 위해 꽃을 만드는 스타일이 지정된 배경이 있는 아이콘이 표시됩니다. 프로젝트는 한 쪽에 이미지가 있고 다른 쪽에 설명이 있는 다중 열 섹션 내에 표시됩니다. 평가는 화면 중앙에 있는 상자 안에 배치되며 다음 CTA로 이어지는 섹션 구분선과 겹칩니다. 사용자 정의 바닥글에는 뉴스레터 양식과 겹치는 물결 모양의 구분선도 포함됩니다. 나는 사이트 전체에 걸쳐 녹색 하이라이트를 좋아합니다.

웹사이트 방문

6. 사우스서비스 코퍼레이션

이 사이트는 Mercedes Bugarin이 제출했습니다. 영웅 섹션에는 서비스의 이점을 보여주는 슬라이딩 텍스트가 포함됩니다. 서비스 선택과 함께 영웅 섹션에 양식을 배치합니다. 양식은 한쪽에 둥근 모서리를 사용하고 영웅 섹션의 이미지와 겹칩니다. 다음 섹션은 스타일이 지정된 모서리와 그림자를 포함하는 광고문안 내의 서비스를 보여줍니다. 클라이언트 로고는 슬라이더 내에 표시됩니다. 다음은 소셜 버튼과 직원이 로그인할 수 있는 버튼이 있는 작은 섹션입니다. 메뉴에는 두 가지 다른 CTA가 있습니다. 섹션은 물결 모양의 디바이더로 나뉩니다. 서비스 페이지는 동일한 디자인을 따르고 스타일이 지정된 토글을 추가하여 각 서비스에 대한 정보를 제공합니다. 토글은 형태와 일치하도록 한쪽에 둥근 모서리를 포함합니다. 연락처 신청서 양식은 유사한 디자인을 포함하고 그림자로 눈에.니다.

웹사이트 방문

7. 소셜 방갈로

이 사이트는 Kelsey Spectre가 제출했습니다. 영웅 섹션은 한 모서리에 로고를 표시하고 여러 모서리에 유사한 그래픽을 표시합니다. 헤더의 그래픽은 사이트 전체에 배치됩니다. 정보와 CTA가 한 쪽에 배치되고 다른 면에 그래픽이 배치됩니다. 주 메뉴는 이 섹션 아래에 있으며 해당 지점으로 스크롤할 때 화면 상단에 남아 있습니다. 소개 섹션의 한쪽에는 이미지가 표시되고 다른 한쪽에는 겹치는 텍스트 블록이 표시됩니다. CTA는 이를 따르며 마우스를 가져갈 때 각도가 변경되는 버튼을 포함합니다. 블로그 섹션에는 사이트와 일치하고 제목에 대한 스크립트 텍스트가 포함된 부드러운 색상의 게시물이 표시됩니다. 전체 너비 CTA는 헤더와 같은 색상과 그래픽을 사용하고 스크립트 제목 텍스트를 배경에 배치합니다. 여러 레이아웃과 동일한 색상과 글꼴을 사용하는 블로그 페이지의 우아한 디자인이 마음에 듭니다.

웹사이트 방문

8. 데스카르가 에콰카라오케

이 사이트는 Jero Shannon이 제출했습니다. 이것은 전체에 만화 애니메이션이 많이 있습니다. 영웅 섹션은 오버레이에 CTA가 있는 배경에 애니메이션 만화를 보여줍니다. 그래픽은 섹션 구분선과 겹치며 서로 수직으로 오프셋되고 구분선과 함께 추적되는 애니메이션 광고 문구가 있는 다음 섹션으로 이어집니다. 각진 이미지는 구매 CTA 및 블로그 링크가 포함된 다음 섹션으로 연결됩니다. 별표 리뷰는 배경과 겹치며 또 다른 CTA를 제공합니다. 포함된 YouTube 동영상이 기울어져 있습니다. 이 사이트에는 이미지 또는 색상이 지정된 각도가 포함된 여러 CTA와 함께 각진 요소와 구분선이 많이 포함되어 있습니다.

웹사이트 방문

9. 번성하는 피규어

이 사이트는 Kate Britton이 제출했습니다. 여기에는 배경 내의 색상 얼룩과 오버레이의 슬라이더가 한쪽으로 포함됩니다. 슬라이더 텍스트는 슬라이더 이미지와 겹치며 정보와 링크를 제공합니다. 슬라이더의 컨트롤은 왼쪽 상단과 오른쪽 하단 모서리에 있습니다. 다음 섹션에서는 다양한 색상의 텍스트와 다른 배경 얼룩을 사용하여 정보를 제공합니다. 단색의 정사각형 광고 문구는 번호가 매겨진 제목을 표시하고 마우스를 가져가면 색상이 변경됩니다. 다른 CTA는 색상 얼룩이 있는 한 면에 이미지를 표시하고 다른 면에 CTA를 표시합니다. 예약 섹션은 단색 배경 위에 제목을 표시하고 지도를 사용하여 위치를 선택합니다. 다운로드 CTA는 이미지와 겹치는 블록에 설명을 배치합니다. 이것은 멋지게 눈에 띄는 대담한 색상을 많이 사용합니다.

웹사이트 방문

10. 블록 헤드 챌린지

이 사이트는 Keith Green이 제출했습니다. 영웅 섹션은 오버레이에 대한 질감 필터가 있는 배경에 블록을 표시합니다. 태그라인은 초대형 텍스트를 사용합니다. 메뉴에는 2개의 클릭 유도문안 버튼이 있습니다. 블록 이미지는 다음 섹션과 겹치며 한 면에는 제목을 표시하고 다른 면에는 색상 블록을 표시하는 전각 텍스트 요소를 표시합니다. 두 개의 교차 섹션은 한 면에는 이미지를 표시하고 다른 면에는 질감 배경 위에 정보를 표시합니다. 다음 여러 CTA 섹션에는 내부에 명확한 블록 텍스트가 있는 더 큰 제목이 포함됩니다. 일부는 섹션과 겹칩니다. 이미지는 더 어두운 질감의 배경과 겹칩니다. 나는 이것에서 녹색, 이미지 및 글꼴을 사용하는 것을 좋아합니다.

웹사이트 방문

마감 중

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

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

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

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