비디오 배경은 귀하의 웹사이트에 전문성을 더할 수 있습니다. 비디오 배경은 기업 웹사이트, 포트폴리오, 온라인 갤러리에서 흔히 볼 수 있습니다.

웹사이트를 위한 새로운 디자인을 찾고 있다면 의심할 여지 없이 비디오 배경이 사용되는 것을 본 적이 있을 것입니다. WordPress 테마 개발자는 항상 자신의 디자인을 뽐낼 수 있는 방법을 찾고 있으며, 자신의 디자인이 무엇을 할 수 있는지 보여주기 위해 비디오 배경을 자주 사용합니다.

다행히 웹사이트에 비디오 배경을 추가하기 위해 새로운 WordPress 테마에 돈을 쓸 필요가 없습니다. Beaver Builder를 활성화하면 몇 분 안에 웹사이트의 모든 페이지에 전문적인 비디오 배경을 적용할 수 있습니다. 원하는 경우 페이지 일부에만 비디오 배경을 표시할 수 있습니다.

이 튜토리얼에서는 Beaver Builder 비주얼 페이지 빌더 WordPress 플러그인을 사용하여 간단한 3단계로 비디오 배경을 추가하는 방법을 보여 드리고자 합니다.

1단계: 적합한 배경 비디오 찾기

Beaver Builder를 사용하여 비디오 배경 비디오를 추가하는 것은 매우 간단합니다.

선택할 수 있는 비디오가 수천 개 있으므로 이 튜토리얼에서 가장 어려운 부분은 웹사이트에 사용할 비디오를 선택하는 것입니다.

전달하려는 분위기를 설정하는 데 도움이 되는 동영상을 선택하세요. 예를 들어, 바쁜 사무실에서 밖에서 일하는 사람들을 담은 비디오는 기업 웹사이트에 잘 어울리는 반면, 차분한 자연 비디오는 건강 웹사이트에 잘 어울립니다.

배경에 대한 무료 및 프리미엄 비디오를 찾을 수 있는 온라인 장소가 많이 있습니다.

제가 가장 좋아하는 비디오 찾기 장소는 Coverr입니다. 모든 비디오는 전문적으로 보이며 무료로 다운로드하여 사용할 수 있습니다. 여러 카테고리에 걸쳐 매주 7개의 새로운 동영상이 추가되므로 마음에 드는 동영상을 찾으실 수 있을 것입니다. zip 파일을 다운로드하기 전에 각 비디오를 미리 볼 수 있습니다.

Coverr에는 다양한 비디오 배경이 있으며 모두 무료로 다운로드할 수 있습니다.

무료 비디오 배경을 확인할 수 있는 다른 좋은 웹사이트는 다음과 같습니다(특정 순서 없음).

• 마즈와이
• 비디오지
• 동영상 재생
• 클립캔버스
• 엑스톡비디오
• Pexels 동영상
• IgniteMotion
• 타누리 ​​실험
• 해변가 B-롤
• 무료 스톡 영상
• 무료 HD 영상
• 증류하다
• 팬시 푸티지 클럽
• 스플래시베이스
• 무료 비디오 영상

비디오 서비스에서도 비디오를 찾을 수 있습니다. YouTube에서는 비디오 배경을 제공하는 OrangeHD와 같은 채널을 보게 될 것입니다. FreeHD 및 Life of Vids와 같은 리소스를 통해 Vimeo에서도 훌륭한 비디오를 찾을 수 있습니다.

일부 소셜 서비스에서도 영상을 찾을 수 있습니다. Reddit의 Footage 및 Stockfootage와 같은 하위 레딧을 확인하세요. Flickr도 살펴볼 가치가 있지만 라이선스로 Creative Commons를 선택해야 합니다.

VideoHive에서는 수만 개의 비디오 배경을 찾을 수 있습니다.

