전자 상거래 헤더 디자인 : 필수 요소, 팁 및 기타 (2025)

게시 됨: 2025-02-07

좋아하는 가게에 들어가는 상점을 상상해보십시오. 쇼핑 카트를 어디서 찾을 수 있는지, 아이템을 찾는 방법, 각 부서가 위치한 위치를 정확히 알고 있습니다. 마찬가지로 온라인 상점 헤더는 동일한 쉬운 탐색을 제공해야합니다. 그것은 조용히 당신을 안내하여 가게를 탐험하는 동안 당신이 무언가를 놓치지 않도록합니다.

그러나 여기에 문제가 있습니다. 자연스럽고 쉽게 경험하는 경험을 만드는 데 신중한 계획이 필요합니다. 현재 디자인을 새로 고치거나 신선하게 시작하든, 올바른 헤더 균형을 제작하는 것은 생각보다 간단합니다. 특히 코너에있는 Divi와 같은 유연한 도구는

목차
  • 1 왜 훌륭한 전자 상거래 헤더를 만드는가?
  • 2 상점 헤더가 판매를 잃게하는 이유
    • 2.1 고객을 좌절시키는 내비게이션
    • 2.2 혼란스러운 메뉴 레이블
    • 2.3 검색 기능 누락
    • 2.4 느린 로딩 요소
    • 2.5 가난한 모바일 적응
  • 3 완벽한 헤더 구축 : 필수 요소
    • 3.1 명확한 내비게이션 메뉴
    • 3.2 브랜드 아이덴티티 요소
    • 3.3 스마트 검색 기능
    • 3.4 실시간 카트 업데이트
    • 3.5 연락처 정보 배치
  • 4 헤더 청사진 : Divi로 더 잘 구축
    • 4.1 Divi AI : 디자인 초강력
    • 4.2 Divi Quick 사이트를 사용하여 온라인 상점을 곧 설정
    • 4.3 WordPress & Divi : 제한없는 디자인
    • 4.4 Divi Pro 이점
  • 기본 사항 넘어서 : 고급 사용자 정의 팁
    • 5.1 개인화 된 사용자 인사
    • 5.2 시즌 준비 헤더
    • 5.3 미세 분류
    • 5.4 특별 제안 하이라이트
    • 5.5 헤더 디자인 분할 테스트
  • 6 오늘 헤더에게 화장을합니다

왜 훌륭한 전자 상거래 헤더를 만드는가?

체크 아웃 카운터 나 쇼핑 카트를 찾을 수없는 상점으로 들어가는 사진 - 실망 스럽습니까? 전자 상거래 헤더 디자인은 프론트 데스크, 주요 간판 및 실제 매장의 지원 부스와 같은 기능을 수행합니다. 고객이 귀하의 사이트에 착륙하면 필요한 모든 것을 찾을 수 있습니다.

견고한 헤더는 좋아 보이는 것보다 더 많은 일을합니다. 쇼핑객을 유지합니다. 대부분의 방문객은 단 몇 초 안에 체류 여부를 결정합니다. 헤더가 그 차이를 만들 수 있습니다.

검색 장소, 카테고리 검색 방법 및 카트에있는 내용을 보여 주면서 쇼핑을 더 쉽게 보여줍니다. 그리고 쇼핑이 쉬운 것은 구매하기 위해 고집하는 행복한 고객을 의미합니다. 가장 중요한 부분? 그들은 쇼핑 여행이 얼마나 순조롭게지면 눈치 채지 못할 수도 있습니다. 그리고 그것이 바로 당신이 원하는 것입니다.

상점 헤더가 판매를 잃게하는 이유

일부 온라인 상점에서 원하는 것을 찾기 위해 어떻게 더욱 어려워 지는지 알아 차렸습니까? 마다 모든 턴이 좌절로 이어지는 미로에 들어가는 것과 같습니다. 헤더는 쇼핑보다 클릭하면 고객이 실행할 수 있습니다. 귀중한 판매 비용이들 수있는 일반적인 헤더 실수를 밝혀 봅시다.

