WordPress 사이트에 비디오 배경을 추가하는 방법

게시 됨: 2022-05-12

WordPress 비디오 배경을 추가하는 가장 쉬운 방법을 찾고 계십니까?

잘 만들어진 비디오 배경은 관심을 끌고 브랜드를 처음부터 멋지게 보이게 합니다. 그러나 제대로 수행되지 않으면 비디오 배경이 사이트 속도를 늦추고 공간을 차지하며 새로운 방문자를 혼란스럽게 합니다. 그렇기 때문에 모든 함정을 피하고 대신 WordPress 비디오 배경을 올바른 방법으로 추가하는 방법을 배울 수 있도록 이 가이드를 만들었습니다.

특별한 기술 지식 없이도 WordPress 웹 사이트에 비디오 배경을 추가하는 모범 사례와 단계에 대해 알아보려면 계속 읽으십시오.

WordPress 비디오 배경 추가를 위한 모범 사례

  • 파일 크기는 낮추고 해상도는 높게 유지: 큰 비디오와 이미지만큼 사이트 성능을 저하시키는 것은 없습니다. 그러나 압축하는 동안 해상도를 유지하는 것이 좋습니다.
  • 과도하게 사용하지 마십시오. 비디오가 너무 많으면 인터페이스가 복잡해집니다 . 요점을 제시하거나 관련성을 보여줄 때만 사용하십시오.
  • 추가 정보와 함께 클릭 유도문안 포함: 시청자가 더 많은 것을 원하게 하지 말고 추가 세부정보로 연결되는 링크를 잊어버리세요.
  • 어떤 대가를 치르더라도 오디오를 피하십시오. 모든 사람들이 귀하의 웹사이트를 보기만 하면 거슬립니다.
  • 오디오가 필요한 경우 자동 재생에 포함하지 않음: 사용자가 오디오를 재생할 수 있는 옵션을 제공합니다.
  • 오디오가 포함된 비디오의 자막을 고려 하세요. 위치나 청각 장애 때문에 모든 사람이 오디오를 들을 수 있는 것은 아닙니다.
  • 외부 호스트: 사이트 호스트는 비디오를 제공하도록 설계되지 않았을 수 있으므로 Vimeo 및 YouTube와 같은 사이트를 선택하여 성능을 유지하거나 전문 비디오 호스팅 사이트를 고려하십시오.
  • 최고의 형식/해상도를 고수하십시오. 우리는 MP4만을 말하고 있습니다. 최소 720p; h264 코덱.

모든 웹사이트에 비디오가 필요한 것은 아닙니다. 때로는 인터페이스가 어수선하고 느리고 초점이 맞지 않게 만듭니다. 예를 들어, 변호사는 웹사이트 속도를 저하시킬 수 있는 진부한 악수 동영상보다는 전문적인 사진을 사용해야 합니다.

WordPress 비디오 배경을 추가하는 방법

WordPress 내에서 비디오 배경 기능을 활성화하는 몇 가지 방법이 있습니다.

코드가 필요 없는 4가지 솔루션에 중점을 둘 것입니다.

  1. 내장형 커버 블록
  2. 배경/헤더 플러그인
  3. 좋아하는 페이지 빌더 플러그인
  4. 비디오 배경 또는 헤더를 지원하는 테마 사용

아래의 각 방법에 대한 단계를 따르십시오.

옵션 1: 내장형 커버 블록

기본 WordPress 편집기는 텍스트 및 버튼과 같은 다른 콘텐츠 뒤에 배경 이미지를 삽입하기 위해 Cover 블록이라는 기능을 제공합니다.

많은 WordPress 사용자가 인식하지 못하는 것은 Cover 블록이 비디오 배경도 지원한다는 것입니다.

1단계: Cover 블록 추가

시작하려면 배경을 추가하고 표지 블록을 추가하려는 페이지로 이동하십시오.

WordPress 비디오 배경을 삽입할 커버 블록 선택

2단계: 동영상 업로드

표지 의 경우 비디오를 추가하는 데 사용할 업로드 또는 미디어 라이브러리 버튼을 선택합니다.

표지 블록 업로드

Cover 블록은 비디오 지원에 대해 아무 말도 하지 않으므로 미디어 라이브러리 에서 비디오(예: MP4)를 선택해야 합니다. 비디오를 선택한 후 선택 버튼을 클릭합니다.

비디오 업로드 추가

3단계: 오버레이 전경 콘텐츠 삽입

이제 배경 비디오의 미리 보기가 표시되어야 합니다. 텍스트 또는 버튼과 같은 전면 블록을 표지 에 추가할 수 있습니다.