프리미엄 비디오 배경은 비용을 들이지 않습니다. VideoHive의 가격은 동영상당 8달러부터 시작됩니다. VideHive에는 25만 개가 넘는 스톡 영상 파일이 있으며 그 중 3만 6천 개가 넘는 파일이 비디오 배경에 적합합니다.

Shutterstock 및 VideoBlocks와 같은 스톡 이미지 및 스톡 비디오 서비스는 월 단위로 구독하지 않는 한 약간 더 비싼 경향이 있지만, 예산을 조금 더 늘릴 수 있다면 그곳에서 훌륭한 비디오를 많이 찾을 수 있습니다.

2단계: 비디오 파일 준비

비디오 배경을 선택한 후에는 파일을 준비해야 합니다.

기본 비디오 파일은 MP4 형식으로 저장되어야 합니다. 이것은 대부분의 비디오 웹사이트에서 사용하는 파일 형식이므로 문제가 되지 않습니다. 즉, 다운로드한 파일은 이미 .mp4 확장자로 저장되어 있을 것입니다.

Opera 및 Firefox 브라우저에서는 WebM 비디오 형식을 사용하므로 비디오를 WebM 비디오 형식으로 업로드해야 합니다.

WebM은 Google에서 개발한 로열티 없는 비디오 형식입니다(처음에는 On2 Technologies에서 개발함). HTML5 비디오 태그 <video> 대신 Opera 및 Firefox에서 사용됩니다.

공식 WebM 프로젝트 웹사이트의 도구 페이지에서 비디오 파일을 WebM 비디오 형식으로 변환하는 데 도움이 되는 다양한 플러그인과 무료 및 상업용 도구를 찾을 수 있습니다.

작은 비디오 파일을 변환하는 데 시간이 오래 걸리지 않습니다.

Online-Convert에서 사용할 수 있는 훌륭한 온라인 WebM 변환 도구도 있습니다.

파일을 도구에 직접 업로드하거나 이미 웹사이트에 비디오를 업로드한 경우 비디오 파일의 URL에 연결할 수 있습니다. 해상도, 비트 전송률, 프레임 속도 등의 비디오 설정은 도구를 사용하여 조정할 수 있습니다. 비디오를 회전하고 뒤집을 수도 있습니다.

Online-Convert의 파일 변환 도구는 훌륭한 리소스입니다.

마지막으로 해야 할 일은 "대체 사진"을 준비하는 것입니다. 어떤 이유로든 비디오 배경을 표시할 수 없는 경우 이 배경 사진이 표시됩니다. 예를 들어 방문자가 올바른 비디오 코덱이 없는 오래된 브라우저를 사용하는 경우입니다.

대체 사진을 비디오 배경과 일치시키려면 컴퓨터에서 비디오를 열고 키보드의 "Print Screen" 키를 사용하여 스크린샷을 찍으세요. 그런 다음 이미지를 사진 편집기에 붙여넣고 파일을 저장합니다. 또는 비디오 배경과 모양과 느낌이 비슷한 독특한 사진을 사용하세요.

마지막 섹션에서 제가 가장 좋아하는 비디오 배경 리소스는 Coverr라고 언급했습니다.

제가 Coverr를 좋아하는 이유 중 하나는 다운로드한 zip 파일이 필요한 모든 것을 제공하기 때문입니다.

각 zip에는 MP4, OGV 및 WebM 비디오 형식의 비디오가 포함되어 있습니다. 풀 HD 해상도(1920×1080)로 비디오의 전체 사진 스냅샷도 제공됩니다.

따라서 Coverr에서 비디오 배경을 다운로드할 때 비디오 파일을 준비하기 위해 비디오 변환 도구나 사진 편집기를 사용할 필요가 없습니다.

3단계: Beaver Builder를 사용하여 페이지에 비디오 할당

이제 두 개의 비디오 파일과 하나의 대체 사진이 있으므로 Beaver Builder를 사용하여 파일을 페이지에 할당할 수 있습니다.

