비주얼 컴포저 페이지 빌더에서 전체 폭으로 콘텐츠 추가하기

비주얼 컴포저(현재 명칭: WPBakery Page Builder)는 Jupiter, The7 등 많은 유료 테마에서 번들로 탑재되어 제공되고 있습니다. 비주얼 컴포저가 탑재될 경우 사양이 좋지 않은 웹호스팅을 이용하거나 사이트 최적화가 제대로 이루어지지 않을 경우 사이트 속도가 느려질 수 있습니다. (이 때문에 개인적으로는 비주얼 컴포저를 별로 선호하지 않습니다.)

하지만 페이지 빌더를 사용하면 레이아웃 작업이 수월해지기 때문에 코딩 지식이 없더라도 비교적 편리하게 사이트를 제작할 수 있는 장점이 있습니다. 페이지 빌더를 사용할 경우 장점과 단점에 대해 다음 글을 참고해보세요.

비주얼 컴포저에서 전체 폭(전체 너비)로 콘텐츠를 추가하려는 경우 Row 요소를 삽입한 후에 Row 설정에서 Full Width로 콘텐츠를 표시하는 옵션을 활성화하면 됩니다.

비주얼 컴포저 Row 설정

위와 같이 Row(행) 요소를 추가한 경우 편집 아이콘(연필 모양 아이콘)을 클릭하여 Row Settings(행 설정) 화면을 표시합니다.

비주얼 컴포저 행 설정

General(일반) 탭에서 Full Width Row(전체 폭 행)를 선택하도록 합니다. 그러면 Full Width Content?(전체 폭 콘텐츠?)라는 옵션도 나타납니다. 이 옵션도 선택합니다. Save changes(변경 사항 저장)를 클릭하여 변경 사항을 저장합니다.

이제 이 Row에 추가하는 요소는 전체 너비로 콘텐츠가 표시됩니다.

배경 이미지를 전체 폭으로 추가하려면 Row에 클래스를 추가하고 CSS(예: object-fit: cover;)로 배경 이미지를 전체 폭으로 표시하도록 시도해볼 수 있습니다.

아바다 테마에서 콘텐츠를 전체 폭으로 표시하는 방법도 비슷합니다.

Divi 테마의 경우 보다 수월하게 전체 폭으로 컨텐츠를 추가할 수 있습니다. 다음 글을 참고해보시기 바랍니다.

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

댓글 남기기

* 이메일 주소는 공개되지 않습니다.