Elementor 헤더 템플릿: 43가지 기성 디자인

Elementor 헤더 템플릿은 기성품 디자인으로 저장된 웹 사이트의 상단 막대입니다: 로고, 메뉴, 버튼 및 종종 그 위에있는 연락처 막대. 테마 빌더로 한 번 추가하면 모든 페이지에 표시됩니다.

이 게시물은 마스터 애드온 라이브러리에있는 43 Elementor 헤더 템플릿을 수집하여 적합한 사이트의 종류별로 그룹화합니다. 각 항목에는 스크린 샷과 새 탭에서 열리는 라이브 데모가 있습니다. 그들은 헤더 탭에서 설치합니다 마스터 애드온 템플릿 라이브러리 그리고 사이트 전체로 이동하세요 마스터 애드온 테마 빌더, 그래서 당신은 그들을 사용 하는 Elementor Pro가 필요 하지 않습니다.

당신이 온 목적:로 이동

• Elementor 헤더 템플릿을 추가하는 방법: 테마 빌더로 다섯 단계를 진행합니다
• 사이트 유형별 헤더 템플릿 43개: SaaS, 지역 비즈니스, 상점, 다열 및 최소
• 귀하의 사이트에 맞는 헤더 레이아웃: 범위를 좁힐 수 있는 빠른 테이블입니다
• 자주 묻는 질문

Elementor 헤더 템플릿을 사이트에 추가하는 방법

헤더는 테마 빌더 템플릿입니다: 모든 페이지에 표시되며,한 곳에서 편집합니다. 마스터 애드온 테마 빌더의 헤더 구축은 무료이며,아래 단계는 무료 플러그인과 핵심 Elementor 에서 작동합니다.

아래 비디오에서 이러한 헤더 중 하나는 테마 빌더 템플릿으로 바로 들어간 다음 전체 사이트에서 라이브로 진행됩니다. 차라리 읽고 싶다면 그 아래에 동일한 단계가 기록됩니다.

1. 대시보드에서 다음으로 이동합니다 마스터 애드온 → 테마 빌더를 클릭합니다 새 템플릿 추가를, 로 유형을 놓으십시오 헤더 그리고 클릭하세요 Elementor 로 편집.
2. 편집기에서 을 클릭합니다 마스터 애드온 템플릿 버튼, 열기 헤더 탭하고 디자인을 선택한 후 클릭하세요 삽입.
3. 로고를 교체하고 가리킵니다 Nav 메뉴 위젯 자신의 워드 프레스 메뉴에서 버튼 텍스트와 링크를 변경합니다.
4. 열다 조건 탭, 세트 포함 → 전체 사이트 그리고 저장.
5. 테마가 여전히 새 헤더 위에 자체 헤더를 인쇄하는 경우 해당 설정에서 테마 헤더를 끕니다.

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 헤더 테마 빌더 가이드 페이지를 제외하거나 하나의 방문 페이지에 자체 헤더를 제공하는 방법을 포함하여 각 단계에 대한 스크린샷으로 동일한 단계를 다룹니다. 동일한 테마 빌더는 가이드에 표시된 대로 페이지 하단도 처리합니다 elementor로 WordPress에서 바닥글을 편집합니다. 당신은 또한 바닥글을 필요로 하는 경우에, 우리의 Elementor 바닥글 템플릿 post에는 34개의 디자인이 있으며 각 디자인에는 라이브 데모가 포함되어 있습니다.

43 사이트 유형별 Elementor 헤더 템플릿

43 개의 디자인은 다섯 그룹으로 나뉘어집니다. 사이트에서 가장 가까운 그룹으로 이동하고 두세 개의 데모를 나란히 열고 골라보세요.

SaaS 및 tech Elementor 헤더 템플릿

이들 중 대부분은 SaaS 및 기술 키트에서 왔으며 하나의 패턴을 공유합니다: 왼쪽의 로고, 4 개 또는 5 개의 링크, 오른쪽의 평가판 또는 데모 버튼. Finix, Clowdify 및 Techbyte는 어두운 막대를 사용하고 Lead Lift는 크림색에 앉습니다.

