티스토리 뷰
목차
Elementor로 첫 랜딩페이지 만들기 (비주얼 에디터 완전 정복!)
“예쁘고 감각적인 홈페이지, 코딩 없이 만들 수 있을까?” 그 해답은 바로 Elementor에 있습니다.
오늘은 워드프레스에서 가장 인기 있는 비주얼 페이지 빌더인 Elementor를 이용해 처음으로 나만의 랜딩페이지를 만드는 방법을 단계별로 알려드릴게요. 웹디자인 경험이 없어도 괜찮습니다
Elementor란 무엇인가요?
Elementor는 워드프레스에서 사용할 수 있는 드래그 앤 드롭 방식의 페이지 빌더 플러그인입니다.
HTML이나 CSS를 몰라도, 마우스로만 클릭하고 이동해서 홈페이지를 만들 수 있어요.
주요 특징:
- 무료로 사용 가능 (Pro 버전은 고급 기능 제공)
- 수백 개의 템플릿 및 섹션 디자인
- 모바일 반응형 자동 지원
- 실시간 시각 편집 (변경 즉시 확인 가능)
Elementor 설치 방법
관리자 페이지 → 플러그인 > 새로 추가 클릭
검색창에 Elementor 입력 → 설치 → 활성화
📦 플러그인 이름: Elementor Website Builder
설치 후, 페이지 또는 글 편집 화면에 “Elementor로 편집” 버튼이 생성됩니다.
새 랜딩페이지 만들기 (Step-by-Step)
📌 랜딩페이지란? 광고나 소개, 특정 상품 홍보 등을 목적으로 만든 단일 페이지입니다.
- 페이지 > 새 페이지 추가 클릭
- 제목 예: “내 첫 번째 랜딩페이지”
- 템플릿 → Elementor 캔버스로 변경
- “Elementor로 편집” 클릭
드래그 앤 드롭으로 디자인하기
Elementor 에디터 화면에서 좌측에 다양한 위젯(기능 블록)을 확인할 수 있어요:
- Heading (제목)
- Text Editor (본문)
- Image (이미지)
- Button (버튼)
- Divider, Spacer 등 레이아웃 정리 요소
마우스로 원하는 위젯을 중앙 작업 공간에 끌어다 놓기만 하면 끝!
추천 섹션 구성 예시:
- 인트로 헤더 (큰 제목 + 부제목)
- 서비스 소개 (3열 이미지 + 설명)
- 후기 또는 강점 나열
- 문의하기 버튼 + SNS 링크
기본 디자인 팁 (처음이라도 감각있게)
- 폰트: Noto Sans KR, Pretendard 등 깔끔한 한글 웹폰트
- 색상 조합: 2~3가지 메인 컬러만 사용 (톤앤톤)
- 이미지: Unsplash, Pixabay에서 저작권 무료 이미지 사용
- 간격: 너무 붙지 않게 여백 조정 (Padding 활용)
디자인 기본 원칙: “간결하게, 읽기 쉽게, 클릭 유도 있게”
저장 & 게시하기
작업이 끝났다면 상단의 “게시” 버튼을 클릭해 사이트에 반영합니다.
미리 보기로 데스크탑/태블릿/모바일 화면을 체크해 보고, 모바일에 맞는 간격도 꼭 조정하세요!
Elementor 무료 vs Pro 버전 차이
| 기능 | 무료 버전 | pro 버전 |
| 기본 위젯 | ✓ | ✓ |
| 슬라이더, 폼, 팝업 등 고급 위젯 | ✗ | ✓ |
| 테마 빌더 (헤더/푸터 커스터마이징) | ✗ | ✓ |
| 템플릿 키트 사용 | 일부 | 모두 가능 |
결론: 초보자는 무료 버전으로 충분히 시작 가능! 필요시 Pro로 확장하세요.
마무리하며 – 처음이 어렵지만, 감각은 익혀집니다
처음에는 낯설고 어려울 수 있지만, 한두 번만 해보면 정말 재미있고 쉬워져요. 특히 Elementor는 디자인 감각 없이도 전문가처럼 보이는 랜딩페이지를 만들 수 있는 도구입니다.