Elementor 내비게이터 : 복잡한 페이지의 엘리멘트 선택을 쉽게해주는 Navigator 기능

0

워드프레스 페이지를 디자인하면서 Elementor로 추가한 각 요소들의 속성값을 설정하려면 일단 해당 요소를 선택해야 옵션패널에 나타날텐데요. 웹페이지가 복잡해질 수 록 엘리먼트(구성 요소)를 선택하기가 쉽지 않아집니다. 그런 어려움없이 페이지 디자인을 완성하기위해 마련된 기능이 Navigator(내비게이터) 패널입니다.

그러면 Elementor 하단 툴바 메뉴 설명 시리즈 연재작 두 번째 글로 Navigator에대해서 알아보겠습니다.

하단툴바에 표시된 내비게이터 열기 아이콘

네비게이터 패널은 Elementor 2.2 버전부터 지원되는데 포토샵 사용자라면 익숙할 레이어 패널과 비슷한 UI로 구성되어있습니다.

페이지를 디자인하면서 z-index(레이어 계층 순서변경),  CSS 마이너스 마진등으로 엘리먼트끼리 겹치는등 복잡한 구조에서 원하는 엘리먼트를 선택하기 어려운 다음과 같은 상황이 많을 때 사용하면 문제를 쉽게 극복 할 수 있을겁니다.

  • 내용이 길고 복잡한 페이지
  • position absolute (CSS)
  • 마이너스 마진 
  • 숨겨진 요소(visible: hidden)
  • CSS 애니메이션 효과
  • 레이어관계 및 z-index 로인한 요소들의 겹침

Elementor 내비게이터 패널 열기와 이동

단축키 사용해서 열기

내비게이터는 Elementor 단축키를 사용해서 열 수 있습니다.

  • 윈도우: Control + i
  • macOS: Command + i

하단툴바 Navigator 아이콘 및 우클릭 메뉴로 열기

왼쪽 하단 툴바의 시루떡 처럼 생긴 내비게이터 아이콘Navigator 버튼을 누르면 팝업창으로 열 수 있고

Navigator 창이 팝업창형태로 나왔다

또는 어디서든 엘리먼트를 직접 우클릭해서 나타나는 우클릭 메뉴 > Navigator를 선택하면 네비게이터 창이 열립니다.

우클릭메뉴에 나타난 Navigator 메뉴항목
우클릭메뉴에 나타난 Navigator 메뉴항목

내비겡이터 창 도킹 방법

열려있는 Navigator 창은 팝업창 상태에서 이리 저리 끌어다가 이동시키며 사용할 수도 있지만, 아래처럼 오른쪽 끝에 가져다 도킹하고 너비를 조절 할 수도있습니다.

오른쪽화면 전체높이를 차지하고있는 내비게이터

내비게이터에서 엘리먼트 선택 후 편집하기

페이지에 있는 엘리먼트 위에서 마우스 우클릭 후 Navigator를 클릭하면 네비게이터 창에 해당 목록이 선택 표시되기도 하고, 곧바로 네비게이터에 나열된 목록에서 엘리먼트(섹션, 칼럼, 위젯)를 클릭하면 해당 엘리먼트가 선택되기도 합니다.

그러면 선택됨과 동시에 해당 엘리먼트는 선택상자(파란테두리가 생기고) 아래 그림처럼 왼쪽 사이드바에 해당위젯의 속성을 설정할 수 있는 옵션이 나타나게됩니다.

내비게이터에서 선택하자 왼쪽에 Edit Image 옵션이 나타남

네비게이터에서 우클릭 메뉴(Right-click options)

내기게이터 창의 목록에 나타난 각 엘리먼트를 우클릭하면 편집화면에서 직접 우클릭 할 때와 처럼 같은 마우스 오른쪽키 메뉴가 나타나게 됩니다.

Navigator의 목록에서 Text Editor 를 우클릭하자 나타나는 팝업 메뉴

