Elementor 편집화면: 사이드바 위젯 패널과 글로벌 설정 설명 (워드프레스 페이지빌더 사용법)

 이번 글에서는 Elementor 페이지빌더 편집화면에서 왼쪽에 나타나는 사이드바 위젯 패널이 어떤 구조로 이루어져있는지 알아보고, 위젯을 추가하면 기본으로 설정되어있는 글로벌 설정, 디폴트 색상과 폰트에 대해 설명하려고 합니다.

 글로벌 디폴트 설정은 엘리먼트 위젯을 추가했을 때 가장 기본적으로 세팅되어있는 것들로써, 글로벌 설정은 기본 차림상과 같습니다. 결국 엘리먼트 위젯별로 세세한 속성 편집을 통해서 바꾸게 되겠지만, 미리 자신의 테마 색상, 폰트에 맞추어두면 페이지디자인을 하면서 손이 덜 갈 것입니다. 

 시리즈 연재작 이전 글에서 잠시 살펴봤듯이 워드프레스 Elementor 페이지빌더를 시작하면 왼쪽에는 사이드바 형태로 위젯 패널을 볼 수 있습니다.(아래 그림 참고). 이 패널의 가운데 영역은 페이지빌딩을 위한 핵심인데 어떤 종류의 엘리먼트를 클릭했느냐에 따라 속성편집화면이 그에 맞게 바뀝니다.

 패널은 크게 3개로 나뉘는데 맨 위에 메뉴 전환 버튼과 아래쪽에 하단 툴바는 고정되어있고 가운데는 위젯목록이 나타나거나 속성편집화면, 메뉴등이 나타납니다.

상단 메뉴 전환 버튼

위 그림에서 볼 수 있듯이 위젯 패널 맨 위에는 2 개의 메뉴 전환 버튼이 있습니다.

•  디폴트 세팅 글로벌 설정 메뉴 보기
•  모든 Elementor 위젯 목록 보기

 

왼쪽 위의 햄버거 버튼을 클릭하면 아래 그림처럼 바뀌면서 디폴트 스타일과 글로벌 세팅을 설정할 수 있는 메뉴가 나타납니다.

그리고 오른쪽 위의 바둑판 버튼을 클릭하면 모든 엘리먼트 위젯이 나열되는데 위쪽에 보면 ELEMENTS 와 GLLOBAL 탭으로 나누어진 것을 볼 수 있습니다.

엘리먼트 위젯에 대한 설명은 다른 블로그글로 다시 설명드리기로 하고 이글에서는 글로벌 세팅에대한 설명을 하겠습니다.

Elementor 디폴트 컬러, 폰트 설정과 글로벌 세팅 메뉴

왼쪽위의 햄버거 버튼을 클릭해서 글로벌 메뉴를 살펴보도록 합시다.

위 그림처럼 메뉴를 보면 크게 3가지로 나뉘는데 STYLE, SETTINGS 그리고 EXIT TO DASHBOARD 버튼입니다.

• STYLE – 기본 디폴트 색상과 폰트를 설정
• SETTINGS – 위젯 간격, 섹션패딩, 이미지 라이트박스 설정등에 대한 글로벌 설정
• EXIT TO DASHBOARD – 종료버튼. 페이지빌더 종료하고 관리자페이지로 돌아가기

그러면 이제 본격적으로 위 메뉴에대한 상세한 내용을 알아봅시다.

• STYLE 
  • Default Colors
    • Default Colors 란?
    • Disable Default Colors: 디폴트 컬러 적용하지 않기
  • Default Fonts
    • 디폴트 폰트 사용하지 않기
  • Color Picker
• SETTINGS
  • Global Settings
    • Style
    • Lightbox

STYLE 

디폴트 컬러나 폰트, 컬러픽커의 컬러프리셋 설정을 자신의 홈페이지, 웹사이트의 테마에 맞게 미리 세팅 해두면 페이지를 디자인을 할 때 덜 번거롭습니다. STYLE 섹션의 3가지 항목에대해 알아보도록 하겠습니다.

Default Colors: 디폴트 색상 테마

Default Colors 속성은 디폴트 색상을 설정해주는 속성인데 아래 그림처럼 나타납니다. 

Color Palette(컬러 파레트) 항목에는 프라이머리, 세컨더리, 텍스트, 강조 색상이 설정된 것을 볼 수 있고, 각각의 색상을 클릭해서 마음대로 변경할 수 있습니다. 

