엘리멘터 페이지 빌더: 섹션, 컬럼 겹치기

워드프레스 인기 페이지 빌더인 엘리멘터 페이지 빌더는 무료 버전에서도 제한적이지만 몇 가지 템플릿을 사용할 수 있습니다. Elementor 무료 버전에서 제공되는 첫 번째 템플릿 (Landing Page - Hotel)을 로드하면 다음과 같은 레이아웃이 로드됩니다.

두 번째 섹션(Your Dream Vacation is Here 부분)을 위로 이동시켜 첫 번째 섹션의 자막처럼 보이도록 하는 방법을 살펴보겠습니다.

[참고*기본적인 CSS에 대한 이해가 없는 경우 이 글을 이해하는 데 어려움을 겪을 수도 있으리라 생각됩니다. 기본적인 CSS는 배우기에 그렇게 시간이 많이 걸리지도 않고 어렵지도 않습니다. 시중에서 책을 한 권 구입하거나 생활코딩과 같은 무료 강의를 통해 CSS를 익힐 수 있습니다.*]

엘리멘터 페이지 빌더 (Elementor Page Builder)에서 섹션 겹치기 예시

두 번째 섹션을 첫 번째 섹션으로 이동시키려면 1) 두 번째 섹션의 배경색에 투명도를 부여하고, 2) 두 번째 섹션을 위쪽으로 이동하도록 margin 값을 추가할 수 있습니다.

배경색에 투명도를 부여하려면 섹션 편집 창에서 스타일로 이동하여 배경 아래의 색상을 클릭한 다음 투명도를 지정하면 됩니다.

 

그리고 아래 섹션을 위로 올리려고 하려면 첫 번째 섹션에서 margin-bottom을 지정하거나 두 번째 섹션에서 margin-top을 지정하여 위로 올릴 수 있습니다.

바깥쪽 여백은 고급 탭에서 지정이 가능합니다. 하지만 바깥쪽 여백은 위쪽과 아래쪽이 연동되어 지정이 가능하네요. 유료 버전에서는 별도로 지정 가능한지 모르겠습니다. 무료 버전에서는 위쪽과 아래쪽 여백을 별개로 지정할 수 없도록 되어 있네요.

이런 경우 CSS 클래스를 지정하여 CSS를 통해 제어할 수 있습니다. CSS 클래스에 적절한 CSS 클래스를 지정합니다. 그런 다음 테마 디자인 > 사용자 정의하기 > 추가 CSS로 이동하여 다음과 비슷한 코드를 넣도록 합니다.

/* 아래쪽 섹션을 위로 이동 */
.클래스명 { 
	margin-top:-108px;
    }

값은 적절히 지정하도록 합니다. 모바일 기기에서는 값이 달라져야 할 수 있습니다. 그런 경우 CSS 미디어 쿼리를 사용하도록 합니다.

대략적인 과정을 동영상에서 확인해볼 수 있습니다.

CSS 미디어 쿼리는 W3Schools 문서를 참고해보세요. 

• CSS Media Queries - Examples (CSS 미디어 쿼리 예제)

엘리멘터 페이지 빌더에서 컬럼 겹치기

컬럼 간 겹치기도 비슷한 방법을 가능합니다. 한쪽의 컬럼에 margin을 두어 다른 쪽 컬럼 위에 배치되도록 하면 됩니다. 예를 들어, 다음과 같은 두 개의 컬럼에서...

오른쪽 컬럼을 왼쪽 컬럼으로 약간 이동하여 겹치게 할 수 있습니다. (경우에 따라 두 컬럼 모두 적절히 이동 가능합니다.)

가령, 왼쪽 및 오른쪽 컬럼의 요소에 CSS 클래스를 추가하여 적절한 여백을 지정할 수 있습니다.

고급 탭에서 바깥쪽 여백 설정이 있지만, 무료 버전이어서 그런지 몰라도 상하좌우 여백에 모두 동일한 값만 지정이 가능하네요. (즉, 위쪽, 오른쪽, 아래쪽, 왼쪽 여백 모두 같은 값만 지정 가능.)

이런 경우 마찬가지 방법으로 CSS 클래스를 추가하여 테마 디자인 > 사용자 정의하기 > 추가 CSS에 CSS 코드를 넣어 조정할 수 있습니다.

예시:

/* 오른쪽 컬럼을 왼쪽 컬럼에 겹치도록 이동시키기 */
.클래스명 {
    margin-left: -170px;
    margin-top: 321px;
}

오른쪽 요소 위에 왼쪽 요소를 겹쳐 올리고 싶은 경우에는 표시 순서를 지정해주면 될 것입니다. CSS로는 z-index 값을 설정하여 우선순위를 지정할 수 있습니다. 그리고 CSS 미디어 쿼리를 사용하여 모바일, 태블릿, PC 기기에서 레이아웃을 달리 조정할 수 있습니다.

[참고*엘리멘터에서 Z-index(표시 순서) 설정 방법은 "엘리멘터 페이지 빌더 Z-index 설정 방법 (위젯 표시 순서 지정)"을 참고하시기 바랍니다.*]

마치며

엘리멘터 페이지 빌더는 무료 버전과 유료 버전이 있습니다. 무료 버전에서도 웬만한 사이트를 만드는데 손색이 없는 것 같습니다. 그리고 CSS를 이용하여 어느 정도 커스텀이 가능합니다. 더 많은 템플릿을 사용하거나 무료 버전에서 사용할 수 없는 기능은 Elementor PRO 버전에서 사용이 가능합니다.

Elementor에는 아직 비교할 수 없지만 최근 Brizy라는 페이지 빌더도 사용자를 늘려가고 있습니다. 마찬가지로 무료 버전과 유료 버전이 제공되며, Elementor와 달리 평생 (Lifetime) 플랜도 제공됩니다.

새로운 워드프레스 페이지 빌더 Brizy, 제2의 엘리멘터가 될 수 있을까?

참고

https://avada.tistory.com/2197

엘리멘터 페이지 빌더의 탭 (Tabs) 기능

https://avada.tistory.com/1472

워드프레스 Elementor 페이지 빌더로 만들어진 페이지를 수정하는 방법