12 Divi의 수직 탐색의 예

웹사이트를 만들 때 고려해야 할 사항은 매우 다양합니다. 일반적으로 웹 사이트의 전체 레이아웃이 어떻게 보이고 느껴지기를 원하는지부터 시작합니다. 보내려는 메시지에 힘을 실어주기 위해 웹 사이트의 내용과 일치하기를 원합니다.

웹사이트가 방문자의 행동에 미치는 영향에 중요한 역할을 하는 요소 중 하나는 기본 메뉴입니다. Divi를 사용하면 웹사이트의 나머지 부분과 일치하는 아름다운 방식으로 메뉴 스타일을 지정할 수 있고 웹사이트를 통해 방문자를 안내하는 데 도움이 되는 수많은 가능성이 있습니다.

이러한 가능성 중 하나는 상단 메뉴 대신 수직 탐색을 사용하는 것입니다. 수직 탐색 자주 사용하는 것이 아니지만, 그것은 잘 생각 않다면 그것은 놀라운 결과를 제공 할 수 있으며 귀하의 웹 사이트의 나머지 부분과 일치하는 경우. 상단 메뉴와 마찬가지로 수직 메뉴는 방문자가 웹사이트에 머무는 동안 따라갑니다.

영감을 얻기 위해 수직 탐색을 사용하여 웹사이트 전체를 탐색하는 방식을 개선함으로써 방문자의 경험을 최적화하는 12개의 웹사이트를 선택했습니다.

1. Master en Diseno de Interiores

Master en Diseno de Interiores는 인테리어 디자인에 관한 멋진 웹사이트입니다. 위의 이미지에서 세로 메뉴를 사용하여 웹사이트에 멋진 추가 기능을 제공한 방법을 볼 수 있습니다.

웹사이트에서 사용되는 색상은 매우 중립적이며 웹사이트와 해당 회사 또는 브랜드에 현대적인 느낌과 느낌을 줍니다.

수직 탐색도 예외는 아닙니다. 사용된 색상은 매우 은은하여 읽는 동안 눈에 거슬리지 않습니다.

2. 상단 모델

Model On Top은 모델 관리 사이트입니다. Divi로 만든 이 웹사이트는 일정한 조화를 이루어 회사에 연결하고 싶은 전문성과 전문성을 보여줍니다.

로고, 페이지 및 검색 표시줄과 같은 필요한 모든 요소가 포함된 매우 멋진 수직 탐색 기능 외에도 웹사이트 시작 부분에 비디오 배경을 사용하여 참여를 유도했습니다.

수직 탐색에는 특별한 디자인이 많이 필요하지 않고 오히려 깔끔하게 유지하고 페이지의 나머지 부분에 걸쳐 시각적으로 작동하도록 하기로 결정했습니다.

3. Art-On-The-Run Filmschool 베를린

Art-On-The-Run Filmschool Berlin은 웹사이트에서 영화 학교가 필요로 하는 예술적 측면을 완벽하게 표현했습니다. 수직 탐색은 전체 그림에서 특별한 목적을 가지고 있습니다.

메뉴를 일종의 '목록'처럼 보이게 하는 이점을 누리기 위해 의도적으로 수직 탐색을 사용했습니다. 그들은 웹사이트의 내용과 일치하는 번호를 사용했습니다. 번호 매기기는 페이지 외에도 시나리오나 에피소드로 쉽게 해석될 수 있습니다.

페이지와 로고의 조합은 어떤 단순함과 구조감을 줍니다. 그들은 웹 사이트가 무엇에 관한 것인지와 매우 일치하는 비주얼을 표현하는 데 실패하지 않았습니다.

4. 알렉스 브랜드

Alex 브랜드는 어린이를 위한 모든 종류의 물건을 판매하는 Divi 전자 상거래 웹사이트입니다. 예술 및 공예에서 가구 및 게임에 이르기까지. 웹사이트는 그들이 표현하고자 하는 감정의 종류를 즉시 보여줍니다. 장난스럽고 초대합니다.

이 경우 수직 탐색도 매우 신중하게 선택되었습니다. 다른 페이지가 많이 있습니다. 상위 메뉴를 선택했다면 구조가 손실되고 공간이 충분하지 않았을 것입니다.

5. 데블린 사진

Delvin Photos는 아마도 이 게시물에서 언급된 모든 웹사이트 중 가장 우아한 웹사이트일 것입니다. Delvin Photos는 웹사이트를 사용하여 모든 작업을 독창적이고 매력적인 방식으로 표시하여 제공하는 서비스에 대한 새로운 고객을 유치합니다.

그들은 수직 탐색을 사용하여 웹사이트의 나머지 부분에서 사용하고 있는 우아함을 강조하고 기본 메뉴에 소셜 미디어 아이콘을 포함했습니다. 또한 사람들이 웹사이트에 머무는 동안 언제든지 소셜 미디어 채널에 액세스할 수 있도록 합니다.

6. 야회 메이크업

Soiree Makeup은 메이크업에 관한 모든 것을 다루는 웹사이트입니다. 웹사이트는 특히 메이크업 아티스트의 메이크업 서비스를 제공하기 위해 만들어졌습니다. 웹사이트는 모든 메이크업 아티스트에게 기대되는 단순함과 우아함을 즉시 보여줍니다. 너무 화려하지는 않지만 보기에는 예쁩니다.

일반적으로 웹 사이트는 전체 화면을 차지하지 않으므로 콘텐츠가 더 집중됩니다. 수직 탐색에서 대부분의 관심은 로고와 연락처 상자에 갑니다.

