Divi Parallax 및 비디오 배경에 색상 및 그라디언트 오버레이를 추가하는 방법

색상 및 그라디언트 오버레이는 청중의 관심을 끌고 콘텐츠를 돋보이게 할 수 있는 훌륭한 디자인 요소입니다. 배경 이미지와 잘 어울립니다. 섹션, 행 또는 열에 배경 이미지를 추가하고 색상 또는 그라디언트 오버레이를 추가한 다음 그 위에 콘텐츠를 배치합니다. 그러나 한 가지 문제는 색상 및 그라디언트 오버레이가 기본적으로 Divi의 시차 및 비디오 배경에서 작동하지 않는다는 것입니다.

이 튜토리얼에서는 시차 이미지 또는 당사 마켓플레이스의 타사 플러그인을 사용하는 비디오가 있는 배경에 색상 및 그라디언트 오버레이를 추가하는 방법을 보여줍니다. 섹션 구분선과 함께 작동하는 오버레이도 볼 수 있습니다. 일반적으로 코드가 필요하지만 올바른 도구를 사용하면 누구나 구현하는 것이 어렵지 않습니다.

시작하겠습니다.

엿보기

이 튜토리얼에서 빌드할 내용을 살펴보겠습니다.

한 섹션에는 시차 배경이 있고 다른 섹션에는 비디오 배경이 있는 레이아웃을 만들고 있습니다. 시차 배경에는 그라디언트가 있고 비디오 배경에는 단일 색상 오버레이가 있습니다. 섹션 구분선의 스타일도 지정합니다. 저는 Pizzeria Layout Pack의 랜딩 페이지를 사용하고 있습니다. 왜냐하면, 피자 때문입니다. 데스크탑에서는 이렇게 보입니다.

같은 디자인이 전화기에서 보이는 방식입니다.

표준 Divi 시차 및 비디오 배경

표준 Divi 도구를 사용하면 섹션, 행 및 열에 배경 이미지와 비디오를 추가할 수 있지만 오버레이가 제한됩니다. 배경 이미지의 경우 그래디언트 오버레이를 추가할 수 있지만 단색 오버레이는 추가할 수 없습니다. 비디오 옵션에는 오버레이가 포함되지 않습니다.

배경 이미지에 대한 옵션에는 시차가 포함되지만 배경 이미지에 대해 시차를 활성화하면 오버레이가 더 이상 이미지 위에 표시되지 않습니다. 오버레이를 표시하도록 선택했는데도 꺼져 있습니다.

Divi Parallax 및 비디오 배경에 색상 및 그라디언트 오버레이를 추가하는 방법

Divi Background Plus라는 타사 플러그인을 사용하여 시차 및 비디오 배경에 색상 및 그라디언트 오버레이를 추가합니다. 이 플러그인을 사용하여 섹션 구분선의 스타일을 지정하는 방법도 살펴보겠습니다.

Divi 배경 플러스 설치

Divi Background Plus는 Divi 마켓플레이스에서 사용할 수 있습니다. 시작하는 방법을 살펴보겠습니다. 먼저 Divi Background Plus를 구입하여 컴퓨터에 다운로드합니다.

WordPress 대시보드에서 플러그인으로 이동하여 새로 추가를 선택 합니다 . 화면 상단의 플러그인 업로드를 클릭합니다.

파일 선택 을 선택 하고 컴퓨터에서 압축된 파일로 이동하여 파일을 선택하고 지금 설치 를 클릭 합니다 .

파일이 업로드되면 플러그인 활성화 를 클릭 합니다 . 다른 설정은 필요하지 않습니다. 이제 플러그인을 사용할 준비가 되었습니다.

Divi Background Plus라는 새 모듈이 Divi Builder에 추가되었습니다. 이 모듈을 사용하여 시차 광고 비디오 배경에 대한 그라디언트 및 색상 오버레이를 만듭니다. 이 플러그인과 섹션의 배경은 이 튜토리얼에 필요한 전부입니다.

Divi Parallax 배경에 그라디언트 오버레이 추가

배경 이미지를 업로드할 섹션 설정을 엽니다. 이 예에서는 Pizzeria 레이아웃 팩의 첫 번째 섹션과 함께 배경 이미지를 사용하고 있지만 원하는 섹션, 행 또는 열에 업로드할 수 있습니다.

콘텐츠 설정에서 이미지 탭을 엽니다. 시차 효과 사용을 활성화합니다. 기본 설정인 True Parallax를 사용하고 있습니다. CSS 시차도 작동합니다.

시차 효과를 활성화하면 그라디언트가 비활성화되지만 그라디언트 설정은 그대로 유지됩니다. 섹션 설정에서 그라디언트를 사용하는 대신 Divi Background Plus 모듈의 설정에서 그라디언트를 추가합니다.

이 섹션에 이미 사용된 것과 동일한 그라디언트를 사용하려면(예: I am) 그라디언트 탭을 선택하고 그라디언트의 아무 곳이나 마우스 오른쪽 버튼으로 클릭합니다. 배경 그라디언트 색상 복사 를 클릭합니다.

배경 이미지가 있는 섹션에 새 모듈을 추가하려면 선택하고 Divi Background Plus를 선택합니다.

콘텐츠 탭의 레이아웃 설정에서 섹션, 행 또는 열에 설정을 적용하도록 선택합니다. 섹션을 선택하고 있습니다.

배경 설정을 열고 그라디언트 탭을 선택합니다. 기본 그라데이션이 자동으로 적용됩니다. 배경이 보이도록 불투명도를 조정하거나, 자신만의 그라디언트를 만들거나, 레이아웃의 그라디언트를 사용할 수 있습니다.

