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

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

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

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

1. 알트몬드

이 사이트는 Daniel Behrens가 제출했습니다. 전경에 태그라인과 CTA가 있는 전체 화면 배경 비디오를 표시합니다. 다음은 호버 효과가 있는 제목이 있는 전체 화면 섹션으로 다음 섹션을 소개합니다. 이 섹션은 제목을 지나 스크롤할 때 시차로 표시됩니다. 이 섹션은 제목을 큰 텍스트로 표시하고 한쪽에는 호버 효과를, 다른 한쪽에는 CTA를 표시합니다. 다음 섹션에서는 클라이언트와 작업하는 방법에 대한 정보를 제공합니다. 여기에는 대각선 디자인이 있는 흰색 배경과 마우스를 가져가면 확장되는 번호가 매겨진 텍스트가 포함됩니다. 스크롤할 때 다른 CTA가 확대 및 축소됩니다. 서비스 페이지는 한 면에는 CTA가 있고 다른 면에는 시차로 배경 이미지가 있는 분할 화면 내의 각 서비스를 보여줍니다. 나는 이 사이트에서 텍스트, 색상 및 이미지의 사용을 좋아합니다.

웹사이트 방문

2. 베멜

이 사이트는 Murray Price가 제출했습니다. 제품을 전체 너비로 표시하는 이미지 슬라이더가 있는 온라인 상점입니다. 환영 섹션은 제품 이미지 옆에 추가 정보를 읽을 수 있는 링크와 함께 정보를 표시합니다. 상점 섹션에는 제품 페이지에 대한 링크가 있는 제품이 표시됩니다. 내가 가장 좋아하는 섹션은 설명, 아이콘 및 제품을 가리키는 곡선 화살표가 있는 안내문으로 둘러싸인 중앙의 큰 제품 이미지를 보여줍니다. 홈 페이지는 또한 제품 이미지를 번갈아 가며 표시하고, 평가 슬라이더 내의 리뷰, 두 개의 게시물이 있는 블로그 섹션 및 Instagram 슬라이더를 보여줍니다. 레이아웃은 여백의 선과 최소한의 디자인을 만드는 단순한 선을 포함합니다.

웹사이트 방문

3. 프루그너

이 사이트는 RAPHAEL PRUGNER에 의해 제출되었습니다. 이것은 한 페이지 디자인입니다. 다층 메뉴는 페이지와 구분되며 CTA 옆의 소셜 버튼 위에 클릭 가능한 전화번호를 표시합니다. 영웅 섹션은 전체 화면 배경 패턴을 보여주고 전경은 작업의 예가 있는 컴퓨터 화면을 보여주고 제목과 태그라인 옆에 마우스를 올리면 더 많은 것을 보여줍니다. 스크롤하면 배경 이미지를 시차로 스크롤하는 텍스트와 그래픽이 있는 컷아웃 섹션이 나타납니다. 이점은 여러 섹션에 걸쳐 번갈아 레이아웃으로 광고 문구 내에 표시되며 호버 줌 효과가 포함됩니다. 예제 프로젝트는 슬라이더 내에 표시됩니다. 다른 프로젝트는 포함된 Instagram 피드에 표시됩니다. 또한 스크롤할 때 확대/축소되는 CTA와 스타일이 지정된 연락처 양식을 보여줍니다.

웹사이트 방문

4. 보라색 여우원숭이

