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

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

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

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

1. 봇 대 단점

이 웹사이트는 Wade McMaster가 제출했습니다. 이 사이트는 흰색과 연한 파란색 텍스트가 있는 어두운 색상 팔레트를 사용하고 전체에 하이라이트를 표시합니다. 메뉴는 슬림하고 파란색 선으로 영웅 섹션과 구분됩니다. 영웅 섹션은 큰 텍스트로 된 사이트 로고 및 설명과 함께 배경 이미지를 표시합니다. 정보 섹션에는 두 개의 열에 정보가 표시됩니다. 스타일이 지정된 오버레이가 있는 배경 이미지 위에 시차로 표시되는 블로그 섹션이 마음에 듭니다. 카드 디자인에서 블로그와 블로그 게시물을 볼 수 있는 CTA로 한쪽에 텍스트가 있는 최신 블로그 게시물을 표시합니다. 배경 화면 및 블로그 페이지에는 헤더, 배경 이미지 및 사이드바가 있는 블로그 게시물이 표시됩니다. 구독 페이지도 흥미롭습니다. 구독의 이점을 보여주기 위해 한쪽에 글머리 기호가 있는 CTA로 가입 양식을 표시합니다. 페이지는 홈페이지와 다른 메뉴 디자인을 표시합니다.

웹사이트 방문

2. 매치 디자인 미디어

이 웹사이트는 Sam Nicholson이 제출했습니다. 사이트는 그라디언트 오버레이가 있는 전체 화면 배경 비디오를 표시합니다. 전경은 로고와 라인 디자인을 보여줍니다. 로고는 마우스를 올리면 확대되고 두 개의 선 요소는 사라지고 흥미로운 호버 효과를 만듭니다. 가장 흥미로운 요소는 사이트에서 섹션 구분선을 사용하는 방식입니다. 디바이더 뒤에 배경 이미지를 배치한 다음 그 위에 그라디언트를 배치합니다. 숫자 카운터 또는 원형 카운터가 그 위에 놓입니다. 이 사이트는 많은 그라디언트와 스타일이 지정된 텍스트를 사용하여 일치시킵니다. 버튼에는 배경과 동일한 그라디언트가 포함됩니다. 서비스는 대체 레이아웃으로 표시되며 마우스를 가져가면 기울어지는 이미지가 포함됩니다. Careers 섹션과 Contact 섹션은 동일한 틸트 효과를 포함합니다. 로드 시 제자리로 기울어지는 선과 같은 작은 애니메이션이 많이 있습니다. 이 사이트에는 스타일이 지정된 뒤로 가기 버튼과 스타일이 지정된 슬라이더 막대도 포함되어 있습니다. 이 바는 웹 디자인의 표준 관행이 되기를 바랍니다.

웹사이트 방문

3. 속성 팝

이 웹사이트는 Kaelynn Midgley가 제출했습니다. 한 면에는 CTA가 있고 다른 면에는 모바일 장치 내의 이미지가 있는 전체 너비 배경 그라디언트를 표시합니다. 스크롤하면 한 면에는 CTA가 있는 정보가 표시되고 다른 면에는 랩톱 윤곽선 내에 배치된 한 이미지가 있는 속성 이미지가 표시됩니다. 유사한 디자인이 사이트 전체에서 계속됩니다. 내가 가장 좋아하는 것은 커뮤니티에 대한 섹션입니다. 여기에는 이미지, 텍스트 및 버튼이 포함된 배경 이미지와 겹치는 배경 이미지가 있는 2열 레이아웃과 반대쪽에 정보가 포함됩니다. 작동 방식 페이지는 각 단계를 다른 배경색으로 전체 화면으로 보여줍니다. 나는 또한 영웅 섹션, 정보 텍스트, 구분선 및 블로그 게시물을 포함하는 블로그 페이지를 좋아합니다. 게시물은 추천 이미지에 상자 그림자를 추가합니다. 메뉴에는 CTA가 포함됩니다.

웹사이트 방문

4. 조국

