워드프레스 매뉴얼
Elementor 페이지 빌더 편집 사용법과 SEO·성능 최적화 가이드를 한 곳에 정리했습니다.
Elementor — Interface
에디터 화면 구성
Elementor 에디터는 왼쪽 패널 + 오른쪽 캔버스 구조입니다. 캔버스에서 직접 클릭·드래그로 요소를 배치하고, 패널에서 세부 설정을 조정합니다.
PANEL
왼쪽 사이드바. 위젯 검색·드래그, 섹션/컬럼/위젯 설정(Content·Style·Advanced) 표시.
CANVAS
실제 페이지 미리보기 영역. 클릭으로 요소 선택, 드래그로 위치 변경.
BOTTOM BAR
반응형 뷰 전환(PC·태블릿·모바일), 히스토리, 저장/게시 버튼.
Elementor — Structure
섹션 → 컬럼 → 위젯 구조
모든 Elementor 레이아웃은 3단계 계층 구조로 이루어집니다. 반드시 이 순서를 이해해야 합니다.
SECTION (섹션)
페이지의 가로 전체를 차지하는 행(row). 배경색·배경 이미지·여백 설정의 기본 단위.
COLUMN (컬럼)
섹션을 세로로 분할. 1~6열로 설정. 각 컬럼 너비는 % 단위로 자유 조절.
WIDGET (위젯)
컬럼 안에 배치되는 실제 콘텐츠 요소. 텍스트·이미지·버튼·갤러리 등 90+ 종류.
Elementor — Widgets
핵심 위젯 사용법
자주 쓰는 FREE 위젯
| 위젯 | 주요 설정 포인트 |
|---|---|
| Heading | HTML Tag(H1~H6) 선택, 타이포그래피 설정 필수 |
| Text Editor | WYSIWYG 편집기, HTML 직접 입력 가능 |
| Image | 크기(Custom/Full), 링크, Lightbox 연결 |
| Button | 타입(기본·아웃라인·링크), 아이콘 좌우 추가 |
| Divider | 구분선 스타일·색상·너비·여백 조정 |
| Image Box | 이미지+제목+설명 세트. 카드형 레이아웃에 활용 |
| Icon Box | SVG/Font Awesome 아이콘+텍스트 조합 |
| Video | YouTube·Vimeo URL 붙여넣기, Lightbox 옵션 |
| Google Maps | 주소 입력으로 지도 삽입, 높이 조정 |
| Shortcode | Contact Form 7 등 플러그인 단축코드 삽입 |
PRO 전용 위젯 (주요)
| 위젯 | 용도 |
|---|---|
| Slider | 이미지 슬라이더 (Ken Burns 효과 포함) |
| Carousel | 콘텐츠 회전형 슬라이더 |
| Flip Box | 마우스 오버 시 카드 뒤집기 효과 |
| Price Table | 요금제 표 레이아웃 |
| Form | 고급 폼 빌더, 이메일 마케팅 연동 |
| Popup | 조건·트리거 설정 팝업 빌더 |
| Nav Menu | 커스텀 메가 메뉴 제작 |
| Lottie | JSON 애니메이션 파일 삽입 |
Elementor — Settings Tabs
Content / Style / Advanced 탭 완전 가이드
위젯을 클릭하면 왼쪽 패널에 세 개의 탭이 나타납니다. 각 탭의 역할을 정확히 알아야 빠른 편집이 가능합니다.
CONTENT 탭
- 텍스트 내용 입력
- 이미지/비디오 파일 선택
- 링크 URL 설정
- 아이콘 종류 선택
- 컬럼 수·레이아웃 변경
- 슬라이드 항목 추가/삭제
STYLE 탭
- 폰트 종류·크기·굵기·색상
- 배경색·그라디언트·이미지
- 테두리(Border) 두께·색·반경
- 그림자(Box Shadow)
- Padding(안쪽) / Margin(바깥)
- 호버(Hover) 상태 별도 스타일
ADVANCED 탭
- 여백 세밀 조정 (링크 해제 후 개별 입력)
- Z-Index (겹침 순서)
- CSS ID / CSS 클래스 지정
- 커스텀 CSS 직접 입력
- 반응형 숨김 (모바일 숨기기)
- 입장 애니메이션 (Fade·Slide·Zoom 등)
Elementor — Responsive
반응형 편집
- 디바이스 모드 전환하단 바의 PC·태블릿·모바일 아이콘 클릭. 각 디바이스에서 다른 설정값 저장 가능.
- 모바일 전용 폰트 크기Style 탭 → Typography → 폰트 크기 옆 디바이스 아이콘 클릭 → 모바일 값 별도 입력.
- 컬럼 순서 변경모바일에서 컬럼 순서가 바뀌어 보일 경우 Column Order 설정으로 조정.
- 요소 숨기기Advanced 탭 → Responsive → Hide On (Mobile/Tablet/Desktop) 체크박스로 특정 디바이스에서 숨김.
- 모바일 패딩섹션/컬럼을 모바일 뷰에서 선택 후 Padding 값을 별도로 축소 조정.
Elementor — Global Style
글로벌 색상 & 폰트
Elementor 설정(햄버거 메뉴) → Site Settings → Global Colors/Fonts에서 사이트 전체에 적용되는 색상과 폰트를 정의합니다.
글로벌 색상 활용법
- 색상 추가Global Colors에서 [+] → 이름 지정(예: Brand Primary) → 색상 코드 입력
- 위젯에 적용색상 선택기 열기 → Global Colors 탭 클릭 → 저장된 색상 선택
- 일괄 변경Global Colors에서 색상값만 수정하면 해당 색을 사용하는 모든 위젯에 자동 반영
구글 폰트 연결
Global Fonts에서 폰트 추가 시 Google Fonts 목록이 자동 로드됩니다. 한국어 사이트는 Noto Sans KR 또는 Pretendard를 Primary Font로 설정하는 것을 권장합니다.
Elementor — Templates
템플릿 저장 & 재사용
내 템플릿 저장
- 섹션 우클릭캔버스에서 섹션 핸들(파란 점) 우클릭 → [Save as Template]
- 이름 지정 후 저장재사용할 목적에 맞게 이름 입력 (예: "메인 히어로 섹션")
- 다른 페이지에서 불러오기새 페이지 편집 → 폴더 아이콘 → My Templates 탭 → 삽입
Template Library (무료 블록)
폴더 아이콘 → Blocks 탭에서 Elementor가 제공하는 무료 디자인 블록을 바로 삽입할 수 있습니다.
| 카테고리 | 예시 블록 |
|---|---|
| Hero | 배너·슬라이드·풀스크린 히어로 |
| Features | 아이콘+텍스트 특징 소개 |
| Testimonials | 고객 후기 카드 |
| CTA | 버튼 포함 행동 유도 섹션 |
| Contact | 지도·폼·연락처 조합 |
Elementor — Shortcuts
단축키 & 실전 팁
필수 단축키
| 단축키 | 동작 |
|---|---|
| Ctrl + Z | 실행 취소 |
| Ctrl + Shift + Z | 다시 실행 |
| Ctrl + S | 저장 |
| Ctrl + D | 선택 요소 복제 |
| Ctrl + C / V | 복사 / 붙여넣기 |
| Ctrl + P | 미리보기 모드 토글 |
| Esc | 상위 요소로 포커스 이동 |
| Ctrl + E | Finder 검색 열기 |
실전 팁
- 우클릭 활용 캔버스에서 요소 우클릭 시 복사·복제·삭제·저장 메뉴 등장. 마우스 이동 최소화.
- Navigator 패널 왼쪽 하단 레이어 아이콘(Navigator) 열면 섹션/컬럼/위젯 계층 구조 한눈에 확인. 복잡한 레이아웃 편집 시 필수.
- 여백 드래그 조정 섹션/컬럼을 선택하면 Padding 값을 캔버스에서 직접 드래그해 조정할 수 있습니다.
- CSS 클래스 지정 Advanced → CSS Classes에 클래스명 입력 후 차일드 테마 CSS로 스타일 오버라이드 — 업데이트에 안전.
- Revision History 왼쪽 하단 시계 아이콘으로 이전 저장 버전으로 롤백. 실수 후 복구에 유용.
Navigation Menu
메뉴 생성 및 위치 지정
- 메뉴 관리 페이지 접속관리자 → 외모 > 메뉴 클릭. 또는 커스터마이저(외모 → 커스터마이즈) → 메뉴 탭에서도 실시간 미리보기로 편집 가능.
- 새 메뉴 만들기[새 메뉴 만들기] 클릭 → 메뉴 이름 입력(예: "주 메뉴") → [메뉴 만들기] 버튼 클릭.
- 메뉴 항목 추가왼쪽 패널에서 페이지·게시물·카테고리·사용자 정의 링크를 선택 후 [메뉴에 추가] 클릭.
- 순서 및 계층 조정메뉴 항목을 드래그해 순서 변경. 항목을 오른쪽으로 밀면 들여쓰기 → 하위 메뉴(드롭다운)로 등록.
- 메뉴 위치 지정하단 [메뉴 설정] → 테마가 제공하는 위치(기본 메뉴·헤더·푸터 등) 체크박스 선택.
- 저장[메뉴 저장] 버튼 클릭. 프론트에서 즉시 반영됩니다.
Menu Item Types
추가 가능한 항목 종류
| 종류 | 설명 |
|---|---|
| 페이지 | WordPress 고정 페이지. 가장 일반적인 메뉴 항목. |
| 게시물 | 특정 블로그 글로 직접 연결. |
| 카테고리 | 해당 카테고리 아카이브 페이지로 연결. |
| 태그 | 태그 아카이브 페이지로 연결. |
| 사용자 정의 링크 | 외부 URL 또는 앵커(#section) 링크 삽입. |
| WooCommerce | 장바구니·마이페이지·상점 등 WC 전용 항목 (플러그인 활성화 시 표시). |
Dropdown Menu
드롭다운 서브메뉴 만들기
메뉴 항목을 부모 항목 아래에 배치하고 오른쪽으로 드래그해 들여쓰면 자동으로 드롭다운 구조가 만들어집니다.
Menu Options
항목 세부 옵션
메뉴 항목 오른쪽의 ▼ 화살표를 클릭하면 숨겨진 세부 옵션이 펼쳐집니다. 옵션이 보이지 않으면 오른쪽 상단 화면 옵션 탭을 열어 "링크 대상", "CSS 클래스", "링크 관계(XFN)", "설명" 체크박스를 활성화하세요.
| 옵션 | 용도 |
|---|---|
| 내비게이션 레이블 | 메뉴에 표시되는 텍스트. 페이지 제목과 다르게 줄여서 표시 가능. |
| 타이틀 속성 | 마우스 오버 시 툴팁으로 표시되는 설명. |
| 링크 대상 | _blank 선택 시 새 탭에서 열림. 외부 링크에 권장. |
| CSS 클래스 | 특정 메뉴 항목에 개별 스타일 적용 시 사용. |
Elementor 헤더와 메뉴 연동
- Nav Menu 위젯 배치Elementor 헤더 섹션에 Nav Menu 위젯 드래그 (PRO 필요)
- 메뉴 선택Content 탭 → Menu 드롭다운에서 관리자에서 만든 메뉴 선택
- 레이아웃 설정Horizontal / Vertical / Dropdown 중 선택 후 스타일 조정
- 모바일 햄버거Responsive 탭에서 모바일 토글 버튼 스타일 설정
Blog Post
블로그 글(게시물) 작성 기본 흐름
- 새 글 작성 시작관리자 → 글 > 새로 추가 클릭. 또는 관리자 상단 바의 [+ 새로 추가]에서 [글] 선택.
- 제목 입력상단 "제목 추가" 영역에 글 제목 입력. 제목은 H1 태그로 출력되며 SEO에 직접 영향을 줍니다.
- 본문 작성블록 에디터(구텐베르크) 또는 [Elementor로 편집] 버튼으로 상세 내용 작성.
- 카테고리 & 태그 설정오른쪽 사이드바 → 카테고리 체크박스 선택, 태그 입력 후 엔터.
- 대표 이미지(썸네일) 설정오른쪽 사이드바 → [대표 이미지 설정] 클릭 → 미디어 라이브러리에서 이미지 선택.
- 발행오른쪽 상단 [발행] 버튼. 예약 발행이 필요하면 날짜 항목 클릭 후 날짜·시간 지정 → [예약].
Category & Tag
카테고리 vs 태그
카테고리와 태그 모두 글을 분류하는 분류체계이지만 목적이 다릅니다.
| 카테고리 | 태그 | |
|---|---|---|
| 성격 | 큰 주제 그룹 | 세부 키워드 |
| 계층 | 부모-자식 구조 가능 | 계층 없음 (평면) |
| 수량 | 글당 1~3개 권장 | 글당 5~10개 권장 |
| 필수 여부 | 필수 (미선택 시 "미분류") | 선택 사항 |
| URL 예시 | /category/news/ | /tag/wordpress/ |
Post Status
글 상태 & 공개 범위
| 상태 | 설명 |
|---|---|
| 발행됨 | 누구나 볼 수 있는 공개 상태. |
| 비공개 | 관리자·편집자만 볼 수 있음. URL로 직접 접근해도 404. |
| 암호 보호 | 비밀번호 입력 시에만 내용 표시. |
| 임시글 | 자동저장 포함. 발행 전 초안 상태. |
| 예약됨 | 지정 날짜·시간에 자동 발행. |
| 휴지통 | 삭제 후 30일간 보관, 복원 가능. |
Blog List Page
블로그 목록 페이지 설정
블로그 홈 페이지 지정
- 정적 페이지 설정관리자 → 설정 > 읽기 → "정적 페이지" 선택
- 홈페이지 지정홈페이지 드롭다운에서 랜딩 페이지 선택
- 글 페이지 지정글 페이지 드롭다운에서 블로그 목록으로 쓸 빈 페이지 선택 (예: "Blog")
- 한 페이지당 글 수같은 화면에서 "블로그 페이지 표시" 숫자 조정 (기본 10개)
고유주소(Permalink) 설정
설정 > 고유주소에서 URL 구조를 변경합니다. SEO에 최적화된 구조를 권장합니다.
| 구조 | URL 예시 |
|---|---|
| 기본 | /?p=123 비권장 |
| 날짜 포함 | /2026/04/post-name/ |
| 포스트명 | /post-name/ 권장 |
| 사용자 정의 | /blog/%postname%/ |
Featured Image
대표 이미지 & 발췌문
- 대표 이미지 설정글 편집 → 오른쪽 [대표 이미지 설정]. 목록 썸네일·SNS 공유 이미지·OG 이미지로 자동 활용.
- 이미지 규격권장 1200×630px (SNS 공유 최적 비율 1.91:1). 최소 800px 이상.
- 발췌문 작성오른쪽 [발췌문] 텍스트박스에 150자 내외 요약 입력. 목록 페이지와 검색 결과 미리보기에 표시.
- 자동 발췌문발췌문 비워두면 본문 첫 55단어가 자동 생성됨. 수동 입력이 SEO에 유리.
Comments
댓글 관리
설정 > 토론에서 댓글 정책을 일괄 설정하고, 개별 글에서 댓글 허용 여부를 개별 조정합니다.
| 설정 항목 | 권장값 |
|---|---|
| 댓글 게재 전 승인 | 활성화 (스팸 방지) |
| 자동 댓글 닫기 | 발행 후 30일 |
| 스팸 방지 | Akismet 플러그인 활성화 |
| 댓글 알림 이메일 | 새 댓글·승인 대기 알림 활성화 |
| Gravatar | 아바타 표시 옵션 설정 |
Yoast SEO — 일반 설정
SEO Setup
Yoast SEO 기본 설정
- 설치 마법사 실행플러그인 활성화 후 대시보드에서 Yoast 설정 마법사 실행. 사이트 종류, 기업명, 소셜 채널 입력.
- 사이트맵 활성화Yoast → 일반 → 기능에서 XML 사이트맵 활성화. 구글/네이버 서치 콘솔에 제출.
- 페이지별 메타 작성각 게시물/페이지 편집 화면 하단의 Yoast 박스에서 SEO 제목, 메타 설명 직접 입력.
- Focus Keyphrase주요 키워드를 Focus Keyphrase에 입력하면 콘텐츠 최적화 점수를 확인할 수 있습니다.
- 소셜 미리보기Facebook, Twitter 탭에서 SNS 공유 시 표시될 이미지와 텍스트를 별도 설정.
Performance
사이트 속도 최적화
| 최적화 방법 | 도구/방법 |
|---|---|
| 페이지 캐시 | WP Super Cache 또는 W3 Total Cache |
| 이미지 압축 | Smush, ShortPixel (WebP 변환 포함) |
| Lazy Loading | WordPress 5.5+ 기본 지원 |
| CSS/JS 최소화 | Autoptimize 플러그인 |
| CDN 연결 | Cloudflare 무료 플랜 (한국 PoP 포함) |
| DB 최적화 | WP-Optimize로 주기적 정리 |
Security & Maintenance
보안 강화 및 유지보수 체크리스트
정기 유지보수 (월 1회)
- WordPress 코어, 테마, 플러그인 업데이트
- 전체 백업 저장 및 복구 테스트
- 사용하지 않는 플러그인·테마 삭제
- 브로크 링크 스캔 및 수정
- Google Search Console 오류 확인
- 스팸 댓글 정리 및 Akismet 설정 확인
보안 강화 설정
define('DISALLOW_FILE_EDIT', true);
define('DISALLOW_FILE_MODS', false);
define('FORCE_SSL_ADMIN', true);
define('WP_DEBUG', false);
/* .htaccess 에 추가 */
Options -Indexes
<Files wp-config.php>
deny from all
</Files>