기존 HTML 페이지를 Elementor로 옮기는 방법은 보통 두 가지였습니다. 하나는 수정이 어려운 HTML 위젯 하나에 통째로 붙여넣는 것이고, 다른 하나는 각 섹션을 수동으로 다시 만드는 것입니다. 이 가이드는 HTML을 네이티브이며 편집 가능한 Elementor 컴포넌트로 변환하는 세 번째 방법을 소개합니다.
1. HTML 붙여넣기 또는 드롭하기
변환기를 열고 .html 파일을 드롭 영역으로 드래그하거나 코드 상자에 소스를 붙여넣습니다. 인라인 CSS와 Base64 이미지가 지원됩니다. 모든 작업은 브라우저 안에서 실행되며, 어떤 파일도 업로드되지 않습니다.
2. 네이티브 컴포넌트 모드 선택하기
옵션 패널에서 네이티브 컴포넌트 모드를 선택합니다. 그러면 제목은 Heading 위젯으로, 문단은 Text Editor로, 버튼처럼 스타일된 링크는 Button 위젯으로, 감싸고 있는 <div>는 Container로 매핑됩니다. 패딩, 색상, 글꼴, 반응형 동작까지 자동으로 계산됩니다.
3. 구조 맵 검토하기
내보내기 전에 구조 맵 탭을 엽니다. 어떤 행이든 마우스를 올리면 미리보기에서 강조 표시되고, 신뢰도 점(초록색 = 직접 변환됨, 빨간색 = HTML로 유지됨)을 확인할 수 있습니다. 그리고 타겟 아이콘을 사용하여 원하는 블록만 복사할 수 있습니다. 이 단계에서 깔끔하게 매핑되지 않은 부분을 발견할 수 있습니다.
4. 복사하거나 다운로드하기
Elementor 데이터 복사를 사용한 뒤 편집기에서 마우스 오른쪽 버튼 클릭 → ‘Paste from other site’를 선택하거나, JSON 템플릿을 다운로드하여 Elementor 템플릿 라이브러리에서 가져옵니다. HTML과 Elementor는 완전히 동일하게 렌더링되지 않으므로, 편집기에서 결과를 한 번 빠르게 확인하세요.
더 깔끔한 결과를 위한 팁
- 시맨틱 태그(
<h2>,<p>,<button>등)를 사용하면 변환기가 네이티브하게 매핑할 수 있습니다. - 스타일이 없는 깊게 중첩된 래퍼
<div>는 피하는 것이 좋습니다. 불필요한 컨테이너가 추가됩니다. - HTML에
<style>블록이 없다면 ‘인라인 스타일 유지’를 끄세요.