기본 변환을 넘어, 아이콘, 이미지 그리고 구조가 어떻게 처리되는지에 따라 Elementor 페이지의 정리된 정도와 편집 가능성이 결정됩니다.
1. Elementor 아이콘 라이브러리에 포함되는 아이콘
HTML이 Font Awesome 클래스를 사용하는 경우(예: <code><i class=”fas fa-check”></i></code>), 아이콘 옵션을 Elementor 아이콘 라이브러리와 일치로 설정하면 각 아이콘이 잠긴 SVG가 아닌 Elementor의 아이콘 선택기에서 교체 가능한 실제 편집 가능한 아이콘이 됩니다.
더 나은 점은: 아이콘 + 제목 + 짧은 텍스트로 구성된 카드가 단일 아이콘 박스 위젯으로 변환된다는 것입니다. 변환기는 아이콘 클래스와 카드 제목(예: “재사용 가능” → 재활용)을 기반으로 아이콘 이름을 일치시키고, 아이콘 크기, 간격, 타이포그래피를 가져옵니다. 일치하는 항목을 찾지 못하면 아이콘이 비어 있어 직접 선택할 수 있습니다.
팁: 맞춤형 손 그리기 SVG는 Elementor의 아이콘 컨트롤에 들어갈 수 없으므로, 라이브러리 아이콘을 원한다면 소스에서 Font Awesome 클래스를 선호하세요.
2. 이미지: Elementor에서 채우기
AI는 실제 이미지 파일을 HTML 텍스트에 포함시킬 수 없으므로, 이미지가 가장 까다로운 부분입니다. 가장 간단한 방법은: 이미지를 빈 이미지 플레이스홀더로 설정하는 것입니다. 모든 이미지가 빈 슬롯이 되며, 각 슬롯은 alt 텍스트를 캡션으로 유지하므로 Elementor에서 업로드할 때 어떤 그림이 어디에 들어가는지 알 수 있습니다.
- 권장 사항: 먼저 미디어 라이브러리에 이미지를 업로드한 다음 HTML에서 해당 <code>https://</code> URL을 사용하면 수동 단계 없이 가져올 수 있습니다.
- 피해야 할 사항: Base64로 인코딩된 이미지와 로컬 파일 경로는 변환기가 기본적으로 빈 플레이스홀더로 처리합니다.
3. 구조 맵: 내보내기 전에 검토하세요
구조 맵 탭을 열어 실시간 미리보기 옆에 정확한 Elementor 트리를 확인하세요. 행에 마우스를 올리면 일치하는 부분이 양쪽에서 강조 표시됩니다.
- 행의 대상 아이콘은 복사 루트를 설정하여 해당 블록만 내보내고 외부 래퍼를 제거할 수 있습니다.
- ✕ 아이콘은 복사에서 해당 부분을 제외합니다(원하지 않는 불필요한 요소에 유용).
- 개요에서는 구성 요소 수, 중첩 깊이, 신뢰도 분류(직접 / 부분 / HTML로 유지)를 보여줍니다.
이렇게 빠르게 살펴보면 실제 사이트에 도달하기 전에 깔끔하게 매핑되지 않은 부분을 잡아낼 수 있습니다.