HTML to Elementor
도움말

HTML 페이지를 Elementor용 콘텐츠로 바꾸기

이 도구는 기존 HTML 페이지를 Elementor에 붙여넣을 수 있는 콘텐츠로 변환하거나, 가져올 템플릿 파일로 내려받게 합니다. 모든 것이 브라우저에서 실행됩니다.

빠른 시작

도구를 열고 HTML을 놓은 뒤 방법을 선택하고 변환을 클릭하세요.

  1. 도구 열기내비게이션의 「도구 열기」를 사용하세요.
  2. HTML 추가.html/.htm 파일을 놓거나 HTML을 직접 붙여넣으세요.
  3. 방법 선택외관을 유지하려면 고충실도를, Elementor에서 계속 편집하려면 네이티브 구성요소를 선택하세요.
  4. 변환변환을 클릭하면 도구가 Elementor용 콘텐츠를 만듭니다.
  5. Elementor로직접 붙여넣거나, 템플릿 파일을 내려받아 라이브러리에서 가져오세요.

고충실도 모드

원래 외관을 유지합니다. 페이지를 통째로 옮길 때 가장 좋습니다.

  • 상세 페이지·랜딩 페이지·복잡한 레이아웃에 좋습니다.
  • 원본 페이지와 가장 비슷해 보입니다.
  • 단점: 많은 내용이 한 블록에 들어가 항목별 편집이 약합니다.

네이티브 구성요소 모드

페이지를 Elementor 제목·텍스트·이미지·버튼·컨테이너로 나눕니다.

  • 가져온 뒤에도 내용과 스타일을 계속 조정할 때 좋습니다.
  • 제목·텍스트·이미지·버튼을 개별로 편집하기가 더 쉽습니다.
  • 매우 복잡한 애니메이션이나 서드파티 효과는 수동 조정이 필요할 수 있습니다.

네이티브 설정 선택 방법

이 옵션들은 가져온 뒤 편집의 용이성에 영향을 줍니다.

옵션의미권장
제목 태그H1/H2/H3 레벨을 제어합니다.전체 페이지의 경우, 자동 정렬로 제목 순서가 뒤섞이지 않게 합니다.
이미지원본을 유지하거나 빈 이미지 자리를 만듭니다.이미지를 다시 업로드할 거라면 자리표시자가 더 편리합니다.
미디어 URL불완전·임시·인라인 이미지 URL을 처리합니다.기본 안전 옵션은 실패하거나 누락된 이미지를 줄입니다.
아이콘Elementor 아이콘에 맞추거나 원래 외관을 유지합니다.소스에서 Font Awesome 클래스를 사용하면 편집 가능한 아이콘 라이브러리 아이콘으로 가져옵니다.
색상 및 글꼴원본을 유지하거나 대상 사이트를 따릅니다.새 사이트에 맞추려면 대상 사이트를 따르세요.
골격만내용을 채우지 않고 구조와 여백을 유지합니다.복잡한 페이지에 좋습니다: 골격을 만든 뒤 채웁니다.
고급 매핑각 블록이 어떤 구성요소로 변환되는지 검토합니다.각 블록을 직접 결정하고 싶을 때 좋습니다.
구조 맵페이지 옆에서 구성요소 트리를 미리 보고 마우스를 올려 강조합니다.특정 블록만 내보내거나 원하지 않는 부분을 제외할 수 있습니다.

방법 A: 붙여넣기

현재 Elementor 페이지로 들어가는 가장 빠른 방법.

  1. 「Elementor 데이터 복사」를 클릭합니다.
  2. Elementor 편집 페이지를 엽니다.
  3. 빈 영역을 오른쪽 클릭하고 「다른 사이트에서 붙여넣기」를 선택합니다.
  4. 붙여넣은 뒤 이미지·아이콘·여백·모바일 화면을 확인합니다.

방법 B: 템플릿 파일

저장한 뒤 나중에 Elementor 라이브러리에서 가져옵니다.

  1. 「JSON 템플릿 다운로드」를 클릭합니다.
  2. Elementor 템플릿 라이브러리를 엽니다.
  3. 가져오기를 선택하고 내려받은 파일을 업로드합니다.
  4. 페이지에 삽입한 뒤 이미지를 교체하고 미세 조정합니다.

시작 전에 알아둘 점

도구는 안전한 가져오기를 지향하지만 HTML과 Elementor 페이지는 다르므로 복잡한 페이지는 여전히 확인이 필요할 수 있습니다.

  • 안전을 위해 스크립트·위험한 링크·외부 리소스·폼 전송이 정리됩니다.
  • 유지된 스타일은 가져온 콘텐츠에만 적용되어 대상 사이트의 다른 영역에 영향을 주지 않습니다.
  • 불완전·인라인·임시 이미지 URL은 가져오기 실패를 피하기 위해 기본적으로 자리표시자가 됩니다.
  • 가져올 수 없는 이미지를 포함한 갤러리와 캐러셀은 이미지를 잃지 않도록 분리됩니다.
  • 메뉴·제품·글 목록은 대상 사이트의 데이터에 의존하며 보통 Elementor에서 다시 선택해야 합니다.
  • 매우 복잡한 페이지는 고충실도로 시작하고, 편집을 쉽게 하려면 네이티브나 골격만을 시도하세요.