이 사이트는 Liam Pedley가 제출했습니다. 제목, 태그라인, CTA 및 여우원숭이 브랜드 그래픽이 있는 제품 이미지의 예는 둥근 섹션 구분선이 포함된 검정색 배경 위에 있습니다. 텍스트와 버튼에는 사이트 전체의 그래픽과 일치하는 보라색 그라데이션이 있습니다. 세 개의 여우원숭이 그래픽이 있는 행이 텍스트와 광고 문구를 보여주는 섹션 위에 배치됩니다. 여우원숭이를 클릭하면 해당 섹션을 가리키는 화살표와 함께 다양한 정보 섹션이 표시됩니다. 회사 정보는 실제 시차로 배경 이미지를 보여주는 컴퓨터 화면과 함께 2열 섹션에 표시됩니다. 특히 포트폴리오 섹션이 마음에 듭니다. 각도로 이미지를 보여줍니다. 그들 중 하나 위에 마우스를 놓으면 이미지가 위쪽으로 화면 쪽으로 들어 올려지고 그 뒤에 컬러 슬라이드가 남습니다. 평가 슬라이더는 한 번에 3개의 면을 표시하고 한 면은 중앙에 평평하고 다른 2개는 각이 져 있습니다. 또한 각 서비스에 대한 호버 애니메이션이 있는 스타일이 지정된 블로그 카드 및 광고 문구가 포함되어 있습니다.

웹사이트 방문

5. DShjemmeside

이 사이트는 David Sylvest가 제출했습니다. 진한 파란색 오버레이와 둥근 섹션 구분선 및 중앙에 큰 제목이 있는 배경을 표시합니다. 헤더는 메뉴를 중앙에 배치하고 그라디언트와 둥근 모서리가 있는 스타일이 지정된 배경을 포함합니다. 나는 다음 섹션을 좋아한다. 기울어진 세 장의 카드 내에서 작업의 예를 보여줍니다. 2개의 측면이 안쪽으로 기울어져 있습니다. 여기에는 호버 효과가 포함됩니다. 다음 섹션은 비스듬한 컴퓨터 모니터와 패턴 배경이 있는 CTA를 보여줍니다. 장점 섹션에는 기어 그래픽 옆에 큰 광고 문구가 있는 글머리 기호가 표시됩니다. 이 사이트에는 스타일이 지정된 아이콘과 원 이미지, 개발자의 원 이미지, 토글이 있는 FAQ 섹션 및 스타일이 지정된 문의 양식이 있는 많은 CTA가 포함되어 있습니다. 레이아웃은 색상, 그래픽 및 이미지를 훌륭하게 사용합니다.

웹사이트 방문

6. 짚라인 직업

이 사이트는 Nicole Marie Zinnanti가 제출했습니다. 이 사이트는 적절한 양의 보라색 그래픽과 하이라이트와 함께 많은 여백을 사용합니다. 영웅 섹션의 한쪽에는 CTA가 표시되고 다른 한쪽에는 이력서를 작성하는 사람들의 그래픽이 표시됩니다. 다음 섹션은 보라색 및 흰색 그래픽과 보라색 테두리 및 그림자를 사용하는 blubs 내의 서비스를 보여줍니다. 삽입된 비디오는 왼쪽의 위쪽 절반과 오른쪽의 아래쪽 절반에 점을 표시하는 배경 패턴 위에 배치됩니다. 스타일이 지정된 아이콘이 있는 광고 문구는 깔끔한 3열 레이아웃의 이점을 보여줍니다. 디자인에는 그래픽이 있는 CTA, 스타일이 지정된 블로그 섹션, 사용자 정의 바닥글을 만드는 버튼이 있는 CTA도 포함됩니다. 블로그도 좋아요. 머리글에 대각선 구분선이 있는 전체 그래픽을 표시한 다음 깨끗한 그리드에 블로그 카드를 표시합니다.

웹사이트 방문

7. 서스캐처원 입양 지원 센터

이 사이트는 Molly Seaton-Fast에 의해 제출되었습니다. 그것은 노는 아이들의 전체 너비 이미지와 탐색을 위한 큰 버튼을 만드는 3개의 텍스트 모듈을 보여줍니다. 각 버튼에는 더 커지고 호버에 사각형 모서리가 있는 둥근 덮개가 있습니다. 부분 테두리가 있는 광고 문구는 특정 주제에 대한 링크를 만듭니다. 정보는 한 쪽에는 광고 문구와 CTA가 있고 다른 한 쪽에는 아코디언이 있는 견인 기둥 섹션에 제공됩니다. 기부 CTA는 메일링 리스트 섹션에 혼합됩니다. 각 섹션은 스타일이 지정된 색상과 일치하는 배경 패턴을 사용합니다. 이벤트 페이지에는 내장된 이벤트 캘린더가 포함되어 있습니다. 기부 페이지에는 기부 상자가 포함되어 있습니다. 사이트에는 공유할 정보가 많이 있으며 메뉴는 정보를 최대한 깔끔하게 탐색합니다.

