既存のHTML、CSS、JSを使ってElementorページを編集する

プレーンなHTML、CSS、JavaScriptで作られたページがあり、それをElementorの中で引き続き編集したいとします。ゼロから作り直すのでも、コードウィジェットに閉じ込めたままにするのでもありません。これはまさにコンバーターの出番ですが、3つの部分（HTML、CSS、JS）はそれぞれ挙動が異なるため、1つずつ見ていくとわかりやすくなります。

既存のHTMLページをElementorに取り込む3つの方法：HTMLウィジェットに貼り付けると1つのロックされたブロックが残り、手作業での再構築は1ページあたり約1日かかり、変換するとネイティブで編集可能なウィジェットが生成されます。 — 同じページ、3つのルート。3番目だけが、パネルで編集できるものを残します。

目標：埋め込むのではなく、編集可能にする

既存のHTMLをElementorに取り込む方法のうち、実際には解決にならないものが2つあります。HTMLウィジェットに貼り付けると、視覚的に編集できない1つのブロックとして埋め込まれてしまいます。手作業で作り直せば確かに実現できますが、手元にあるマークアップを捨てることになります。本当に必要なのは、見出しが見出しウィジェットに、テキストがテキストエディターウィジェットに、ボタンがボタンウィジェットに、レイアウトが本物のコンテナになることです。そうすれば、あとからElementorのパネルですべての部分を編集できます。

HTMLはネイティブウィジェットになる

HTMLをコンバーターに貼り付け、ネイティブコンポーネントモードを選びます。各要素は、それに合ったElementorウィジェットにマッピングされます。見出しは見出しウィジェットに、段落とリストはテキストエディターに、画像は画像ウィジェットに、ボタンとしてスタイルされたリンクはボタンウィジェットに、要素を包むラッパーはコンテナになります。結果をElementorに貼り付けたあとは、間にコードウィジェットが挟まることはなく、ごく普通のページになります。

CSSは捨てられず、読み取られる

多くの人が心配するのがこの部分ですが、実は最もうまく機能する部分です。コンバーターはスタイルを捨てません。ブラウザーが実際に計算したスタイルを読み取り、対応するウィジェットのコントロールに書き込みます。パディング、マージン、カラー、ボーダー、角丸、シャドウ、背景、フォントファミリー、サイズ、太さ、行の高さ、文字間隔はすべてElementorのネイティブなフィールドに移されるため、スタイルシートの中に置かれるのではなく、編集可能な状態で残ります。

これが機能するには、変換時にCSSがその場にある必要があります。インラインスタイルや1つの<style>ブロックは完全に読み取られます。貼り付けるファイルに含まれていない外部スタイルシートは読み取られません。ページはスタイルなしで表示され、そのスタイルなしの状態が変換されてしまいます。そのため、CSSをインライン化するか、先にスタイルシートを<style>ブロックに貼り付けておいてください。また、ビジュアルピッカーで1つのブロックを取り出すと、ページのスタイルシートも一緒に持ち込まれるため、クラスベースのスタイルも正しく変換されます。

正直に言えば、JavaScriptは例外です

JavaScriptは変換されませんが、これは意図的なものです。スクリプトは安全のために取り除かれます。貼り付け操作で任意のJSをインポートするのは危険ですし、いずれにせよエディター内で確実に動作するものでもありません。そのため、JSが生み出していたもの（スライダー、タブ、アコーディオン、カウンター、スクロールアニメーション）は、静的なマークアップとして取り込まれます。

正しい対処は、スクリプトを貼り戻すことではなく、そのインタラクションだけを対応するElementorウィジェットで作り直すことです。Elementorにはネイティブのタブ、アコーディオン、カルーセル、カウンター、プログレスバーのウィジェットがあり、アニメーション用には独自のモーションエフェクトもあります。これらはインポートしたスクリプトより保守しやすく、サイトが読み込むバンドルにすでに含まれています。実際には、ページ全体を数秒で変換し、その後の数分で、いくつかのインタラクティブな部分をネイティブに作り直すことになります。

現実的な手順

HTMLとCSSを1つのファイルにまとめます。マークアップと1つのstyleブロックという構成です。画像がローカルパスで参照されている場合は、メディアライブラリにアップロードしてそのURLを使うか、プレースホルダーのままにしておきます。
コンバーターに貼り付けてネイティブコンポーネントモードを選び、アイコンをElementorのライブラリに照合するかどうか、カラーとフォントにサイトの値と元の値のどちらを使うかを選びます。
構造マップを確認します。コンポーネント数、ネストの深さ、HTMLのまま残った行をチェックします。
Elementorデータをコピーしてページに貼り付けるか、JSONテンプレートをダウンロードしてインポートします。
JSで動いていたインタラクションを対応するネイティブウィジェットで作り直し、ボタンのホバー状態を設定し、3つのデバイス表示を順に確認します。

最終的に得られるもの

ごく普通のElementorページです。元のHTML構造はウィジェットとコンテナとしてそのまま残り、CSSは編集可能なコントロールに収まり、手作業で作り直したのは、そもそもマークアップに属するものではなかったインタラクティブな動作だけです。それ以降は、あなたもクライアントも、Elementorの他のページと同じように編集できます。コードウィジェットも、別のスタイルシートも、ビルド工程も必要ありません。