고객을 좌절시키는 항해

상점의 헤더 탐색은 고객이 원하는 곳을 정확히 지적하는 유용한 상점 보조원처럼 작동해야합니다. 그러나 서로 너무 많은 메뉴 항목을 서로 쌓거나 끝없는 드롭 다운 뒤에 중요한 섹션을 집어 넣으면로드 블록을 올리십시오.

고객이 특정 제품 범주를 찾으려고 노력하고 머리를 회전시키는 옵션의 벽에만 직면하십시오. 목적지에 도달하는 데 클릭이 더 많을수록 다른 곳에서 쇼핑 할 가능성이 높아집니다. 깨끗하고 간단하게 유지하고 고객이 혼란스러워하는 대신 쉽게 탐색하는 것을 지켜보십시오.

혼란스러운 메뉴 레이블

메뉴 레이블은 지역 식료품 점의 표지판만큼 명확해야합니다. "여성 의류"대신 "선별 된 미학을 쇼핑"하는 카테고리에 레이블을 지정하면 고객이 너무 열심히 일하게합니다. 멋진 마케팅 말하기를 건너 뛰십시오 - 쇼핑객은 해독 퍼즐이 아닌 제품을 찾고 싶어합니다.

좋은 규칙? 메뉴 항목의 의미를 설명 해야하는 경우 더 간단한 이름이 필요할 수 있습니다. "8 살짜리 아이 가이 레이블을 이해할 수 있습니까?" 그렇지 않다면, 그 단어를 다시 생각할 때입니다.

Nike의 내비게이션 메뉴 스크린 샷

검색 기능 누락

실제 상점에 금전 등록기를 숨기지 않으므로 온라인 상점에서 검색 창을 숨기는 이유는 무엇입니까? 고객이 원하는 것을 알고 사이트에옵니다. 빠르게 찾는 데 도움이됩니다. 누락되거나 숨겨진 검색 바는 슈퍼마켓에서 모든 통로 표시를 제거하고 쇼핑객에게 스스로 파악하도록 지시하는 것과 같습니다.

모두가 기대하는 곳에 검색 창을 넣으십시오. 헤더의 전면 및 중앙. 잘 작동하는지 확인하십시오. 수십 개의 재고가있을 때 "파란색 셔츠"에 대한 "결과가없는 결과"를 보여주는 검색 창은 검색이없는 것보다 더 나쁩니다.

느린 로딩 요소

이 화려한 헤더 애니메이션은 디자인 미리보기에서 멋지게 보일 수 있지만 아마도 고객을 미치게 만들 수 있습니다. 각 부하 시간의 여분의 부하 시간은 온라인 쇼핑을 할 때 영원처럼 느껴집니다.

헤더 요소가 천천히로드 할 때 발생하는 일을보십시오. 메뉴 항목이 뛰어 내리고 버튼이 이동하고 고객이 잘못된 것을 클릭하십시오. 그것은 움직이는 선반에서 물건을 잡으려고하는 것과 같습니다. 헤더를 가볍게 유지하십시오. 로드하는 간단한 헤더는 즉시 나타나는 데 영원히 걸리는 멋진 헤더를 이겼습니다.

고성능 전자 상거래 웹 사이트를 얻는 것은 까다로울 수 있습니다. 견고한 기초가 핵심입니다. EWWW Image Optimizer의 이미지 압축과 결합 된 WP Rocket의 캐싱 및 성능 최적화와 함께 전자 상거래 사이트에 대해 특히 최적화 된 Siteground의 Woocommerce 호스팅을 고려하십시오. 이 조합은 기능이 풍부한 전자 상거래 사이트를 깃털처럼 부유하게 만들 수 있습니다.

열악한 모바일 적응

