일부 콘텐츠는 페이지에 자리를 얻습니다. 나머지,메뉴, FAQ 목록,연락처 양식은 누군가가 요청할 때까지 더 잘 숨겨져 작동합니다. The 캔버스 외부 콘텐츠 위젯 에서 마스터 애드온 프로 버튼 뒤에 Elementor 템플릿을 숨기고 방문자가 클릭하면 화면 측면, 상단 또는 하단에서 밀어 넣습니다.
저장된 템플릿을 선택하고 트리거 버튼을 배치한 다음 패널이 들어가는 방식을 선택합니다. 이 가이드는 요소 패널에서 라이브 페이지의 작업 슬라이드 아웃 FAQ 패널까지 위젯을 따릅니다.
캔버스 외부 콘텐츠 위젯이 수행하는 작업 #
위젯은 페이지에 트리거 버튼을 놓고 숨겨진 패널에 연결합니다. 패널의 콘텐츠는 Elementor 라이브러리의 모든 템플릿이므로 모바일 메뉴,메가 FAQ,카트 요약 또는 가입 양식이 모두 동일한 방식으로 작동합니다. 방문자가 버튼을 클릭하면 패널이 페이지 위로 슬라이드하거나 페이드 인되어 뒤에 희미한 오버레이가 있고 헤더에 닫는 아이콘이 있습니다.
모든 것은 하나의 위젯에서 발생합니다: 트리거, 패널, 애니메이션, 스타일링. 별도의 팝업 플러그인, 템플릿 단축 코드 없음.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- 마스터 애드온 프로 활성 라이센스와 함께 설치,오프 캔버스 콘텐츠는 프로 위젯이기 때문에. 플러그인에 새로운? 참조 설치 가이드.
- 패널 내부에 표시할 저장된 Elementor 템플릿입니다. 먼저 대시보드의 템플릿 아래에 하나를 빌드하세요; 여기 데모에서는 기성품 FAQ 섹션을 사용합니다.
캔버스 외부 콘텐츠 위젯을 추가하는 방법 #
Elementor 편집기에서 다음을 검색합니다 요소 위한 패널 캔버스 외부 콘텐츠또는 마스터 애드온 섹션으로 스크롤하여 페이지로 드래그합니다. Click Here 라는 레이블이 붙은 파란색 트리거 버튼이 캔버스에 나타납니다. 패널 자체는 템플릿을 선택하고 열 때까지 숨겨져 있습니다.
템플릿을 선택하고 패널을 설정합니다 #
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 템플릿. 저장된 섹션이나 페이지 템플릿이 이 드롭다운에 나타납니다.
- 헤더 제목 및 제목: 패널 헤더를 켜고 “FAQ 살펴보기”와 같은 레이블을 입력합니다. 닫기 아이콘은 동일한 헤더에 있습니다.
- 위치: 패널이 어느 가장자리에서 오는지. 아래에 이것에 더 많은 것.
- 너비: 패널이 px,% 또는 vw,기본적으로 300px 로 얼마나 넓은지. 위 또는 아래쪽의 패널은 a 를 사용합니다 높이 대신 px, % 또는 vh로 제어합니다.
- 입구 애니메이션 및 입구 유형: 패널이 도착하는 방법. 애니메이션의 경우 페이드,슬라이드 또는 성장,타입의 경우 커버 또는 푸시. 커버는 페이지 위에 패널을 놓습니다; 푸시는 페이지를 옆으로 밀어서 공간을 만듭니다.
- 애니메이션 기간: 초 단위의 진입 속도, 기본적으로 0.6입니다.
- 기본값으로 열기: 패널이 이미 열려있는 상태에서 페이지를 시작합니다. 모든 변경 후 트리거를 클릭하지 않고 패널 스타일을 지정할 수 있으므로 디자인하는 동안 편리합니다.
트리거 버튼을 구성합니다 #
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 아이콘 라이브러리를 열면 Font Awesome 또는 설치한 아이콘 세트에서 선택할 수 있습니다. 아이콘 거리 아이콘과 텍스트 사이의 간격을 설정합니다.
패널이 슬라이드되는 위치를 선택합니다 #
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 위치 드롭다운은 6가지 옵션을 제공합니다: 오른쪽, 왼쪽, 위쪽, 아래쪽, 중간 및 상대.
오른쪽과 왼쪽은 고전적인 서랍 패널입니다. 하나를 선택하고 편집기는 즉시 미리보기: 패널이 템플릿 내부,상단에 헤더,닫기 아이콘 준비와 함께 슬라이드.
위쪽과 아래쪽은 너비 컨트롤을 a로 바꿉니다 높이 뷰포트 높이로 측정한 슬라이더. 30vh 의 상단 막대는 슬림한 안내 서랍처럼 작동합니다.
가운데는 패널을 모달처럼 중앙에 배치합니다. Relative 는 패널을 트리거 버튼 자체에 고정합니다. with a 거리 위젯을 드롭다운 스타일의 공개로 바꾸는 간격 제어. 패널 자체에서 한 가지 메모: 페이드 애니메이션만 상대 위치에서 작동합니다.
너비와 입구 애니메이션을 설정합니다 #
측면 위치로 돌아가서 데모는 패널을 500픽셀로 넓히고 전환합니다 입구 애니메이션 슬라이드하려면 입구 유형 푸시에. 푸시와 함께,페이지 내용은 패널이 커버되는 대신 입력으로 위로 이동. 절반 초 주위에 지속 시간을 유지; 느린 기다림 같은 느낌이 시작.
패널을 스타일링합니다 #
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 스타일 탭에는 세 개의 섹션이 있습니다: 버튼, 헤더, 그리고 컨테이너.
버튼 #
트리거 스타일 지정: 배경,텍스트 색상,타이포그래피, 테두리,패딩, 일반 및 호버 상태. 데모는 기본 파란색을 페이지와 일치하는 어두운 네이비로 바꿉니다.
헤더 #
열린 패널 상단의 스트립 스타일을 지정합니다.
- 역방향 헤더: 제목을 바꾸고 아이콘 측면을 닫으면 X가 오른쪽에서 왼쪽으로 이동합니다.
- 패딩: 헤더 내용 주위에 공백.
- 아이콘 닫기: x 버튼의 색상, 배경, 테두리 색상, 글꼴 크기, 상자 크기 및 테두리. 청중이 대부분 전화기에 있는 경우 상자 크기를 24 이상으로 유지하십시오; 12픽셀 탭 대상은 놓치기 쉽습니다.
컨테이너 #
패널 본체와 이를 둘러싸는 스타일을 지정합니다.
- 배경색, 테두리 색상, 상자 그림자, 테두리 유형, 테두리 반경, 패딩: 패널 표면 자체.
- 오버레이 배경색: 패널이 열려 있는 동안 페이지의 나머지 부분에 색조가 적용됩니다. 어두운 오버레이가 패널에 초점을 맞춥니다.
- 스크롤바: 화면보다 높은 패널의 스크롤바 색상 및 너비.
페이지의 결과 #
라이브 페이지에서 버튼은 배치한 위치에 있습니다. 클릭하면 선택한 가장자리에서 패널을 밀어 넣고 뒤에 있는 페이지를 어둡게 하고 상단에 헤더와 닫기 아이콘이 있는 템플릿이 표시됩니다. 방문자는 오버레이를 클릭하거나 Esc 를 눌러 X 로 닫습니다.
일반적인 사용 사례 #
- 모바일 및 보조 메뉴 헤더를 붐비지 않고 측면에서 미끄러져 들어갑니다.
- FAQ 및 도움말 패널 데모와 마찬가지로 랜딩 페이지에서 한 번의 클릭으로 답변을 유지합니다.
- 양식에 문의하거나 견적하세요 별도의 페이지에 사는 대신 페이지 위에 열립니다.
- 장바구니 및 계좌 서랍 상점 페이지에서 WooCommerce 또는 다른 플러그인의 장바구니나 계정 위젯을 사용합니다.
- 공지사항 바 높이가 작은 Top 위치를 이용하여 상단 가장자리에서.
더 나은 오프 캔버스 패널을위한 팁 #
- 먼저 템플릿을 빌드합니다. 위젯은 저장된 템플릿만 나열하므로 위젯을 끌어오기 전에 템플릿 아래에 패널 콘텐츠를 디자인하세요.
- Width 를 콘텐츠에 일치시킵니다. 메뉴에 맞는 300 픽셀; 양식 및 FAQ 목록은 450~500 정도에서 호흡이 더 좋습니다.
- Push 를 아껴서 사용한다. 눈에 띄게 보이지만 전체 페이지를 이동하면 긴 콘텐츠에서 불안감을 느낄 수 있습니다. 어두운 오버레이로 덮는 것이 더 차분한 기본값입니다.
- Relative 규칙을 기억하십시오. Position 이 Relative 로 설정되어 있을 때 Fade 애니메이션만 작동합니다.
- 모바일에서 패널을 확인하세요. 500픽셀 패널은 많은 휴대폰보다 넓습니다; 응답 제어 기능을 사용하여 모바일 중단점에 대해 더 작은 너비를 설정합니다.
자주 묻는 질문 #
마스터 애드온의 캔버스 외 콘텐츠 위젯은 무엇입니까?
트리거 버튼 뒤에 저장된 템플릿을 숨기고 클릭하면 패널로 슬라이드하는 Elementor 위젯입니다. 하나의 위젯에서 버튼,패널 위치,입구 애니메이션,오버레이, 닫기 아이콘을 처리합니다.
패널에 Elementor 템플릿을 표시할 수 있나요?
예. 템플릿 선택 드롭다운에는 Elementor 라이브러리에 저장된 모든 템플릿이 나열됩니다. 메뉴,FAQ 섹션,양식 및 전체 사용자 정의 레이아웃은 모두 설계된 대로 정확하게 패널 내부에 로드됩니다.
패널은 어느 방향에서 열 수 있습니까?
6 개의 위치를 사용할 수 있습니다: 오른쪽,왼쪽, 위쪽,아래쪽, 중간,상대적 측면 패널은 너비를 사용하고 위쪽 및 아래쪽 패널은 뷰포트 높이를 사용하며 상대적인 패널은 거리 제어로 트리거 버튼에 고정합니다.
Cover 와 Push 의 차이점은 무엇인가요?
오버레이가 배경을 흐리게 하는 동안 덮개는 페이지 위로 패널을 밀어냅니다. 푸시는 패널을 위한 공간을 만들기 위해 페이지 내용을 옆으로 이동합니다. 덮개는 더 안전한 기본값입니다; 푸시는 더 극적이지만 전체 레이아웃을 이동시킵니다.
오프 캔버스 패널이 자동으로 열릴 수 있습니까?
예. 콘텐츠 설정에서 기본값으로 열기를 켜고 페이지가 로드되면 패널이 열리기 시작합니다. 방문자는 오버레이를 클릭하거나 Esc 키를 사용하여 닫기 아이콘으로 닫고 트리거 버튼으로 다시 열 수 있습니다.
감싸는 #
캔버스 외부 콘텐츠 위젯은 저장된 템플릿을 슬라이드 아웃 패널로 바꿉니다: 템플릿을 선택하고, 트리거 버튼을 놓고, 가장자리와 애니메이션을 선택하고, 버튼에서 스크롤바까지 모든 것을 스타일링합니다. Nav 메뉴 모바일 탐색용 위젯 및 클릭-접촉 패널용 양식 위젯. 전체 세트 찾아보기 마스터 애드온 위젯 및 확장 상자에 무엇이 더 들어 있는지 보려면 다음을 참조하세요 캔버스 외부 콘텐츠 위젯 페이지 데모 및 Elementor Pro Off-Canvas 위젯과의 비교를 보려면 다음을 확인하세요 가격 페이지 프로 플랜의 경우.
