일반 HTML, CSS, JavaScript로 만든 페이지가 있고, Elementor 안에서 계속 편집하고 싶다면 — 처음부터 다시 만들지도 않고, 코드 위젯에 갇혀 두지도 않는 방법이 필요합니다. 이것이 바로 변환기가 필요한 작업입니다. 다만 세 부분(HTML, CSS, JS)은 각각 다르게 동작하므로 하나씩 살펴보는 것이 좋습니다.
목표: 삽입이 아니라 편집 가능한 상태
기존 HTML을 Elementor로 가져오는 방법 중 실제로는 적절하지 않은 두 가지 방법이 있습니다. HTML 위젯에 붙여넣으면 하나의 블록으로 삽입되어 시각적으로 편집할 수 없습니다. 손으로 다시 만들면 작동하지만 이미 가지고 있는 마크업을 버리게 됩니다. 실제로 원하는 것은 제목은 Heading 위젯, 텍스트는 Text Editor 위젯, 버튼은 Button 위젯, 레이아웃은 실제 Container가 되어 — 이후 Elementor 패널에서 모든 부분을 편집할 수 있는 것입니다.
HTML은 네이티브 위젯이 됩니다
HTML을 변환기에 붙여넣고 네이티브 컴포넌트 모드를 선택하세요. 각 요소는 그에 맞는 Elementor 위젯으로 매핑됩니다. 제목은 Heading, 문단과 목록은 Text Editor, 이미지는 Image, 버튼처럼 스타일된 링크는 Button, 감싸는 요소는 Container로요. 결과를 Elementor에 붙여넣으면 그 사이에 코드 위젯은 없으며 — 평범한 페이지입니다.
CSS는 버려지지 않고 읽힙니다
사람들이 걱정하는 부분이지만, 사실 가장 잘 작동하는 부분입니다. 변환기는 스타일을 버리지 않습니다. 브라우저가 실제로 계산한 스타일을 읽어 해당 위젯 컨트롤에 기록합니다. 패딩, 여백, 색상, 테두리, 모서리 반경, 그림자, 배경, 글꼴 패밀리, 크기, 굵기, 줄 높이, 자간이 모두 네이티브 Elementor 필드로 옮겨져 스타일시트에 남아 있지 않고 계속 편집할 수 있습니다.
이것이 작동하려면 변환할 때 CSS가 존재해야 합니다. 인라인 스타일이나 단일 <style> 블록은 완벽하게 읽힙니다. 붙여넣는 파일에 포함되지 않은 외부 스타일시트는 읽히지 않습니다. 페이지가 스타일 없이 렌더링되고, 스타일이 없는 상태 그대로 변환되기 때문입니다. 따라서 CSS를 인라인으로 만들거나 스타일시트를 먼저 <style> 블록에 붙여넣으세요. 시각적 선택기도 있어서 단일 블록을 잡으면 페이지 스타일시트를 함께 가져오므로 클래스 기반 스타일도 올바르게 변환됩니다.
JavaScript는 솔직한 예외입니다
JavaScript는 변환되지 않으며, 그것은 의도된 것입니다. 스크립트는 안전을 위해 제거됩니다. 붙여넣기 작업을 통해 임의의 JS를 가져오는 것은 위험할 수 있고, 어차피 편집기 안에서 안정적으로 실행되지도 않습니다. 따라서 JS가 만든 모든 것(슬라이더, 탭, 아코디언, 카운터, 스크롤 애니메이션)은 정적 마크업으로 도착합니다.
올바른 방법은 스크립트를 다시 붙여넣는 것이 아니라 해당 상호작용을 맞는 Elementor 위젯으로 다시 만드는 것입니다. Elementor에는 네이티브 Tabs, Accordion, Carousel, Counter, Progress 위젯과 애니메이션을 위한 자체 Motion Effects가 있습니다. 가져온 스크립트보다 유지보수하기 좋고 이미 사이트가 로드하는 번들에 포함되어 있습니다. 실제로는 전체 페이지를 몇 초 만에 변환한 다음 상호작용이 있는 몇 개의 부분을 네이티브로 다시 만드는 데 몇 분을 쓰면 됩니다.
현실적인 단계별 안내
- HTML과 CSS를 하나의 파일로 합치세요 — 마크업과 단일 스타일 블록으로요. 이미지가 로컬 경로로 참조되어 있다면 미디어 라이브러리에 업로드하고 해당 URL을 사용하거나, 플레이스홀더를 사용하세요.
- 변환기에 붙여넣고 네이티브 컴포넌트 모드를 선택한 다음, 아이콘을 Elementor 라이브러리와 일치시킬지, 색상과 글꼴에 사이트 값 또는 원본 값을 사용할지 선택하세요.
- 구조 맵을 확인하세요: 구성 요소 수, 중첩 깊이, 어떤 행이 HTML로 남았는지 확인하세요.
- Elementor 데이터를 복사해 페이지에 붙여넣거나 JSON 템플릿을 다운로드해 가져오세요.
- JS 기반 상호작용은 맞는 네이티브 위젯으로 다시 만들고, 버튼 호버 상태를 설정하고, 세 가지 기기 뷰를 차례로 확인하세요.
결과적으로 얻게 되는 것
평범한 Elementor 페이지입니다. 원래 HTML 구조는 위젯과 컨테이너로 그대로 유지되고, CSS는 편집 가능한 컨트롤에 담기며, 직접 다시 만든 것은 애초에 마크업에 속하지 않았던 상호작용 동작뿐입니다. 그 시점부터는 여러분과 고객이 Elementor의 다른 어떤 것과 마찬가지로 편집할 수 있습니다 — 코드 위젯도, 별도 스타일시트도, 빌드 단계도 없이요.