휴대 전화를 꺼내고 상점 헤더를보십시오. 확대하지 않고 각 메뉴 항목을 쉽게 탭할 수 있습니까? 모바일 고객은 매장을 탐색하기 위해 손가락 체조를 수행 할 필요가 없습니다.

데스크탑에서 완벽하게 작동하는 헤더는 전화기에서 악몽이 될 수 있습니다. 메뉴 텍스트가 함께 압박되고 버튼이 너무 작아지고 드롭 다운이 전체 화면을 덮습니다. 모바일 헤더는 방해받지 않고 작업을 수행해야합니다. 그것을 쉽게 엄지 손가락에 도달 할 수있는 데스크탑 헤더의 컴팩트 한 버전으로 생각하십시오.

완벽한 헤더 구축 : 필수 요소

완벽한 헤더를 만드는 것은 잘 조직 된 상점 창을 설정하는 것과 같습니다. 고객은 필요한 것을 찾을 수있는 곳에 대해 두 번 생각할 필요가 없습니다. 다음은 원활한 쇼핑 경험을 만들기 위해 함께 작동하는 헤더 요소의 필수 점검 목록입니다.

내비게이션 메뉴를 지우십시오

내비게이션 메뉴는 매장의 로드맵처럼 작동합니다. 고객을 원으로 보내지 않고 올바른 방향으로 고객을 가리켜 야합니다. 메인 메뉴에서 가장 인기있는 카테고리로 시작하십시오. 쇼핑객에게 의미가있는 깨끗하고 논리적 인 그룹으로 관련 아이템을 함께 넣으십시오.

옷을 판매하는 경우 내부 제품 코드 대신 유형 또는 경우에 따라 옷을 그룹화하십시오. 그리고 그 드롭 다운 메뉴를 기억하십니까? 짧고 달콤하게 유지하십시오. 아무도 티셔츠를 찾기 위해 5 레벨 메뉴를 통해 떠나기를 원하지 않습니다. 최고의 내비게이션 메뉴는 유용한 상점 직원과 대화하는 것과 같이 자연 스럽습니다.

브랜드 아이덴티티 요소

로고와 브랜드 색상은 단지 예쁘게 보이는 것 이상으로 고객이 자신이 올바른 위치에 있다는 것을 알 수 있도록 도와줍니다. 운전하는 동안 맥도날드의 황금 아치를 얼마나 빨리 발견하는지 생각해보십시오. 상점 헤더도 같은 방식으로 작동해야합니다.

사람들이 볼 것으로 예상되는 곳에 (보통 왼쪽 상단) 로고를 놓고 작은 화면에서도 바삭 바삭하고 읽을 수 있는지 확인하십시오.

내비게이션 또는 검색 기능을 압도하지 않고 브랜드 색상이 튀어 나와야합니다. 그리고 여기 프로 팁이 있습니다 : 로고를 홈페이지에 다시 연결하십시오. 고객은이 지름길을 기대하며 생각보다 더 자주 사용할 것입니다.

스마트 검색 기능

검색 바를 상점의 초강대국으로 생각하십시오. 쇼핑객이 즉시 파악할 수있는 곳, 보통 헤더의 중앙 또는 오른쪽 상단에 배치하십시오. 그러나 검색 상자 만 있으면 충분하지 않습니다. 결과에 제품 이미지를 추가하고 바로 가격을 표시하며 쇼핑객이 검색을 떠나지 않고 카테고리별로 필터링하도록합니다.

누군가 "Blue Tee"를 입력하면 타이핑을 마치기 전에 옵션을 표시합니다. 더 좋은 점은 타이핑 실수를 할 때에도 제품을 찾도록 도와줍니다. "잭"은 "재킷"을 의미하고 "여성"은 "여성"을 의미한다는 것을 알기에 충분히 똑똑해야합니다.