1. Shiftflow: Elementor 작업 보드 헤더 템플릿

작업 게시판용으로 제작됨: 홈, 작업 및 게시물 작업 흰색 막대 오른쪽에 있고 그 뒤에 윤곽선이 있는 무료 작업 게시 버튼이 있습니다.

2. Techbyte: Elementor 다크 테크 헤더 템플릿

다크 네이비,왼쪽에는 브랜드 이름,오른쪽에는 세 개의 링크가 있습니다. 버튼이 없어서 판매 페이지보다 포트폴리오나 프로젝트 사이트에 더 잘 어울립니다.

3. Tecpart: Elementor IT 회사 헤더 템플릿

모든 페이지 드롭다운이 9 개의 내부 페이지를 보유하는 IT 서비스 헤더이므로 최상위 레벨에는 3 개의 링크만 더 있으면 됩니다. 스크린샷은 드롭다운이 열려 있는 것을 보여줍니다.

4. Clowdify: Elementor SaaS 알약 헤더 템플릿

전체 헤더는 주위에 공간이있는 둥근 검은 색 알약입니다. 기능,가격, 통합 및 고객 로그인 지금 시작하기 버튼 옆에 앉으십시오.

5. Craftova: Elementor SaaS 헤더 템플릿

6 개의 링크,그 중 사례 연구,그리고 윤곽이 잡힌 무료 평가판 시작 버튼. 일반적인 3 개의 링크 SaaS 메뉴보다 더 많은 페이지가있는 제품에 적합합니다.

6. Finix: Elementor 다크 SaaS 헤더 템플릿

녹색 로고 마크가 있는 검정색, 가운데에 세 개의 링크, 윤곽이 있는 무료 평가판 시작 버튼이 있습니다. 세 개의 링크만 있으면 눈은 평가판으로 바로 이동합니다.

7. 그립: Elementor 기관 헤더 템플릿

SaaS 사이트에서 시험해 볼 수 있는 큰 워드마크인 정보, 사례 연구 및 연락처와 회사와의 작업 버튼이 있는 기관 헤더입니다.

8. Klyro: Elementor 소프트웨어 데모 헤더 템플릿

데모 통화를 통해 판매되는 소프트웨어에 대한 옅은 회색 막대와 무료 데모 요청 버튼에 5개의 링크가 있습니다.

9. 리드 리프트: Elementor 시작 헤더 템플릿

굵은 링크 텍스트와 무료 평가판 시작이라고 표시된 검은 색 알약이있는 크림 바. 여기에서 SaaS 헤더 중 가장 따뜻합니다.

10. 넥시스: Elementor SaaS 헤더 템플릿

가운데에 걸쳐 5 개의 링크, 짙은 녹색 로고 및 밝은 테두리가있는 지금 시작하기 버튼.

11. Optivue: Elementor SaaS 헤더 템플릿

흰색 막대와 오른쪽에 둥근 무료 평가판 시작 버튼 중앙에 세 개의 링크가 있습니다. 읽을 것이 거의 없으므로 버튼이 작업을 수행합니다.

12. Sabrion: Elementor SaaS 로그인 헤더 템플릿

가격,정보 및 로고 옆에 있는 연락처,그 다음 로그인 링크 및 14 일 무료 평가판 시작 버튼. 로그인은 일반 텍스트로 유지되므로 평가판과 경쟁하지 않습니다.

13. Sempla: Elementor SaaS 헤더 템플릿

기능, 회사 소개, 로고 옆의 가격 및 추천서, 로그인 및 지금 시작하기가 오른쪽에 그룹화되어 있습니다.

14. Zaplyte: Elementor 앱 헤더 템플릿

링크는 로고 중앙이 아닌 바로 뒤에 위치하므로 지금 시작하기 버튼 앞에 열린 공간이 남습니다.

비즈니스 및 로컬 서비스 헤더 템플릿

