헤더 디자인 방법 (2025 튜토리얼)

귀하의 웹 사이트 헤더는 생각보다 더 중요합니다. 이곳은 방문객들이 처음 착륙하여 사이트를 탐색하는 방법을 알아냅니다. 많은 웹 사이트 소유자가 로고 및 내비게이션 메뉴가있는 기본 헤더를 위해 정착합니다. 너무 많은 웹 사이트에는 방문자에게 도움이되지 않는 일반 헤더가 있습니다. 로고와 일부 링크 만 있으면 더 이상 충분하지 않습니다. 헤더는 모든 화면에서 날카 로워 보면서 사이트를 통해 사람들을 안내해야합니다.

올바른 도구 (Divi와 같은)를 사용하면 방문자가 좋아할 헤더를 만들 수 있습니다. 헤더가 작동하는 것이 무엇인지, 눈에 띄는 헤더를 만드는 방법을 살펴 보겠습니다.

웹 사이트 헤더 : 왜 중요한가?

귀하의 웹 사이트 헤더는 좋아하는 상점 입구처럼 작동합니다. 상점에서 원하는 것을 찾을 수있는 표지판을 찾는 것처럼 방문자는 헤더를 사용하여 웹 사이트를 이해합니다. 잘 만들어진 헤더는 사람들이 갈 곳을 정확히 지적합니다. 혼란, 소란도 없습니다.

대부분의 사람들은 단지 밀리 초 단위의 웹 사이트에 대한 결정을 내립니다. 헤더는 첫인상을 형성합니다. 깨끗해 보이고 매끄럽게 작동하면 방문객들이 붙잡 힙니다. 그러나 지저분하거나 사용하기 어려운 경우 깜박일 수있는 것보다 더 빨리 떠날 것입니다.

최고의 헤더는 마치 마치 마치 마치 마치 마치 자연 스럽습니다. 그들은 스크롤 할 때 매끄럽게 움직이고 전화와 컴퓨터에서 멋지게 보이며 모든 것을 찾을 것으로 예상되는 곳에 올바르게 배치합니다. 사람들이 자신의 길을 찾도록 돕는 것부터 브랜드를 과시하는 것에 이르기까지 헤더는 모든 무거운 리프팅을 조용히 처리합니다.

좋은 헤더는 좋을뿐 아니라 방문객을 행복하게하고 돌아 오기를 원하는 모든 웹 사이트의 중추입니다.

효과적인 헤더의 주요 요소

훌륭한 헤더는 작동하는 특정 기능을 공유합니다. 명확한 탐색, 스마트 간격 및 기타 필수 구성 요소는 방문자가 사이트를 탐색하는 데 도움이됩니다. 헤더를 진정으로 효과적으로 만드는 것을 분해합시다.

명확한 내비게이션 구조

어떤 웹 사이트가 필요한 것을 찾기가 어렵게 만드는 방법을 알아 본 적이 있습니까? 명확한 내비게이션 구조는 그 두통을 해결합니다.

당신의 메뉴는 당신이 기대하는 모든 부서와 함께 좋아하는 상점을 걷는 것만 큼 자연스럽게 느껴야합니다. 방문자가 키 페이지의 방문자를 안내하는 5-7 필수 옵션으로 메인 메뉴를 단단히 유지하십시오. 더 많은 공간이 필요한 경우 관련 페이지를 논리적 드롭 다운 메뉴에 집어 넣으십시오.

흐름에 대해 생각해보십시오. 무거운 치는 페이지를 발견하기 쉬운 곳에 놓으십시오. 영리한 이름을 건너 뛰십시오. "서비스"는 방문객들이 자신이 찾고있는 것을 알고 있기 때문에 매번“우리가하는 일”을 능가합니다. 간단하고 명확한 레이블은 혼란스러운 브라우저를 행복한 고객으로 바꿉니다.

브랜드 아이덴티티 요소

헤더는 브랜드의 정문으로 두 배가됩니다. 로고에 떨어지는 것 외에도 헤더 페인트의 완전한 그림에 대해 생각해보십시오. 색상, 글꼴 및 간격은 방문자에게 한 단어를 읽기 전에 무엇에 관한 것인지 알려줍니다. 로고에는 호흡 공간이 필요합니다. 압도하기에는 너무 크지 않고 놓치기에는 너무 작지 않습니다.

스마트 브랜드는 헤더 스타일을 전반적인 외관과 일치하게 유지하지만 주요 요소를 돋보이게하는 것을 두려워하지 않습니다.

방문자가 내리는 스플릿 결정을 기억하십니까? 브랜드 요소가 강한 세련된 헤더는 그들이 올바른 장소에 착륙 한 것처럼 느끼도록 도와줍니다. 깨끗하고 기억에 남는 상태로 유지하지만 가장 중요한 것은 브랜드에 정확하게 유지하십시오.

호출 항목 배치

