Elementor에서 첫 페이지 수정하기

케이테마 페이지를 Elementor로 열어 제목, 이미지, 버튼을 수정하고 PC·태블릿·모바일 화면을 확인하는 기본 과정입니다. 처음에는 새 요소를 추가하기보다 기존 요소의 내용만 변경하는 것을 권장합니다.

작업 전 확인

• Elementor와 KTheme Premium이 활성화되어 있어야 합니다.
• 페이지 → 모든 페이지에서 수정할 페이지를 확인합니다.
• 운영 사이트를 직접 수정하는 경우 먼저 백업합니다.
• 현재 화면을 별도 탭에서 열어 수정 전 상태를 확인합니다.

Elementor Editor V4를 사용 중이라면 패널 이름과 탭 구성이 다를 수 있습니다. 현재 KTheme Premium의 발행 기준은 Editor V3이며, V4 지원 범위는 호환성 검증 후 별도 안내합니다.

1. 페이지 열기

1. WordPress 관리자에서 페이지 → 모든 페이지로 이동합니다.
2. 수정할 페이지 제목 위에 마우스를 올립니다.
3. Elementor로 편집을 선택합니다.
4. 편집기 로딩이 끝날 때까지 기다립니다.

로그인 상태로 실제 페이지를 보고 있다면 상단 관리자 바의 Elementor로 편집을 사용할 수도 있습니다.

2. 편집기 화면 이해

Elementor 편집기는 세 영역으로 구성됩니다.

Editor V3에서 위젯을 선택하면 패널에 다음 탭이 표시됩니다.

• 콘텐츠: 텍스트, 이미지, 링크처럼 요소의 내용을 변경
• 스타일: 색상, 글꼴, 정렬, 여백처럼 보이는 방식을 변경
• 고급: 배치, 여백, 배경, 반응형 표시 등 공통 옵션

3. 제목 또는 본문 수정

1. 캔버스에서 수정할 제목이나 텍스트를 선택합니다.
2. 패널의 콘텐츠 탭에서 문구를 변경합니다.
3. 줄바꿈과 문장 길이가 기존 레이아웃을 벗어나지 않는지 확인합니다.
4. 색상이나 크기를 바꿔야 할 때만 스타일 탭을 사용합니다.

사이트 전체에서 사용하는 글꼴이나 색상을 개별 위젯마다 바꾸면 디자인 일관성이 깨질 수 있습니다. 공통 디자인 변경은 전역 색상·폰트·버튼 설정 또는 Elementor 전역 스타일과 케이테마 스타일 관계 문서를 따릅니다.

4. 이미지 변경

1. 캔버스에서 변경할 이미지를 선택합니다.
2. 패널의 콘텐츠 탭에서 현재 이미지를 선택합니다.
3. 미디어 라이브러리에서 이미지를 선택하거나 새 파일을 업로드합니다.
4. 이미지의 대체 텍스트를 입력합니다.
5. 이미지 크기와 링크 설정을 확인합니다.

기존 영역과 가로세로 비율이 크게 다른 이미지를 사용하면 PC와 모바일에서 잘릴 수 있습니다. 비슷한 비율의 이미지를 사용하고 반응형 화면을 확인하세요.

5. 버튼 문구와 링크 변경

1. 캔버스에서 버튼을 선택합니다.
2. 콘텐츠 탭에서 버튼 문구를 변경합니다.
3. 링크 입력란에 이동할 주소를 입력합니다.
4. 외부 사이트로 이동한다면 링크 설정에서 새 창 열기 여부를 결정합니다.
5. 버튼을 눌렀을 때 올바른 주소로 이동하는지 미리보기에서 확인합니다.

버튼 색상과 모양은 케이테마 전역 버튼 스타일을 우선 사용합니다. 페이지마다 다른 색상을 직접 지정하는 것은 특별한 목적이 있을 때만 사용하세요.

6. 반응형 화면 확인

1. 상단바에서 PC 화면을 확인합니다.
2. 태블릿 화면으로 전환해 텍스트 줄바꿈과 이미지 크기를 확인합니다.
3. 모바일 화면으로 전환해 버튼이 화면 밖으로 나가지 않는지 확인합니다.
4. 반응형 아이콘이 있는 값만 기기별로 다르게 조정합니다.
5. PC 화면으로 돌아와 원래 디자인이 바뀌지 않았는지 다시 확인합니다.

반응형 값은 넓은 화면에서 좁은 화면으로 상속될 수 있습니다. 모바일만 수정하려면 먼저 모바일 화면을 선택한 뒤 값을 변경하세요.

7. 저장하고 실제 화면 확인

1. 신규 페이지라면 발행, 기존 페이지라면 업데이트를 선택합니다.
2. 미리보기를 새 탭에서 엽니다.
3. 로그아웃 상태에서도 실제 페이지를 확인합니다.
4. PC와 모바일에서 텍스트, 이미지, 버튼 링크를 점검합니다.
5. 캐시 플러그인을 사용한다면 공개 화면이 바뀌지 않을 때만 캐시를 삭제합니다.

변경을 되돌리는 방법

• 저장 전 최근 작업은 Ctrl+Z 또는 Cmd+Z로 되돌릴 수 있습니다.
• Elementor의 작업 기록에서 최근 동작을 확인할 수 있습니다.
• 이미 업데이트한 페이지는 리비전에서 이전 저장 상태를 선택할 수 있습니다.
• 사이트 전체가 깨졌다면 추가 편집을 멈추고 백업 또는 업데이트 전 상태로 복구합니다.

자주 발생하는 문제

Elementor로 편집이 표시되지 않음

1. Elementor가 활성화되어 있는지 확인합니다.
2. Elementor 설정에서 페이지 콘텐츠 유형이 활성화되어 있는지 확인합니다.
3. 해당 페이지가 Elementor로 편집 가능한 유형인지 확인합니다.

편집기가 계속 로딩됨

1. 브라우저를 새로고침합니다.
2. Elementor 안전 모드에서 충돌 여부를 확인합니다.
3. Elementor와 KTheme Premium 버전을 확인합니다.
4. 캐시와 생성된 CSS·데이터를 재생성합니다.
5. 문제가 계속되면 최근 설치한 플러그인을 확인합니다.

편집 화면과 실제 화면이 다름

1. 페이지를 업데이트했는지 확인합니다.
2. WordPress·서버·CDN 캐시를 확인합니다.
3. Elementor CSS·데이터를 재생성합니다.
4. 로그인하지 않은 새 브라우저 창에서 다시 확인합니다.

기존 테마 사용자

기존 테마 사용자는 현재 Elementor 문서를 계속 이용할 수 있습니다.

• 기존 Elementor 사용법
• 기존 워드프레스 Elementor 안내

참고

• Elementor 공식 편집기 구조
• Elementor 공식 페이지 열기 안내
• Elementor 공식 위젯 편집 안내
• Elementor 공식 반응형 편집 안내