既存のHTMLページをElementorに移行するとなると、編集が困難な単一のHTMLウィジェットに貼り付けるか、すべてのセクションを手作業で再構築するかという、どちらも好ましくない二択になりがちです。このガイドでは、HTMLをネイティブで編集可能なElementorコンポーネントに変換する、第三の方法をご紹介します。
1. HTMLを貼り付け、またはドロップする
コンバーターを開き、.htmlファイルをドロップゾーンにドラッグするか、コードボックスにソースを貼り付けます。インラインCSSとBase64画像に対応しています。処理はすべてブラウザ上で実行され、アップロードは一切行われません。
2. ネイティブコンポーネントモードを選択する
オプションパネルでネイティブコンポーネントモードを選びます。これにより、見出しは見出しウィジェット、段落はテキストエディター、ボタンスタイルのリンクはボタンウィジェット、そしてラッパーの<div>はコンテナーにマッピングされ、パディング、色、フォント、レスポンシブ動作が自動的に算出されます。
3. 構造マップを確認する
エクスポート前に、構造マップタブを開きます。任意の行にカーソルを合わせるとプレビュー上でハイライトされ、信頼度ドット（緑＝直接変換、赤＝HTMLのまま保持）を確認できます。また、ターゲットアイコンを使って必要なブロックだけをコピーすることも可能です。ここで、マッピングがうまくいかなかった箇所を見つけてください。
4. コピーまたはダウンロードする
Elementorデータをコピーし、エディター上で右クリック→「他のサイトから貼り付け」を実行するか、JSONテンプレートをダウンロードしてElementorテンプレートライブラリからインポートします。HTMLとElementorがまったく同じように表示されることはないため、エディターで表示結果をひととおり確認してください。
よりクリーンな結果を得るためのヒント
- コンバーターがネイティブにマッピングできるよう、
<h2>、<p>、<button>などのセマンティックタグを使用してください。 - スタイル指定のない、深くネストされたラッパー
<div>は避けてください。余計なコンテナーが追加されます。 - HTMLに
<style>ブロックが含まれていない場合は、「インラインスタイルを保持」をオフにしてください。