WordPress를 사용하여 전자 상거래 웹 사이트를 만드는 경우 검색 플러그인이 매우 유용 할 수 있습니다. SearchWP는 매우 인기있는 옵션입니다. 여러 검색 엔진을 사용하고 사용자 정의 필드, 분류 및 게시물 유형을 통해 검색하여 WordPress 사이트를 향상시킬 수 있습니다. 특정 게시물을 쉽게 제외하고 검색 양식을 사용자 정의하며 WooCommerce와 통합하십시오. 검색 분석에 액세스하고 관련 컨텐츠를보고, 리디렉션을 처리하며, 원하는대로 순서 결과에 액세스 할 수도 있습니다.

실시간 카트 업데이트

쇼핑객은 자신의 물건이 카트로 만들었는지 궁금해하는 것보다 더 버그가 없습니다. 라이브 업데이트를 표시하여 카트 아이콘이 더 열심히 작동하도록하십시오. 그들이 새로운 것을 추가 할 때 적은 숫자를 나타냅니다. 실제 쇼핑 바구니를 바라 보는 것처럼 빠른 호버로 그들의 선택을 들여다 보도록하십시오. 고객을 돕고 싶습니까? 헤더에서 총 가격을 바로 보여주십시오. 그것은 그들이 계획보다 더 많이 소비했을 때 결제시 어색한 놀라움에서 그들을 절약합니다.

연락처 정보 배치

질문이 있습니까? 고객은 확실합니다. 전화 번호 나 채팅 버튼을 빨리 발견 할 수있는 곳에 넣으십시오. 도움이 필요할 때 사냥을 좋아하는 사람은 없습니다. 오른쪽 상단 코너는 일반적으로 가장 잘 작동합니다. 멋진 "우리와 연결"언어를 건너 뛰고 기본 사항과 같은 전화, 채팅 또는 이메일을 고수하십시오. 그리고 모호한 아이콘 뒤에 연락처 정보를 숨기지 마십시오. 지금 열려 있다면 그렇게 말하십시오. 라이브 채팅이 준비되어 있다면 그것을 보여주십시오. 도움을 아는 것은 단지 클릭 한 사람이라는 것을 아는 것과 같은 신뢰를 구축하는 것은 없습니다.

헤더 청사진 : Divi로 더 잘 구축

타협을 의미하는 데 사용되는 온라인 상점을 설계합니다. 강성 템플릿에 정착하거나 맞춤형 개발에 수천 명을 투자하십시오. WordPress는 열린 가능성을 깨뜨 렸지만 Divi는 이러한 가능성을 전자 상거래 기업가들에게 강력한 현실로 바꿉니다.

Divi는 온라인 상점의 모든 측면을 구성하는 방법 (헤더 포함)을 개혁하는 완전한 웹 사이트 디자인 툴킷입니다. 코딩보다 스케치처럼 느껴지는 드래그 앤 드롭 인터페이스를 사용하면 코딩보다 더 좋아 보이는 헤더를 만들 수 있지만 쇼핑 경험을 통해 고객을 안내 할 수 있습니다.

Divi의 새 홈페이지 스크린 샷

Divi의 테마 빌더 및 200+ 디자인 모듈은 완벽한 디자인 생태계를 제공합니다.

테마 빌더를 사용하면 헤더에서 바닥 글 및 제품 페이지, 404 페이지에 이르기까지 웹 사이트의 모든 측면을 스타일링 할 수 있습니다. 헤더에서 실시간으로 업데이트되는 카트 아이콘을 원하십니까? 모바일에 완벽하게 적응하는 반응 형 메뉴?

디비 테마 빌더 영역

이것들은 복잡한 코딩 프로젝트가 아닙니다. Divi의 시각적 빌더에서 간단한 클릭이 될 것입니다. 이것은 당신이 다른 사람의 비전에 절대로 박스를받지 않았다는 것을 의미합니다. 당신은 당신의 헤더를 장식 요소가 아니라 전략적 도구로 만들 수있는 힘을 가지고 있습니다.

