WordPress의 페이지 스크롤에 고정 플로팅 비디오를 추가하는 방법

WordPress 사이트의 페이지 스크롤에 고정 플로팅 비디오를 추가하는 방법을 배우고 싶으십니까?

고정 비디오는 잠재고객을 웹사이트로 끌어들이는 강력한 방법입니다. 오늘날 사람들은 서면 콘텐츠보다 비디오 콘텐츠를 더 많이 소비합니다. 따라서 웹사이트 방문자가 사이트에 충분히 참여하지 않는다는 것을 알게 된 경우 동영상을 추가하면 해당 문제를 해결할 수 있습니다.

웹 사이트 비디오를 끈적이게 만드는 쉬운 방법을 찾고 있다면 올바른 기사를 찾은 것입니다. 이 블로그에서는 몇 단계와 몇 분 만에 Elementor 기반 WordPress 사이트에 고정 비디오를 추가하는 방법을 배우게 됩니다.

그러니 계속 읽으십시오…

스티키 비디오 란 무엇입니까?

고정 비디오는 웹 페이지에 고정된 비디오 로 사용자가 위 또는 아래로 스크롤하는 동안에도 웹 페이지 창의 같은 위치에 떠 있는 상태를 유지 합니다.

Elementor WordPress 웹 사이트에 스티커 비디오를 추가하는 이유는 무엇입니까?

웹사이트에 있는 스티키 비디오의 개념은 멋있게 들릴 뿐만 아니라 많은 이점이 있습니다. 다음은 WordPress 웹 사이트에 고정 비디오를 추가하여 활용할 수 있는 몇 가지 이점입니다.

• 사용자 참여 증가: 고정 비디오를 통해 사람들은 웹 페이지의 콘텐츠를 동시에 보고 읽을 수 있습니다. 결과적으로 사람들은 웹사이트에 더 많이 참여하는 경향이 있습니다.
• 동영상 완료율 높이기: 고정 동영상이 전체 페이지를 차단하지 않기 때문에 고객은 중간에 닫는 것보다 끝까지 시청할 가능성이 높습니다. 따라서 비디오를 고정하면 실제로 비디오 완료 시간이 늘어날 수 있습니다.
• 사용자의 관심을 끌기: 일반적으로 사람들은 사이트를 대충 둘러봅니다. 이 경우 텍스트 콘텐츠에만 의존하면 고객이 주목하고 싶은 중요한 내용을 놓칠 가능성이 있습니다. 비디오를 사용하여 특정 정보에 사용자의 주의를 더 효과적으로 집중시킬 수 있습니다.
• 더 나은 스토리텔링: 비디오는 일반 텍스트 콘텐츠보다 스토리를 전달할 수 있는 더 넓은 캔버스를 제공합니다. 동영상에서 텍스트, 애니메이션 및 음성을 동시에 사용할 수 있으므로 더 효과적으로 이야기를 전달할 수 있는 준비가 되어 있습니다.

WordPress 사이트에 고정 비디오를 추가해야 한다고 확신하십니까? 그렇다면 다음 섹션으로 이동하여 어떻게 할 수 있는지 알아보세요.

6단계로 Elementor 웹사이트에 고정 비디오를 추가하는 방법

이것은 비디오를 고정하고 WordPress 사이트에 떠 있게 만드는 가장 쉬운 프로세스입니다. 몇 분 안에 Elementor에 고정 비디오를 추가하는 모든 단계를 거칩니다.

1단계: Elementor 및 ElementsKit 설치

먼저 필요한 모든 플러그인을 설치하는 단계입니다. Elementor에서 고정 비디오를 추가하는 방법에 대한 이 자습서를 따르려면 다음이 필요합니다.

• 엘리멘터 와
• ElementsKit (무료 및 프로 버전 모두).

Elementor는 드래그 앤 드롭 페이지 빌더이고 ElementsKit은 Elementor용 애드온입니다. 따라서 먼저 Elementor를 설치한 다음 ElementsKit을 다운로드하고 플러그인을 Pro 버전으로 업그레이드해야 합니다.

ElementsKit pro 설치 및 라이선스 활성화 프로세스와 관련하여 도움이 필요한 경우 설명서를 확인할 수 있습니다.

2단계: ElementsKit의 고정 콘텐츠 모듈 활성화

비디오를 고정하기 위해 ElementsKit의 고정 콘텐츠 기능을 사용할 것입니다. 따라서 고정 콘텐츠 모듈을 활성화해야 합니다.

