Elementor에서 스티커 헤더를 만드는 방법(2026 가이드)

방문자가 스크롤하는 동안 끈적끈적한 헤더가 화면 상단에 고정되어 있습니다. 로고,메뉴 및 클릭 유도 문구 버튼은 누군가가 얼마나 아래로 내려가더라도 계속 연결할 수 있기 때문에 거의 모든 SaaS 및 대행사 사이트에서 하나를 배송합니다.

이 가이드는 무료를 사용하여 Elementor에서 스티커 헤더를 만드는 방법을 보여줍니다 마스터 애드온 테마 빌더,그러므로 Elementor Pro 는 필요 없을 것입니다. 그리고 제가 여기서 Master Addons 를 사용하는 동안,방법은 보편적입니다: 헤더를 템플릿으로 빌드한 다음 컨테이너 위치를 Fixed 로 설정합니다. Elementor 에서 헤더를 편집할 수 있는 모든 헤더 빌더는 동일한 세 번의 클릭을 따릅니다.

이 게시물의 2020 버전은 섹션에 CSS ID 를 삭제하고 탐색 메뉴 위젯에 붙여 넣으라고했습니다. 그것은 섹션 시대였습니다. Elementor 는 3,6 이후 Flexbox Containers 를 기본 레이아웃으로 사용했으며 이제 위치 제어가 패널에 바로 위치하므로 전체 CSS ID 댄스가 사라졌습니다.

실제로 끈적끈적한 헤더는 무엇입니까

두 가지 다른 행동이 같은 이름으로 불리게되고, 그것들을 혼합하는 것은 사람들이 존재하지 않는 설정을 사냥하게되는 이유입니다.

A 고정 헤더 는 페이지가 로드되는 순간부터 화면에 나타나고 절대 떠나지 않습니다. 그게 position: fixed 하고,그것이 우리가 여기서 짓고 있는 것입니다.

A 스크롤 시 스티키 헤더 정상적으로 맨 위에 앉아 스크롤을 한 다음 방문자가 스크롤을 올리면 다시 슬라이드합니다. smart scroll 또는 hide-on-scroll 이라는 것을 볼 수 있습니다. 스크롤 효과가 필요하며 Elementor 는 Pro 에 해당 항목을 유지합니다.

대부분의 사이트에서 고정 헤더는 실제로 원하는 헤더이며 무료로 빌드 할 수있는 헤더입니다.

문제: 헤더가 스크롤됩니다

여기 시작점이 있습니다. 일반 Elementor 헤더는 다른 컨테이너와 마찬가지로 페이지 상단에 있습니다.

아래로 조금 스크롤하면 사라집니다. 로고,메뉴, 무료 데모 요청 버튼,모두 화면 상단에서 벗어납니다. 따라서 가격 섹션에 도착하여 연락처를 클릭하려는 방문자는 메뉴를 다시 찾으려면 위로 스크롤해야합니다.

끈적끈적한 헤더가 해결하는 모든 문제는 바로 이것이다.

시작하기 전에

컨테이너를 켜려면 무료 Elementor 버전 3.6 이상이 필요합니다.

설정을 적용하려면 헤더 템플릿도 필요합니다. Elementor 의 자체 테마 빌더는 Pro-only 이므로 무료를 확보하십시오: 마스터 애드온 무료 포함 헤더 빌더그리고 테마 빌더는 바닥글, 404, 아카이브 및 단일 템플릿도 처리합니다.

이미 다른 플러그인의 헤더 템플릿이 있습니까? 2 단계로 건너뛰기. 위치 설정은 기본 Elementor 이므로 헤더가 어디에서 왔는지 동일하게 작동합니다.

1 단계: Elementor 에서 헤더 템플릿을 엽니 다

로 이동 마스터 애드온 > 테마 빌더. 템플릿은 유형별로 나열됩니다. 내 템플릿에는 헤더와 바닥글이 있으며 둘 다 활성 상태이며 둘 다 전체 사이트에 표시되도록 설정되어 있습니다.

아직 헤더가 없나요? 클릭 새 템플릿 추가를, 유형을 Header로 설정하고, Activation on을 전환하고, Entire Site로 조건을 설정합니다. The 헤더 빌더 문서 덮어라, 그리고 그 흐름은 내가 그 안에서 걸었던 것과 같다 elementor에서 바닥글 편집에 대한 안내입니다.