귀하의 웹 사이트에는 단순한 도구 이상이 필요합니다. 킬러 디자인이 필요합니다. Divi는 템플릿이 아니라 사이트의 모든 페이지에서 날카 로워 보이는 풀 디자인 시스템 인 2000 개 이상의 즉시 사용 가능한 레이아웃을 제공합니다.

Divi의 일부 레이아웃의 스크린 샷

당신이 원하는 것을 정확하게 얻는 디자인 친구를 상상해보십시오. Divi를 사용하면 웹 사이트가 사진을 찍는 방식을 정확하게 볼 때까지 드래그, 드롭 및 조정할 수 있습니다. 더 이상 정착하지 않습니다.

Divi 회원이 되십시오

Divi AI : 디자인 초강력

Divi의 Visual Builder는 웹 사이트 디자인이 종이에 스케치하는 것처럼 느껴집니다. 이제 Divi AI는 디자인 프로세스에 더욱 창의적인 자유를 더합니다. 자신의 카피라이터, 어시스턴트, 이미지 편집기 및 개발자를 찾을 수 있습니다. Divi Ai는 귀하의 브랜드를 이해하고 이미 Divi에서 일하는 곳에서 귀하의 언어로 의사 소통합니다.

상점의 개성을 포착하는 신선한 제품 이미지를 원하십니까? Divi AI에게 원하는 것을 말하면 디자인에 맞는 맞춤형 비주얼을 만듭니다. 끝없는 재고 사진 검색 또는 고가의 사진 촬영에 작별 인사를하십시오.

이미 제품 사진이 있지만 더 전문적으로 보이려면 필요합니까? Divi AI는 빌더에서 바로 향상시키는 데 도움이됩니다.

페이지에 새 섹션을 추가하고 싶으십니까? Divi AI에게 원하는 것을 말하면 신속하게 합류 할 것입니다.

사용자 정의 코드가 필요할 때도 도움이됩니다. 복잡한 프로그래밍이 필요하지 않습니다.

Divi AI로 시간을 절약하십시오

Divi Quick 사이트를 사용하여 온라인 상점을 곧 설정

온라인 상점을 빨리 실행하고 싶으십니까? Divi Quick Sites는 Divi AI를 사용하여 비즈니스를 기반으로 사용자 정의 상점을 구축합니다. 제품과 브랜드에 대해 알려 주시면 스타일과 일치하는 관련 컨텐츠 및 이미지로 가득 찬 헤더, 제품 페이지 및 탐색 기능이 포함 된 고유 한 레이아웃을 얻을 수 있습니다.

상점을 설립 하시겠습니까? 그것은 당신을 위해 WooCommerce를 설정할 것입니다. 이것은 템플릿을 선택하는 것 이상으로 진행됩니다. 비즈니스에 맞게 맞춤 제작 한 상점을 위에서 아래로 느끼는 상점을 얻을 수 있습니다.

Divi의 AI 기반 디자인 외에도 신중하게 선별 된 스타터 사이트 컬렉션을 찾을 수 있습니다. 우리의 디자인 팀은 맞춤형 사진과 삽화로 각각을 공예합니다. 상점에 맞는 디자인을 선택하고 제품과 브랜드 요소를 추가하고 몇 분 안에 출시하십시오.

AI를 통한 Divi Quick Site (AI 또는 사전 제작 된 컬렉션 등)로 구축 한 모든 매장에는 완전한 설계 시스템이 있습니다. 헤더, 내비게이션, 색상 및 글꼴은 처음부터 조화롭게 작동합니다. 계절 배너 또는 새로운 프로모션 추가? 글로벌 사전 설정은 모든 것이 브랜드와 완벽하게 일치하도록합니다. 테마 설정은 일관성을 유지하고 모든 요소는 자동으로 브랜드 색상과 타이포그래피를 사용합니다.

