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

게시 됨: 2018-09-23

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

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

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

1. 픽셀과 연필

이 웹사이트는 Tyler Diaz가 제출했습니다. 멋진 전체 화면 헤더는 이 사이트가 흥미로운 디자인과 함께 그래픽과 색상을 사용하는 것에 대해 보여줍니다. 다음 섹션에서는 자세히 알아볼 수 있는 버튼이 있는 클라이언트 로고를 보여줍니다. 추천 작업 섹션에는 이미지, 텍스트, 버튼 및 그림자 효과가 있는 카드로 프로젝트가 표시됩니다. 나는 간단한 클릭 유도문안과 각진 섹션 내에 배치된 소셜 버튼이 있는 또 다른 그래픽 세트를 보여주는 마지막 섹션을 좋아합니다. 작업 페이지에는 더 큰 버전의 프로젝트 카드가 표시되며 각 버전은 방문자를 단순하고 우아한 프로젝트 세부 정보 페이지로 안내합니다. 나는 또한 색상과 그래픽의 단순화된 사용을 좋아합니다.

웹사이트 보기

2. 안드레아 마소티

이 웹사이트는 Andrea Masotti가 제출했습니다. 이 사이트는 Divi의 모듈을 흥미롭게 사용합니다. 3개의 행은 맨 오른쪽과 왼쪽에 텍스트를 포함하고 중앙에 그래픽을 포함하는 3개의 열을 표시합니다. 텍스트와 그래픽은 배경과 조화되는 색상을 위해 흰색과 검은색 윤곽선을 사용합니다. 각 행은 검은색 선으로 구분됩니다. 행 위로 마우스를 가져가면 모든 요소가 검은색으로 바뀝니다. 행 내의 특정 요소 위로 마우스를 가져가면 색상이 빨간색(텍스트의 경우) 또는 빨간색과 파란색(그래픽의 경우)으로 변경됩니다. 빨간색과 파란색 그래픽은 포트폴리오 페이지의 헤더 요소로 사용됩니다. 이 웹사이트는 단순한 것이 어떻게 큰 의미를 가질 수 있는지 보여주는 훌륭한 예입니다.

웹사이트 보기

3. 아드리아노 알파로

이 웹사이트는 Adriano Alfaro가 제출했습니다. 제목과 설명이 있는 전체 화면 헤더와 소셜 팔로우가 포함된 짧은 정보 섹션이 표시되므로 사이트가 무엇인지 즉시 알 수 있고 디자이너와 소통할 수 있습니다. 큰 아이콘, 설명 및 링크가 있는 문구는 서비스를 보여줍니다. 다음 몇 섹션은 내가 가장 좋아하는 것입니다. 한 면에는 이미지를, 다른 면에는 텍스트를 전체 너비로 표시하고 포트폴리오에 대한 링크를 포함합니다. 스크롤할 때 면이 번갈아 나타납니다. 비디오 배경은 인용문과 CTA가 있는 수상 뒤에 재생됩니다. 저는 클릭 가능한 프로젝트의 전면 이미지를 표시하는 포트폴리오 페이지를 좋아합니다. 개별 프로젝트 페이지는 이 사이트가 정말 빛나는 곳입니다. 그들은 현대적인 레이아웃 디자인의 아름다운 예입니다. Fiat 페이지를 확인하십시오.

웹사이트 보기

4. 에밀리 상인

이 웹사이트는 Emily Merchant가 제출했습니다. 이것은 CTA를 사용하여 흥미로운 헤더를 생성합니다. CTA는 이미지, 테두리, 제공된 작업 유형, 제목 및 버튼으로 생성됩니다. 이 아래에 세 개의 이미지가 있습니다. 오버레이에 제목이 포함됩니다. 마우스를 가져가면 색상이 변경되고 테두리가 표시되어 우아한 프로젝트 페이지 CTA가 생성됩니다. 정보 섹션은 인용문과 텍스트로 생성됩니다. 또 다른 포트폴리오 CTA는 스크롤할 때 그래픽을 그립니다. 포트폴리오 페이지는 각 이미지에 고유한 오버레이 색상이 있고 계속되는 호버 효과가 있는 다중 열 레이아웃을 만듭니다.

웹사이트 보기

5. 북미

이 웹사이트는 Vincent Valentino가 제출했습니다. 이것은 대담한 색상과 시차 효과를 잘 활용합니다. 전체 화면 헤더는 텍스트와 버튼을 보여주는 멋진 배경으로 사이트를 시작합니다. 그들이 하는 일을 보여주는 섹션은 들쭉날쭉한 가장자리가 있는 지형도를 표시하여 그림자 효과가 있는 블록을 표시하는 안내문 섹션과 분리합니다. 나는 사례 연구 섹션을 좋아합니다. 전체 디자인의 이미지가 배경에 표시되고 텍스트와 이미지가 시차로 스크롤됩니다. 최근 프로젝트는 다중 열 레이아웃 내에 표시됩니다. 이 사이트는 한 페이지 디자인을 잘 활용합니다.

웹사이트 보기

6. 기상 관측소

