슬라이드 아웃 패널 및 메뉴용 Elementor 오프 캔버스 위젯(Pro)
Off-Canvas Content 는 페이지에 버튼을 놓고 방문자가 클릭하면 패널을 여는 Master Addons Pro 위젯입니다. 패널에는 저장된 Elementor 템플릿이 표시되므로 내부에 메뉴,연락처 양식,필터 또는 프로모션을 넣고 다른 페이지에서 동일한 템플릿을 재사용할 수 있습니다. 패널이 나타나는 위치,애니메이션 방식 및 버튼 모양을 선택합니다. 방문자는 닫기 아이콘으로 닫거나 오버레이를 클릭하거나 Esc 를 눌러 닫습니다.
무료 Elementor 에는 오프 캔버스 위젯이 없습니다. Elementor Pro 는 버전 3,22 에서 하나를 추가했으며 Flexbox Containers 및 Nested Elements 기능을 켜야합니다. 이 위젯은 Master Addons Pro 옵션입니다: 저장된 템플릿을 여는 것입니다,어느 쪽에서나,버튼 뒤에 한 번 스타일링합니다.
Elementor에서 캔버스 외 패널을 추가하는 방법
Elementor와 액티브가 필요합니다 마스터 애드온 프로 라이센스.
- 로 이동 템플릿, 저장된 템플릿를 만들고 템플릿을 만들고 패널 콘텐츠를 빌드하여 게시합니다.
- 페이지를 편집하고 검색하세요 캔버스 외부 콘텐츠 그리고 버튼이 나타나야 할 곳으로 드래그하세요.
- 에서 템플릿 선택를, 저장한 템플릿을 선택합니다.
- A를 선택하세요 위치 그리고 Width 또는 Height 를 설정한다.
- 입구 애니메이션과 기간을 선택하세요.
- 제목 또는 아이콘 버튼을 설정한 다음 스타일 탭에서 버튼, 헤더 및 컨테이너의 스타일을 지정합니다.
보다 캔버스 외부 콘텐츠 설정 모든 옵션에 대한 가이드.
한눈에 보는 오프캔버스 콘텐츠
| 설정 | 하는 일 |
|---|---|
| 콘텐츠 소스 | 저장된 Elementor 템플릿: 페이지, 섹션 또는 컨테이너(드롭다운에는 키트를 제외한 모든 라이브러리 항목이 나열됩니다) |
| 위치 | 오른쪽, 왼쪽, 위쪽, 아래쪽, 중간, 상대(버튼 아래 드롭다운) |
| 입구 애니메이션 | 페이드, 슬라이드 또는 성장; 상대는 페이드만 지원합니다 |
| 입구 유형 | 덮개는 페이지의 위 패널을 미끄러집니다; 강요는 페이지를 가로질러 이동합니다. 강요는 정상,좌측 및 우측을 위해 제안됩니다 |
| 크기 | 왼쪽, 오른쪽, 중간 및 상대적인 경우 px, % 또는 vw 단위의 너비; 상단, 하단, 중간 및 상대적인 경우 px, % 또는 vh 단위의 높이; 장치당 둘 다 |
| 로 닫습니다 | 닫기 아이콘, 오버레이 클릭 또는 Esc 키; 초점이 맞춰진 닫기 아이콘의 Enter 또는 Space도 작동합니다 |
| 엑스트라 | 기본값으로 열기, 애니메이션 지속 시간 초, 역방향 헤더가 있는 헤더 제목, 열려 있는 동안 페이지 스크롤 잠금, 텍스트, 아이콘 또는 둘 다 있는 스타일 가능한 트리거 버튼 |
| 에서 열립니다 | 위젯 자체 버튼만 (CSS 선택기 또는 외부 트리거 없음) |
| 필요 | Elementor(무료 또는 Pro)와 Master Addons Pro |
패널 위치, 크기 및 애니메이션
위치 오른쪽, 왼쪽, 위쪽, 아래쪽, 중간 및 상대 제공 왼쪽, 오른쪽 및 중간 패널은 px, % 또는 vw의 너비를 얻고 위쪽, 아래쪽 및 중간 패널은 px, % 또는 vh의 높이를 얻으며 각각 장치별로 조정 가능합니다. 입구 애니메이션 는 Fade,Slide 또는 Grow 이며 Fade 만 Relative 와 함께 작동합니다. 왼쪽,오른쪽 및 위쪽 패널에도 입구 유형 cover 또는 Push 의.set the 애니메이션 기간 몇 초 안에 켜세요 기본값으로 엽니다 패널이 열리기 시작해야 하는 경우.
덮개와 강요는 2 개의 입구 유형입니다. 덮개로 패널 슬라이드는 페이지 위에 있고 오버레이는 그것의 뒤에 인 무슨을 흐리게 합니다. 강요로 전체적인 페이지는 패널의 폭에 의해 가로질러 움직입니다,그래서 내용은 메뉴의 옆에 보이는 체재에 있는 최고,좌측 및 우측 패널을 위해 유효합니다 강요; 밑바닥,중간 및 관계되는 항상 덮개.
- 작은 화면을 위한 사이트 메뉴가 있는 왼쪽 또는 오른쪽 패널입니다.
- 짧은 공지사항 또는 검색 양식을 위한 상단 패널입니다.
- 가입 양식의 간단한 모달인 중간 패널입니다.
트리거 버튼, 헤더 및 컨테이너 스타일링
트리거 버튼은 아이콘 거리 및 정렬 설정으로 제목,아이콘 또는 둘 다를 표시할 수 있습니다. 스타일 그 색상,일반 및 호버에 대한 배경 색상 및 테두리 색상,더하기 상자 그림자,타이포그래피, SVG 크기,패딩, 테두리 유형 및 테두리 반경 패널 내부,the 헤더 섹션은 닫기 아이콘과 선택적 헤더 제목을 스타일링하고,역방향 헤더는 해당 위치를 바꿉니다. The 컨테이너 섹션은 패널 배경, 테두리, 패딩, 오버레이 색상 및 스크롤바 색상과 너비를 설정합니다.
- 헤더에 아이콘 전용 햄버거 버튼이 있습니다.
- 양식을 여는 “문의하기” 텍스트 버튼입니다.
- 패널 뒤의 페이지를 어둡게 하는 브랜드 오버레이 색상입니다.
Elementor Pro 오프 캔버스 vs Master 애드온 오프 캔버스 콘텐츠
캔버스를 벗어난 메뉴가 가장 일반적으로 사용됩니다. 이 위젯은 메뉴 자체를 구축하지 않으므로 먼저 템플릿에 메뉴 위젯을 배치합니다. 메뉴만 필요한 경우 마스터 애드온 Nav 메뉴 위젯은 또한 Pro 에서 오프 캔버스 타입의 햄버거 레이아웃을 가지고 있는데,이는 템플릿 단계를 건너뜁니다. 패널이 로고,연락처 세부 정보 및 소셜 링크와 같은 메뉴 이상을 보유해야 할 때 오프 캔버스 콘텐츠를 사용하십시오.
| 특징 | Elementor Pro 오프 캔버스 | 마스터 애드온 오프 캔버스 콘텐츠 |
|---|---|---|
| 가격 | Elementor Pro가 필요합니다 | 마스터 애드온 프로가 필요합니다 |
| 패널 콘텐츠 | 편집 모드의 위젯 내부에 내장되어 있습니다 | 재사용할 수 있는 저장된 Elementor 템플릿입니다 |
| 어떻게 열리는지 | 캔버스 외부 작업을 사용하는 모든 버튼이나 링크 | 위젯의 자체 트리거 버튼 |
| 위치 | 수평 및 수직 시작, 중앙 또는 끝 | 오른쪽, 왼쪽, 위쪽, 아래쪽, 중간 또는 상대 |
| 애니메이션 | 출입 애니메이션 | 덮개나 밀어서 페이드, 슬라이드 또는 성장하세요 |
| 닫는 | 오버레이 및 Esc, 각각 끌 수 있습니다; 페이지 스크롤을 잠글 수 있습니다 | 아이콘 닫기, 오버레이 클릭 또는 Esc |
| 내장 헤더 | 아니요 | 헤더 제목 및 닫기 아이콘 |
| 기본적으로 열기 | 위젯 설정이 아닙니다 | 예 |
Elementor Pro 는 페이지의 링크가 패널을 열거나 종료 애니메이션을 원할 때 승리합니다. 마스터 애드온은 많은 페이지에서 하나의 템플릿이 기성품 버튼 뒤에 나타나야 할 때 적합합니다. 검색 패널의 경우 다음도 참조하십시오 검색 위젯.
Elementor에서 캔버스 외부 메뉴를 구축하는 방법
캔버스를 벗어난 메뉴가 가장 일반적으로 사용됩니다. 위젯은 메뉴 자체를 구축하지 않으므로 먼저 템플릿에 메뉴 위젯을 배치합니다.
- 저장된 템플릿을 만들고 무료 마스터 애드온과 같은 메뉴 위젯을 추가하세요 Nav 메뉴 수직 레이아웃으로 설정.
- 템플릿을 게시합니다.
- 헤더에서 캔버스 외부 콘텐츠를 추가하고 해당 템플릿을 선택합니다.
- 위치를 왼쪽이나 오른쪽으로, 너비를 약 320px로, 입구 애니메이션을 슬라이드로 설정합니다.
- 제목 표시, 아이콘 표시를 켜고 버튼이 햄버거처럼 보이도록 막대 아이콘을 선택합니다.
- Elementor의 반응형 가시성을 사용하여 데스크톱 헤더가 일반 메뉴를 유지하는 경우 태블릿과 모바일에서만 이 버튼을 표시합니다.
Elementor의 전체 화면 메뉴
전체 화면 메뉴는 너비가 100vw 로 설정되고 높이가 100vh 로 설정된 중간 위치입니다. 그 안에 큰 수직 메뉴가 있는 템플릿을 넣고 레이어가 제자리에 나타나도록 페이드 입구를 선택하고 컨테이너에 단단한 배경을 제공하여 아무것도 표시되지 않습니다. 닫기 아이콘은 패널 헤더에 있고 Esc 키는 레이어도 닫습니다.
스타일시트의 세부사항 하나: 패널은 뷰포트의 90%로 캡핑되므로 100vw by 100vh 패널은 모든 면에서 여백을 남깁니다. 페이지의 사용자 지정 CSS 에 이 규칙을 추가하여 캡을 제거합니다:
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
스크린샷이 포함된 단계별 기능이 들어있습니다 elementor 에서 전체 화면 메뉴를 구축하는 방법.
슬라이드 아웃 사이드 메뉴 (사이드바 탐색)
사이드 메뉴의 경우 위치를 왼쪽 또는 오른쪽으로 설정하고 px의 너비를 설정하여 메뉴의 경우 약 320px, 연락처 정보가 있는 패널의 경우 약 400px로 설정합니다. 페이지가 옆으로 이동하여 읽을 수 있을 때 푸시를 선택하거나 패널이 맨 위에 있어야 할 때 덮기 템플릿을 유지할 수 있습니다 Nav 메뉴 수직 레이아웃의 위젯, 로고, 몇 개의 접점 라인 및 버튼.
항상 보이는 사이드바는 다른 작업입니다. 2 열 컨테이너 레이아웃으로 저것을 빌드하고 요청 시 슬라이드 인 패널에 대해이 위젯을 유지하십시오. The Elementor 사이드 메뉴 가이드 둘 다 다룹니다.
오프 캔버스 패널 예제
아래의 각 데모를 열어 패널 이동을 확인하세요: 오른쪽 접촉 패널, 페이지를 가로질러 밀어내는 왼쪽 메뉴, 상대 위치를 사용하는 드롭다운 패널, 상단 가장자리의 안내 표시줄, 여는 시트가 있는 하단 시트 시간 및 중간 위치에서 구축된 전체 화면 메뉴.
캔버스 외 콘텐츠에 대해 자주 묻는 질문
오프 캔버스 콘텐츠 위젯은 무료입니까?
아니요. 캔버스 외 콘텐츠는 일부입니다 마스터 애드온 프로. 무료 플러그인은 포함하지 않습니다.
캔버스 외부 패널에 콘텐츠를 추가하려면 어떻게 해야 합니까?
콘텐츠를 메뉴,양식 또는 프로모션과 같이 저장된 Elementor 템플릿으로 먼저 빌드합니다. 그런 다음 위젯의 템플릿 선택 드롭다운에서 해당 템플릿을 선택합니다. 여러 패널에서 하나의 템플릿을 재사용할 수 있습니다.
오프 캔버스 패널을 사용해야 합니까, 아니면 팝업을 사용해야 합니까?
탐색 및 방문자가 클릭하여 요청하는 메뉴,필터 또는 연락처 세부 정보 등의 콘텐츠에 대해 오프 캔버스 패널을 사용합니다. 시간 제한 또는 종료 의도 메시지와 중단해야 하는 양식에 대해 팝업을 사용합니다. 둘 다 열려 있는 동안 페이지 스크롤을 잠급니다.
애니메이션 속도를 어떻게 변경하나요?
콘텐츠 탭에서 애니메이션 지속 시간을 설정합니다. 값은 초 단위이며 기본값은 0,6 이고 범위는 0 에서 15 입니다. 값이 낮을수록 패널이 더 빨리 열립니다. 설정은 모든 입구 애니메이션과 Cover 및 Push 모두에 적용됩니다.
왜 오프 캔버스 패널이 열리지 않습니까?
세 가지를 확인하십시오. 템플릿을 선택하면 게시된 템플릿을 가리켜야 하며,그렇지 않으면 패널이 콘텐츠 대신 공지를 인쇄합니다. 트리거는 다른 요소가 열 수 없기 때문에 위젯 자체 버튼이어야 합니다. 그리고 로드 시 열기를 원하지 않는 한 기본값 열기는 꺼져 있어야 합니다.
그것으로 오프 캔버스 메뉴를 만들 수 있습니까?
예. 마스터 애드온과 같은 메뉴 위젯을 넣으십시오 Nav 메뉴 저장된 템플릿에서 캔버스 외부 콘텐츠에서 선택하고 위치를 왼쪽 또는 오른쪽으로 설정하고 버튼에 막대 아이콘을 사용합니다. 메뉴만 해당할 경우 Pro 의 Nav 메뉴 햄버거 레이아웃에는 자체 오프 캔버스 유형이 있습니다.
패널 콘텐츠가 내 페이지 속도를 느리게 합니까?
템플릿은 로드될 때 페이지로 렌더링된 다음 버튼을 클릭할 때까지 숨겨집니다. 몇 개의 위젯이 있는 패널은 무게가 거의 추가되지 않지만 그 안에 있는 무거운 슬라이더나 비디오는 페이지와 함께 로드되므로 패널 템플릿을 가볍게 유지하세요.
내 자신의 헤더 아이콘에서 패널을 열 수 있습니까?
아니요. 패널은 위젯이 렌더링하는 버튼에서만 열리므로 기존 아이콘이나 메뉴 링크가 트리거할 수 없습니다. 햄버거 아이콘에서 열리는 헤더 메뉴의 경우 대신 오프캔버스 유형이 있는 Nav 메뉴 위젯의 햄버거 레이아웃을 사용하십시오.
Elementor 에 대한 무료 오프 캔버스 위젯이 있습니까?
Elementor 의 무료 플러그인에는 아무 것도 없습니다. Elementor Pro 에는 Flexbox Containers 및 Nested Elements 가 켜져있을 때 버전 3,22 의 Off-Canvas 위젯이 포함되어 있습니다. Off-Canvas Content 는 Master Addons Pro 의 일부이며 Pro 위젯이 수행하지 않는 저장된 템플릿을 엽니 다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