헤더 템플릿을 마우스를 가져가서 누르세요 Elementor 로 편집. 헤더는 자체 캔버스에서 열립니다.

2 단계: 헤더 컨테이너를 선택합니다

사람들은 이것을 끊임없이 잘못 알고 있으므로 여기서 정확하게 설명하십시오: 당신은 그것을 원합니다 외부 컨테이너 헤더의. 로고도 아니고,nav 메뉴 위젯도 아니고,그 안에 집어넣은 중첩 컨테이너도 아닙니다.

확실한 방법은 다음과 같습니다 구조 패널,상단 막대의 레이어 아이콘. 해당 트리에서 최상위 컨테이너를 클릭하면 전체 헤더가 강조 표시되어야 합니다. 로고나 메뉴만 켜지면 하위 요소를 잡은 것이며,위젯을 설정하면 헤더 대신 해당 위젯 하나가 화면에 고정됩니다. 이상해 보이고,결과가 이상한지 확인하는 것이 가장 먼저입니다.

3 단계: 컨테이너 위치를 고정으로 설정합니다

헤더 컨테이너를 선택한 상태에서 을 엽니다 고급 탭하고 확장하세요 레이아웃 섹션. 그만큼 위치 드롭다운에는 세 가지 옵션이 있습니다.

기본값은 지금 가지고 있는 것입니다: 헤더는 페이지와 함께 스크롤됩니다. Absolute 는 화면이 아닌 페이지에 헤더를 고정하므로 여전히 스크롤 해제됩니다. 이는 끈적한 헤더가 아닌 오버레이 헤더에 고정되어 뷰포트에 고정되며,그것이 원하는 것입니다.

골라내다 고정그리고 방향 컨트롤을 사용하면 패널이 확장됩니다.

오프셋을 사용하여 수평 방향을 왼쪽으로 설정합니다 0및 오프셋을 사용하여 상단에 대한 수직 방향입니다 0니다. 양쪽에서 제로 뷰포트의 가장 왼쪽 상단에 헤더를 붙입니다. 당신이 오히려 헤더가 상단 가장자리 아래에 조금 떠있는 경우 수직 오프셋을 올립니다.

Elementor는 또한 당신에게 경고를 던질 것입니다: “맞춤형 포지셔닝은 반응형 웹 디자인을 위한 모범 사례로 간주되지 않으며 너무 자주 사용해서는 안 됩니다.” 무시하세요. 그건 레이아웃을 통해 고정 요소와 절대 요소를 흩어지게 하는 것에 대한 일반적인 주의 사항이고,고정 헤더는 올바른 호출인 교과서적인 경우입니다. 작업이 끝나면 모바일 뷰를 확인하면 되죠. 다시 말씀드리겠습니다.

4 단계: z-index 를 올린다

여전히 레이아웃 섹션에서 다음을 찾으세요 Z-인덱스 필드를 하고 편안하게 높은 것으로 설정하세요. 저는 99 를 사용합니다.

Z-index 는 두 개가 겹칠 때 어떤 요소가 맨 위에 위치하는지를 결정합니다. 고정된 헤더는 방문자가 스크롤할 때 페이지 콘텐츠가 겹치는 것이 보장되며,z-index 가 너무 낮으면 콘텐츠가 그 위로 바로 스크롤됩니다. 이는 헤더가 기술적으로 끈적하지만 슬라이더,팝업 및 이미지가 바로 헤더를 통과해 나가는 고전적인 버그입니다.

무언가가 여전히 헤더를 덮고 있다면 숫자를 올립니다. 잃는 것을 무엇이든 이길 수 밖에 없으며 많은 슬라이더 및 팝업 플러그인은 수천 단위로 자체 z-인덱스를 설정합니다.

5 단계: 게시

히트 출판하다.

라이브 사이트를 열고 스크롤합니다. 헤더는 아래로 전체 방법 화면의 상단에 잠겨 유지.

여전히 프런트 엔드에서 스크롤되지만 편집기에서 바로 보이는 경우 디버깅을 시작하기 전에 캐시를 지우십시오. 캐싱 플러그인은 잠시 동안 오래된 헤더 CSS 를 행복하게 제공합니다.

고정된 헤더를 깨뜨리는 세 가지와 수정 사항