청소 회사,치과의사, 배관공,치료 클리닉,레스토랑 및 부동산 중개인을위한 헤더. 대부분은 전화 번호 또는 소셜 링크가있는 상단 바를 추가하고 메인 버튼은 약속,전화 또는 테이블을 예약합니다.

15. HomeAxis: Elementor 부동산 헤더 템플릿

소셜 아이콘,이메일 주소 및 전화 번호는 라임 탑 바에서 타고. 메인 행은 여섯 링크와 일치하는 화살표와 함께 견적 받기 버튼을 가지고있다.

16. Balanciq: Elementor 치료 클리닉 헤더 템플릿

홈, 소개, 서비스, 치료사 및 둥근 여행 시작 버튼으로 연락하십시오. 부드러운 색상과 충분한 공간으로 클리닉에 적합합니다.

17. 클리너: Elementor 청소 서비스 헤더 템플릿

소셜 아이콘,거리 주소 및 전화 번호는 슬림한 상단 막대를 공유합니다. 메인 행에는 5 개의 링크와 녹색 예약 약속 버튼이 있습니다.

18. 청소: Elementor 청소 회사 헤더 템플릿

파란색 상단 표시줄은 호출 번호 옆에 “빠른 청소 도움이 필요하십니까?”라고 묻습니다. 그 아래에는 5개의 링크와 동일한 파란색의 약속 만들기 버튼이 있습니다.

19. 요리: Elementor 레스토랑 헤더 템플릿

크림 메인 행 위에 전화,이메일 및 소셜 아이콘이있는 올리브 탑 바. Book A Table 은 요청하는 하나의 작업입니다.

20. 치과: Elementor 치과 클리닉 헤더 템플릿

전화번호는 예약 예약 버튼 바로 옆에 있으므로 환자는 같은 장소에서 전화하거나 예약할 수 있습니다.

21. Plumbiq: Elementor 배관 서비스 헤더 템플릿

전화하기 및 소셜 아이콘이 상단 막대를 채우고 아래 5 개의 링크와 파란색 무료 전화 요청 버튼이 있습니다.

전자상거래 및 상점 헤더 템플릿

검색,카트 및 계정 아이콘이 있는 헤더를 저장합니다. Sartivo 는 카테고리 드롭다운을 열고,레이아웃 중 두 개는 헤더 자체 안에 판매 제안 또는 프로모션 링크를 넣습니다.

22. 검색이 포함된 Blue Store 헤더: Elementor 스토어 헤더 템플릿

소셜 아이콘이 있는 파란색 맨 위 행,중앙 로고,검색 상자 및 카트. 아래 메뉴 행은 추가 링크를 위해 햄버거로 끝납니다.

23. 중심 로고 상점: Elementor 상점 헤더 템플릿

파란색 주소와 전화 바 아래에는 메뉴가 왼쪽에 있고 로고가 중앙에 있으며 검색 및 카트가 오른쪽에 있습니다.

24. 다크 탑 바 숍: Elementor 숍 헤더 템플릿

그것의 어두운 상단 바는 무료 상담과 전화 번호를 제공합니다. 아래는 로고,여섯 링크와 검색 버튼입니다.

25. 프로모션 배너 스토어: Elementor 스토어 프로모션 헤더 템플릿

세 줄: 계정 및 소셜 아이콘이 포함된 메시지 줄, 다양한 혜택 배너 옆에 있는 로고, 검색, 장바구니 및 위시리스트가 포함된 파란색 메뉴 표시줄.

26. 검색 바 스토어: Elementor 전자 상거래 검색 헤더 템플릿

검색은 로고 행의 중앙을 사용하며 오른쪽에는 위시리스트와 카트가 있고 메뉴 표시줄에는 전자 제품 링크가 70% 할인되어 있습니다.

27. Sartivo: Elementor 패션 스토어 헤더 템플릿

카테고리별 쇼핑 링크,모든 페이지 드롭다운,중앙 로고 및 계정과 검색 아이콘이 있는 패션 스토어 헤더. 스크린샷은 드롭다운이 열려 있는 것을 보여줍니다.

