테마 선택 흐름#
Diagram · Mermaid
추천 테마#
| 테마 | 가격 | 특징 |
|---|---|---|
| Astra | 무료 (Pro 유료) | 가볍고 빠름, Elementor 최적화 |
| Hello Elementor | 무료 | Elementor 공식 최소 테마 |
| OceanWP | 무료 (확장 유료) | 다목적, WooCommerce 지원 |
| Divi | $89/년 | 자체 빌더 내장 |
| Avada | $69 (일회성) | 기업 사이트·포트폴리오 |
쇼핑몰이라면 Astra Pro + Elementor 조합을 추천합니다.
테마 설치#
Text
외모 > 테마 > 새로 추가
→ 검색창에 "Astra" 입력
→ 설치 > 활성화
유료 테마 (zip 파일 다운로드 후):
외모 > 테마 > 새로 추가 > 테마 업로드
→ zip 파일 선택 > 지금 설치 > 활성화
Elementor 설치 및 기본 사용#
Text
플러그인 > 새로 추가 > "Elementor" 검색
→ Elementor Website Builder 설치 및 활성화
Elementor 편집 화면 구조#
Text
┌─────────────────────────────────────────┐
│ 패널 (왼쪽) │ 캔버스 (오른쪽) │
│ ┌──────────────┐ │ │
│ │ 위젯 검색 │ │ 실시간 미리보기 │
│ │ ─────────── │ │ │
│ │ 기본 위젯 │ │ 드래그해서 추가 │
│ │ 텍스트 편집기│ │ │
│ │ 이미지 │ │ │
│ │ 버튼 │ │ │
│ │ 섹션 나누기 │ │ │
│ └──────────────┘ │ │
└─────────────────────────────────────────┘
섹션 구조 이해#
Text
페이지
└── 섹션 (Section) — 가로 전체 영역
└── 컬럼 (Column) — 1/2, 1/3 등 분할
└── 위젯 (Widget) — 텍스트, 이미지, 버튼 등
글로벌 스타일 설정#
일관된 디자인을 위해 색상과 폰트를 전역으로 설정합니다.
Text
Elementor > Site Settings (또는 햄버거 메뉴 > Site Settings)
Global Colors:
Primary : #2563EB (브랜드 메인 색)
Secondary : #1E40AF
Text : #1F2937
Accent : #F59E0B
Global Fonts:
Primary : Noto Sans KR (본문)
Secondary : Noto Serif KR (헤딩)
헤더 & 푸터 만들기#
Elementor Pro 또는 Astra 테마 커스터마이저로 헤더/푸터를 구성합니다.
Text
외모 > 커스터마이즈
└── 헤더 빌더
├── 헤더 행 1: 로고 | 메뉴 | 검색
├── 모바일 헤더: 햄버거 메뉴
└── 스티키 헤더: 스크롤 시 고정
└── 푸터 빌더
├── 열 1: 회사 소개 + 로고
├── 열 2: 빠른 링크
├── 열 3: 연락처
└── 하단 바: 저작권 © 2026
홈페이지 템플릿 적용#
Elementor 템플릿 라이브러리에서 원클릭으로 디자인을 가져올 수 있습니다.
Text
페이지 편집 > Elementor로 편집
→ 폴더 아이콘 (템플릿 라이브러리)
→ 페이지 탭 → 원하는 템플릿 선택
→ 삽입
이후 텍스트·이미지만 교체하면 완성.
반응형 디자인#
Elementor 하단 디바이스 아이콘으로 화면별 조정이 가능합니다.
Text
🖥 데스크톱 📱 모바일 📱 태블릿
모바일에서만 숨기기:
위젯 선택 > 고급 탭 > 반응형 > 모바일에서 숨기기
모바일 폰트 크기 조정:
텍스트 위젯 > 스타일 > 폰트 크기 > 📱 아이콘 클릭 후 별도 설정
CSS 커스터마이징 (고급)#
테마나 위젯에 없는 스타일은 커스텀 CSS로 추가합니다.
CSS
/* 외모 > 커스터마이즈 > 추가 CSS */
/* 버튼 hover 효과 */
.elementor-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* 모바일 폰트 크기 */
@media (max-width: 767px) {
h1 { font-size: 2rem !important; }
h2 { font-size: 1.5rem !important; }
}
/* 전체 폰트 (Google Fonts 적용 후) */
body {
font-family: 'Noto Sans KR', sans-serif;
}한국어 폰트 적용#
Text
플러그인: Google Fonts Typography 또는 Astra 커스터마이저
외모 > 커스터마이즈 > 글꼴 전체 설정
→ Google 폰트 검색: "Noto Sans KR"
→ 기본 폰트, 헤딩 폰트 각각 적용
정리#
| 작업 | 도구 |
|---|---|
| 테마 설치 | 외모 > 테마 |
| 페이지 디자인 | Elementor 빌더 |
| 색상·폰트 통일 | Site Settings > Global |
| 헤더·푸터 | Astra 커스터마이저 |
| 반응형 조정 | Elementor 디바이스 모드 |
다음 편에서는 페이지 & 콘텐츠 구성 — 메뉴, 위젯, 블로그 포스트, 연락처 페이지 만드는 방법을 배웁니다.