사이트의 상단에는 방문자에게 명확한 다음 단계가 필요합니다. 방문자가 연락처 버튼 또는 가입 링크를 열심히 검색 해야하는 상황을 피하십시오. 가장 귀중한 행동은 주목을받을 자격이 있습니다. 일반적으로 눈은 자연스럽게 착륙하는 황금빛 오른쪽 코너에서. 그러나 여기에 문제가 있습니다. 5 개의 다른 버튼으로 헤더를 채우면 혼란이 생깁니다. 당신의 힘 움직임을 선택하십시오.

더 많은 리드를 원하십니까? 연락처 버튼 팝을 만듭니다. 구독 판매? 시험 제안을 전면 및 중앙에 두십시오. 네온 사인 컨벤션처럼 나타나지 않고주의를 사로 잡는 색상을 사용해야합니다. 헤더 콜 유도 (CTA)는 절망적 인 판매 피치가 아니라 유용한 제안처럼 느껴야합니다.

검색 기능

아무도 콘텐츠를 사냥하는 것을 좋아하는 사람이 없지만 모든 사이트에 검색 창이 필요하지는 않습니다. 블로그 나 온라인 상점과 같은 콘텐츠가 많은 사이트의 경우 검색은 생명의 보드입니다. 그러나 간단한 5 페이지 비즈니스 사이트의 경우? 추가 혼란입니다. 검색이 필요할 때 배치가 중요합니다. 대부분의 사람들은 메인 메뉴 옆에있는 헤더의 오른쪽을 봅니다.

가시적이지만 푸시는 아니지만 지배하지 않고 도움이되어야합니다. 일부 사이트는 작은 아이콘 뒤에 검색을 숨기지 만 매장 디렉토리를 지하실에 넣는 것과 같습니다. 검색을 추가하기 전에 스스로에게 물어보십시오. 방문객들이 그것을 사용할 것인가? 검색 바는 사이트의로드 시간에 무게를 추가하고 결과를 찾는 것이 검색이 전혀없는 것보다 더 나쁩니다.

연락처 정보

전화 번호와 업무 시간은 방문자가 조치를 취할 때 헤더에 속합니다. 현지 식당은 배고픈 고객이 즉시 주문하기를 원하며 소매점은 시간과 중앙에 시간이 필요하므로 사람들은 언제 들러야하는지 알 수 있습니다.

그러나 여기에 캐치가 있습니다. 이미 전체 연락처 페이지로 이어지는 연락처 버튼이 있다면 이메일 주소도 표시 할 필요가 없습니다. 또한 스팸 폴더를 가볍게 유지하기 위해 이메일 주소를 직접 표시하는 대신 연락처 양식을 사용하는 것이 현명합니다. 최고의 헤더는 연락처 세부 사항과 일치하여 방문자가 필요로하는 것과 일치합니다. 빠른 전화 통화 또는 상점에 대한 상세한 지침이든.

헤더 생성의 일반적인 과제

헤더 빌드 헤더는 시도 할 때까지 간단하게 들립니다. 헤더 디자인은 디자인 요소의 균형을 유지하고 일관성을 유지하는 것 사이에서 독특한 장애물을 나타냅니다. 가장 일반적인로드 블록과 극복 방법을 살펴 보겠습니다.

밸런싱 디자인과 기능

예쁜 헤더는 좋지만 먼저 일해야합니다. 당신은 투명한 배경과 페이드 효과를 가진 멋진 헤더를 보았습니다. 밝은 이미지에 대해 메뉴 텍스트를 읽을 수 없을 때까지 멋지게 보입니다.

또는 데스크탑 화면에서 작은 햄버거 메뉴 뒤에 중요한 링크를 숨기는 미니멀리스트 헤더. 좋은 헤더 디자인은 날카 롭고 유용한 것 사이의 달콤한 반점을 발견합니다. 메뉴 항목을 쉽게 읽을 수 있고 버튼을 클릭하기 쉽고 브랜딩은 항상 깨끗해야합니다.

웹 안전 글꼴을 고수하고 대비가 잘 유지되며 다른 배경에 대해 헤더를 테스트하십시오. 의심스러운 경우 플래시에서 기능을 선택하십시오.

우주 관리

헤더는 웹 사이트의 상단 선반과 같습니다. 모두가 먼저 볼 수있는 귀중한 공간입니다. 너무 가득 차면 아무것도 눈에 띄지 않습니다. 너무 키가 크게 만들고 방문자가 컨텐츠를보기 위해 거대한 배너를지나 스크롤하도록 강요합니다.

대부분의 성공적인 헤더는 키가 60-100 픽셀 사이에 위치하여 페이지를 지배하지 않고 로고와 탐색을위한 충분한 공간을 제공합니다. 메뉴 항목이 서로 충돌하지 않고 CTA 버튼이 호흡 할 수 있도록 요소 사이에 약간의 공백을 남겨 두십시오. 모바일 화면은이 공간을 더욱 단단하게 만듭니다.

메뉴 조직

모든 것이 함께 울려 퍼졌기 때문에 잘못된 메뉴 항목을 클릭 한 적이 있습니까? 좋은 메뉴 조직은 그 사고를 방지합니다. 모든 것을 한 번에 나열하는 대신 명확한 카테고리의 그룹 관련 페이지.