그러면 우클릭한 대상이되는 요소의 타입에 따라 아래그림처럼 나오고 각각 Edit Section(섹션편집), Edit Column(칼럼편집), Edit Widget(엘리먼트 위젯 편집)을 선택해서 역시 왼쪽 사이드바에서 해당 요소의 속성편집 옵션을 볼 수 있을 뿐만 아니라 팝업 메뉴에 나타난 다른 동작들도 수행할 수 있습니다.

우클릭하면 나오는 팝업창에 섹션, 칼럼, 위젯별로 다른 메뉴가 하나씩 있다

엘리먼트 숨기기

복잡한 구조의 페이지 요소들이 오밀조밀 모여있는 가운데 선택하려는 것 외에 다른 방해되는 것들을 편집 화면에서라도 보이지 않게도 할 수 있습니다. 그러면 원하는 요소를 선택하기 더 쉬워지겠죠.

내비게이션 패널이 목록에 나열된 요소 중에 칼럼에는 적용되지 않지만 섹션이나 위젯 이름에 마우스 포인터를 올려보면 오른쪽 옆에 파란 눈모양 아이콘눈모양 아이콘이 나오는 걸 볼 수 있는데요.

네비게이터 목록의 항목이름 오른쪽에 파란 눈모양 아이콘

이 눈아이콘을 클릭해서 회색 눈모양 아이콘회색으로 만들면 아래그림처럼 Elementor 편집화면에서만 해당 요소를 숨겨줍니다. 그럼으로써 주변의 다른 엘리먼트를 선택하고 디자인하는 동안 방해받지 않을 수 있습니다.

회색 눈모양 아이콘: Form이 보이지 않는다
눈모양 회색: Form 위젯이 사라짐

이렇게 숨겨도 편집화면에서만 안보일뿐 실제로 방문자에게 보이는 웹페이지에서는 보입니다.

내비게이터에서 DOM 순서 재 정렬

내비게이션에 표시된 요소를 클릭한 채 드래그해서 순서를 바꾸며 재졍렬할 수 있습니다.

Image 위젯을 내비게이터에서 순서를 바꾸고 있다

주의해야할 건 이렇게 바꾸는 순서는 레이어관계를 바꾸는 것이 아닌 HTML DOM 순서를 바꾸는 것이라는 겁니다. 아래그림은 같은 칼럼 안에있는 Form과 Image의 DOM 순서가 바뀔 때의 모습을 보여주고 있습니다.

Form과 Image 위젯의 모습. 리스트에서 이미지가 아래에 있다
순서변경 전: image가 form 앞에 있다.
Form과 Image 위젯의 모습. 리스트에서 이미지가 위에 있다
순서변경 후: image가 form위로 올라가면서 레이아웃이 변경되었다



만일, 두개의 요소가 겹친상황에서 어떤 요소를 레이어 개념상 앞으로, 뒤로 보낼 것인가가 문제라면 각 요소별 속성 편집에서 Advanced > Z-index의 값을 조정해서 해야하겠습니다.

내비게이터 목록의 이름 변경하기

Navigator 목록에 나오는 요소들의 이름이 Section, Column 그리고 각 위젯의 타입으로 나오는 데요. 더블클릭해서 아래처럼 이름을 바꾸어 줄 수 있어서 미리 이름을 지어놓으면 찾기 쉬워집니다.

내비게이터에서 콘택트폼 항목을 한글이름으로  바꿈

다음단계

시리즈 연재작 다음 순서로는 Elementor의 히스토리 기능과 저장 기능에대해 알아보겠습니다.

Elementor 상세설명 강좌는 계속해서 추가됩니다. 스위프트코딩 블로그 새소식 데스크탑에서 알림받기, 페이스북 페이지 좋아요 구독, RSS 구독등을 통해서 Elementor 강좌 새로운 글을 받아보실 수 있습니다.

댓글은 익명이나 SNS, wordpress.com 로그인 지원). 마크다운 문법 사용가능(Shift+~ 키로 특정문구 혹은 위아래 ~~~으로감싸서 여러줄을 코드블락으로 작성)