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

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

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

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

1. 아벨 빌라베르데

이 사이트는 Abel Villaverde Selles가 제출했습니다. 배경, 텍스트, 그래픽 및 기타 하이라이트를 위해 사이트 전체에 푸른빛이 도는 보라색이 사용됩니다. 영웅 섹션에는 큰 그래픽이 뒤따르는 클릭 유도문안이 포함된 태그라인이 표시됩니다. 다음 섹션에서는 한쪽에는 브랜드 색상의 그래픽으로 둘러싸여 있고 다른 한쪽에는 CTA로 둘러싸인 웹사이트 이미지가 있는 흰색 배경을 사용합니다. 프로젝트는 마우스를 가져가면 보라색 하단 테두리가 나타나는 스타일이 지정된 카드로 표시됩니다. 사이트 소유자에 대한 정보가 있는 섹션은 보라색 배경 위에 흰색 및 파란색 텍스트를 표시하고 두 개의 버튼을 포함합니다. 색상별로 하나씩. 서비스는 오프셋된 문구 내에 표시되며 호버에 스타일이 지정된 테두리가 포함됩니다. 잠시 배경이 있는 CTA는 눈에 띄는 별 아이콘을 표시합니다. 섹션에서 물결 모양 구분 기호를 많이 사용하는 방식과 이 사이트에서 색상을 사용하는 방식이 마음에 듭니다.

웹사이트 방문

2. 이야시

이 사이트는 Alex Hawro가 제출했습니다. 로고가 겹치는 스타일 메뉴와 아이콘 및 CTA가 있는 두 줄의 링크가 있습니다. 영웅 섹션에는 태그라인과 함께 연결되는 일련의 이미지가 표시됩니다. 서비스는 겹치는 제목과 서비스 페이지 링크를 포함하는 그래픽으로 표시됩니다. 큰 포스트 슬라이더는 더 흥미로운 요소 중 하나입니다. 이미지는 이전 및 다음 이미지의 일부가 표시되는 배경에 배치됩니다. 텍스트와 탐색이 있는 상자는 이미지의 왼쪽 위에 있고 겹치는 그래픽은 오른쪽에 있습니다. 슬라이드는 맨 아래에 번호가 매겨져 있습니다. 다음 섹션에는 하단에 탭이 있는 큰 이미지와 정보가 표시됩니다. 정보는 브랜드 색상을 사용하여 사용자 정의 아이콘으로 표시됩니다. 가격표는 또 다른 흥미로운 요소입니다. 각 가격은 별도의 요소에 표시됩니다. 마우스 오버 시 측면에 스타일이 지정된 테두리를 확대/축소하고 표시합니다. 나는 사이트 전체의 하이라이트와 텍스트에 사용되는 빨강 및 녹색 브랜드 색상을 좋아합니다.

웹사이트 방문

3. 피카딜리 위피

이 사이트는 Ron Studios에서 제출했습니다. 하단의 큰 상자에 통계 세트가 있는 전체 화면 배경 비디오 위에 제목을 배치합니다. 다음 섹션에서는 CTA와 함께 더 많은 정보를 제공하는 큰 상자로 디자인을 계속합니다. 다음 섹션은 어두운 파란색 배경 위에 한 면에 이미지를 표시하고 다른 면에 큰 다채로운 텍스트를 표시합니다. 서비스는 시차로 다채로운 배경 위에 동그라미 이미지 안에 표시됩니다. 이벤트 예약에 대한 정보는 굵은 노란색 배경 위에 각진 이미지를 표시합니다. 평가는 흰색 텍스트와 큰 이미지와 함께 진한 파란색 배경 위에 표시됩니다. CTA의 섹션은 다양한 너비의 이미지를 다채로운 상자에 텍스트와 함께 표시합니다. 나는 이 웹사이트에서 대담한 색상을 사용하는 것을 좋아합니다. 색상과 글꼴은 회사 브랜딩에 완벽하게 맞습니다. 이제 아이스크림을 원합니다.

웹사이트 방문

4. 센티도 커뮤니카오