우리는 디자인 세부 정보를 처리하여 제품, 콘텐츠 및 브랜드 아이덴티티와 같은 중요한 사항에 집중할 수 있습니다. 그것이 진정한 디자인 시스템을 작동시키는 이유입니다.

오늘 Divi를 시도하십시오

WordPress & Divi : 제한없는 디자인

WordPress와 Divi는 함께 온라인 상점을 빛나게합니다. Divi는 디자인 매직을 처리하지만 WordPress의 플러그인 컬렉션을 사용하면 가시성을 높이는 SEO 도구에서 판매를 펌핑하는 WooCommerce 애드온에 이르기까지 매장 요구 사항을 추가 할 수 있습니다. 어떤 플러그인을 추가하든 헤더는 날카 롭고 기능적으로 유지됩니다.

Divi는 75 개 이상의 플러그인, 도구 및 서비스와 통합됩니다.

Divi의 일부 통합 스크린 샷

도움이 필요하십니까? 당신은 결코 혼자입니다. 76,000 명의 Facebook 커뮤니티에 가입하거나 쉬운 튜토리얼을 따르거나 자세한 가이드를 확인하십시오. 가게를 더 가져갈 준비가 되셨습니까? Divi 전문가가 구축 한 프리미엄 아동 테마, 확장 및 디자인 팩을 위해 시장을 찾아보십시오. 각 추가는 Divi의 쉬운 시각적 편집을 유지하면서 좋아하는 추가 기능을 추가합니다.

디비 마켓 플레이스

Divi Pro 이점

온라인 상점을 운영한다는 것은 예산을 포함한 모든 세부 사항 수를 의미합니다. Divi의 Pro Tools는 프리미엄 가격표없이 프리미엄 디자인 기능을 제공합니다. Divi AI를 제외하고 Divi Pro에서 번들로받는 것은 다음과 같습니다 (별도로 구매하면 $ 16.08에서 시작) :

  • Divi 팀 (개별적으로 구매할 때 매월 $ 1.50/Person)을 사용하면 Divi의 도구, 지원 및 AI 기능에 대한 전체 액세스 권한으로 디자인 및 마케팅 직원이 한 공간에서 함께 작업 할 수 있습니다. 상점의 헤더 및 기타 요소를 편집 할 수있는 사람을 제어합니다. 최대 4 명의 회원 추가 (추가 비용으로 추가 할 수 있음)
  • Divi Cloud (개별적으로 구매 한 경우 6 달러)는 헤더 디자인, 레이아웃 및 브랜드 요소를 한 지점에 저장합니다. 한 번의 클릭으로 매장 전체의 계절 헤더 또는 프로모션 배너를 스왑하십시오.
  • Divi VIP (개별적으로 구매 한 경우 6 달러)는 30 분의 지원 응답 시간, 24 시간 도움말 및 마켓 플레이스 구매 10% 할인으로 매장을 원활하게 운영 할 수 있도록합니다. 깨진 웹 사이트는 판매 비용이 들지 않아야하기 때문입니다.

Divi Pro 멤버십으로 $ 277/년의 빅을 구매하는 것보다 $ 388 적은 비용을 절약하십시오. 최대 4 명의 회원에 대한 Divi AI, Cloud, VIP 및 Team Access를 얻을 수 있습니다.

평생 접근을 원하십니까? Lifetime + Pro Bundle은 첫 해에 297 달러에 영구적 인 Divi Access + Yearly Pro Services를 제공 한 다음 연간 $ 212로 $ 528를 절약합니다.

Divi Pro 가격

Divi Pro로 워크 플로를 업그레이드하십시오

기본 사항을 넘어서 : 고급 사용자 정의 팁

기본 사항을 마스터 한 후에는 매장을 돋보이게하는 특별한 손길을 추가해야합니다. 이러한 고급 기능을 비밀 소스로 생각하십시오. 캐주얼 브라우저를 충성도가 높은 고객으로 바꾸는 작은 세부 사항입니다. 이러한 스마트 사용자 정의는 헤더를 기능적에서 환상적으로 변환 할 수 있습니다.