팀 및 회사 역사에 대해? 그것들은 한 번의 드롭 다운 아래에 살 수 있습니다. 그러나 하위 메뉴에 미치지 마십시오. 아무도 연락처 페이지를 찾기 위해 호버 메뉴 핑 폰을 연주하고 싶지 않습니다. 가장 중요한 페이지를 최상위 수준으로 유지하면서 쉽게 찾을 수 있습니다. 그리고 평범한 언어를 사용하십시오. 방문자는 클릭 위치를 파악하기 위해 디코더 링이 필요하지 않아야합니다.

속도 문제 로딩

헤더는 사이트의 모든 페이지에로드하여 전체 사이트 속도에 중요한 요소가됩니다. 큰 이미지, 복잡한 애니메이션 및 여러 스크립트로 포장 된 무거운 헤더는 웹 사이트를 심각하게 느리게 할 수 있습니다.

이것은 스크롤 할 때 방문자를 따르는 끈적 끈적한 헤더로 특히 두드러집니다. 방문자가 사이트를 탐색하기 전에 헤더가로드 될 때까지 기다려야 할 때, 잘못된 발에서 경험을 시작합니다. Google은 순위에서 페이지 속도를 고려하기 때문에 느리게로드하는 헤더는 성가신 것이 아니라 검색 가시성을 피할 수 있습니다.

브랜드 일관성

헤더는 방문자에게 올바른 장소에 있다고 말합니다. 누군가가 소셜 미디어에서 웹 사이트로 이동하면 헤더가 동일한 색상, 로고 처리 및 전반적인 분위기와 같은 친숙한 느낌이 듭니다. 이것을 엉망으로 만들면 방문객들을 혼란스럽게 할 것입니다. 아무도 공식 사이트에 착륙했는지 여부를 두 번째 추측하기를 원하지 않습니다.

헤더 디자인은 명함, 소셜 프로필 및 마케팅 자료와 함께 작동해야합니다. 로고를 그곳으로 때리는 것이 아닙니다. 신뢰를 구축하는 일관된 경험을 만드는 것입니다.

작동하는 헤더를 설계하는 방법 (감사합니다, Divi!)

올바른 도구를 사용하면 헤더 디자인이 훨씬 간단 해집니다. Divi의 Visual Builder는 전문적으로 보이고 매끄럽게 작동하는 헤더를 만드는 데 추측을 취합니다. 더 자세히 알아 보겠습니다.

Divi는 무엇입니까?

Divi는 웹 사이트 아이디어를 현실로 바꾸는 WordPress 테마입니다. 시각적 편집기는 사이트를 구축 할 때 어떻게 보일지 정확히 보여줍니다.

비즈니스 웹 사이트를 구축하거나 온라인 상점을 설정하거나 블로그를 시작하고 싶으십니까? Divi에는 모든 도구가 내장되어 있습니다. 200 개 이상의 모듈에서 요소를 선택하고 원하는 위치에 떨어 뜨린 다음 완벽 할 때까지 조정하십시오. 코딩이 필요하지 않습니다.

테마 빌더는 사이트의 다른 부분에 대한 템플릿을 설계 할 수 있도록하여이를 더욱 발전시킵니다. 사용자 정의 헤더 및 바닥 글, 제품 페이지의 레이아웃, 블로그 템플릿, 카테고리 아카이브 또는 404 페이지를 만듭니다. 당신은 어디로 가는지 결정하고 Divi가 그것을 일으키는 것입니다.

모든 것이 라이브 사이트에서 바로 발생합니다. 편집자와 미리보기 화면 사이를 더 이상 전환하지 마십시오. 전체 사이트의 모습을 바꾸고 싶습니까? Divi의 글로벌 설정은 한 번의 클릭으로 모든 곳에서 색상, 글꼴 및 스타일을 업데이트 할 수 있음을 의미합니다.

모바일 디자인을 조정해야합니까? Visual Builder는 귀하의 사이트가 모든 장치에서 어떻게 보이는지 정확하게 보여줍니다. 일반적인 두통이없는 맞춤형 웹 디자인의 모든 힘입니다.

귀하의 웹 사이트, 귀하의 방법. Divi와 함께.

Divi에는 2000 개 이상의 사전 제작 된 웹 사이트 디자인이 제공됩니다. 좋아하는 것을 골라 브랜드와 일치하도록 조정하십시오. 페이지와 전체 레이아웃은 처음부터 깨끗하고 전문적으로 보입니다. 디자이너 가격표를 빼고 디자이너의 툴킷을 손끝에 두는 것과 같습니다.

우리는 당신과 함께 성장하기 위해 Divi를 만들었습니다. 우리의 마켓 플레이스는 필요할 때 전문적인 어린이 테마와 디자인 팩을 제공합니다. 그리고 우리는 항상 플랫폼을 업데이트하고 있기 때문에 최신 웹 표준을 유지하게됩니다.