이 사이트는 Fernanda Prevedello가 제출했습니다. 이 사이트는 사이트 전체에 걸쳐 많은 금색과 붉은 자두(또는 와인, 아마도?)를 브랜드 색상으로 사용합니다. 영웅 섹션에는 왼쪽에 큰 텍스트가 있는 클릭 유도문안이 표시되고 오른쪽에 브랜드 색상이 있는 그래픽이 표시됩니다. 한 면에는 스타일이 지정된 회색 배경 패턴을 사용하고 다른 면에는 스타일이 지정된 텍스트를 사용하는 그래픽과 함께 다음 섹션에 정보가 제공됩니다. 서비스 섹션의 한쪽에는 CTA가 표시되고 다른 한쪽에는 아코디언 내 서비스에 대한 설명이 표시됩니다. 케이스 섹션은 회색 배경 패턴 위에 3개의 케이스를 텍스트로 표시합니다. 블로그 섹션에는 브랜드 배경색과 겹치는 블로그 카드가 표시됩니다. 특히 이 문의 양식이 흥미롭습니다. 클릭 가능한 통화 버튼이 포함된 색상 블록 위에 양식이 표시됩니다. 나는 이 사이트에서 브랜드 색상을 사용하는 것을 좋아합니다.

웹사이트 방문

5. 본 브랜드 에이전시

이 사이트는 George Paratsokis가 제출했습니다. 텍스트와 실제 시차로 텍스트를 흥미롭게 사용합니다. 헤더의 왼쪽에는 햄버거 메뉴가 표시되고 오른쪽에는 로고가 표시됩니다. 메뉴에 마우스를 올리면 밝은 회색 상자가 표시됩니다. 아이콘을 클릭하면 해당 위치에서 메뉴가 열리고 큰 텍스트와 소셜 버튼이 표시된 화면이 나타납니다. 영웅 섹션은 태그라인을 배경에 초대형 텍스트로 표시합니다. 텍스트와 배경 모두 짙은 회색입니다. 전경에는 회사를 소개하는 흰색의 큰 제목이 표시됩니다. 스크롤하면 텍스트가 시차로 스크롤되어 제목과 별도로 스크롤되는 큰 텍스트의 포트폴리오에 대한 링크 집합이 표시됩니다. 다른 섹션에서는 배경 텍스트를 혼합하여 한쪽에는 어두운 텍스트를 표시하고 다른 한쪽에는 CTA를 생성하는 버튼으로 밝은 텍스트를 표시합니다. 커튼 바닥글은 사이트의 제목과 큰 소셜 팔로우 버튼을 보여줍니다. 스크롤 막대도 사이트에 맞게 스타일이 지정됩니다.

웹사이트 방문

6. 캐롤라 스타우딩거

이 사이트는 Sibi Ha가 제출했습니다. 브라운과 핑크 브랜드 컬러를 잘 활용한 사이트입니다. 영웅 섹션은 오버레이의 로고, 제목 및 CTA와 함께 전체 화면 배경 이미지를 시차로 표시합니다. 회사에 대한 섹션이 이를 따르며 한쪽에는 소셜 팔로우 버튼이 있고 다른 한쪽에는 이미지가 있는 정보가 포함되어 있습니다. 이 섹션에는 우아한 스크립트 글꼴로 작성된 메시지가 포함되어 있습니다. 전체 너비 예약 CTA는 배경에 브랜드 색상의 그라디언트와 분홍색 하이라이트가 있는 이미지를 사용하여 배경 이미지를 표시합니다. 더 많은 정보가 포함된 전체 화면 이미지를 사용하는 유사한 CTA가 나중에 나타납니다. 서비스에 대한 정보는 모자이크 레이아웃 내의 이미지와 텍스트가 있는 섹션에 표시됩니다. 팀 섹션에는 스타일리스트의 사진이 표시되고 일부 전기 정보가 포함됩니다. 연락처 섹션에는 한 쪽에는 영업 시간이 나열되어 있고 다른 한 쪽에는 스타일이 지정된 문의 양식이 있고 그 다음에는 전폭 지도가 있습니다.

웹사이트 방문

7. 스토크 MTB

이 사이트는 John Hawley가 제출했습니다. 이것은 브랜드 색상에 대담한 노란색을 많이 사용합니다. 영웅 섹션은 메뉴와 큰 CTA 뒤에 배경 비디오를 재생합니다. 스크롤하라는 화살표가 화면 왼쪽에 바운스됩니다. 스크롤하면 한쪽에는 세련된 제목이 있고 다른 한쪽에는 브랜드 색상으로 스타일이 지정된 버튼이 포함된 정보가 있는 섹션이 표시됩니다. Blurbs는 브랜드 색상으로 그래픽을 표시하고 추가 정보를 읽을 수 있는 링크를 포함합니다. 연락처 정보 섹션에는 하나의 그래픽과 다른 하나의 소셜 팔로우 버튼이 있는 기여 CTA가 있는 큰 블록 행이 표시됩니다. 둘 다 브랜드 색상을 사용합니다. 이것은 큰 배경 이미지를 포함하고 노란색 배경과 구분되는 스타일이 있는 구독 양식으로 이어집니다. 이 섹션의 상단에는 스타일이 지정된 섹션 구분선이 표시됩니다. 사용자 지정 바닥글에는 어두운 회색 배경에 대한 하이라이트에 노란색이 포함됩니다.