레이아웃의 것을 사용하려면 마우스 오른쪽 버튼을 클릭하고 배경 그라디언트 색상 붙여넣기 를 선택합니다. 이렇게 하면 색상뿐만 아니라 그라디언트 유형, 방향, 시작 위치, 끝 위치 및 배경 이미지 위에 그라디언트 배치에 대한 설정도 적용됩니다.

여기 결과가 있습니다. 이제 동일한 이미지와 오버레이가 포함된 원본 버전이 있지만 이제 배경이 진정한 시차로 표시됩니다.

다음은 휴대폰에서 동일한 레이아웃이 어떻게 보이는지 보여줍니다.

Divi 비디오 배경에 색상 오버레이 추가

첫 번째 섹션 아래에 새 일반 섹션을 추가합니다. 오버레이용 Divi Background Plus 모듈인 이 섹션에 배경 비디오를 추가하고 오버레이에 메시지, 연락처 정보 및 CTA를 표시하는 텍스트 모듈을 추가합니다.

행동 유도 섹션의 텍스트를 사용할 계획입니다. 이것은 Divi의 레이어 도구로 쉽게 수행할 수 있습니다. 이렇게 하려면 복사할 섹션을 마우스 오른쪽 버튼으로 클릭하고 레이어로 이동 을 선택 합니다 .

당신이 복사 행을 복사하고 선택하려는 행을 마우스 오른쪽 버튼으로 클릭합니다.

그런 다음 행을 배치할 섹션을 선택하고 마우스 오른쪽 버튼을 클릭한 다음 행 붙여넣기 를 선택합니다. 이 섹션에서 복사하려는 두 행 모두에 대해 이 작업을 수행하고 있습니다. 또는 이 섹션을 복사하여 Divi Background Plus 모듈을 추가할 수도 있습니다.

이제 Divi Background Plus, 여러 텍스트 모듈 및 CTA가 포함된 새 섹션이 생겼습니다.

다음으로 섹션의 배경에 비디오를 추가합니다. 영상의 색상은 텍스트의 색상과 잘 어울리지만 오버레이를 추가하여 좀 더 돋보이게 하고 싶습니다. 내 배경 비디오에는 무료 비디오 Tima Miroshnichenko's Mixed Toppings Over Pexels from Pexels를 사용하고 있습니다.

Divi Background Plus 설정을 열고 레이아웃으로 섹션 을 선택합니다.

배경 탭까지 아래로 스크롤하고 색상 옵션을 선택합니다. 물론 동영상에 따라 색상이 달라집니다. 저는 영상에 붉은 색조를 주고 싶었습니다. 나는 사용했다:

• RGBA(150,0,0,0.15)

다음은 내 빨간색 오버레이가 있는 배경 비디오가 데스크탑에서 어떻게 보이는지 보여줍니다.

다음은 전화에서 동일한 레이아웃입니다.

몇 가지 더 많은 예를 위해 여기에 30% 불투명도의 표준 보라색 배경이 있습니다.

불투명도가 80%인 표준 주황색입니다.

섹션 구분선 스타일 지정

오버레이는 섹션 구분선에서도 작동합니다. 섹션 구분선을 추가하려면 섹션의 설정을 엽니다.

디자인 탭으로 이동하여 구분선 을 선택하고 구분선을 추가할 위치에 따라 위쪽 또는 아래쪽 을 선택합니다. 아래쪽에만 구분선을 추가하고 있습니다. 구분선 스타일 이라고 표시된 드롭다운 상자를 클릭하여 구분선을 선택합니다.

원하는 구분선 스타일을 선택합니다. 두 가지 색상으로 각도를 만드는 다섯 번째 스타일을 선택합니다.

사용자 정의 색상을 추가하려면 편집 아이콘을 선택하십시오. 구분선이 표시되지 않는 부분에 나타나는 색상입니다. 이전 예에서 볼 수 있듯이 기본 색상은 흰색입니다. 색상을 16진수 코드로 추가하거나 색상 선택기에서 색상을 선택합니다. 비디오 아래 섹션의 색상 중 하나인 #0d0d0d 색상을 추가하고 있습니다.

• 색상 #0d0d0d

이제 비디오에는 해당 섹션의 하단에 스타일이 지정된 구분선이 있습니다. 디바이더의 투명한 부분을 통해 표시되는 비디오를 볼 수 있으며 두 섹션과 잘 어울립니다.

결과

데스크탑과 모바일에서 레이아웃이 어떻게 보이는지 살펴보겠습니다.

다음은 데스크톱 버전을 살펴보겠습니다. 첫 번째 섹션에 그라디언트 오버레이가 있는 진정한 시차 배경이 있습니다. 두 번째 섹션에는 색상 오버레이가 있는 배경 이미지와 이를 다음 섹션과 구분하는 섹션 구분선이 있습니다.

휴대폰에서 레이아웃이 어떻게 보이는지 보여줍니다. 모든 요소는 모바일 장치에서 잘 작동합니다.

마무리 생각

Divi 시차 및 비디오 배경에 색상 및 그라디언트 오버레이를 추가하는 방법을 살펴보았습니다. Divi Background Plus를 사용하면 쉽게 구축하고 사용할 수 있습니다. 섹션, 행 및 열과 함께 작동하며 이들 중에서 선택하기 쉽습니다. 모든 사용자 정의는 표준 Divi 도구 및 설정이므로 익숙합니다.

이제 시차 및 비디오를 비활성화하지 않고도 배경에 색상 및 그라디언트 오버레이를 포함할 수 있습니다!

우리는 당신의 의견을 듣고 싶습니다. Divi Background Plus로 시차 이미지와 비디오를 위한 색상 및 그라디언트 오버레이를 생성하셨습니까? 의견에 대해 어떻게 생각하는지 알려주십시오.

Lauritta/Shutterstock.com을 통한 주요 이미지