개인화 된 사용자 인사

현지 커피 숍에 들어 와서 바리 스타가 당신의 이름을 부르는 것을 들었습니까? 동일한 친근한 인식은 온라인 상점에도 놀라운 일입니다. 헤더는 로고를 표시하는 것 이상을 할 수 있습니다. 친숙한 얼굴을 다시 환영 할 수 있습니다. 일부 연구에 따르면 개인화 된 경험은 판매량을 최대 40%늘릴 수 있습니다.

Divi의 조건 옵션을 사용하면 매장 헤더에 이러한 사려 깊은 터치를 추가 할 수 있습니다. 회원 수준에 따라 보는 것을 전환하십시오. 일반 고객은 보상 포인트가 최고를 발견하고 새로운 방문객은 친절한 "환영"메시지를받을 수 있습니다.

시즌 준비된 헤더

상점 헤더는 다양한 계절과 판매를 위해 상점을 꾸미는 것과 같은 쇼핑 분위기를 설정합니다. 헤더를 신선하게 유지하면 고객이 상점이 활성화되어 자주 확인해야합니다.

Divi를 사용하면 컴퓨터에 접착 된 상태를 유지하지 않고 헤더 변경 사항을 예약 할 수 있습니다. 특정 날짜 로이 헤더를 예약하면 제 시간에 나타납니다. 예를 들어, 겨울 컬렉션 메뉴는 손가락을 들어 올리지 않고 11 월마다 나타날 수 있습니다.

그래도 계절 변화를 실용적으로 유지하십시오. 축제 디자인으로 중요한 내비게이션을 묻지 말고 판매 배너가 검색 창을 보지 못하게하십시오. 일반 고객은 계절별 감각이 추가 된 상태에서 일반적인 자리에서 모든 것을 찾아야합니다. 완전한 탐색 점검보다는 겨울 동안 헤더의 색 구성표를 변경하는 것과 같은 미묘한 터치를 생각해보십시오.

미세 분류

헤더의 작은 움직임은 상점이 더 살아 있고 반응을 느낄 수 있습니다. 요소가 부드럽게 사라지거나 메뉴 항목이 호버에 응답하면 고객은 매장을 통해 미묘한 신호를받습니다. 이 작은 애니메이션은 방해가되지 않고 더 매력적인 쇼핑 경험을 만듭니다.

Divi의 호버 효과를 통해 헤더에 사려 깊은 터치를 추가 할 수 있습니다. 고객이 고객 위로 떠날 때 메뉴 항목을 부드럽게 강조 할 수 있으며 로고가 상단으로 다시 스크롤 할 때 부드럽게 볼 수 있습니다. 이 작은 세부 사항으로 인해 상점은 세련되고 전문적으로 느껴집니다.

그러나 배 밖으로 가지 마십시오. 사이트 속도를 늦추거나 쇼핑을 방해하는 화려한 애니메이션을 건너 뜁니다. 헤더는 가벼운 쇼처럼 보이지 않아야합니다. 각 움직임은 목적을 달성해야합니다. 고객이 지원 조치보다 애니메이션을 더 많이 발견하면 다시 전화를 걸십시오. 이러한 터치는 방해가 아니라 도움이되어야합니다.

특별 제안 하이라이트

최상의 거래에주의를 기울이면 고객이 가치를 바로 발견하는 데 도움이됩니다. 헤더에 잘 배치 된 제안은 캐주얼 브라우저를 구매자로 전환 할 수 있지만 명확하고시기 적절한 경우에만 가능합니다.

Divi를 사용하면 헤더를 혼란스럽게하지 않고 이러한 거래를 선보일 수 있습니다. 메인 내비게이션 위에 미묘한 배너를 추가하여 무료 배송 임계 값을 강조하거나 현재 프로모션을 표시하십시오. 하루 종일 또는 일주일 내내 회전하도록 다양한 제안을 예약 할 수도 있으며 헤더는 신선하고 관련성을 유지할 수도 있습니다. 마찬가지로, Divi AI를 사용하여 방문자를 참여시키고 현재 제안을 확인하는 데 관심이있는 훌륭한 사본을 만들어보십시오.