웹사이트 방문

8. 유커

이 사이트는 Sander Goorman이 제출했습니다. 이 사이트는 브랜드 색상에 파란색을 사용하고 스타일이 지정된 스크롤 막대를 포함합니다. 영웅 섹션에는 전경에 서비스에 대한 링크와 설명이 포함된 배경 비디오가 표시됩니다. 메뉴는 왼쪽에 링크를 배치하고 오른쪽에 CTA를 배치합니다. 서비스에 대한 아이콘 및 설명이 있는 광고 문구는 다음 섹션과 비디오를 겹치고 마우스를 가져가면 애니메이션됩니다. 회사에 대한 섹션의 한 면에는 요약이 표시되고 다른 면에는 설명과 함께 브랜드 색상으로 강조 표시된 키워드가 표시됩니다. 다양한 장치의 화면에 몇 가지 예가 표시되며 전체 웹사이트를 볼 수 있는 링크가 포함되어 있습니다. 요청 양식은 전체 너비 이미지 위에 배치되며 언제 전화를 걸어야 하는지 지정하는 드롭다운 상자가 포함되어 있습니다. 연락처 섹션에는 전체 너비의 CTA와 많은 연락처 링크가 포함되어 있습니다. 깔끔한 디자인이 마음에 듭니다.

웹사이트 방문

9. 로프마스터

이 사이트는 Michal Teska가 제출했습니다. 브랜드 색상에 파란색과 주황색을 많이 사용합니다. 영웅 섹션에는 세 가지 다른 레이어가 표시됩니다. 배경은 파란색 단색이며 현재 페이지와 통화 CTA를 나타내는 주황색 화살표가 포함된 메뉴와 혼합됩니다. 배경 이미지는 파란색 배경 위에 배치되며 왼쪽을 완전히 덮지 않습니다. 이 배경은 오른쪽에 주황색 디자인이 있는 진한 파란색 오버레이를 사용하며 다음 섹션과 겹칩니다. 겹치는 것은 이미지와 제목이 있는 서비스를 보여주는 슬라이더입니다. 정보는 주황색 아이콘으로 안내문 안에 제공되며 제목과 설명이 포함됩니다. 흥미로운 접촉 CTA는 영웅 섹션과 유사한 디자인을 따릅니다. 상단에 겹치는 이미지와 함께 파란색 배경을 제공합니다. 이미지가 오른쪽을 덮지 않고 짙은 주황색 오버레이가 있습니다. 클릭 유도문안은 완벽하게 눈에 띄는 큰 흰색 텍스트를 사용합니다. 파란색과 주황색을 사용하는 것이 좋습니다.

웹사이트 방문

10. 헨릭 스텐슨 안경

이 사이트는 Maximilian Leiding이 제출했습니다. 제품에 집중할 수 있도록 깔끔한 디자인을 가지고 있습니다. 히어로 섹션의 한쪽에는 CTA가 표시되고 다른 한쪽에는 사용 중인 제품의 이미지가 표시됩니다. 곡선 구분선은 영웅 섹션의 둥근 바닥 디자인을 만듭니다. 스크롤하면 4개의 베스트 셀러 제품이 표시됩니다. 그들의 배경은 웹사이트의 배경과 조화를 이룹니다. 다음 섹션에는 두 개의 열에 특정 카테고리에 대한 다른 제품 목록이 있는 페이지 링크가 있는 두 개의 제품 이미지가 표시됩니다. 왼쪽에는 제목이 있고 오른쪽에는 제품이 있습니다. 유사한 목록이 바닥글에 더 가깝게 나타나며 더 많은 제품을 포함합니다. 정보는 전체 이야기를 읽을 수 있는 링크와 함께 한 면에 이미지와 다른 면에 텍스트가 있는 2열 섹션으로 제공됩니다. 뉴스레터 가입 양식은 바닥글로 연결되고 영웅 섹션에 사용된 색상을 추가합니다. 심플하고 깔끔한 디자인이 마음에 듭니다.

웹사이트 방문

결론

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

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

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

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