또한 Divi는 전체 커뮤니티의 지원을받습니다. 76,000 명 이상의 Divi 사용자가 Facebook 그룹에서 매일 아이디어와 솔루션을 공유합니다. 뭔가에 갇혀? 우리의 지원 팀과 상세한 지식 기반이 등을 가지고 있습니다.

귀하의 사이트에서 더 많은 일을하고 싶습니까? Divi는 75 개가 넘는 인기있는 WordPress 플러그인 및 서비스로 완벽하게 작동합니다. 개발자의 경우 오픈 소스 아키텍처에는 후크, 필터 및 완전한 API가 포함되어 있으며 사용자 정의 솔루션 및 통합에 적합합니다.

무엇보다도? Divi가있는 천장이 없습니다. 필요한만큼 많은 페이지를 작성하고 원하는 모든 제품을 추가하고 단일 라이센스로 무제한 웹 사이트를 만듭니다. 당신과 함께 성장할 수있는 Siteground와 같은 좋은 호스트를 선택하십시오. 귀하의 웹 사이트는 귀하의 야망만큼 클 수 있습니다.

Divi 회원이 되십시오

Divi ai : 당신의 디자인 coplot

이제 Divi는 AI를 디자인 워크 플로에 바로 가져옵니다. 브랜드처럼 들리는 새로운 콘텐츠가 필요합니까?

새로운 섹션을 빨리 구축하려고하십니까? Divi ai는 모든 것을 처리합니다. 필요한 것을 말하면 비전과 일치하는 웹 사이트 섹션을 만듭니다.

Divi에서 바로 이미지를 편집 할 수도 있습니다.

또는 브랜드에 완벽하게 맞는 새로운 것을 생성하십시오.

Divi ai로 워크 플로를 가속화하십시오

완전한 웹 사이트를 빨리 구축하고 싶습니까? Divi Quick 사이트는 AI를 사용하여 비즈니스를 기반으로 사용자 정의 사이트를 만듭니다. 자신이하는 일에 대한 세부 정보를 공유하면 관련 컨텐츠와 브랜드와 일치하는 이미지로 채워진 고유 한 레이아웃이 나타납니다. 온라인 상점을 설정 하시겠습니까? WooCommerce를 구성 할 수도 있습니다. 이것은 템플릿을 선택하는 것 이상입니다. 그것은 당신을 위해 만들어진 느낌을받는 웹 사이트를 얻는 것입니다.

Divi의 AI 웹 사이트 Builder 뒤에는 손으로 만들어진 스타터 사이트 모음이 있습니다. 우리의 디자인 팀은 맞춤형 사진과 삽화로 각각을 만듭니다. 좋아하는 것을 선택하고 비즈니스 자산을 떨어 뜨리고 몇 분 안에 사이트를 시작하십시오.

AI를 통한 Divi 빠른 사이트로 구축 한 모든 사이트 (AI 또는 사전 구축 된 컬렉션)는 완전한 설계 시스템이 포함됩니다. 메뉴, 색상 및 글꼴은 처음부터 하나로 작동합니다. 페이지에 새로운 것을 추가 하시겠습니까? 글로벌 사전 설정은 완벽하게 일치하는지 확인합니다. 테마 설정은 모든 것을 일관성있게 유지하며 모든 모듈은 자동으로 브랜드 색상 및 타이포그래피에서 가져옵니다.

우리는 디자인 기초를 처리하여 컨텐츠, 이미지 및 브랜드와 같은 중요한 것에 집중할 수 있습니다. 그것이 실제 디자인 시스템의 아름다움입니다.

오늘 Divi를 얻으십시오

단계별 헤더를 설계하는 방법

헤더를 만드는 것이 복잡 할 필요는 없습니다. 헤더 디자인에 대한 세 가지 접근 방식을 탐색하겠습니다. Divi의 테마 빌더를 사용하여 이러한 방법을 보여 주지만, 선택한 도구는 헤더를 만드는 방법에 약간 영향을 미칩니다. 그러나 핵심 원칙은 동일하게 유지됩니다. 탐색합시다 :

처음부터 (가장 유연한 방법)

설계하기 전에 외관 → 메뉴에서 내비게이션 구조를 설정하십시오. 메뉴 구조를 준비하면 설계 단계에서 상당한 시간이 절약됩니다.

WordPress 대시 보드 → Divi → 테마 빌더를 통해 Divi의 테마 빌더를 엽니 다. 기본 템플릿은 상단에 있습니다.이 템플릿은 전체 웹 사이트의 모양을 제어합니다. 글로벌 헤더 영역 추가를 클릭하고 "글로벌 헤더 빌드"를 선택하여 작업 공간을 시작하십시오.

캔버스에 두 개의 일반 섹션을 추가하여 시작하십시오. 이 특정 예에서 첫 번째 섹션에는 판매 및 기타 정보에 대한 홍보 메시지가 있으며 두 번째 섹션에는 메뉴 및 CTA 버튼이 있습니다.

홍보 배너 설정 :

