본문 바로가기

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

2019.09.11 댓글 7

워드프레스에서 페이지 빌더를 활용하면 페이지를 쉽게 만들 수 있습니다. 특히 유료 테마에는 WPBakery 페이지 빌더('비주얼 컴포저')가 많이 탑재되어 있습니다. 비주얼 컴포저는 최적화를 제대로 하지 않으면 사이트 속도에 영향을 미칠 수 있기 때문에 그다지 권장되지는 않지만, 코딩 지식이 전혀 없는 초보자도 쉽게 사이트를 만들 수 있도록 돕기 때문에 양날의 검 같습니다.

Elementor는 무료이면서도 속도 면에서 비교적 괜찮은 평가를 받고 있는 페이지 빌더입니다. 그래서 점차 Elementor를 채택하는 테마가 늘어나고 있습니다.

Elementor 페이지 빌더는 다른 페이지 빌더와 비슷하게 사용법이 쉬운 편입니다. 조금만 다루어보면 쉽게 사용이 가능할 것입니다.

이 글에서는 엘리멘터로 만들어진 페이지를 편집하는 방법에 대해 간단히 살펴보겠습니다.

Elementor로 제작된 페이지를 수정하는 방법

관리자로 로그인한 상태에서 수정하고자 하는 페이지를 크롬 등의 브라우저로 엽니다.

워드프레스 Elementor 페이지 빌더 편집

오른쪽 상단의 "Edit with Elementor"를 클릭합니다.

워드프레스 Elementor 페이지 빌더 편집 화면

그러면 위와 같은 페이지가 표시됩니다. 왼쪽 패널에는 Elementor에서 사용 가능한 요소(element)가 표시되고, 오른쪽은 페이지가 브라우저에서 보는 것과 동일한 레이아웃으로 표시됩니다. 따라서 프런트엔드에서 직접 편집이 가능합니다.

오른쪽에서 수정할 부분 위에 마우스를 올리면 수정할 수 있는 상태로 바뀝니다.

워드프레스 Elementor 페이지 빌더 편집 방법

가령 "Your Dream Vacation is Here" 문구를 수정하고 싶은 경우 이 문구 위에 마우스를 클릭하거나 오른쪽의 연필 모양의 아이콘을 클릭합니다.

워드프레스 엘리멘터 페이지 빌더 수정

그러면 위의 그림과 같이 왼쪽 패널에서 수정이 가능하도록 Content 섹션으로 바뀝니다. 오른쪽에서 직접 문구를 바꾸어도 되고, 왼쪽에서 바꾸어도 됩니다. 그리고 글자 크기, 정렬 등 각종 속성도 변경이 가능합니다.

보다 세부적으로 수정하려면 왼쪽의 Style 및 Advanced 탭을 클릭하여 스타일과 고급 옵션을 편집할 수 있습니다.

Style 탭:

 

워드프레스 엘리멘터 페이지 빌더 수정 - 스타일 탭

스타일 탭에 표시되는 옵션은 요소마다 조금씩 다릅니다. Heading 요소의 경우 텍스트 컬러, 타이포그래피, 음영 등을 지정할 수 있습니다.

Advanced 탭:

 

워드프레스 엘리멘터 페이지 빌더 수정 - 고급 탭

Advanced 탭을 클릭하면 마진(margin), 패딩(padding) 등을 지정할 수 있고, Motion 효과, 배경, 테두리, 사용자 정의 위치(Custom Positioning), 반응형 등의 옵션을 세부적으로 지정할 수 있습니다. Custom CSS에서는 직접 사용자 지정 CSS를 추가할 수 있지만, 이 기능은 Pro 버전에서만 제공됩니다.

Response(반응형) 옵션에서는 해당 요소를 PC, 태블릿, 모바일 기기에서 표시할 것인지 여부를 선택할 수 있습니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 반응형 설정

이 옵션을 사용하면 특정 요소를 모바일에서만 숨기거나 반대로 모바일에서만 표시되도록 할 수 있습니다.

이미지 교체

이미지를 변경하고 싶은 경우 해당 이미지를 마우스로 클릭하면 됩니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 이미지 변경

그러면 위의 그림과 같이 왼쪽 패널에 이미지를 편집할 수 있는 옵션이 표시됩니다. Choose Image 아래의 이미지를 클릭하면 미디어 라이브러리가 열리면서 새로운 이미지를 지정할 수 있습니다. 마찬가지로 Style, Advanced 탭을 클릭하여 세부적으로 수정이 가능합니다.