자신의 색상 감각이 별로라면 미리 준비된 색상 세트를 선택할 수도 있는데요. More Palettes에 미리 준비된 컬러 테마 세트를 선택하면 해당 테마가 Color Palette에 나타납니다. 그리고 화면 위의  APPLY 버튼을 클릭하면 색상이 적용됩니다. 적용을 원치않는다면 RESET(리셋)이나 DISCARD(취소)를 클릭해 되돌립시다.

Default Colors 란?

그렇다면 이제 위처럼 설정하는 각각의 색상이 무엇에대한 색상설정인지를 궁금해 하실 것같습니다. Default Colors(디폴트 컬러)는 Elementor 편집기에서 기본으로 사용되는 색상을 일컫습니다. 웹 페이지 디자인을 하면서 색상과 그 역할이 아래 4개로 나누어집니다.

• PRIMARY – 프라이머리: 헤딩(제목), 아이콘등의 색상
• SECONDARY – 세컨더리: 리스트 글자등의 색상
• TEXT – 텍스트: 본문 글자 색상
• ACCENT – 강조: 버튼, 마우스 오버 색상

절대적인 건 아니지만 위 4가지 요소에따라 어떤 색상을 사용할지 결정하면됩니다. 페이지 전체의 컬러 테마인 셈이죠. 아래 그림처럼 페이지에 여러 요소를 넣어놓고 Color Palette를 바꾸어보면 쉽게 알 수있습니다.

이것은 엘리먼트 위젯를 페이지에 추가했을 때 설정되는 기본 색상일 뿐이고 각각의 색은 또 다시 각각의 엘리먼트 속성편집에서 바꾸어 줄 수 있습니다. 

예를 들어 아래그림은 Heading 엘리먼트의 Style 속성 편집화면인데, 제목 색상 (Text Color)은 프라이머리 컬러로 분류되지만 Text Color 색상 설정이 아래처럼  투명색(지움)이면 위에서 설정했던 Default Color를 사용하고, 별도로 다른 색상을 지정하면 해당 색깔을 사용하게 되는 것이죠.

Disable Default Colors: 디폴트 컬러 적용하지 않기

참고로 워드프레스 관리자화면 > Elementor 메뉴> Settings > General 에서 Disable Default Colors 를 체크하면 이 곳에 설정된 Elementor의 디폴트 컬러를 사용하지 않고 자신이 사용하는 테마의 색상을 상속받아 디폴트 컬러로서 사용합니다. 그렇게 관리자메뉴 설정에서 해당 메뉴가 체크되었다면 Default Colors 메뉴는 아래처럼 나타나게 됩니다.

Default Fonts: 디폴트 폰트 지정

위의 Default Color와 마찬가지로 텍스트 폰트 또한 기본 설정 폰트를 Primary, Secondary, Body, Accent Text 별로 설정 할 수 있는데 각 속성을 펼쳐보면 폰트 패밀리(Family)와 글자 두께(Weight)를 설정 할 수 있게 되어있습니다.

Family의 선택 드랍박스에서 폰트이름을 검색해 지정하면되는데요. 몇가지 목록이 나누어져 있습니다.

목록을 자세히 살펴보면 설정할 수 있는 폰트 종류가 아래와 같이 구분되어있습니다.

• Custom Fonts – 커스텀 폰트 (프로 버전)
  • 자신이 서버에 업로드해둔 웹폰트 파일 목록인데 Elementor Pro를 사용해야하고 관리자화면 메뉴 > Elementor > Custom Fonts에서 미리 설정해둔 커스텀 폰트여야합니다. 한글 폰트도 가능하지만 저작권을 확인해야하겠습니다.
• System – 시스템 폰트
• TypeKit Web Fonts by Adobe – 어도비 타입킷 웹폰트 (Adobe TypeKit). Adobe CC 구독 사용자만 가능
• Google – 구글 무료 웹폰트
• Google Early Access – 구글 얼리 엑세스 웹폰트.구글 무료 웹폰트

디폴트 폰트 사용하지 않기

참고로 워드프레스 관리자화면 > Elementor > Settings > General에서 Disable Default Fonts 를 체크하면 이 곳에 설정된 Elementor의 디폴트 폰트를 사용하지 않고 자신이 사용하는 테마의 폰트를 상속받아 디폴트 폰트로서 사용합니다. 관리자 메뉴에서의 설정이 체크되면 Default Fonts 설정화면은 아래처럼 나타나게 됩니다.

 

