요소에서 캔버스 내용을 만드는 방법 : 가이드

혼란스럽지 않은 작은 웹 공간에서 많은 콘텐츠를 제시하는 것은 웹 디자이너에게는 어려운 과제입니다. 오프 캔버스 콘텐츠는 이러한 맥락에서 도움이되는 트렌디하고 새롭고 스마트 한 솔루션입니다.

Elementor Page Builder Plugin을 사용하면 웹 사이트에서 오프 캔버스 메뉴, 홍보 배너, 사이드 바 등을 쉽게 만들 수 있습니다. 이는 콘텐츠 프리젠 테이션에 도움이 될뿐만 아니라 내비게이션을 단순화하고, 가독성을 향상시키고, 사용자를 변환 할 수 있습니다.

귀하의 사이트가 Elementor와 함께 구축 된 경우 사이트의 캔버스 컨텐츠를 생성하는 데 몇 분 밖에 걸리지 않습니다. 이 블로그 게시물에서는 단계별 가이드와 함께 Elementor의 Canvas 컨텐츠를 추가하는 방법에 대해 안내합니다. 시작합시다!

캔버스 콘텐츠는 무엇입니까?

Off Canvas Content는 사용자 상호 작용에 의해 트리거 될 때까지 콘텐츠를 화면에서 숨겨진 컨텐츠를 유지하는 요소 위젯입니다. 일반적 으로이 위젯은 화면의 버튼으로 연결됩니다. 사용자가 버튼을 클릭 할 때마다 Off-Canvas 컨텐츠가 즉시 미끄러 져 추가 정보가 표시됩니다.

위에서 언급했듯이 오프 카바스 콘텐츠 위젯은 메뉴, 프로모션 배너, 사이드 바, 로그인 및 가입 패널, 쇼핑 카트, 콘텐츠 필터 및 빠른보기 옵션과 같은 콘텐츠를 다룹니다. 필요할 때 쉽게 액세스 할 수있는 깨끗하고 체계적인 레이아웃을 유지하는 데 도움이됩니다.

요소에서 캔버스 콘텐츠를 만드는 방법

이제이 섹션에서는 단계별 가이드를 사용하여 Elementor에서 캔버스 콘텐츠를 만드는 방법에 대해 논의합니다. 그러나 자습서에 뛰어 들기 전에 사이트에 다음 플러그인이 설치되어 활성화되어 있는지 확인하십시오.

• 요소
• Happyaddons
• Happyaddons Pro

그들이 당신의 사이트에 준비되면 아래 설명 된 자습서를 시작하십시오.

단계 01 : Off Canvas 컨텐츠 위젯 추가 요소 캔버스에 추가

Elementor Canvas와 함께 게시물이나 페이지를 엽니 다. 요소 패널의 검색 상자에 이름을 입력하여 위젯을 찾으십시오. 위젯이 보이면 캔버스로 드래그하고 떨어 뜨립니다.

캔버스에 추가 된 버튼이나 아이콘이 표시됩니다. 클릭하면 Off Canvas 섹션을 열 수 있습니다. 아래에 첨부 된 비디오 클립을 살펴볼 수 있습니다.

단계 02 : 웹 페이지에 캔버스 위젯을 추가합니다.

위의 위젯을 빈 캔버스에 배치했습니다. 그러나 웹 페이지의 특정 부분에 추가 할 수 있습니다. 그것을 설명하기 위해, 우리는 장식 된 웹 페이지를 열었습니다. 그런 다음 위젯을 영웅 섹션 위에 놓았습니다

위젯이 웹 페이지의 헤더 섹션에 추가 된 것을 볼 수 있습니다.

요소와 함께 WordPress에서 로컬 SEO를 개선하는 방법을 확인하십시오.

03 단계 : OFF Canvas 위젯의 사용자 정의 콘텐츠 유형을 선택합니다.

컨텐츠> OffCanvas 컨텐츠 로 이동하십시오. 컨텐츠 유형 옵션 옆의 드롭 다운 목록을 클릭하십시오 .

표시 할 컨텐츠 유형을 기반으로 위젯의 드롭 다운 목록에서 적절한 콘텐츠 유형을 선택해야합니다.