• 섹션 설정 열기 :
  • 브랜드와 일치하도록 배경색을 설정하십시오
  • 섹션의 상단과 하단에 0px 패딩을 추가합니다.
• 열 열기 설정 :
  • 사용자 정의 거터 너비 옵션을 켜고 거터 너비를 1로 설정합니다.
  • 폭과 최대 폭은 각각 80% 및 1800px입니다
  • 상단 및 하단 패딩을 0px로 설정합니다
• 제목 텍스트 모듈 추가 :
  • 프로모션 텍스트 또는 연락처 정보를 추가하십시오
  • 그런 다음 제목을 H6으로 설정하고 가독성을 위해 배경에 충분히 대비되는 브랜드 색상을 선택하십시오.
  • 텍스트 크기를 14px로, 선 높이를 1.4em으로 설정하십시오.
  • 그런 다음 위에 12px 마진을 추가하십시오

그런 다음 메뉴 섹션의 경우 :

• 브랜드와 일치하도록 배경색을 설정하십시오
• 상단 및 하단 패딩은 0px로 설정됩니다
• 2 열 줄을 추가하십시오
• 열의 상단과 하단에 8px 패딩을 추가합니다.
• 더 넓은 행 열은 우리의 메뉴 행이고 CTA의 두 번째 열
  • 이제 메뉴 모듈을 더 넓은 열에 추가하십시오.
  • 메뉴와 로고를 선택하고 로고를 홈페이지에 연결하십시오.
  • 요소 탭에서 쇼핑 카트 아이콘, 쇼핑 카트 카운터 및 검색 아이콘을 활성화하십시오 (필요한 경우)
  • 브랜드 나 흑백이나 흰색과 같은 중립에 맞는 글꼴 색상을 선택하십시오.
  • 아이콘과 카트 수량 텍스트에 대해 동일한 색상을 선택하십시오.
  • 최상의 가시성을 위해 로고 높이를 60-80px로 설정하십시오.

• 이제 두 번째 열에서 :
  • 버튼 모듈과 CTA 텍스트를 추가하십시오
  • 버튼 링크를 설정하십시오
  • 버튼의 정렬을 오른쪽으로 설정하십시오
  • 버튼 및 설정 버튼 텍스트 크기 14px에 맞춤형 스타일 활성화
  • 버튼 텍스트의 배경 및 중립적/대조적 색상으로 브랜드 색상을 선택하십시오.
  • 브랜드와 일치하는 경우 버튼 반경을 설정하십시오
  • 패딩을 상단 및 하단의 경우 12px로, 왼쪽 및 오른쪽의 경우 24px로 설정하십시오.

최종 결과 :

마무리 터치의 경우 다음과 같은 옵션 조정을 고려하십시오.

• 텍스트 크기 : 쉽게 읽을 수있는 16px
• 링크 간격 : 25px는 물건을 깔끔하게 유지합니다
• 드롭 다운 배경 : 약간의 불투명도 (0.9)는 깊이를 더합니다
• 활성 링크 색상 : 팝으로 만들지만 브랜드와 일치하십시오.

매끄러운 끈적 끈적한 헤더 효과를 원하십니까? 섹션 설정에서 섹션의 위치로 "고정"을 선택하고 미묘한 상자 그림자를 추가하십시오 (10px 스프레드로 RGBA (0,0,0,0.1) 시도). 방문자는 스크롤 할 때 항해를 편리하게 유지해 주셔서 감사합니다.

전문가 팁 : 테마 빌더의 디스플레이 규칙을 사용하여 블로그 게시물과 같은 특정 페이지에 대한 대체 헤더 레이아웃을 만듭니다. 이를 통해 브랜드 일관성을 유지하면서 다른 섹션에 헤더를 조정할 수 있습니다.

비주얼 빌더를 닫기 전에 저장 버튼을 누르면 헤더 디자인을 잠그십시오. 당신의 커스텀 헤더는 방문객을 맞이할 준비가되었습니다!

몇 가지 다른 페이지에서 헤더를 미리 보려면 모든 것이 완벽하게 보이도록 호출하기 전에 모든 것이 완벽 해 보입니다. 특정 페이지 예외를 설정하지 않는 한 새 헤더는 전체 웹 사이트에 일관되게 나타납니다.

템플릿 사용 (잘 균형 잡힌 방법)

처음부터 헤더를 디자인하는 것은 에베레스트 산을 등반하는 것과 같습니다. 그러나 가파른 등반을 건너 뛰고 대신 잘 알려진 트레일을 취할 수 있다면 어떨까요? 이것이 바로 템플릿으로 시작하는 것입니다.

먼저 먼저 브랜드와 일치하는 헤더 템플릿을 찾아냅니다. Divi의 생태계에는 옵션이 가득합니다. 여러 헤더 스타일을 무료로 다운로드 할 수있는 Divi의 공식 자원을 찾아보십시오. 또는 우리 시장에 뛰어 들었습니다. 다음은 확인할 수있는 몇 가지 인기있는 옵션입니다.