Color Picker: 컬러 픽커 프리셋 설정

Color Picker 설정은 Elementor 에디터 내에서 사용되는 컬러픽커 팝업창에 위치한 컬러 프리셋(pre-set)에 어떤 색상이 나타나게할지 선택하는 Elementor 에디터용 설정입니다.

Elementor 에디터의 컬러 픽커는 Elementor를 사용하면서 색상 지정을 위해 클릭하면 나타나는 컬러 픽커를 말하고(예를 들어 섹션의 배경색상 선택 할 때), 이 컬러픽커의 아래 쪽에는 미리 준비된 컬러 프리셋이 있어서 해당 색상을 바로 바로 선택할 수 있습니다.

Color Picker 항목에 나타난 개별 색상을 직접 클릭해서 자신이 직접 바꿀 수도 있고, 색상 감각이 부족한 사람들을 위해 아래쪽에는 More Palettes에 몇 가지 컬러 테마가 미리 준비되어있습니다.

이렇게 컬러 프리셋을 자신이 자주 사용하는 워드프레스 테마색상에 맞추어 지정해두면 개별 엘리먼트 위젯에서 색상을 지정해줄 때 바로 바로 클릭해서 사용하면 되므로 생산성이 높아지겠죠?

 

SETTINGS

SETTINGS에 있는 항목중 아래 두개는 별거 없는데 Dashboard Settings 는 관리자메뉴 > Elementor > Settings 화면으로 바로가기 링크일 뿐이고 About Elementor는 개발사 홈페이지로의 링크일 뿐입니다.

그 둘을 제외하고 남아있는 맨위 Global Settings 항목에대해 설명하겠습니다.

Global Settings – 글로벌 세팅

글로벌 세팅은 이곳 뿐만 아니라 워드프레스 관리자화면의 Elementor 메뉴 > Settings > Style 에서도 찾아 볼 수 있고, 어느 쪽에서 설정하든지 서로 반영 됩니다.

Global Settings 화면에 들어서면 화면 위 쪽에   Style 과Lightbox 탭으로 나누어져있는 걸 볼 수 있습니다.

Style(스타일)과 Lightbox(라이트박스) 탭을 클릭했을 때 나타나는 각각의 항목에대해 설명하겠습니다.

Global Settings > Style

Default Generic Fonts - 디폴트 폰트타입 설정

컴퓨터 시스템에서 글자를 특정 폰트로 표시하기위해서는 첫 째로 폰트 파일이 (방문자, 사용자의)컴퓨터에 설치되어있어야합니다. 하지만 웹환경은 서버가 내려주는 웹페이지를 클라이언트(방문자컴퓨터)가 표시해주는 관계이고, 방문자의 컴퓨터에 서버가 강제로 폰트파일을 설치할 수는 없는 노릇입니다. 

Elementor의 Default Generic Fonts 설정은 지정된 폰트가 사용불가능 할 때(방문자의 컴퓨터에 해당 폰트가 없을 때, 어떤이유로 웹폰트가 로딩 되지 않을 때등) 대신할 fallback font(폴백 폰트)를 지정하는 속성인데요. 

특정 폰트패밀리를 설정할 수도 있겠지만 아래 두 가지 폰트타입 중 하나를 선택하는게 가장 범용성이 큽니다.

• Serif (세리프, 예: 명조체처럼 글자 획 끝의 삐침 같은 꾸밈이 있음)
• Sans-serif (산세리프, 예:고딕체처럼 글자 획끝이 삐침없이 각짐)

타이포그라피에서 글꼴을 세리프와 산세리프 체로 분류하게 되는데 모든 폰트는 대부분 둘 중 하나로 분류되니, Sans-serif로 설정하게되면 방문자의 컴퓨터(웹브라우저) 자신이 사용가능한 폰트 중에 고딕체인 폰트를 사용하게 됩니다.

(내서버 또는 구글 웹폰트 같은 서비스의) 서버가 직접 폰트파일을 배포해주는 웹폰트를 사용하면 폴백 폰트가 사용될일은 별로 없겠지만, 네트워크 문제라거나, 모바일에서 폰트파일을 로딩하지 않는 콘텐트 블락커를 사용하는 방문자의 웹브라우저등은 웹폰트도 로딩하지않는 경우가 있다는 걸 상기해야합니다.

Content Width (px) - 콘텐트 너비 지정