이 튜토리얼의 경우 사용자 정의 콘텐츠 유형을 선택했습니다.

WordPress에서 지식 기반을 설계하는 방법에 대한이 안내서를 살펴보십시오.

단계 4 : 위젯에 정보를 추가하십시오

이 상자를 사용하여 원하는 컨텐츠를 위젯에 추가하십시오. 상자를 클릭하면 확장하고 정보를 추가 할 수 있도록 공간을 만듭니다.

당신은 우리가 컨텐츠를 확장하여 상자에 추가했음을 알 수 있습니다. 각 옵션을 클릭하여 텍스트 및 미디어 파일을 추가 할 수 있습니다.

Elementor에서 멋진 인포 그래픽 웹 페이지를 만드는 방법을 알아보십시오.

단계 5 : 토글 소스를 선택하십시오

토글 섹션에서 토글 소스 유형, 위치, 애니메이션 및 레이블을 변경할 수 있습니다.

토글 소스 옵션 옆에 드롭 다운 목록을 엽니 다 . 원하는 토글 유형을 선택하십시오. 이 튜토리얼의 토글 유형으로 버튼을 선택했습니다.

다음으로 버튼 텍스트 옵션에서 버튼 사본을 변경하십시오. 버튼 아이콘을 추가 할 수도 있습니다. 캔버스 버튼의 모든 변경 사항을 확인하십시오.

단계 06 : 닫기 막대 아이콘을 사용자 정의합니다

오프 캔버스 섹션에는 오른쪽 상단에 크로스 아이콘 (x)이 함께 제공됩니다. 이를 사용자 정의하려면 요소 패널의 닫기 막대 섹션을 확장하십시오.

여기에서 각각의 각 옵션을 사용하면 아이콘을 비활성화하고 정렬 변경, 아이콘 유형, 아이콘 제목을 변경하는 등을 변경할 수 있습니다. 직접 할 수 있기를 바랍니다.

다음은 WordPress에서 이벤트 캘린더를 만드는 방법에 대한 자습서입니다.

단계 7 : 위젯의 설정을 변경합니다

설정 섹션을 확장하십시오. 방향 옵션 에서 Off Canvas 위젯의 위치를 ​​변경할 수 있습니다. 왼쪽, 오른쪽, 상단 또는 하단에 위치 할 수 있습니다.

다음으로 컨텐츠 전환 효과를 선택할 수 있습니다. 웹 페이지에 애니메이션 효과를 추가하고 버튼을 클릭하면 표시됩니다.

예를 들어, 우리는 내용 전환 유형으로 공개를 선택했습니다. 이제 아래에 첨부 된 비디오 클립을 참조하십시오. 버튼을 클릭하면 페이지가 Off Canvas 섹션과 함께 이동합니다.

같은 방식으로 다른 옵션을 구성하십시오.

단계 08 : Off Canvas 위젯의 양식화

스타일 탭 으로 와서 OffCanvas 컨텐츠를 확장하십시오.

여기에서 오프 캔버스 크기를 변경하고, 테두리 유형을 추가하고, 테두리 너비를 높이고, 테두리 색상을 변경하고, 테두리 반경을 설정할 수 있습니다. 우리가 한 것처럼 직접 할 수 있기를 바랍니다.

컨텐츠 섹션을 확장하십시오. Off Canvas 위젯이있는 컨텐츠의 컨텐츠 정렬, 배경색, 테두리 유형, 테두리 너비, 테두리 색상 및 테두리 반경을 사용자 정의 할 수있는 옵션이 제공됩니다.

같은 방식으로 타이포그래피, 글꼴 크기 및 텍스트 색상을 변경할 수 있습니다.

다음은 WordPress에 360 회전 제품 사진을 표시하는 방법에 대한 간단한 가이드입니다.

단계 9 : 토글 버튼을 양식화하십시오

같은 방식으로 토글 섹션을 확장하십시오. 이렇게하면 버튼 정렬, 타이포그래피, 텍스트 색상, 테두리 반경, 버튼 배경 등을 사용자 정의 할 수 있습니다.

10 단계 : 닫기 막대 아이콘을 사용자 정의합니다

