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

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

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

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

1. 모션대학교

이 사이트는 Andrew Bartlett이 제출했습니다. 이 사이트는 노란색과 주황색(기술적으로는 더러운 갈색) 하이라이트가 있는 흰색 텍스트가 있는 어두운 배경을 사용합니다. 모든 배경 이미지가 어둡습니다. 영웅 섹션은 사이트를 설명하는 배경 이미지를 보여줍니다. 오버레이의 텍스트는 왼쪽에 태그라인과 CTA, 오른쪽에 재생 버튼을 포함합니다. 재생 버튼은 마우스 오버 시 변경되고 클릭 시 팝업으로 동영상이 열립니다. 다른 섹션에는 텍스트와 이미지가 있는 두 개의 열에 정보가 표시됩니다. 스크롤하면 레이아웃이 바뀝니다. 섹션 사이에는 평가를 위한 말풍선이 있는 작은 썸네일이 있습니다. 전체 너비 CTA는 구독 양식이 포함된 이미지를 제공합니다. 더 많은 평가 말풍선은 공개된 바닥글을 만듭니다.

웹사이트 방문

2. JD 디자인

이 사이트는 James Dawson이 제출했습니다. 배경 이미지와 어두운 오버레이가 있는 전체 화면 슬라이더를 표시합니다. 오버레이는 큰 텍스트를 사용하여 사이트를 설명하고 CTA를 제공합니다. 스크롤하면 회사를 설명하는 흰색 배경 위에 큰 텍스트가 있는 다른 섹션이 표시됩니다. 서비스는 제목과 설명 사이에 흥미로운 점 구분선이 있는 텍스트로 표시됩니다. 포트폴리오 섹션에는 오버레이가 있는 이미지가 표시됩니다. 이 섹션은 물결 모양의 섹션 구분선과 레이아웃의 나머지 부분에서 충분히 눈에 띄는 회색 배경을 사용합니다. 다른 여러 섹션에서는 이 디자인을 사용하지만 배경은 파란색입니다. 나는 초대형 클라이언트 로고가 있는 섹션을 좋아합니다. 네 개의 열에 짙은 회색으로 표시됩니다.

웹사이트 방문

3. 스위시

이 사이트는 Daniel Neumann이 제출했습니다. 사이트는 짙은 파란색 오버레이가 있는 전체 화면 배경과 한쪽에 흰색 텍스트의 CTA를 표시합니다. 서비스는 상자 그림자와 애니메이션 아이콘이 있는 안내문으로 표시됩니다. 배경 패턴은 광고문안을 통해 보입니다. 마우스를 올리면 상자 그림자 효과가 강화되어 눈에 띄고 광고 문구가 완전히 불투명해집니다. 여러 개의 2단 섹션이 레이아웃을 한 면에는 텍스트로, 다른 면에는 이미지로 대체합니다. 이 섹션의 텍스트는 애니메이션 아이콘과 강조 표시된 텍스트를 보여줍니다. 가격 페이지는 흰색 가격 테이블과 함께 단순한 파란색과 흰색 디자인을 잘 활용합니다. 가격표 버튼의 붉은 빛이 마음에 듭니다. 빨간색 하이라이트는 충분한 색상을 가져와 완벽하게 돋보입니다.

웹사이트 방문

4. HH 계기

이 사이트는 Mathias Rue가 제출했습니다. 이 사이트는 엔지니어링 디자인을 만들기 위해 아이콘이 있는 주황색에서 빨간색 그라데이션 배경을 사용합니다. 오버레이의 한쪽에는 회사 정보, 버튼, 검색 기능이 표시되고 다른 한쪽에는 연락처 양식이 표시됩니다. 드롭다운 메뉴에는 연락처 페이지에 대한 전체 너비 버튼이 있습니다. 파트너 로고는 공급자 페이지에 대한 링크와 함께 슬라이더에 표시됩니다. Blurbs는 서비스 및 정보에 대한 링크에 사용됩니다. 2색 이미지를 아이콘으로 포함하고 광고 문구를 돋보이게 하는 흥미로운 테두리가 있습니다. 참조용 섹션은 유사한 디자인을 사용하지만 훨씬 더 크고 이미지에 대한 클라이언트 로고를 포함합니다. 디자인은 블로그 섹션에도 사용됩니다. 레이아웃에는 영웅 섹션과 동일한 배경 위에 LinkedIn에서 포함된 기사도 포함됩니다.

웹사이트 방문

5. IQ 애니메이션 스튜디오

이 사이트는 Saurabh Patil이 제출했습니다. 영웅 섹션의 한쪽에는 태그라인, 정보 및 CTA가 표시되고 다른 한쪽에는 짙은 파란색 배경 그라데이션 위에 애니메이션 그래픽이 표시됩니다. 애니메이션 그래픽은 보는 재미가 있습니다. 이 커피 디스펜서 중 하나를 원합니다. 더 어두운 파란색이 나머지 배경과 버튼에 사용됩니다. 4열의 광고 문구에는 제목이 있는 애니메이션 아이콘이 표시됩니다. 그들은 짙은 파란색 배경과 서로 떨어져 있을 만큼 밝은 회색 테두리를 사용합니다. 광고 문구 위로 마우스를 가져가면 배경이 주황색으로 바뀝니다. 정보를 제공하는 다른 광고 문구에도 유사한 디자인이 사용됩니다. 흥미로운 정보 섹션은 시차로 멋진 작품 위에 애니메이션을 보여줍니다. 페이지에는 멋진 로딩 애니메이션도 표시됩니다.