상단 막대 및 다중 행 헤더 템플릿

두 개 또는 세 개의 행으로 구성된 헤더: 전화, 이메일 또는 영업 시간이 있는 연락처 표시줄, 로고 행 및 메뉴 표시줄. 모든 페이지에 연락처 정보를 원하는 기관, 진료소 및 서비스 회사에 적합합니다.

28. 주소 표시줄: Elementor 상단 표시줄 헤더 템플릿

주소와 소셜 아이콘이 있는 회색 상단 막대, 로고, 6개의 링크 및 파란색 지금 가입 버튼.

29. 각도 메뉴: Elementor 약속 헤더 템플릿

영업 시간과 세 개의 작은 유틸리티 링크가 흰색으로 끝나는 각진 파란색 메뉴 표시줄 위에 있습니다. 약속하기 버튼.

30. 검색이 포함된 연락처 정보 헤더: Elementor 연락처 정보 헤더 템플릿

주소, 로그인 및 소셜 아이콘이 있는 파란색 막대, 통화 및 영업 시간이 있는 로고 행, 검색 상자가 있는 파란색 상자 메뉴 막대.

31. 창조적 인 기관: Elementor 창조적 인 기관 헤더 템플릿

로고는 왼쪽에 자체 큰 파란색 블록을 얻습니다. 전화 번호와 소셜 아이콘이 상단을 가로 질러 실행되며 메뉴는 아래에 있습니다.

32. 부동 메뉴: Elementor 부동 메뉴 헤더 템플릿

파란색 막대에 전화,이메일 및 영업 시간이 있습니다. 아래의 흰색 메뉴 상자는 페이지 상단과 겹치며 영웅 이미지보다 잘 작동합니다.

33. 시작하기 연락처 표시줄: Elementor 연락처 표시줄 헤더 템플릿

오른쪽에 단단한 시작 블록이 있는 밝은 상단 막대에 전화와 이메일을 보낸 다음 로고, 메뉴 및 카트 아이콘을 표시합니다.

34. 의료 클리닉: Elementor 의료 클리닉 헤더 템플릿

로고는 대각선 파란색 패널에 있습니다. 전화와 이메일이 상단 막대에 들어가고 검색 및 상자 아이콘이 메뉴를 끝냅니다.

35. 세 행 중심: 요소 세 행 헤더 템플릿

상단 바에 이메일, 전화 및 로그인, 양쪽에 카트와 소셜 아이콘이 있는 중앙 로고, 하단에 전폭 파란색 메뉴 바가 있습니다.

36. 방문,통화 및 메일: Elementor 연락처 세부 정보 헤더 템플릿

우리를 방문하고, 전화하고, 이메일을 보내주세요. 로고 옆에 블록이 정렬되어 있으며, 아래에는 로그인 및 등록이 포함된 파란색 메뉴 막대가 있습니다.

최소 및 중심 헤더 템플릿

단일 라인 및 특이한 레이아웃: 중앙 로고를 중심으로 분할된 메뉴, 단일 메뉴 버튼이 있는 막대, 중앙에 쌓인 로고 및 몇 개의 일반 로고 및 링크 막대.

37. 중심 로고 쌓아 올리는: Elementor 중심 로고 우두머리 템플렛

로고는 그 아래 중앙에 메뉴가 있는 상단에 위치하며 블로그와 포트폴리오 사이트에 적합한 레이아웃입니다.

38. 불 떨어져 있 분할: Elementor 분할 메뉴 우두머리 템플렛

메뉴는 두 개로 나누어져 있으며 중앙 로고의 양쪽에 세 개의 링크가 있습니다.

39. 메뉴 버튼: Elementor 메뉴 버튼 헤더 템플릿

왼쪽 로고, 가운데 소셜 아이콘, 오른쪽 파란색 메뉴 버튼. 페이지 수가 몇 개밖에 없는 사이트에서 작동합니다.

40. 소셜 아이콘이 있는 최소 헤더: Elementor 최소 헤더 템플릿