섹션 편집:

섹션을 편집하고 싶은 경우 섹션에 마우스를 올리고 6개 점으로 된 아이콘을 클릭합니다.

그러면 마찬가지로 왼쪽 패널에 섹션(Section)을 편집할 수 있는 옵션이 표시됩니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 섹션 편집 옵션

배경 컬러를 변경하고 싶다면 Style 탭을 클릭합니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 스타일 탭

Background에서 색상을 변경하거나 배경 이미지를 지정할 수 있습니다.

섹션 또는 요소 복제/삭제:

섹션이나 요소를 복제하여 활용하거나 삭제하려는 경우 해당 섹션이나 요소 위에 마우스를 올리고 오른쪽 마우스 버튼을 클릭하면 컨텍스트 메뉴(상황별 메뉴)가 표시됩니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 섹션 복제

Duplicate를 선택하면 복제가 되면서 동일한 요소나 섹션이 하나 더 생성됩니다. Delete를 선택하면 삭제됩니다.

Copy를 선택하여 복사하여 다른 곳에 Paste(붙여넣기)하는 것도 가능합니다.

섹션 위치 변경하기

섹션 위치를 바꾸고 싶다면 섹션 위에 마우스를 올리고 6개 점으로 된 아이콘을 길게 클릭합니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 섹션 위치 이동

마우스 버튼을 누른 상태로 원하는 곳으로 끌어다 놓으면 됩니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 섹션 위치 변경하기

새로운 섹션 추가:

특정 섹션 위에 새로운 섹션을 추가할 수 있습니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 새로운 섹션 추가

Add Section을 누르면 바로 위에 새로운 섹션이 추가됩니다.

템플릿 추가하기:

워드프레스 엘리멘터 페이지 빌더 수정 - 템플릿 로드하기

새로운 섹션이 추가되면 위의 그림과 같이 두 개의 아이콘이 표시됩니다. 오른쪽의 Add Template 아이콘을 클릭하면 미리 만들어진 템플릿을 선택하여 로드할 수 있습니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 페이지 템플릿

새로 페이지를 만드는 경우 페이지 템플릿 중에서 선택하여 템플릿을 로드한 후에 편집할 수 있습니다. 무료 버전에서도 퀄리티가 높은 템플릿이 제공됩니다. PRO라고 표시된 템플릿은 프로 버전(유료 버전)에서만 사용할 수 있습니다.

Blocks 탭을 클릭하면 미리 만들어진 블록을 로드할 수 있습니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 블록 템플릿

마찬가지로 PRO로 표시된 블록은 유료 버전에서만 제공됩니다. 원하는 템플릿을 선택하여 로드한 후에 위에서 설명한 방법에 따라 수정할 수 있습니다.

새로운 섹션 추가:

새로운 섹션을 추가하려면 왼쪽의 아이콘을 클릭합니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 섹션 추가

그러면 먼저 구조(컬럼)를 선택할 수 있습니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 섹션 구조

여러 가지 컬럼 구조 중에서 선택할 수 있습니다. 가령 3컬럼으로 된 레이아웃을 선택하면 3개의 컬럼에 요소를 지정할 수 있습니다. 최대 6개 컬럼로 된 레이아웃까지 선택할 수 있습니다.

편의상 2열로 된 레이아웃을 선택하면 그림과 같이 2개의 컬럼으로 된 섹션이 생성됩니다.

워드프레스 엘리멘터 페이지 빌더 수정- 섹션 레이아웃

요소를 지정하려면 + 아이콘을 클릭하고 왼쪽 패널에서 요소를 선택한 후에 오른쪽으로 끌어다가 해당 컬럼에 놓으면 됩니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 동영상 요소

예를 들어, Video(동영상) 요소를 선택하여 오른쪽으로 끌어다 놓으면 동영상 요소가 추가되면서 동영상 URL 등을 지정할 수 있는 화면이 왼쪽에 표시됩니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 동영상 요소 편집

앞서 설명한 방식대로 스타일 등을 지정할 수 있습니다.

Elementor에서는 무료 버전에서도 다양한 요소(Element)를 이용할 수 있습니다.

워드프레스 엘리멘터 페이지 빌더 수정 - 요소

Elementor의 PRO 버전에서는 더 많은 요소가 제공됩니다.

참고로 Avada, Enfold, Newspaper, Flatsome, Divi 등 일부 인기 워드프레스에서는 자체 페이지 빌더를 탑재하고 있습니다.

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글7