Divi 테마에서 Revolution Slider를 전체 너비로 추가하는 방법

Divi 테마에서 사용되는 Divi Builder에 서드파티 플러그인에서 제공하는 쇼트코드를 쉽게 추가할 수 있습니다. 이 글에서는 Divi 테마에서 레볼루션 슬라이더 (Revolution Slider)를 전체 너비로 추가하는 방법에 대해 살펴보겠습니다.

Divi 테마에서 Revolution Slider를 전체 너비(Full-width)로 추가하는 방법

Divi Builder에는 Code Module과 Fullwidth Code 모듈 등 두 가지 코드 모듈이 제공됩니다. Divi 테마에서 Divi 빌더를 활성화한 다음 Fullwidth section(전체 폭 섹션)을 하나 만들고 Insert Module(s)을 클릭하면 다음과 같이 모듈을 선택할 수 있는 화면이 표시됩니다.

Divi Builder의 Full-width Code 모듈

Fullwidth Code를 클릭하면 다음 그림과 같이 Fullwidth Code Module Settings 창이 표시됩니다.

Divi Builder의 Fullwidth Code 모듈 설정

숏코드를 추가하려면 Content: 옆에 있는 텍스트 필드에 붙여넣기 하면 됩니다.

Fullwidth Slider Revolution 슬라이더 추가하기

예를 들어, 위에서 설명한 Fullwidth Code 모듈을 사용하여 수월하게 Revolution Slider 슬라이더를 Fullwidth(전체 폭)로 추가할 수 있습니다.

먼저 Slider Revolution에서 슬라이더를 만들도록 합니다. 그런 다음 슬라이더의 숏코드를 확인하여 복사합니다. 숏코드를 확인하려면 워드프레스 관리자 페이지의 왼쪽 패널에서 Revolution Slider를 클릭하고 슬라이더 목록에서 원하는 슬라이더 위에 마우스를 올려놓습니다. 그러면 슬라이드 이름과 함께 몇 가지 아이콘이 표시됩니다.

레볼루션 슬라이더 숏코드 확인하기

V자 모양 아이콘을 클릭하면 드롭다운 메뉴가 표시됩니다. "Embed Slider"를 클릭하면 해당 슬라이더의 쇼트코드를 확인할 수 있습니다.

Revolution Slider 숏코드

Embed Slider 창에 표시되는 숏코드를 복사하도록 합니다.

이제 위에서 설명한 방법에 따라 Divi Builder에서 Fullwidth Code 모듈을 원하는 곳에 추가합니다. Fullwidth Code 모듈에 방금 복사한 Revolution Slider 숏코드를 붙여넣기 합니다.

Divi Builder에 숏코드 추가하기

이제 저장한 다음 페이지를 확인해보면 레볼루션 슬라이더가 전체 폭(Fullwidth)으로 표시됩니다(데모).

위의 내용을 참고로 레볼루션 슬라이더뿐만 아니라 다른 요소를 Full-width로 추가할 수 있습니다.

참고로 비주얼 컴포저에서 화면의 좌우로 꽉 채우도록 만드는 방법은 이 글을 참고해보시기 바랍니다. 하지만 테마에 따라 잘 안 되는 경우도 있는 것 같습니다. Divi Builder를 사용할 경우 VC보다 더 수월하게 제어가 가능하다는 느낌을 받았습니다.

아바다, 엔폴드 등의 테마를 사용하여 유튜브 영상이나 비메오 영상을 배경에 추가할 수 있습니다.

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다