전경의 콘텐츠

4단계: 필요에 따라 표지 설정 편집

표지 설정에는 다음이 포함됩니다.

  • 색상 오버레이: 텍스트를 읽기 쉽게 만드는 데 이상적
  • 불투명도: 전경 콘텐츠를 표시하는 데도 유용합니다.
  • 최소 표지 높이: 때때로 WordPress 비디오 배경이 더 많은 공간을 덮도록 하기 위해 필요합니다.
오버레이의 불투명도

5단계: 작동 중인 WordPress 비디오 배경 보기

완료되면 페이지를 저장하고 프런트엔드로 이동하여 WordPress 비디오 배경을 확인하세요!

WordPress 비디오 배경을 추가하기 위한 플러그인이 상당히 많이 있으며, 그 중 일부는 전체 사이트 배경을 제공하고 다른 플러그인은 비디오 헤더를 제공합니다.

다음은 최고의 비디오 배경 플러그인입니다.

️ 우리가 가장 좋아하는 것은 고급 WordPress 배경 플러그인입니다. 몇 단계만 거치면 해당 플러그인으로 WordPress 비디오 배경을 추가하는 방법을 보여드리겠습니다.

1단계: AWB 설치 및 콘텐츠 블록 추가

시작하려면 고급 WordPress 배경(AWB)을 설치하십시오.

배경 동영상을 추가할 페이지로 이동합니다.

WordPress 편집기를 사용하여 클릭하여 콘텐츠 블록을 추가합니다. 배경(AWB) 블록을 검색하여 선택합니다.

AWB 플러그인 블록

2단계: 비디오 추가

이렇게 하면 요소에 색상, 이미지 또는 비디오 배경을 추가할 수 있는 옵션이 제공됩니다.

비디오 를 선택한 다음 YouTube 또는 Vimeo의 비디오 URL을 붙여넣습니다. 대안으로 플러그인에는 로컬 비디오를 업로드하기 위한 자체 호스팅 탭이 있습니다.

YouTube 또는 로컬 WordPress 비디오 배경에 비디오 링크 추가

3단계: 비디오 배경의 높이와 너비 확장

기본적으로 콘텐츠 블록은 페이지 영역의 많은 부분을 차지하도록 늘어나지 않습니다. 편집기에서 전체 높이 버튼을 클릭해야 합니다. 비디오 배경을 전체 너비로 확장하는 버튼도 있습니다.

텍스트, 버튼, 이미지 등의 콘텐츠를 배경 동영상 위로 드래그하거나 삽입할 수도 있습니다.

전체 높이

4단계: WordPress 비디오 배경 설정 수정

차단 탭에서 원하는 설정(시작 시간, 종료 시간, 반복, 항상 재생, 비디오 불투명도)을 조정합니다.

WordPress 비디오 배경에 대한 추가 설정

불투명도가 감소된 배경색 오버레이를 추가하는 것이 좋습니다. 이렇게 하면 오버레이된 텍스트를 더 쉽게 읽을 수 있습니다.

차단 탭으로 이동하여 배경색 아래에서 색상 을 흰색 또는 검정색으로 변경하면 됩니다. 배경이 계속 표시되도록 불투명도 슬라이더를 약간 아래로 이동합니다.

불투명도 조정

5단계: 결과 보기

그 결과 다른 콘텐츠 앞에서 재생되는 비디오, 이상적으로는 루프가 있고 소리가 없으며 여전히 전경 콘텐츠에 대부분의 초점을 유지하는 비디오가 생성됩니다.

옵션 3: 즐겨찾는 페이지 빌더 플러그인

Elementor, WPBakery 및 Divi와 같은 대부분의 페이지 빌더는 거의 모든 콘텐츠 모듈에 이미지 또는 비디오 배경을 추가하는 배경 기능을 제공합니다.

️ 원하는 페이지 빌더를 자유롭게 선택하지만 사용하기 쉽기 때문에 Elementor를 권장합니다.

시작하기 전에 Elementor 또는 사용하려는 빌더를 설치해야 합니다.

1단계: Elementor 편집기로 페이지 열기

WordPress의 페이지 로 이동하여 홈페이지 로 지정된 페이지를 선택합니다. Elementor로 편집 버튼을 클릭합니다.

요소로 편집

2단계: 섹션 콘텐츠 블록 추가

Elementor의 대부분의 콘텐츠 모듈은 배경 설정을 제공하지만 섹션을 삽입하는 것이 좋습니다. 이렇게 하면 텍스트, 이미지 및 버튼과 같은 여러 항목을 섹션에 추가할 수 있습니다. 그런 다음 전경의 모든 항목 뒤에 있도록 섹션에 비디오 배경을 추가합니다.