수직 탐색 내에 연락처 상자를 포함하면 메이크업 아티스트가 웹사이트의 가장 중요한 목적을 강조할 수 있습니다. 새로운 리드, 새로운 고객 및 새로운 예약을 얻습니다.

7. 네이선 웰튼 사진

Nathan Welton Photography는 이 게시물을 위해 선택한 두 번째 사진 웹사이트입니다. 사진 웹사이트에 수직 탐색을 사용하는 것은 다른 웹사이트보다 훨씬 일반적입니다. 그것은 일반적으로 웹 사이트의 사진이 스스로를 말해주기 때문입니다.

사진 웹사이트의 웹사이트 소유자는 사용하기 쉽고 산만하지 않은 메뉴를 제공함으로써 이미지에 초점을 유지하기 위해 간단한 수직 탐색을 사용합니다.

Nathan Welton이 자신의 웹사이트에서 사용한 이미지는 바로 그 이미지입니다. 그들은 모험으로 가득 차 있고 자신의 이야기를 합니다. 수직 탐색은 실용적인 목적을 위해서만 존재하며 최상위 메뉴처럼 페이지를 중단하지 않습니다.

8. 릴리 사진

Lilly Photography는 이 게시물을 위해 선택한 마지막 사진 웹사이트입니다. 이 웹 사이트의 가장 좋은 점은 홈페이지에 갤러리를 사용한다는 것입니다.

갤러리는 특정 경험의 느낌을 만들기 위해 과거에 수행된 작업을 보여줍니다. 왜냐하면 결국; 사람들은 자신이 기대하는 것과 일치하는 사진을 찍는 사진 작가를 찾고 있습니다.

수직 탐색은 Nathan Welton이 사용하는 수직 탐색과 유사합니다. 간단하지만 작업을 완료합니다.

9. 영화 피츠버그

Film Pittsburgh는 영화 상영 기관입니다. 그들이 한 좋은 일 중 하나는 방문자가 실용적인 정보를 얻을 수 있도록 페이지 상단에 두 번째 메뉴를 만든 것입니다.

반면 수직 탐색은 정보를 제공하지만 방문자를 올바른 페이지로 안내하여 스토리와 사명을 이해하는 데 도움이 됩니다. 실용적인 페이지와 내레이션 페이지를 서로 나누면 기본 메뉴에서 스토리텔링이 강화됩니다.

수직 탐색을 사용하는 것 외에도 Film Pittsburgh는 관련 배경 이미지로 디자인을 향상시키기 위해 공간을 남겨둔 전체 화면 크기를 사용하지 않았습니다.

10. 블렌드러브

BlendLove는 호주에 위치한 식품 전문점입니다. 그들은 고객이 알아야 할 모든 실용적인 정보를 고객에게 알리기 위해 웹사이트를 구축했습니다.

그들이 웹사이트에서 제공하는 멋진 추가 기능 중 하나는 그들이 만드는 건강 식품으로 가득 찬 전자책을 구입할 수 있는 기회입니다. 고객과 소통하고 고객이 누구인지 알게 되며 이익을 얻을 수 있는 좋은 방법입니다.

웹사이트 자체에는 그들이 가지고 있는 로고와 멋진 대조를 이루는 어두운 톤의 색상 팔레트가 있습니다. 그들은 수직 탐색에서도 전체 웹사이트에서 색상이 일관되게 유지되도록 했습니다. 수직 탐색이 화면의 비교적 큰 부분을 차지하는 반면 상위 메뉴는 일반적으로 눈에 띄지 않기 때문에 일관성이 있는지 확인하는 것이 중요합니다.

11. 맛있게 드세요

Bon Appetit은 다양한 맛과 향이 포함된 워크숍을 제공하는 데 중점을 둔 벨기에 웹사이트입니다. 앞의 예와 이 예는 한 가지 확실한 점에서 다릅니다. Bon Appetit 웹사이트는 시각적인 것보다 제공하는 서면 콘텐츠에 더 중점을 둡니다.

세로 메뉴는 3가지 종류로 나뉩니다. 로고, 페이지 및 고객 서비스 및 배송과 같은 추가 서비스. 페이지와 추가 서비스 간의 스타일 차이는 웹사이트에 조직적인 느낌과 터치를 더해줍니다.

12. 타이 레스토랑 먹기

Eat Thai Restaurant은 이 게시물의 마지막 예입니다. 요점에 도달하는 현지 소유의 모바일 레스토랑입니다. 그들의 웹사이트에는 여러 페이지가 없습니다. 그들은 오히려 한 페이지를 차지하고 가장 중요한 것에 집중했습니다. 음식. 이 사이트는 주문을 원하는 사람들을 주문 웹사이트로 리디렉션하는 데 사용됩니다.

이 예에서 사용된 수직 탐색의 좋은 점은 탐색하기 위한 것이 아니라 정보를 제공하기 위한 것입니다. 수직 탐색은 방문자가 웹사이트에 머무는 동안 추적하므로 정보도 마찬가지입니다. 그들은 소셜 아이콘 및 '지금 주문' CTA와 함께 메뉴의 모든 관련 정보를 제공했습니다.

마지막 생각들

이 게시물이 현재 보유하고 있는 웹사이트나 앞으로 만들 웹사이트에 대한 훌륭한 개념을 생각하는 데 도움이 되는 많은 영감을 주기를 바랍니다. 제안이나 의견이 있는 경우 아래 댓글 섹션에 자유롭게 댓글을 남겨주세요! 그리고 당신이 거기에 있는 동안 저희에게 알려주십시오. 어떤 종류의 웹사이트에 수직 탐색을 사용하시겠습니까?

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

LuckyDesigner / shutterstock.com의 주요 이미지