1. Divi의 헤더

Divi 용 헤더는 Divi 용으로 만든 310 개의 사용자 정의 헤더 레이아웃 세트를 제공합니다. 이 광범위한 컬렉션을 사용하면 웹 사이트의 올바른 일치를 찾을 수있는 많은 디자인 옵션이 있습니다. Dentive Slide-In 및 Off-Canvas 메뉴, 수직 및 회전 메뉴 및 RTL 웹 사이트를위한 10 개의 헤더와 같은 기능을 활용할 수 있습니다. 수평만큼 흔하지 않은 수직 헤더는 그림을 가리기가 어려울 수 있지만이 템플릿은 프로세스를 단순화합니다. 이 컬렉션은 클라이언트를위한 웹 사이트를 구축하고 디자인을 시작하기 위해 다양한 헤더 선택이 필요한 경우 모두 $ 9에 사용할 수 있습니다.

Divi의 헤더를 얻으십시오

2. Divi 헤더 팩

Divi의 테마 빌더 용 Divi 헤더 팩으로 980 개 이상의 사용자 정의 가능한 헤더를 얻을 수 있습니다. RTL, Creative 및 WooCommerce 지원 헤더와 같은 디자인이 포함됩니다. 이 헤더는 반응 형이며 디비 모듈로 제작되므로 쉽게 편집 할 수 있습니다. 이 팩은 Divi를 사용하고 웹 사이트에 고유 한 헤더를 원한다면 완벽합니다. 19 달러의 가격은 초보자와 고급 사용자 모두가 헤더를 원활하게 설정하는 데 도움이되는 세부 지침이 제공됩니다.

Divi 헤더 팩을 얻습니다

3. 헤더 레이아웃 팩

Mark Hendriksen의 헤더 레이아웃 팩을 사용하면 260 개가 넘는 사용자 정의 가능한 헤더 및 메뉴 레이아웃이 제공됩니다. Woocommerce 및 Square 로고 옵션을 포함하여 단순부터 고급까지 다양합니다. 맞춤형 CSS 스타일이 포함 된 전체 화면 오버레이 메뉴, 슬라이드 인 헤더 및 메가 메뉴가 있습니다. 또한, 당신은 최고의 시장 제작자를 지원합니다. 이 팩은 프리랜서와 대행사에게 적합합니다. 눈에 띄는 기능은 메가 메뉴 헤더로 복잡한 내비게이션을 쉽게 관리 할 수 ​​있습니다. 이 팩은 또한 9 달러입니다.

헤더 레이아웃 팩을 시도하십시오

4. 헤더 레이아웃 번들

Divi 다음에 의해 헤더 레이아웃 번들을 사용하면 고급 설정이나 사용자 정의 CSS없이 사용자 정의하기 쉬운 Divi Builder 용 126 개의 고유 한 헤더 디자인을 얻을 수 있습니다. 모든 장치에서 잘 작동하는 40 개가 넘는 세련된 호버 효과와 적응 가능한 디자인을 즐기십시오. 또한 전문 지원 및 정기 업데이트를받습니다. 이 번들은 웹 사이트에 다목적이고 쉽게 사용자 정의 할 수있는 헤더 컬렉션을 원한다면 완벽합니다.

헤더 레이아웃 번들을 잡습니다

완벽한 일치를 찾으면 프로세스가 간단합니다. 템플릿을 zip 파일로 다운로드하여 압축을 풀고 준비하십시오. 가져 오기는 간단합니다 - Divi → Divi Library로 이동하여 가져 오기 및 수출 옵션을 사용하십시오. 전체 레이아웃을 원하십니까? 가져 오십시오. 몇 섹션 만 선호 하시겠습니까? 괜찮아요. 당신은 완전한 통제력이 있습니다.

Divi 라이브러리로 가져 오면 Divi 헤더에 레이아웃을 추가해야합니다. Divi → 테마 빌더 → 글로벌 헤더로 이동하여 라이브러리에서 추가하십시오.

가져 오면 템플릿을 진정으로 템플릿으로 만드십시오. 시력에 맞지 않는 자리 표시 자 섹션을 제거하십시오. 브랜드의 색상과 로고를 교체하십시오. 모든 것이 바로 느껴질 때까지 간격 및 정렬을 조정하십시오. 당신의 전문적이고 세련된 헤더는 이제 방문객들을 환영하고 살인자를 첫인상으로 만들 준비가되었습니다.

Divi Pro는 워크 플로를보다 능숙하게 만듭니다

Divi Cloud의 효율적인 조직 기능은 워크 플로를 향상시킬 수 있습니다. 좋아하는 헤더, 바닥 글, 레이아웃 및 디자인 요소에 대한 무제한 저장 솔루션을 하나의 중앙 위치에 있습니다. 여러 웹 사이트에서 이러한 요소를 동기화하고 팀과 쉽게 공유 할 수 있습니다.