닫기 막대 섹션을 확장하면 닫는 아이콘의 색상, 크기 및 더 많은 것들을 사용자 정의 할 수 있습니다.

11 단계 : Off Canvas 위젯 모바일 반응을 만듭니다

각 웹 요소는 모바일 장치에 최적화되어야하므로 모든 장치 유형에 잘 표시됩니다. 그렇지 않으면 대부분의 웹 사이트의 모든 트래픽의 약 50%가 모바일 사용자가 제공하기 때문에 막대한 트래픽 잠재력을 놓칠 수 있습니다.

모바일 최적화를 보려면 요소 패널 하단의 응답 모드 아이콘을 클릭하십시오. 상단 바는 다른 화면 크기 사이를 전환 할 수있는 옵션과 함께 나타납니다.

이제 다른 화면 크기 사이를 전환하고 각 장치에 대해 설계가 괜찮은지 확인하십시오. 문제가있는 경우 필요에 따라 글꼴 크기, 버튼 크기, 캔버스 폭, 높이 및 기타 옵션을 변경할 수 있습니다.

변경 사항은 다른 화면 크기에만 영향을 미치지 않고 해당 화면 크기에 대해서만 저장됩니다. 따라서 Off Canvas 위젯 모바일 응답을 만들 수 있습니다.

12 단계 : OFF Canvas 컨텐츠 위젯 미리보기

이제 웹 페이지의 미리보기 옵션으로 이동하여 위젯이 잘 작동하는지 확인하십시오. 알 수 있습니다. 우리 끝에 잘 작동합니다.

Off Canvas 컨텐츠 위젯을 사용할 때 고려해야 할 사항

위젯을 최대한 활용하려면 Off Canvas 컨텐츠 위젯을 사용할 때 신중하게 고려해야 할 몇 가지 사항이 있습니다. 아래를 살펴보십시오.

• 원활한 사용자 경험

캔버스 외 컨텐츠는 경험을 방해하는 대신 사이트를 탐색 할 수있는 사용자를 지원해야합니다. 위젯이 잘 조정 된 애니메이션으로 원활하게 작동하는지 확인하십시오. 그러나 특히 휴대 전화에서 성능을 저하시킬 수있는 무거운 모션 효과를 최소화하십시오.

• 휴대폰에 최적화하십시오

위에서 이미 말했듯이, 오늘날 상당수의 웹 방문자는 일반적으로 모바일 장치 사용자가 제공되므로 모든 장치 유형에 대해 웹 사이트를 잘 최적화해야합니다. 그렇지 않으면 모바일 중심 사용자는 심각한 부정적인 경험을 할 수 있습니다.

• 쉬운 폐쇄

OFF CANVAS 컨텐츠 위젯에는 간단한 마감 옵션이 포함되어야합니다. 찾기가 어려운 경우 사용자는 반드시 좌절감을 느낄 것입니다. 따라서 탐색하기 쉬운 방식으로 마감 아이콘을 높이는 것을 잊지 마십시오.

• 내용 관련성

외부 캔버스 컨텐츠는 내비게이션 도구 또는 프로모션 배너와 같은 특정 기능을 수행하기 위해 간단하고 집중해야합니다. 과도한 정보 또는 관련이없는 요소를 포함하면 집중적이고 원활한 사용자 경험을 제공하는 목적을 약화시킵니다.

마지막 단어!

Off Canvas Content 위젯은 잘 활용하는 방법을 알면 사용자를 참여시키고 전환을 향상시키는 강력한 방법이 될 수 있습니다. 우리는 위젯의 기본 자습서를 다루려고 노력했습니다. 위젯의 모든 기능과 사용 방법에 대해 논의하는 것은 정말 어렵 기 때문입니다.

따라서이 튜토리얼을 넘어서 위젯으로 할 수있는 다른 일에 대한 더 많은 아이디어를 원한다면 Elementor Off Canvas Content Demo 페이지를 방문 할 수 있습니다. 사이트에서 직접 복사하여 붙여 넣을 수있는 좋은 캔버스 디자인 모음을 얻을 수 있습니다.

더 이상 답이없는 쿼리가 있으면 아래의 의견 상자를 통해 알려주십시오. 도움이되는 답변으로 곧 다시 연락 드리겠습니다.