페이지 전체에서 섹션 내용의 기본 좌우 너비를 결정하는데 디폴트로는 1140px로 되어있습니다. 아래 그림처럼 모든 섹션의 좌,우 양쪽에 패딩값이 적용되죠.

모든 섹션에대한 너비처럼 적용되기 때문에 (실제로는 CSS Padding적용) 페이지 전체 좌우 여백이 생겨 박스형 페이지 디자인을 만들고 싶을 때 유용합니다.

이런 글로벌 세팅의 Content Width 는 개별 Section(섹션)의 Layout 속성에서 Content Width 설정(아래그림 참고)이 Boxed로 되어있고 너비 값이 없을 때 적용되는 값입니다.

개별 색션 편집에서 이 값이 별도로 지정되어있거나 Full Width로 되어있다면 해당 섹션에는 글로벌 설정값이 적용되지 않습니다. 그러면 전체적인 페이지는 박스형을 유지하면서 헤더나 특정 슬라이드쇼를 위한 상단 사진등만 더 넓은 너비로 또는 페이지전체너비로 만들 수 있기도 하겠죠.

그와중에도 섹션에 패딩값만 적용되는 것이므로 섹션 배경(이미지, 백그라운드 색상)이 차지하는 공간에는 영향을 받지 않습니다. 이러한 것들은 사전지식으로 HTML DOM과 CSS 스타일에대한 개념이해가 앞서있으면 좀 더 이해하기 쉬울겁니다.

Widgets Space - 엘리먼트 위젯 상하 간격 설정

위젯 스페이스는 섹션안의 칼럼 안에서 앨리먼트 위젯과 위젯 사이의 디폴트 높이 간격 값을 설정합니다. 이 값은 관리자 화면메뉴의 Space Between Widgets과 서로 반영되는 같은 설정입니다.

이 설정 또한 기본 지정되는 글로벌 설정이고 아래처럼 개별 칼럼의 Layout 속성 설정에서 Widgets Space를 변경하면 해당 칼럼에서는 위의 글로벌 설정을 무시하게 됩니다.

Stretched Section Fit To

이 옵션은 개별 섹션의 Layout 속성에있는 Stretched Section 옵션을 켜게될 때 영향을 받는 설정값입니다.

이 설정은 HTML 태그(엘리먼트)에대한 이해가 필요한 설정인데, 섹션의 너비를 맞춰 늘릴때 어떤 부모 태그의 너비에 맞출지 지정합니다. 

글로벌 세팅인 Stretched Section Fit To에는 HTML 태그, CSS 셀렉터용 클래스나 ID를 적어놓고,  개별 섹션 설정(위 그림)에서 Stretch Section옵션을 켜면 글로벌 세팅에서 지정된 태그의 너비에 맞춰서 섹션의 너비를 맞춥니다. 

글로벌 세팅의 기본 값은 위처럼 <body> 태그에 맞추는 것으로 되어있어서 보통은 화면너비 전체를 차지하게 됩니다. 아래 그림은 특정 섹션의 Layout 섹션에서 Stretched Section이 꺼져 있을 때는 (하단 툴바에서 설정할 수 있는) Page Settings에 설정한 패딩 값에 맞게 좌우 여백이 있는 모습인데요.

Stretched Section을 켜자 아래처럼 좌우 여백 값을 무시하고 body 태그에 맞춰서 전체너비를 차지하게 됩니다.

 

body가 아닌 다른 HTML 부모 태그에 맞추길 원한다면 HTML 태그이름이나 CSS 셀렉터를 적어넣으면 됩니다. 예를 들어서 아래처럼 말이죠.

• nav
• #main
• #conetnt
• .contentWrapper

어떤 CSS 셀렉터가 있을 지는 자신이 사용하는 테마에 따라 다르겠고, 해당 HTML 태그나 셀렉터 클래스, ID가 해당페이지에서 실제 존재해야합니다.

Page Title Selector -페이지 제목 CSS 셀렉터 지정

먼저 참고로 이곳 글로벌 세팅의 Page Title Selector 에 입력되는 값은 워드프레스 관리자화면 > Elementor > Settings > Style의 Page Title Selector 항목에도 반영되며 어느한쪽에만 입력해도 서로 반영되게 됩니다.