웹 사이트 페이지(블로그 게시물, 페이지 또는 기타 게시물 유형)에 대해 Beaver Builder를 시작할 수 있는 방법에는 두 가지가 있습니다.

첫 번째 옵션은 문제의 페이지에 대한 편집기에 액세스하는 것입니다. WordPress 편집기에 접속한 후 “Page Builder” 탭을 클릭하면 해당 페이지에 대한 Beaver Builder가 실행됩니다.

WordPress 페이지 편집기의 예.

또는 웹사이트 프런트엔드에서 Beaver Builder를 시작할 수도 있습니다.

이를 위해서는 관리 표시줄이 각 페이지 상단에 표시되도록 웹사이트에 로그인해야 합니다. 그런 다음 비디오 배경을 추가하려는 페이지를 찾아 페이지 상단에 있는 "페이지 빌더" 링크를 클릭하세요.

웹사이트를 탐색할 때 Beaver Builder를 로드할 수 있습니다.

위의 두 예는 모두 웹 사이트의 기존 게시물이나 페이지를 수정한다고 가정합니다. 처음부터 페이지를 생성하려면 웹사이트에 새 페이지를 생성한 다음 Beaver Builder 템플릿 상자에서 빈 템플릿을 로드하세요. 이를 통해 빈 캔버스로 페이지 만들기를 시작할 수 있습니다.

레이아웃 템플릿 선택 상자를 로드하려면 Beaver Builder 도구 모음에서 "템플릿" 링크를 클릭하세요.

아래 예에서는 기존 콘텐츠 페이지에 배경 비디오를 추가하고 있습니다.

이제 Beaver Builder가 활성화된 상태에서 비디오 배경을 추가하려는 영역 위로 마우스를 가져가면 행 상단에 아이콘 목록이 표시됩니다.

행 설정을 로드하려면 스패너 아이콘을 클릭하세요.

행 설정 아이콘을 선택합니다.

행 설정 상자가 로드되면 기본적으로 스타일 탭이 설정됩니다.

배경 섹션까지 아래로 스크롤합니다. 드롭다운 상자에는 없음, 색상, 사진, 비디오, 슬라이드쇼, 시차 등 6가지 옵션이 표시됩니다.

비디오를 선택합니다.

행 설정 상자를 통해 배경으로 비디오를 선택하십시오.

이렇게 하면 비디오를 MP4 및 WebM 형식으로 업로드하고 대체 사진을 업로드하는 옵션이 나타납니다.

세 가지 다른 필드가 표시됩니다.

“비디오 선택” 또는 “사진 선택”을 클릭하면 WordPress 미디어 라이브러리가 로드됩니다. 각 파일을 업로드하거나 파일이 이미 업로드된 경우 미디어 라이브러리에서 선택할 수 있습니다.

동영상 파일과 대체 사진을 모두 업로드하세요.

모든 파일을 업로드한 후에는 행 설정 상자가 다음과 같아야 합니다.

이제 모든 파일이 업로드되었습니다.

이 시점에서 행 설정 상자를 저장할 수 있습니다. 원하는 경우 행 설정 상자를 템플릿으로 저장하여 웹사이트 전체에 걸쳐 적용할 수도 있습니다.

아래에서 볼 수 있듯이 이제 동영상이 내 텍스트 배경에 표시됩니다.

비디오 배경을 설정한 후 내 페이지가 어떻게 보이는지.

배경 비디오가 콘텐츠 영역의 전체 너비에 걸쳐 있지 않은 경우(예: 사용 중인 테마로 인해) 설정 상자에서 콘텐츠 너비를 전체 너비로 변경하세요. 이 영역에서 페이지 너비와 행 높이를 조정할 수도 있습니다.

레이아웃을 더 변경해야 하는 경우 행의 패딩과 여백을 변경할 수 있는 고급 탭을 확인하세요. 모바일 장치에서 레이아웃이 표시되는 방식을 정의하고 이 영역에서 CSS 선택기를 적용할 수도 있습니다.