위의 단계는 헤더를 고정 얻을. 다음은 실제 사이트와의 접촉에서 살아남는 끈적 끈적한 헤더를 분리하는 것입니다 당신이 일주일 후에 다시 찢어 하나에서.

1. 헤더는 투명하게 진행되고 콘텐츠는 끝까지 표시됩니다

고정된 요소가 일반 페이지 흐름에서 해제되므로 어떤 것에서든 배경 상속을 중지합니다. 헤더에 배경색을 설정하지 않으면 페이지 콘텐츠가 스크롤됩니다 밑에 그것은 곧바로 보여지며, 메뉴 텍스트는 이미지가 그 뒤를 지나가는 순간 읽을 수 없는 수프로 변합니다.

헤더 컨테이너를 선택하고 다음으로 이동합니다 스타일 > 배경그리고 단색을 부여하세요. 만약 여러분이 진정으로 투명한 헤더를 원한다면,그건 타당한 모습이지만,그 뒤에 작업할 첫 번째 섹션을 디자인하세요.

2. 첫 번째 섹션은 헤더 뒤에 숨습니다

같은 근본 원인. 고정된 헤더가 더 이상 레이아웃에서 공간을 차지하지 않으므로 첫 번째 섹션이 위로 미끄러져 왼쪽 간격을 채우고 일부는 헤더 뒤에 갇히게 됩니다.

헤더의 높이와 대략 일치하는 첫 번째 섹션에 상단 패딩을 추가합니다. 헤더의 높이가 80px 인 경우 영웅에게 상단 패딩의 80px 를 제공합니다. 높이가 얼마나 큰지 확실하지 않은 경우 앞쪽 끝에 있는 헤더를 마우스 오른쪽 버튼으로 클릭하고 검사하십시오; 높이는 브라우저 도구에 바로 있습니다.

3. 그것은 모바일에서 화면을 먹는다

전화 화면은 짧습니다. 데스크톱 모니터에서 괜찮게 느껴지는 헤더는 전화기 뷰포트의 심각한 덩어리를 삼킨 다음 모든 페이지 아래로 방문자를 따라갈 수 있습니다.

Elementor 의 반응형 모드에서 모바일 뷰로 전환하고 헤더의 수직 패딩을 잘라냅니다. 위치 컨트롤도 장치별로 적용되므로 위치를 다시 로 설정할 수 있습니다 기본값 모바일에서만 헤더를 그곳으로 스크롤해 나가게 합니다. 보통 더 좋은 호출인 긴 기사 페이지에서 말이죠. 사용자 지정 중단점을 실행하면,the 사용자 정의 중단점 플러그인 이를 실제 장치 너비에 맞게 조정할 수 있습니다.

다른 헤더 플러그인에서도 작동합니까?

네,그리고 이 부분은 이해할 만한 부분입니다. 위치: 고정은 기본 Elementor 컨트롤입니다마스터 애드온 기능이 아닌. 마스터 애드온은 여기서 정확히 한 가지 작업을 수행하고 있습니다: Elementor 에서 열리는 무료 헤더 템플릿을 제공합니다. 편집기에 들어가면 끈적 끈적한 부분은 일반 Elementor 입니다.

따라서 다른 테마 빌더로 헤더를 빌드하거나 테마가 자체 Elementor 편집 가능한 헤더를 제공하는 경우 동일한 고급 > 레이아웃 > 위치 > 고정 경로가 적용됩니다. 변경되는 유일한 것은 편집을 위해 헤더를 열기 위해 이동하는 위치입니다.

점프 금지 대안: 무료 사용자 정의 CSS를 사용하면 위치가 끈적해집니다

고정 위치 지정은 헤더를 페이지 흐름에서 들어 올립니다. 따라서 첫 번째 섹션을 패드해야하므로 그 뒤에 아무것도 숨기지 않습니다. 해당 단계를 건너 뛰려면 CSS position: sticky 는 대안입니다. 헤더를 흐름에 유지하고 상단에 도달 한 후에 만 고정하므로 수정할 콘텐츠 점프가 없습니다.

캐치는 CSS 를 추가하는 곳입니다. Elementor 의 요소별 사용자 정의 CSS 상자는 Pro 기능이지만 무료 Master Addon 입니다 사용자 정의 CSS 확장 동일한 박스를 비용 없이 제공합니다. 헤더 컨테이너를 선택하고,사용자 정의 CSS 필드를 열고,이것을 붙여넣습니다:

selector {
    position: sticky;
    top: 0;
    z-index: 99;
}

selector 는 편집하는 요소의 Elementor 약칭이므로 ID 나 클래스가 필요하지 않습니다. One gotcha: if any parent container has overflow: hidden, 끈적끈적한 것은 조용히 작동을 멈추고, 헤더가 고정하기를 거부하면 조상으로부터 작동이 중지됩니다. 전체 동작은 에 문서화되어 있습니다 CSS 위치에 대한 MDN 참조.

무료 스티커 헤더 방법 비교

이 경로 중 세 개는 무료이며 각각 다른 요구 사항에 맞습니다. 고정은 Elementor 의 자체 위치 제어에 살고 있습니다. 마스터 애드온 포지셔닝 확장 고정 옵션이 없지만 헤더 내부에 도움이 됩니다: 장치당 별도의 값을 사용하여 상대 또는 절대 오프셋으로 로고나 배지를 쿡쿡 찔러보세요.

스크롤에 축소 또는 색상 변경 추가

방문자가 스크롤하면 헤더가 축소되거나 색상이 바뀌기를 원하십니까? CSS 가 자체적으로 할 수없는 스크롤 거리를 읽습니다. 를 통해 JavaScript 의 몇 줄 사용자 정의 JS 확장 마스터 애드온에서 프로는 스크롤 임계 값을 지나 헤더에 클래스를 전환 할 수 있습니다, 다음 사용자 정의 CSS에서 해당 클래스를 스타일. 그것은 효과를 배송 플러그인보다 더 많은 작업입니다, 그래서 당신이 손으로 그것을 구축하기 전에 노력의 무게를.

헤더를 붙일 가치가 있게 만드는 것

일단 화면에 붙으면 헤더가 100% 보이므로 두 번째 패스 할 가치가 있습니다.

높이를 먼저 다듬습니다. 절대 사라지지 않는 높은 헤더는 빠르게 성가시게 되며,저장하는 모든 픽셀은 방문자가 볼 수 있는 콘텐츠의 픽셀입니다. 그런 다음 그 안에 무엇이 있는지 살펴보십시오: 화면의 영구 슬롯은 데모,가격 또는 연락처 버튼 등 최고의 링크를 위한 좋은 집입니다.

큰 사이트? 마스터 애드온 탐색 메뉴 위젯 메가 메뉴를 빌드하므로 헤더가 커지지 않고 한 번의 클릭으로 전체 구조를 유지할 수 있습니다. 그리고 헤더가 이제 모든 페이지에 로드되고 언로드되지 않으므로 무게를 주시하십시오. 그만큼 엘리멘터 속도 가이드 로드 시간이 이미 촉박한 경우 읽을 가치가 있습니다.

처음부터 헤더를 만들지 않는 것이 좋다면, the 마스터 애드온 템플릿 라이브러리 동일한 단계로 가져오고 끈적하게 만들 수 있는 기성 헤더가 있습니다 템플릿 키트 전체 사이트에 대해 일치하는 머리글과 바닥글을 배송합니다.

자주 묻는 질문

감싸는

Elementor 에서 끈적한 헤더를 만드는 것은 한 요소에 대한 세 가지 설정입니다. 헤더 컨테이너를 선택하고,Position 을 Fixed with zero offsets 로 설정하고,z-index 를 올립니다. 그 이후의 모든 것은 정리입니다: 헤더에 단단한 배경을 주고,아무것도 뒤에 숨지 않도록 첫 번째 섹션을 채우고,전화 완료 전에 전화에서 어떤 느낌인지 확인하십시오.

이 모든 것은 무료 Elementor 에서 실행됩니다. 필요한 유일한 것은 편집 할 헤더 템플릿이며 무료입니다 마스터 애드온의 테마 빌더 바닥글, 404, 아카이브, 단일 템플릿과 함께 제공합니다. 나중에 툴킷의 나머지 부분을 원한다면, 그것은 무엇 프로 계획 커버하지만, 이 튜토리얼에서 아무것도 그것을 필요로하지 않습니다.

관련 읽기: elementor를 사용하여 WordPress에서 바닥글을 편집하는 방법, elementor 에서 기울어진 배경을 만드는 방법, 그리고 elementor로 한 페이지짜리 웹사이트를 만드는 방법.