이 웹사이트는 Pierre Lannoy가 제출했습니다. 이것은 앱의 웹사이트입니다. 디자인을 단순하게 유지하고 색상을 잘 활용합니다. 나는 특히 디자인 전체에 사용되는 미묘한 그라데이션이 있는 파란색 배경을 좋아합니다. 물결 모양의 섹션 구분은 헤더를 구분하는 반면 이미지 및 텍스트 모듈과 함께 이점이 표시됩니다. 이 사이트는 또한 다운로드 및 공개 설치에 대한 유용한 통계를 실제로 표시하는 숫자 카운터를 잘 활용합니다. 바로 아래에는 앱의 등급을 표시하고 별 등급의 그래픽이 포함된 섹션이 있습니다. 평가는 깨끗하고 그림자 효과를 포함합니다. 나는 또한 상자 그림자, 제목 및 버튼이 있는 두 개의 열에 이미지를 카드로 표시하는 블로그 페이지를 좋아합니다. 마우스를 가져가면 게시물에서 발췌한 파란색 오버레이가 표시됩니다. 최신 게시물은 단일 열에 전체 크기로 표시됩니다. 개별 게시물은 또한 상자 그림자 효과를 사용하며 게시물 탐색 및 댓글 모듈을 포함합니다.

웹사이트 보기

7. 굿디멀리스트

이 웹사이트는 Darahh Wallace가 제출했습니다. 이 사이트는 블로그 레이아웃에 중점을 둡니다. 로고 전면과 중앙을 표시하기 위해 초대형 헤더를 표시합니다. 이 아래에는 두 개의 탐색 메뉴가 있습니다. 기본 주제는 기본 메뉴에 있고 하위 주제는 녹색으로 약간 더 작은 글꼴로 보조 메뉴에 있습니다. 추천 게시물의 왼쪽에는 이미지가 표시되고 오른쪽에는 제목, 카테고리, 발췌 및 더 읽기 버튼이 작은 상자에 표시됩니다. 함께 콘텐츠 영역의 전체 너비를 차지합니다. 다음은 3열에 9개의 게시물이 있는 블로그 섹션입니다. 게시물에는 추천 이미지, 제목, 카테고리, 짧은 발췌문 및 버튼이 표시됩니다. 내 작가는 웹 사이트 제목의 정의를 보여주는 전각 섹션을 좋아합니다. 블로그 게시물은 또한 추천 이미지, 텍스트, CTA, 이미지 슬라이더, 비디오(일부 게시물의 경우) 및 3개의 게시물이 있는 블로그 섹션으로 깔끔한 디자인을 유지합니다. 이 사이트는 깔끔한 블로그 디자인의 좋은 예입니다.

웹사이트 보기

8. 제릭스

이 웹사이트는 Jeroen Rotty가 제출했습니다. 내가 좋아하는 색상 중 일부를 사용합니다(저는 테네시 출신이고 주황색을 선호합니다). 헤더는 CTA와 함께 시차를 사용합니다. 스타일이 지정된 섹션 구분 기호는 링크 및 원으로 둘러싸인 사진과 함께 '정보' 정보를 제공하는 다음 섹션의 공백을 만드는 데 도움이 됩니다. 서비스는 주황색 하이라이트 및 호버 효과를 활용하는 큰 2색 아이콘으로 표시됩니다. 최근 작업의 스크린샷도 호버 효과를 사용하고 그림자 상자 효과를 포함합니다. 포트폴리오 페이지는 최근 작업 디자인을 이어갑니다. 하나를 클릭하면 웹 사이트 자체로 이동하여 작업을 직접 볼 수 있습니다. WordPress 페이지는 두 개의 열에 이점을 표시하고 페이지 전체에 손으로 그린 ​​그래픽을 포함합니다. 이 사이트의 색상이 마음에 듭니다.

웹사이트 보기

9. 위험에 처한 엄마들

이 웹사이트는 Swag Design Factory에서 제출했습니다. 다중 열 레이아웃의 박스형 디자인을 사용합니다. 헤더는 로고, 메뉴 및 소셜 팔로우 버튼을 한 면에 수직으로 표시하고 다른 면에는 비디오와 태그라인을 표시합니다. 이미지 및 정보 섹션은 동일한 행 레이아웃을 사용하지만 이미지와 텍스트를 번갈아 사용합니다. 2열로 된 여러 섹션에는 버튼이 겹치는 이미지와 CTA가 있는 텍스트가 표시됩니다. 전체 너비 평가는 사이트의 로고와 색상을 사용하여 완벽하게 조화를 이룹니다. 개별 블로그 게시물은 헤더에 대한 제목 및 소셜 팔로우 버튼이 있는 배경 패턴을 표시하고 그 뒤에 사이트와 일치하도록 스타일이 지정된 게시물 및 사이드바가 표시됩니다. 나는 사이트 전체에 사용된 짙은 녹색과 분홍색 하이라이트를 좋아합니다.

웹사이트 보기

10. 웸스 와이어리스

이 웹사이트는 Philip Wantling이 제출했습니다. 이 비즈니스 웹사이트를 설명하기 위해 브랜드 색상(주황색 및 녹색)과 전자 제품 이미지(동일한 브랜드 색상 사용)를 사용합니다. 이것은 전체 화면 헤더와 사이트 전체에서 볼 수 있습니다. 2열에 있는 4개의 이미지는 다양한 제품으로 연결됩니다. 제목과 버튼이 있는 애니메이션을 제공하는 CTA가 마음에 듭니다. 이전 섹션(클라이언트 로고)과 겹치며 이점을 설명하는 문구 세트가 함께 제공됩니다. 데모용 CTA는 이미지 모서리에 눈에 띄는 리본을 사용합니다. 제품은 제품 링크로 연결되는 다중 열 레이아웃으로 표시됩니다. 개별 제품 페이지에는 제품 설명 및 페이지 배경 패턴에 대한 달콤한 Divi 스타일도 포함되어 있습니다. 이 사이트는 레이아웃 디자인과 색상을 잘 활용합니다.

웹사이트 보기

결론적으로

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

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

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

Koksharov Dmitry / shutterstock.com을 통한 주요 이미지