웹사이트 방문

8. 나나이모 하이츠

이 사이트는 Danielle Mah가 제출했습니다. 한 페이지 디자인이며 다국어입니다. 영웅 섹션에는 제목, 태그라인 및 아래쪽 화살표가 포함된 주황색 오버레이가 있는 전체 화면 배경이 표시됩니다. 영웅 섹션에는 각진 섹션 구분선과 스크롤 시 상단에 고정되는 탐색 메뉴도 포함됩니다. 여러 등록 CTA에 건물 이미지가 표시됩니다. 레이아웃에는 이점을 보여주는 안내문이 포함된 전체 너비 이미지의 내부 이미지도 포함됩니다. 여러 섹션에서는 대체 레이아웃에서 글머리 기호와 이미지를 사용하는 기능을 보여줍니다. 포함된 지도는 사이트의 나머지 부분과 동일한 색상을 사용합니다. 평면도는 슬라이더 내에 표시되며 다운로드 가능한 PDF가 포함되어 있습니다. 등록 양식에는 찾고 있는 아파트의 정확한 유형을 결정하는 데 도움이 되는 질문이 포함되어 있습니다. 나는 이 사이트에서 색상과 사진을 사용하는 것을 좋아합니다.

웹사이트 방문

9. 몇 마디 이상

이 사이트는 Britt Baue가 제출했습니다. 메뉴에 겹치는 로고가 표시되고 그 뒤에 작은 환영 메시지가 표시됩니다. 페이지의 주요 부분에는 스타일이 지정된 오디오 플레이어가 포함된 많은 팟캐스트 에피소드가 포함되어 있습니다. 첫 번째 섹션에는 두 개의 열에 팟캐스트가 표시되며, 여기에는 주제 제목과 더 많은 내용을 들을 수 있는 링크가 있습니다. 쇼에 대한 정보가 있는 텍스트 섹션에는 반대쪽에 정점 제목이 포함됩니다. 다른 섹션에는 제목이 포함되어 있고 연락처 양식 옆에 오디오 플레이어가 있는 팟캐스트 목록이 표시됩니다. 다음은 모든 주요 호스트의 팟캐스트를 구독할 수 있는 링크가 있는 섹션입니다. 정보 페이지에는 주제 목록과 스타일이 지정된 추천 슬라이더가 추가됩니다. 디자인은 많은 여백과 최소한의 레이아웃을 사용하여 깨끗하고 우아해 보입니다.

웹사이트 방문

10. 네그로사논 영리더스 인스티튜트

이 사이트는 JR Galia에 의해 제출되었습니다. 영웅 섹션은 오버레이에 제목과 CTA가 있는 전체 너비 배경 이미지를 표시합니다. 탐색 메뉴에는 CTA도 표시되며 별도의 세그먼트 내에 메뉴가 포함됩니다. 프로그램 섹션에는 기부 버튼이 있는 카드가 표시됩니다. 나는 특히 Get Involved 섹션을 좋아합니다. 한쪽에는 큰 이미지를 표시하고 다른 한쪽에는 그래픽으로 흐리게 표시합니다. 레이아웃에는 번호 카운터와 스타일이 지정된 문의 양식도 포함됩니다. 정보, 블로그 및 갤러리 페이지는 유사한 디자인을 따르고 텍스트, 블로그 및 갤러리 모듈에 단색 그림자를 추가합니다.

웹사이트 방문

결론

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

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

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

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