웹사이트 방문

6. 미스 유치원

이 사이트는 Chris Cadalzo가 제출했습니다. 사이트는 메뉴 아래 중앙에 초대형 로고를 표시합니다. 다음 섹션에서는 위쪽과 아래쪽에 물결 모양의 섹션 구분 기호를 사용합니다. 각각 다른 디자인과 배경 색상의 여러 음영을 사용합니다. 이 섹션은 또한 마우스 오버 시 축소되고 테두리가 변경되는 정사각형 이미지로 주제를 표시합니다. 리소스 섹션과 블로그 섹션(그러나 더 큰 이미지가 있는)은 이와 동일한 디자인을 사용합니다. 정보 섹션은 사이트 소유자를 원 이미지로 표시하고 로고와 동일한 스크립트 글꼴 스타일을 보여줍니다. 가입 양식은 제목에 대한 스크립트 글꼴과 함께 공짜를 보여줍니다. 블로그와 사이드바도 사이트의 브랜드 디자인과 일치하도록 스타일이 지정됩니다.

웹사이트 방문

7. 델메인

이 사이트는 Jake Braught가 제출했습니다. 비디오 배경은 태그라인이 있는 오버레이 뒤에서 재생됩니다. 스크롤하면 특정 유형의 클라이언트에 대한 서비스에 대한 여러 색상의 아이콘이 표시됩니다. 유사한 서비스 섹션이 페이지 하단에 표시됩니다. 평가는 각진 섹션 구분선이 있는 녹색 배경 위에 전체 너비로 표시됩니다. 이 섹션은 완벽하게 두드러집니다. 사용 후기의 더 큰 섹션은 레이아웃 하단에 색상과 스타일이 지정된 이미지가 번갈아 나타나는 여러 열로 표시됩니다. 여러 섹션에는 큰 텍스트로 된 포함된 비디오 및 통계와 추가 정보 링크가 포함된 고객의 이야기가 표시됩니다. 비디오의 이미지는 여러 장치의 웹사이트를 보여줍니다. 바닥글에 가까워지는 것은 산 컷아웃 뒤의 시차에 있는 산, 각진 섹션 구분선이 있는 접촉 양식, 통계 카운터가 있는 리뷰 사이트의 로고를 보여주는 섹션으로 시작합니다.

웹사이트 방문

8. 수파인터내셔널

이 사이트는 Ben Dale이 제출했습니다. 2페이지 디자인입니다. 제품 라벨은 오버레이에 태그라인 및 CTA와 함께 시차로 배경에 표시됩니다. 다음 섹션에서는 한 면에 더 작은 글꼴로 자세한 정보를 표시하고 다른 면에 더 큰 텍스트로 간략한 설명을 보여줍니다. 다음 섹션에서는 제목과 텍스트가 있는 제품 이미지를 보여줍니다. 이미지는 서로 수직으로 오프셋되어 디자인에 흥미로운 시각적 스타일을 제공합니다. 서비스는 제목과 번호가 매겨진 텍스트가 있는 오버레이를 포함하는 이미지와 함께 표시됩니다. 더 많은 제품이 대형 4열 갤러리에 표시됩니다. 이 사이트는 큰 제목 텍스트와 이미지를 잘 활용합니다.

웹사이트 방문

9. 당신을 위한 영웅

이 사이트는 Bram Chauvin이 제출했습니다. 이 사이트는 흥미로운 그래픽을 사용합니다. 영웅 섹션은 실제로 헤더의 스타일을 지정하는 상단 섹션 구분선을 사용합니다. 제목 텍스트는 크고 태그라인과 여러 버튼을 표시합니다. 배경은 실제 시차로 표시되며 다음 섹션의 구름 섹션 구분선과 겹치는 구름을 포함합니다. Blurbs는 원 그래픽을 사용하여 서비스를 표시합니다. 광고문안의 버튼은 광고문안과 겹칩니다. 저는 슈퍼히어로 스마트폰의 큰 그래픽을 보여주는 CTA를 좋아합니다. 바닥글도 흥미롭다. 각진 섹션 구분선과 오버레이의 접점 CTA가 있는 진정한 시차의 그래픽 배경을 보여줍니다. 블로그는 동일한 디자인을 따르고 머리글 및 바닥글 요소를 사용합니다.

웹사이트 방문

10. VS 및 조립

이 사이트는 MJ Swart에 의해 제출되었습니다. 이 사이트는 레이아웃을 만들기 위해 그래픽 요소와 큰 블록을 흥미롭게 사용합니다. 영웅 섹션은 다양한 색상의 블록, 점 및 세로 텍스트가 있는 어두운 배경을 사용하여 시각적 패턴을 만듭니다. 이러한 패턴은 나머지 레이아웃을 따릅니다. 다음 섹션에서는 배경에 색상 블록이 있는 다중 열 레이아웃, 스타일이 지정된 제목, 초대형 제목 및 슬라이더를 사용하여 서비스, 회사, 경험, 문화, 사무실 등에 대한 정보를 표시합니다. 메뉴에서 연락처 링크를 클릭하면 메뉴에서 연락처 양식이 열립니다. 이 사이트에서 색상, 텍스트 및 슬라이더를 사용하는 것이 좋습니다.

웹사이트 방문

마감 중

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

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

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

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