그러나 제안에 집중하십시오. 헤더에 여러 프로모션을 채우거나 방문자를 괴롭히는 공격적인 플래시 배너를 사용하지 마십시오. 최고의 제안을 선택하고 명확하게 제시하십시오. 그리고 항상 필수 탐색 요소를위한 공간을 떠나십시오. 고객이 상점 주변에서 자신의 길을 찾을 수 없다면 좋은 거래는 아무것도 의미하지 않습니다.

헤더 디자인 분할

헤더 디자인에 가장 적합한 것이 무엇인지 추측하고 있습니까? 추측을 중지하고 테스트를 시작하십시오. 버튼 배치 또는 메뉴 문구와 같은 헤더의 작은 변경은 고객이 매장 쇼핑 방식에 큰 영향을 줄 수 있습니다.

Divi 리드는 다른 헤더 버전을 간단하게 테스트합니다. 검색 막대를 중앙에 놓고 반쪽에있는 반쪽에 방문자의 절반을 보여주고 오른쪽에 절반이 표시됩니다. 또는 프로모션 배너에 대한 다른 단어를 테스트하십시오. Divi는 어떤 버전이 더 많은 클릭 또는 판매를받는 지 추적하여 설계 결정에서 추측을 취합니다.

Hotjar와 같은 도구는 방문자가 각 헤더 버전에서 클릭 한 위치의 열 맵을 보여줄 수 있으며 Monsterinsights는 다양한 디자인이 전체 전환율과 현장 시간에 어떤 영향을 미치는지 추적하는 데 도움이됩니다.

한 번에 하나의 변경 사항을 테스트하는 것을 잊지 마십시오. 너무 많은 버전을 한 번에 비교하면 작동하는 것이 무엇인지 알기가 어렵습니다. 각 테스트는 견고한 데이터를 수집하기에 충분한 시간을 제공합니다.

오늘 헤더에게 화장을 해주세요

상점 헤더는 또 다른 디자인 확인란이 아닙니다. 온라인 상점의 초강대국입니다. 다른 상점 소유자는 멋진 애니메이션을 걱정하거나 상상할 수있는 모든 기능으로 헤더를 채우지 만 더 잘 알고 있습니다. 간단하게 유지하고, 작동하게하고, 고객 이이 도구를 사용하여 경험을 향상시켜 쇼핑을 즐기는 것을 지켜보십시오.

도구 목적
디비 Ultimate WordPress 웹 사이트 빌더 얻다
Divi ai 디자인 지원 및 콘텐츠 생성 얻다
디비 클라우드 설계 및 레이아웃 스토리지 얻다
디비 팀 팀 협업 얻다
Divi VIP 빠른 지원 응답 시간 + 시장 구매에 대한 할인 얻다
디비 프로 위의 모든 번들 (최대 $ 300를 절약) 얻다
현장 WooCommerce 호스팅 얻다
WP 로켓 캐싱 및 성능 최적화 얻다
ewww 이미지 최적화기 이미지 압축 얻다
searchwp 고급 검색 기능 얻다
hotjar 웹 사이트 열 매핑 얻다
Monsterinsights 웹 사이트 분석 얻다

한 번에 모든 것을 점검 할 필요는 없습니다. 고객이 가장 버그로 시작하십시오. 모바일의 까다로운 검색 바나 혼란스러운 메뉴 레이블 일 수 있습니다. 한 가지를 골라 더 나아지게하십시오.

두통을 건너 뛰고 작동하는 헤더를 만들고 싶습니까? Divi를 잡고 마법을 만들어 봅시다.

Divi로 생성을 시작하십시오