基本的な変換に加えて、アイコン、画像、構造の3つの処理方法が、出来上がるElementorページの整いやすさと編集のしやすさを決めます。
1. アイコンをElementorのアイコンライブラリに取り込む
HTMLでFont Awesomeのクラス（<i class="fas fa-check"></i>のようなもの）を使っている場合は、アイコンオプションを「Elementorアイコンライブラリと一致させる」に設定してください。すると各アイコンが、固定されたSVGではなく、Elementorのアイコンピッカーから差し替え可能な、実際に編集できるアイコンに変わります。
さらに、アイコン＋見出し＋短いテキストで構成されたカードは、単一のアイコンボックスウィジェットに変換されます。変換ツールはアイコン名（アイコンのクラスとカードタイトルを使用。例：「Reusable」→ recycle）でアイコンを照合し、アイコンのサイズ、余白、タイポグラフィを引き継ぎます。一致するものが見つからない場合は、アイコンを空のままにして、あなたが選べるようにします。
ヒント：手描きのカスタムSVGはElementorのアイコンコントロールには取り込めないため、ライブラリアイコンを使いたい場合は、ソースでFont Awesomeクラスを使用することをお勧めします。
2. 画像：Elementorで設定する
AIは実際の画像ファイルをHTMLテキストに埋め込むことができないため、画像が最も扱いにくい部分です。最も簡単な方法は、画像オプションを「空の画像プレースホルダー」に設定することです。すべての画像が空のスロットになり、各スロットにはキャプションとしてaltテキストが保持されます。これにより、Elementorでアップロードする際に、どの画像をどこに配置すればよいかがわかります。
- 最適な方法：最初にメディアライブラリに画像をアップロードし、その
https://URLをHTMLで使用すると、手動の手順なしでインポートされます。 - 避けるべき方法：Base64で埋め込まれた画像やローカルファイルパスは、変換ツールがデフォルトで空のプレースホルダーに置き換えます。
3. 構造マップ：エクスポート前に確認する
構造マップタブを開くと、ライブプレビューの横に正確なElementorツリーが表示されます。任意の行にカーソルを合わせると、対応する部分が両側でハイライトされます。
- 行にあるターゲットアイコンはコピールートを設定します。これにより、そのブロックのみをエクスポートし、外側のラッパーを除外できます。
- ✕アイコンは、特定のパーツをコピーから除外します（不要な要素がある場合に便利です）。
- 概要には、コンポーネントの数、ネストの深さ、信頼度の内訳（直接一致 / 部分一致 / HTMLのまま保持）が表示されます。
ここでざっと確認すれば、公開サイトに反映される前に、適切にマッピングされなかった箇所を見つけることができます。