“코딩은 전혀 모르는데, 전문가가 만든 것 같은 예쁜 홈페이지를 직접 만들어볼 수 있을까요?”
워드프레스로 웹사이트를 제작할 때 가장 많은 추천을 받는 도구가 바로 전 세계 수천만 명이 사용 중인 1위 페이지 빌더 엘리멘터(Elementor)입니다. HTML이나 CSS 같은 복잡한 코드를 몰라도 마우스 드래그 앤 드롭 몇 번이면 멋진 레이아웃을 완성할 수 있죠.
하지만 처음 엘리멘터 편집 창을 열면 수많은 메뉴와 설정창 때문에 무엇부터 손대야 할지 막막하게 느껴지곤 합니다.
오늘 이 글에서는 초보자의 눈높이에 맞춰 엘리멘터의 3대 기본 구조부터 필수 위젯 활용법, 모바일 반응형 디자인 세팅까지 10분 만에 익힐 수 있는 기초 사용법을 명확하게 정리해 드리겠습니다. 이 글을 가이드 삼아 하나씩 따라 해보신다면 누구나 완성도 높은 나만의 웹페이지를 자유자재로 만드실 수 있습니다.
엘리멘터 레이아웃의 3대 핵심 구조 (섹션 · 컬럼 · 위젯)
엘리멘터로 디자인을 시작할 때 반드시 기억해야 할 3가지 뼈대 요소입니다.
- 섹션(Section) / 컨테이너(Container)
웹페이지의 가장 큰 가로 줄 영역(울타리)입니다. 배경색을 지정하거나 전체 폭을 조절하는 기본 바탕이 됩니다. - 컬럼(Column)
섹션 내부를 세로로 나눈 칸입니다. 1열, 2열, 3열 등 원하는 형태로 나누어 요소를 배치할 수 있습니다. - 위젯(Widget)
실제로 눈에 보이는 콘텐츠 요소(제목, 텍스트, 이미지, 버튼, 동영상 등)입니다. 왼쪽에 위치한 위젯 패널에서 원하는 요소를 마우스로 끌어다 컬럼 안에 내려놓으면 바로 배치됩니다.
초보자를 위한 엘리멘터 3단계 편집 흐름
실제 페이지를 디자인할 때는 아래의 3단계 흐름으로 작업을 진행합니다. 처음에는 어려워 보일 수 있지만 파워포인트로 PPT 만든다 생각하고 만들어 보시면 쉽게 적응하실 수 있으실 거에요.
1) 1단계 : 구조(컬럼) 선택 및 섹션 생성
- 편집 화면 중앙의 + (섹션 추가) 버튼을 눌러 원하는 열 구조(예: 2컬럼 레이아웃)를 선택합니다.
2) 2단계 : 위젯 드래그 앤 드롭 배치
- 좌측 패널에서 Heading(제목), Text Editor(본문), Image(이미지), Button(버튼) 등의 기본 위젯을 원하는 컬럼 위치로 끌어다 놓습니다.
3) 3단계 : 3가지 탭(내용·스타일·고급)을 통한 세부 디자인
- 편집할 요소를 클릭하면 좌측 패널이 3개 탭으로 변경됩니다.
- 내용(Content) : 문구 수정, 이미지 교체, 링크 주소 삽입
- 스타일(Style) : 폰트 종류, 글자 크기, 텍스트 색상, 배경색, 테두리 조정
- 고급(Advanced) : 여백 조정(Margin/Padding), 애니메이션 효과, 반응형 숨김 설정
초보자를 위한 꿀팁 : 무료 템플릿 라이브러리 활용법
처음부터 빈 페이지에 디자인을 구성하기 어렵다면, 엘리멘터가 기본 제공하는 무료 템플릿(Blocks & Pages)을 불러와 수정하는 것이 훨씬 빠르고 고품질의 결과물을 만듭니다.
1) 편집 창의 폴더 아이콘(Add Template)을 클릭합니다.
2) 라이브러리 창에서 원하는 디자인 형태의 템플릿을 선택합니다. (PRO 표시가 없는 무료 템플릿 선택)
3) Insert(삽입) 버튼을 눌러 내 페이지로 불러옵니다.
4) 불러온 템플릿의 문구와 이미지를 내 브랜드에 맞게 클릭하여 수정합니다.
모바일 반응형 웹사이트 완벽 대응하기
스마트폰 접속자가 대부분인 요즘, 모바일 화면 최적화(반응형 디자인)는 선택이 아닌 필수입니다. 모바일, 태블릿 화면도 빌더에서 체크해가며 수정해주시는게 중요한 포인트입니다.
- 하단 툴바의 반응형 모드(Responsive Mode) 아이콘을 클릭합니다.
- 화면 상단에서 데스크톱 / 태블릿 / 모바일 기기별 모드를 전환합니다.
- 모바일 화면에서 글자 크기가 너무 크거나 여백이 좁다면, 모바일 모드 상태에서 글자 크기와 Margin/Padding 값을 조정해 줍니다. (모바일 상태에서 바꾼 스타일은 PC 화면에 영향을 주지 않고 유지됩니다.)
요약
엘리멘터 페이지 빌더의 주요 탭과 핵심 기능을 정리해 드립니다.
| 구분 | 핵심 역할 | 주요 설정 항목 |
|---|---|---|
| 내용 (Content) | 콘텐츠 뼈대 입력 | 텍스트 입력, 이미지 선택, 링크 연결, 정렬 방식 |
| 스타일 (Style) | 외관 시각 디자인 | 폰트(타이포그래피), 색상, 투명도, 테두리, 음영 |
| 고급 (Advanced) | 상세 위치 및 효과 | 외부 여백(Margin), 내부 여백(Padding), 반응형 설정 |
| 반응형 모드 | 기기별 화면 최적화 | 모바일/태블릿 맞춤 글자 크기 및 레이아웃 조절 |
| 템플릿 라이브러리 | 완성형 레이아웃 도입 | 블록 및 전체 페이지 디자인 원클릭 불러오기 |
마치며
이번 글에서는 드래그 앤 드롭 방식으로 배우는 엘리멘터 페이지 빌더의 기초 사용법에 대해 알아보았습니다.
웹사이트 디자인이 어렵게 느껴지는 이유는 복잡한 코딩 때문이었지, 디자인 구상 그 자체가 어렵기 때문은 아닙니다. 엘리멘터를 활용하면 마우스 클릭 몇 번과 템플릿 수정만으로도 10분 만에 훌륭한 랜딩 페이지의 틀을 잡아낼 수 있습니다.
유료로 결제해야 고급 기능을 활용할 수 있지만 이건 추후에 플러그인을 별도로 추가하여 수정 가능한 부분이니 기본 기능만으로도 충분한 엘리멘터를 이용하여 사이트의 기본 뼈대를 만들어 보시는 걸 추천드립니다.
지금 바로 워드프레스 페이지 편집 창을 열고 Edit with Elementor 버튼을 눌러보세요. 직접 요소를 끌어다 놓으며 나만의 사이트를 만들어가는 과정이 놀랍도록 쉽고 재미있어질 것입니다.