이 웹사이트는 Jerome Bestel이 제출했습니다. 한 면에는 큰 그래픽을 표시하고 다른 면에는 CTA를 표시하는 영웅 섹션으로 시작하여 사이트 전체에 많은 그래픽이 포함되어 있습니다. 스크롤하면 클릭 가능한 통화 버튼이 있는 한쪽에 더 작은 그래픽이 있고 다른 쪽에는 정보가 있는 2열 섹션이 표시됩니다. 이 디자인은 스크롤할 때 페이지 아래로 번갈아 나타납니다. 기타 정보는 광고문안에서 제공됩니다. 슬라이더를 사용하여 커서를 이동하고 가격을 선택할 수 있습니다. 팀에 대한 정보는 광고 문구와 함께 제공되며 이미지용 그래픽이 포함됩니다. 이 사이트는 대상 청중의 관심을 끌기 위해 최소한의 디자인과 텍스트와 배경에 파란색을 많이 사용합니다. 각 페이지는 유사한 디자인을 따르지만 여전히 독특한 것이 있습니다. 메뉴에는 연락처 CTA와 클릭 가능한 통화 링크가 포함됩니다. 특히 각 페이지의 영웅 섹션에 있는 큰 그래픽이 마음에 듭니다.

웹사이트 방문

5. 자선단체를 위한 체인지업

이 웹사이트는 Dickon Kent가 제출했습니다. CTA 뒤의 한 면에는 그래픽이 있고 다른 면에는 휴대폰에서 앱을 보여주는 일련의 이미지가 있는 전체 너비 배경 그라디언트가 있습니다. 다음 몇 섹션은 왼쪽에 구분선과 파란색 제목이 있는 텍스트를 보여주고 오른쪽에는 앱 이미지와 주변 그래픽이 있는 스마트폰을 보여줍니다. 스크롤하면 텍스트와 그래픽이 제자리에 고정됩니다. 슬라이더는 그라디언트가 있는 패턴 배경 위에 로고를 표시합니다. 전체 너비 평가 슬라이더에는 사이트와 일치하는 파란색 배경 위의 이미지, 평가, 점 및 화살표 탐색이 포함됩니다. 정보는 사이트의 스타일과 일치하는 원 아이콘이 포함된 안내문 내에서 제공됩니다. 이 사이트는 파란색과 녹색 브랜드 색상과 그라디언트를 훌륭하게 사용합니다.

웹사이트 방문

6. 레블

이 웹사이트는 Dickon Kent가 제출했습니다. 이 사이트는 메인 텍스트 아래에 더 작은 텍스트가 있는 흥미로운 메가 메뉴를 사용합니다. 링크 중 하나 위로 마우스를 가져가면 메뉴가 열리고 더 많은 링크와 이미지가 표시됩니다. 홈페이지의 첫 번째 섹션에는 CTA를 위한 공간이 있는 전체 너비 이미지가 표시되고 다른 한 쪽에 제품이 표시됩니다. 스크롤하면 제품을 시연하고 상점에 대한 링크를 제공하는 전체 너비 CTA가 표시됩니다. 블로그 섹션에는 카테고리가 블로그 카드로 표시됩니다. 하나를 클릭하면 해당 블로그 카테고리의 아카이브 페이지가 열립니다. 블로그 게시물은 이미지와 발췌 부분 사이에 범주가 중심에 있는 큰 카드로 표시됩니다. 슬림 구독 양식은 배경 패턴 위에 텍스트와 양식을 표시합니다. 회사 및 제품에 대한 정보는 CTA가 큰 2열 섹션에 표시됩니다. 오버레이에 제목과 버튼이 있는 배경 비디오를 표시하는 비디오 CTA가 마음에 듭니다. 포함된 Instagram 슬라이더는 호버에 대한 정보를 제공하고 클릭 시 모달에서 정보를 엽니다.

웹사이트 방문

7. 청년들이여, 소리내어라!