이제 ElementsKit ⇒ Modules ⇒ Sticky Content 로 이동하여 옵션 을 켜고 변경 사항 저장을 클릭하여 방금 변경한 사항을 업데이트하십시오.

3단계: Elementor Video 위젯 드래그 앤 드롭

스티커 비디오를 추가할 페이지로 이동하여 Elementor로 편집 옵션을 클릭합니다.

+ 아이콘 을 클릭하여 원하는 레이아웃을 선택하십시오. 그런 다음 비디오 위젯을 검색 하고 위젯을 추가하려는 위치에 끌어다 놓습니다 .

참고 : 이 자습서에서는 전체 프로세스를 표시하기 위해 편집 중인 미리 만들어진 페이지를 이미 가져왔습니다 . ElementsKit 사전 구축 섹션을 사용하여 WordPress 웹 사이트를 쉽게 만들 수 있습니다.

4단계: 비디오 소스 선택 및 URL 추가

Elementor 비디오 위젯을 사용하면 Youtube, Vimeo, DailyMotion 및 Self Hosted와 같은 소스의 비디오를 표시할 수 있습니다.

먼저 원하는 소스 유형을 선택한 다음 비디오 URL을 제공하십시오. 나는 이 글을 위해 유튜브를 사용할 것이다.

참고 : 자체 호스팅의 경우 서버에 동영상을 업로드하거나 외부 URL을 제공할 수 있습니다.

비디오 스타일을 사용자 정의할 수도 있습니다. 그렇게 하려면 스타일 탭으로 이동하십시오. 여기 에서 종횡비와 CSS 필터를 선택할 수 있습니다. 1:1, 3:2, 4:3, 16:9 등과 같은 6가지 비율 유형 중에서 선택할 수 있습니다. CSS 필터 편집 아이콘을 클릭하여 흐림, 밝기, 대비, 채도 및 색조를 사용자 정의합니다.

5단계: Elementor 비디오를 고정하기 위한 설정

고급 탭으로 이동합니다. 그런 다음 ElementsKit 고정 옵션을 확장합니다 . 여기에서 고정 유형을 상단, 하단, 열로 선택하고 위로 스크롤할 때 표시할 수 있습니다.

고정 유형을 없음 이외의 것으로 선택하면 다음 옵션이 제공됩니다.

• 고정 시간: 여기에서 동영상을 고정 상태로 유지하려는 섹션의 CSS ID를 설정해야 합니다. 열에 사용자 정의 CSS ID를 설정한 다음 고정 시간 옵션에 복사하여 붙여넣을 수 있습니다.

• 고정 오프셋: 이 옵션에서 오프셋 값을 설정합니다. 오프셋 값은 비디오와 페이지의 상단 위치 사이의 거리를 나타냅니다.

참고 : 고정 옵션 열은 상위 열이 화면에 표시될 때까지만 표시되므로 고정 옵션 열과 함께 옵션을 사용할 수 없을 때까지 고정입니다.

고정 배경색 을 변경하고 모든 장치, 데스크탑 전용 또는 데스크탑과 태블릿 모두에서 비디오를 고정할 수 있습니다.

6단계: Elementor에 고정 비디오를 추가하고 미리보기를 보려면 업데이트하세요.

비디오 유형을 선택하고 모든 고정 설정을 지정한 후 업데이트를 클릭하여 저장하고 미리보기 버튼을 클릭하여 최종 결과를 확인합니다.

참고: 클릭 시 비디오를 표시하기 위해 팝업되는 고정 비디오 버튼을 원하는 경우 Elementor 비디오 위젯 대신 ElementsKit 비디오 위젯을 사용할 수 있습니다. 위에서 설명한 것과 동일한 프로세스 에 따라 ElementsKit 비디오 위젯을 사용하여 Elementor에 고정 비디오를 추가할 수 있습니다.

다음은 ElementsKit 비디오 위젯을 사용하는 고정 비디오의 미리보기입니다 .

마지막 단어

축하합니다! 이제 Elementor 사이트에 고정 비디오를 추가하는 방법을 알았습니다. 처음에 하는 것보다 훨씬 쉽죠?

ElementsKit 고정 모듈의 모든 옵션과 설정을 시도하고 최대 결과를 위해 사이트에서 사용하십시오. ElementsKit 고정 모듈에 깊은 인상을 받았고 페이지 스크롤에 고정 부동 비디오를 추가하는 방법을 쉽게 추가할 수 있습니다.

그런 다음 ElementsKit이 제공하는 건전한 위젯 및 모듈 모음이 당신을 더욱 놀라게 할 것입니다. 따라서 ElementsKit이 제공하는 모든 기능을 확인하십시오.