Divi Pro로 업그레이드하면 Divi Cloud 이상의 액세스 권한이 있습니다. 또한 24/7의 빠른 30 분 지원 응답 시간과 시장 품목에 대한 상당한 10% 할인이 포함 된 Divi VIP 기능의 혜택을 누릴 수 있습니다. 또한 Divi 팀을 사용하면 최대 4 명의 팀원 ($ 1.50/user/mo에 대한 추가 회원)을 추가하여 광대 한 Divi 기능 세트를 사용할 수 있습니다. 프로 패키지에는 또한 Divi AI가 포함되어 있으며 모두 탁월한 가치를 제공합니다. 이 서비스의 합병은 각 구성 요소를 별도로 구매하는 것과는 달리 매년 거의 200 달러를 절약 할 수 있습니다.

Divi Pro를 얻으십시오

Divi AI 사용 (가장 쉬운 방법)

이것은 Divi에서 헤더를 만드는 데 가장 쉬운 접근법이며 최소한의 노력이 필요합니다. 메뉴를 빠르게 디자인하고 웹 사이트에 고급 요구가없는 경우 완벽합니다. 이 옵션을 사용하려면 Divi AI 구독이 필요합니다.

테마 빌더로 이동하여 "글로벌 헤더 구축"을 선택하십시오. 시각적 빌더가 열리면 아래의 파란색 + 버튼을 찾아 새 행을 추가하십시오. 제시된 옵션 중에서 "Divi AI로 섹션 생성"을 선택하십시오.

대화 상자는 "Divi AI가 만들고자하는 섹션을 설명하십시오"라는 필드와 함께 나타납니다. 이것은 정밀한 곳이 중요한 곳입니다. 설명이 더 자세하게 설명할수록 결과가 더 좋습니다. 입증 된 프롬프트 예는 다음과 같습니다.

“로고 영역이있는 최신 헤더를 만들고 메뉴가 이어집니다. 보조 브랜드 색상을 사용하여 오른쪽에 대담한 'Get In Touch'버튼을 추가하십시오. 기본 색상을 배경으로 디자인을 깨끗하고 사용자 친화적으로 유지하십시오.”

이미지 섹션에서 "자리 표시 자 이미지"를 선택하십시오. 나중에 사이트 로고로 교체 할 것입니다.

다음으로 "Fonts & Colors 사용자 정의"드롭 다운을 확장하십시오. "AI를 선택하자"는 기본 옵션이지만 여기에서 완전히 제어 할 수 있습니다. 드롭 다운에 액세스하여 특정 글꼴 및 색상을 선택하거나 사이트 설정과 일관성을 유지하려면 "웹 사이트 기본값"을 선택하십시오. 이를 통해 Divi AI가 확립 된 브랜드 요소에서 끌어옵니다.

섹션 생성 버튼을 클릭하면 Divi AI가 몇 초 안에 헤더를 생성합니다.

몇 가지 수동 조정…

계속해서 기본적으로 삽입 된 이전 빈 섹션을 삭제하십시오.