로고가 있는 흰색 막대 1개, 링크 6개, 검색 버튼 1개, 소셜 아이콘 3개.

41. Purple Angle CTA: 엘리멘터 콜 투 액션 헤더 템플릿

흰색 로고와 메뉴는 다운로드 버튼이 있는 각진 보라색 패널로 끝납니다.

42. Sign In: Elementor 간단한 헤더 템플릿

로고,6 개의 링크 및 아이콘이 있는 로그인 링크가 있습니다. 그 안에 너무 적은 것이 있으면 거의 모든 사이트에 드롭됩니다.

43. 간단한 드롭 다운: Elementor 드롭 다운 메뉴 헤더 템플릿

로고, 드롭다운 화살표가 있는 메뉴, 오른쪽의 일반 흰색 막대에 닫힌 아이콘만 있습니다.

어떤 헤더 레이아웃이 사이트에 적합합니까?

웹사이트 헤더 예: 좋은 사람들이 공유하는 것

• 그들은 방문자에게 하나의 메인 버튼을 제공합니다. Nexis,Finix 및 Optivue 는 각각 단일 호출을 실행하고 Sempla 는 두 번째 작업 인 로그인을 일반 링크로 스타일링하여 두 사람이 경쟁하지 않도록합니다.
• 그들은 메뉴를 짧게 유지합니다. 여기 대부분의 헤더는 3 개에서 6 개의 링크를 보여주고 Tecpart 는 나머지 페이지를 모든 페이지 드롭 다운에 넣습니다.
• 지역 업체들은 전화 번호를 보여줍니다. 치과,청소 및 Plumbiq 는 헤더에 넣었는데,여기서 전화를 걸고 싶어하는 고객은 스크롤하지 않고도 찾을 수 있습니다.
• 상점들은 헤더에 검색을 넣습니다. 여기 있는 모든 상점 레이아웃은 그것을 가지고 있고,대부분은 그 옆에 카트 아이콘을 추가합니다.
• 어두운 막대는 Finix 및 Clowdify처럼 밝은 텍스트와 윤곽선 버튼을 사용하므로 둘 다 읽을 수 있습니다.

헤더를 끈적하게 만드십시오

방문자가 스크롤하는 동안 상단에 유지 헤더는 긴 페이지에 도달 메뉴와 버튼을 유지합니다. 당신은 끈적 이러한 헤더 중 하나를 만들 수 있으며,단계는 우리의 가이드에 있습니다 elementor 에서 끈적한 헤더 만들기. 에 한 페이지 웹사이트, 각 섹션으로 점프하는 메뉴 링크와 스티커 헤더를 페어링합니다.

헤더, 섹션, 페이지 또는 키트: 어떤 템플릿이 필요합니까?

헤더 템플릿은 사이트의 한 부분을 다룹니다. 나머지 부분도 구축하는 경우 동일한 라이브러리가 있습니다 Elementor 섹션 템플릿 가격이나 FAQ와 같은 단일 밴드의 경우 전체 Elementor 페이지 템플릿 전체 페이지의 경우 템플릿 키트 머리말, 바닥글 및 모든 페이지를 하나의 일치하는 스타일로 묶습니다.

라이브러리에서 Pro로 표시된 헤더에는 다음이 필요합니다 마스터 애드온 프로 라이센스또한 이러한 헤더 중 많은 부분이 나오는 전체 키트의 잠금을 해제합니다.

자주 묻는 질문

헤더를 선택하고 한 번 설정하세요

사이트에 맞는 그룹으로 시작해서 맞는 디자인을 삽입하세요. 나중에 마음이 바뀌면 같은 Theme Builder 템플릿을 열고 이전 디자인을 삭제한 후 새 디자인을 삽입하세요. 디스플레이 조건은 그대로 유지됩니다.

관련 읽기: elementor 템플릿을 가져오는 방법, Elementor 섹션 템플릿, Elementor 바닥글 템플릿 그리고 컨테이너로 헤더를 빌드하는 Elementor 의 자체 가이드.