이 옵션의 값은 페이지 제목에 대한 CSS 셀렉터입니다. 테마에 따라 다를 수 있지만 보통 워드프레스 페이지의 제목은 <h1>태그로 작성되고 .entry-title 클래스로 지정되어 있습니다. 이곳에 설정된 기본 CSS 셀렉터는 바로 페이지 제목을 선택하는 CSS 셀렉터(Selector) ID 또는 클래스명이죠.

h1.entry-title

Page Title Selector에 적힌 이 값은 페이지 제목을 숨기기위해 사용됩니다.

 이전 글에서 설명한 워드프레스 페이지를 만들 때 고를 수 있는 페이지 템플릿 중에는 기본 템플릿(Default)처럼 페이지 제목이 표시되는 템플릿 있는데, 이경우 페이지 세팅의 Hide Title 옵션을 켜서 페이지 제목 가릴 수 있습니다. 아래그림은 Hide Title이 꺼져있어서 페이지 제목이 보여지고 있는 상태입니다.

 가끔, 페이지 제목의 HTML 태그가 h1.entry-title 이 아닌 테마를 사용한다면 제목의 CSS 셀렉터를 찾아서 글로벌 세팅의 Page Title Selector에 써주면 적용될 겁니다.

제 경우 Newspaper 테마를 사용하면서 아래그림처럼 페이지 제목 위에 브레드크럼이 나오는데요. 브레드 크럼도 함께 감추고 싶었지만 브레드크럼과 페이지제목의 HTML이 서로 다른 구조를 가지고 있었습니다.

그래서 Page Title Selector 글로벌 세팅에 셀렉터 두 가지를 쉼표로 구분해 입력해놓고 둘 모두 감춰줄 수 있었습니다.

• .entry-crumbs : 뉴스페이퍼 테마의 브레드크럼을 선택하는 CSS 셀렉터
• h1.entry-title: 페이지 제목을 선택하는 CSS 셀렉터

자신이 사용하는 테마에서 이런 셀렉터를 찾는 방법은 HTML과 CSS 셀렉터에대한 이해를 기반으로 웹브라우저의 개발자 도구로 HTML DOM을 살펴보고 알아낼 수 있습니다. 

• 크롬 웹브라우저: 마우스 우클릭 > 검사
• 사파리 웹브라우저: 마우스 우클릭 > 요소 점검 

 

Global Settings > Lightbox

Elementor의 Lightbox 글로벌 설정을 해주는 속성인데요. 아래 그림처럼 Global Settings 위쪽에서 Lightbox 탭을 클릭하면 볼 수 있습니다.

 

라이트박스(lightbox)란, 그 어원이 사진이나 그림 그릴 때의 장비에서 따온 것인데, 웹디자인에서 이미지 라이트박스는 이미지를 클릭하면 이미지가 중간에 원본크기로 나오고 주변을 어둡게 처리해주는 UI를 말합니다. 

제 블로그 본문 글에서도 이미지를 클릭해보면 라이트박스 UI가 실행되므로 데스크탑에서 당장 확인해볼 수 있을 겁니다. 다만, 제 블로그 글의 라이트박스 효과는 제가 사용하는 테마의 기능입니다.

사진 뿐만 아니라 비디오 보기에서도 라이트박스가 쓰이곤 하는걸 보셨을 겁니다. Elementor에서도 비디오에대한 라이트박스를 사용할 수 있습니다.

Image Lightbox 

 Elementor에서 이미지와 관련된 모든 앨리먼트 위젯(image, image box, Image Gallery, Image Carosel 등)에 대해 라이트박스 효과를 사용하도록 설정합니다. 글로벌 설정인 이 옵션과 상관없이 개별 엘리먼트에서 라이트박스 효과를 끄거나 켤 수도 있습니다.

Enable In Editor

이 옵션을 켜면 Elementor 페이지 빌더에서도 이미지를 클릭하면 라이트박스가 나타나도록 해줍니다. 실제 렌더링되는 페이지에는 영향을 미치지 않습니다.

UI Color

라이트박스의 UI 버튼의 노멀상태 색상을 지정합니다.

UI Hover Color

라이트박스의 UI 버튼에 마우스 포인터를 올렸을 때(hover)의 색상을 지정합니다.

참고: 라이트 박스 UI는 x 닫기 버튼, 갤러리에서 이전, 다음이미지 화살표 같은 것들입니다.

다음단계

워드프레스 Elementor 시작하기 강좌 시리즈 연재작의 다음 글로는 엘리먼트 위젯의 구성과 글로벌 위젯에 대해 알아보겠습니다.