필요한 경우 페이지 너비를 전체 너비로 조정하세요.

이전에 보여드린 비디오 배경의 예에서 페이지의 텍스트가 비디오 배경에 비해 눈에 띄지 않는다는 것을 눈치채셨을 것입니다.

행에 사용되는 색상을 조정하여 이 문제를 해결할 수 있습니다. 텍스트 색상, 링크 색상, 링크 호버 색상, 제목 색상을 모두 변경할 수 있습니다.

콘텐츠가 돋보이도록 색상을 조정하세요.

배경 오버레이는 비디오를 돋보이게 하거나 배경 속으로 희미하게 만드는 데 도움이 됩니다. 이는 비디오를 원하는 방식으로 정확하게 표시하는 데 도움이 되므로 매우 유용합니다.

배경 오버레이는 비디오의 모양을 수정하는 효과적인 방법입니다.

원하는 모양을 얻을 때까지 오버레이 색상과 불투명도를 다양하게 사용해 보시기 바랍니다. 아래 스크린샷에서는 불투명도가 50%인 빨간색 오버레이 색상을 적용했을 때 비디오 배경이 어떻게 보이는지 확인할 수 있습니다.

Beaver Builder의 불투명도 기능을 꼭 활용하세요.

행에 테두리를 적용할 수도 있습니다. 실선, 파선, 점선 또는 이중 테두리를 선택할 수 있습니다. 테두리의 색상, 불투명도 및 너비도 정의할 수 있습니다.

콘텐츠 영역 주위에 테두리를 배치할 수 있습니다.

Beaver Builder는 모든 최신 브라우저에서 작동하는 반응형 솔루션이지만, 페이지가 원하는 대로 정확하게 표시되는지 확인하려면 다양한 브라우저에서 페이지를 확인하는 것이 좋습니다.

비디오 배경은 페이지를 생생하게 만드는 데 도움이 될 수 있습니다.

Beaver Builder를 사용하여 비디오 배경을 추가하는 방법을 이해하면 몇 분 안에 페이지에 비디오 배경을 적용할 수 있습니다. 웹사이트에서 다양한 비디오를 테스트하고 무엇이 효과가 있고 무엇이 효과가 없는지 확인할 수 있도록 처음에는 12개 정도의 비디오를 다운로드하는 것이 좋습니다.

최종 생각

귀하의 웹사이트에서 비디오 배경을 어떻게 사용할 수 있는지에 대해 겉모습만 살펴봤습니다.

Beaver Builder를 사용하면 페이지에 고유한 레이아웃을 만들고 수십 개의 콘텐츠 모듈과 WordPress 위젯으로 채울 수 있습니다. 위의 예에서는 비디오를 일부 텍스트 뒤의 배경으로 적용하는 방법을 보여 주었지만 비디오 배경은 무엇이든 적용할 수 있습니다.

예를 들어 콘텐츠 슬라이더, 갤러리, 가격표, 게시물 캐러셀의 배경으로 또는 랜딩 페이지의 일부로 비디오를 표시할 수 있습니다. 당신이 할 수 있는 일에는 실제로 제한이 없습니다.

이 튜토리얼이 도움이 되기를 바랍니다. 그렇다면 Facebook, Slack, Twitter에서 우리를 팔로우하시기 바랍니다.

환상적인 콘텐츠와 튜토리얼이 예정되어 있으니 앞으로 몇 달 동안 Beaver Builder 블로그를 꼭 확인하세요.

행운을 빌어요.
케빈

케빈 멀둔 소개

Kevin Muldoon은 여행을 좋아하는 전문 블로거입니다. 그는 개인 블로그와 인터넷 마케팅 토론 포럼인 Rise Forums에 인터넷 마케팅에 대한 글을 정기적으로 씁니다.