이 웹사이트는 Michal Teska가 제출했습니다. 매우 불투명한 오버레이와 함께 전체 화면 배경 이미지를 시차로 표시하는 한 페이지 레이아웃입니다. 오버레이에는 태그라인과 그래픽이 포함됩니다. 모든 섹션에는 배경에 텍스트가 있고 전경에 그래픽이 있고 다른쪽에 텍스트가 있는 2열 레이아웃이 있습니다. 이 디자인은 스크롤할 때 바뀝니다. 이 섹션 중 하나에는 사이트와 일치하도록 스타일이 지정된 토글이 있습니다. 관련된 사람들에 대한 정보는 왼쪽에 축소판 이미지가 있고 오른쪽에 이름과 위치가 있는 광고 문구로 생성됩니다. 파트너 로고는 회색조로 표시되며 마우스를 가져가면 색상으로 변경됩니다.

웹사이트 방문

8. 굉장하다

이 웹사이트는 Christos Papadopoulos가 제출했습니다. 애니메이션 배경은 만화 그래픽으로 해저 설정의 효과를 만듭니다. 태그라인과 애니메이션 이미지가 있는 CTA가 배경 위에 있습니다. 메가 메뉴는 링크와 이미지의 세 열을 보여줍니다. 다음 섹션에서는 정보를 제공하고 클릭 가능한 통화 링크와 상담 링크를 포함합니다. 팀 구성원은 이미지, 이름, 직위, 설명 및 해당 사람의 오디오 메시지를 들을 수 있는 버튼과 함께 표시됩니다. 서비스는 텍스트 아래에 아이콘이 포함된 문구 안에 표시됩니다. 프로젝트 페이지는 마우스 오버 시 스크롤되는 카드 내의 예를 보여줍니다. 각 서비스 페이지는 설명과 링크가 있는 헤더와 자세한 정보를 포함하는 유사한 디자인을 따릅니다. 블로그 페이지와 게시물은 유사한 헤더 디자인을 따릅니다.

웹사이트 방문

9. 마르시 앙헬레스

이 웹사이트는 Marci Angeles에 의해 제출되었습니다. 머리글과 바닥글은 스크롤해도 화면에 남아 있습니다. 투명하므로 레이아웃이 보입니다. 홈페이지는 파란색 배경과 작업 샘플의 여러 이미지를 보여줍니다. 이미지를 클릭하면 프로젝트에 대한 세부 정보를 볼 수 있는 해당 프로젝트 페이지가 열립니다. 각각은 블로그 게시물로 표시되며 추천 이미지, 설명, 이미지, 이전 및 다음 게시물 탐색, 연락처 양식이 포함됩니다. 바닥글은 프로젝트 페이지의 화면에 남아 있지 않습니다. 머리글과 바닥글은 심플하고 깔끔한 디자인입니다. 헤더에는 이와 유사한 부드러운 색상을 사용하는 소유자의 다른 사이트에 대한 링크가 포함되어 있습니다. 바닥글에는 소셜 미디어에 대한 링크가 포함되어 있습니다. 둘 다 사이트 본문과 구분하는 선이 있습니다.

웹사이트 방문

10. ATG 유럽

이 웹사이트는 Camiel Bos에 의해 제출되었습니다. 전체 화면 헤더는 화면의 왼쪽 하단 모서리에 제목과 태그라인이 있는 배경 비디오를 보여줍니다. 그것은 메가 메뉴를 가지고 있으며 호버에 링크와 게시물을 표시합니다. 스크롤하면 메뉴가 흰색으로 바뀌고 가장자리가 구부러지고 비디오 섹션의 하단이 미러링되는 것을 볼 수 있습니다. 정보는 다음 섹션에서 제공되며 사이트의 주제와 일치하는 그래픽을 포함합니다. 서비스를 제공하는 산업, 솔루션 및 서비스는 이미지 내에 시차로 표시됩니다. 연락처 CTA는 배경 이미지 위에 제목과 버튼을 표시하고 흥미로운 디자인을 만들기 위해 상단과 하단에 대한 곡선 섹션 구분선을 포함합니다. 이 사이트는 깔끔한 디자인을 유지하면서 멋지게 눈에 띄는 스타일 구분선, 배경 패턴 및 겹치는 요소를 많이 사용합니다. 이 사이트는 이미지와 색상을 잘 활용합니다.

웹사이트 방문

결론

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

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

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

ProStockStudio/Shutterstock.com을 통한 기능 이미지