주의가 필요한 여러 요소 (이메일 주소, 전화 번호, 버튼 링크 및 가장 중요한 것은 사이트 로고를 알 수 있습니다. Divi 요소와 마찬가지로 표준 시각적 빌더 인터페이스를 통해이를 조정하십시오.

그런 다음 계속해서 헤더를 저장하십시오. 그게 얼마나 쉬웠어요! AI 디자인은 여전히 ​​초기 단계에 있다는 것을 기억하십시오. 몇 가지 사항을 직접 조정해야 할 수도 있습니다. 어쨌든, 우리는 AI가 디자이너를 대체하지 않고 돕는 것이라고 생각합니다. 이것은 여전히 ​​많은 시간을 절약하는 방법입니다.

모바일 친화적 인 헤더 만들기

모바일 사용자는 오늘날 대부분의 웹 트래픽을 구성하지만 많은 헤더가 작은 화면에서 분리됩니다. 전화기에서 잘 작동하는 헤더를 만들려면 신중한 계획과 스마트 디자인 선택이 필요합니다. 모든 장치에서 빛나는 헤더를 만드는 방법을 살펴 보겠습니다.

반응 형 메뉴 솔루션

휴대 전화에서 웹 사이트 탐색을 시도하고 퍼즐을 풀고있는 것처럼 느꼈습니까? 모바일 메뉴는 사용자 경험을 만들거나 깨뜨릴 수 있습니다. 영리한 디자이너는 작은 화면에 데스크탑 내비게이션이 작동하지 않는다는 것을 알고 있습니다.

Divi는이 도전을 이해하여 원활하게 적응하는 유연한 메뉴 솔루션을 제공합니다.

잘 조직 된 도구 상자처럼 모바일 메뉴를 생각하십시오. 모든 것이 쉽게 도달 할 수 있지만 혼란스럽지 않아야합니다. 대형 버튼, 명확한 계층 및 직관적 인 슬라이드 아웃 디자인은 방문객을 계속 움직입니다. 비밀은 좋아 보이는 것이 아니라 호기심에서 행동으로 부드러운 길을 만듭니다.

터치 친화적 인 요소

모바일 요소를 더 손가락 친화적으로 만들고 싶습니까? Divi의 패딩 설정은 비밀 무기입니다. 작고 탭하기 어려운 버튼 대신 모듈 설정을 사용하여 터치 대상을 확장하십시오. Divi Builder에서 버튼 또는 메뉴 항목의 디자인 설정으로 이동하십시오. 패딩을 올리십시오 - 상단과 하단에서 20px를, 왼쪽과 오른쪽에서 30px를 시도하십시오.

이것은 잘못된 클릭을 방지하는 더 크고 용서하는 상호 작용 구역을 만듭니다. Pro Tip : 응답 형 편집 도구를 사용하여 모바일에 대한 패딩을 다르게 조정하십시오. 데스크탑에서 잘 보이는 것은 스마트 폰에 더 관대 한 터치 영역이 필요할 수 있습니다. 몇 가지 추가 픽셀은 원활한 사용자 경험과 좌절 된 태핑의 차이를 의미 할 수 있습니다.

화면 크기 조정

모든 화면이 동일하게 생성되는 것은 아닙니다. 헤더는 거대한 데스크탑 모니터에서 작은 전화 화면에 이르기까지 모든 것을 예리하게보아야합니다. Divi의 반응 형 편집을 통해 모든 픽셀을 정확하게 사용자 정의 할 수 있습니다. 장치보기 사이를 밀고 설계 변환을보십시오. 모바일에 부피가 큰 요소를 숨기고 로고 크기를 조정하며 글꼴 크기를 조정하십시오.

Divi의 가시성 설정을 활용하여 요소를 원활하게 교체하십시오. 예를 들어, 3 열 데스크탑 헤더는 간소화 된 단일 열 모바일 버전이 될 수 있습니다. 트릭은 디자인을 줄이지 않고 다시 상상하지 않습니다. 당신의 목표는 압축되지 않고 의도적으로 느껴지는 유동적 인 경험을 만드는 것입니다.

우선 순위 컨텐츠 표시

가장 중요한 행동은 햄버거 메뉴 안에 숨길 수 없습니다. 기본 호환 및 연락처 정보를 가시화하고 액세스 할 수 있도록하십시오. Divi를 사용하면 이러한 요소를 전략적으로 배치 할 수 있습니다. 오른쪽에 연락처 버튼을 생각하십시오.

햄버거 메뉴는 기본 상호 작용 지점이 아니라 보조 내비게이션 도구가됩니다. 사용자는 당신에게 연락 할 수있는 방법을 찾아서는 안됩니다. 전화 번호 또는 "시작"버튼은 즉각적이고 명확해야합니다. 공간을 절약하기 위해 텍스트와 함께 아이콘을 사용하는 것을 고려하십시오. 모바일 사용자는 종종 빠른 정보 나 즉각적인 조치를 추구하고 있습니다.

성능 최적화

모바일에서 웹 사이트 크롤링을 본 적이 있습니까? 고통 스럽습니다. Divi의 비주얼 빌더는 검색 엔진이 좋아하는 코드를 만듭니다. 동적 모듈 프레임 워크를 사용하면 필요한 기능 만 처리하여 불필요한 부하를 줄입니다. 중요한 CSS는 빌더에 내장되어 페이지가 더 빠르게 렌더링됩니다.

성능을 향상 시키려면 WP Rocket 및 EWWW 이미지 최적화와 함께 Divi를 페어링하십시오. 이 도구는 자산을 미치고, 브라우저 캐싱을 사용하고, 콘텐츠를 동적으로로드하여 사이트를 가볍고 빠르게 유지하도록하는 데 도움이됩니다.

Siteground의 호스팅을 선택하면 사이트가 더욱 높아집니다. 즉, 헤더가 즉시로드되어 사용자가 참여하고 사이트가 모든 장치에서 잘 수행됩니다.

오늘 그 기본 헤더를 교체하십시오

모두가 즉시 당신을 알아 차리는 방으로 들어가는 것을 상상해보십시오. 그것이 당신의 웹 사이트를 위해 훌륭한 헤더가하는 일입니다. Divi를 사용하면 눈에 띄는 헤더를 만드는 것이 매우 간단 해집니다. 이 도구와 결합하면 훌륭한 헤더를 설계 할 수있는 확실한 방법이 있습니다.

Divi 's Marketplace에는 많은 레이아웃 팩이 있습니다.

Divi의 Visual Builder를 사용하면 코딩없이 몇 분 안에 전문 헤더를 설계 할 수 있습니다. 그것을 Siteground의 호스팅 및 WP Rocket의 성능 최적화와 결합하면 놀랍게 보이고 번개가 빠른 웹 사이트가 있습니다. 수백만의 Divi 사용자는 비밀을 알고 있습니다. 강력한 디자인이 복잡 할 필요는 없습니다. 웹 사이트의 첫인상을 개선 할 준비가 되셨습니까? Divi는 가능합니다 - 기술 기술이 필요하지 않습니다.

오늘 Divi를 얻으십시오