튜토리얼의 섹션에 일부 텍스트와 버튼을 추가했습니다. 섹션 편집 아이콘을 선택한 다음 스타일 탭을 선택합니다.

섹션 스타일

3단계: 비디오 배경 삽입

여기에 배경 드롭다운 영역이 표시됩니다. 배경 유형 옆에 있는 비디오 옵션을 선택합니다. 그런 다음 비디오 링크 필드에 YouTube, Vimeo 또는 로컬 파일의 URL을 붙여넣습니다.

WordPress 비디오 배경 추가

4단계: 비디오 배경 설정 편집

화면을 더 많이 차지하려면 비디오 배경을 확장해야 할 수도 있습니다. 그렇게 하려면 레이아웃 탭으로 전환하고 높이최소 높이 를 조정합니다.

WordPress 비디오 배경의 최소 높이

스타일 탭으로 돌아가서 배경 비디오에 대한 설정 변경을 고려하십시오.

  • 시작 시간
  • 종료 시간
  • 한 번 재생
  • 모바일에서 플레이
  • 프라이버시 모드
설정

또한 전경에 있는 텍스트, 버튼 및 이미지를 더 잘 보이게 하기 위해 배경 오버레이 (일반적으로 검정색 또는 흰색과 같은 중간 색상 및 약간의 불투명도 변경)를 추가하는 것을 고려하십시오.

WordPress 비디오 배경의 색상 오버레이 변경

5단계: 프런트엔드에서 WordPress 비디오 배경 보기

완료되면 섹션의 모든 콘텐츠 뒤에서 비디오가 재생됩니다!

옵션 4: 비디오 배경/헤더를 지원하는 WordPress 테마 사용

다양한 WordPress 테마는 내장 헤더, 슬라이더 및 전체 페이지 미디어 설정을 제공합니다. 이를 통해 이미지, GIF 또는 비디오를 업로드하여 전체 화면을 차지할 수 있으며, 가장 자주 홈페이지의 헤더로 사용됩니다.

비디오 배경 기능이 있는 테마를 찾으려면 인기 있는 마켓플레이스에서 "비디오 배경"을 검색하십시오.

️ 테마에 비디오 배경 기능이 있는지 확인하려면 다운로드/구매 전에 기능 목록을 스캔하거나 개발자에게 문의하십시오.

예를 들어 Colibri WP 테마는 비디오 배경을 제공합니다.

1단계: 테마 설치 및 활성화

비디오 배경을 활성화하려면 Colibri WP 테마를 설치한 다음 모양 > Colibri 설정 > 시작하기 로 이동합니다. 여기에서 Colibri Page Builder 기능을 활성화할 수 있습니다.

페이지 빌더 기능 추가

2단계: 데모 사이트 추가

데모 사이트 탭을 클릭하고 선택한 데모 템플릿을 가져 옵니다.

데모 사이트

3단계: 영웅 이미지 사용자 지정

모양 > 사용자 정의 로 이동하고 영웅 모듈 옆에 있는 설정 톱니바퀴 아이콘을 선택합니다.

영웅 이미지 설정

4단계: 비디오 배경 추가

스타일 탭을 선택하고 배경비디오 로 전환합니다.

스타일 및 비디오를 클릭하여 WordPress 비디오 배경 추가

마지막으로 YouTube 를 선택하여 외부 비디오 URL 에 붙여넣거나 자체 호스팅 을 선택하여 로컬 비디오를 업로드합니다.

결과적으로 사용자 정의 프로그램 미리 보기에서 움직이는 비디오 배경을 볼 수 있습니다.

완벽한 비디오 배경 시작하기

WordPress 비디오 배경을 추가하는 것이 항상 권장되는 것은 아니지만 브랜드를 반영하고 사이트 성능을 방해하지 않는 고품질 비디오 콘텐츠가 있는 경우 이를 고려해야 합니다.

이 게시물에서는 네 가지 방법을 배웠습니다. 그 중 적어도 하나는 귀하의 상황에 적합해야 합니다.

️ 사이트를 개선하는 다른 방법은 성공적인 홈페이지 디자인의 10가지 요소가 포함된 게시물을 확인하세요.

WordPress 비디오 배경에 대한 질문이 있으면 아래 의견에서 생각을 공유하십시오.

무료 가이드

속도를 높이는 5가지 필수 팁
귀하의 WordPress 사이트

로딩 시간을 50-80%까지 단축
간단한 팁을 따르면 됩니다.