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

プレーンなHTML、CSS、JavaScriptで作られたページがあり、それをElementor内で編集し続けたいと考えている。ゼロから作り直すのではなく、コードウィジェットに閉じ込めたままにもしない。これこそコンバーターの役目だが、3つの部品（HTML、CSS、JS）はそれぞれ挙動が異なるため、1つずつ扱うと理解しやすい。

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

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

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

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

CSSは読み取られ、捨てられない

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

これを機能させるには、変換時にCSSが存在している必要がある。インラインスタイルや単一の<style>ブロックは完全に読み取られる。貼り付けるファイルに含まれていない外部スタイルシートは読み取られない。ページはスタイルなしでレンダリングされ、スタイルなしの状態が変換されることになる。そのため、CSSをインライン化するか、最初にスタイルシートを<style>ブロックに貼り付けること。また、単一のブロックを取得するとページのスタイルシートも一緒に取り込むビジュアルピッカーもあり、クラスベースのスタイルも正しく変換される。

JavaScriptは正直な例外

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

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

現実的な手順

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

最終的に得られるもの

通常のElementorページ。元のHTML構造はウィジェットとコンテナとしてそのまま残り、CSSは編集可能なコントロール内に存在し、手作業で再構築したのは、そもそもマークアップに属していなかったインタラクティブな挙動だけだ。その後は、あなたもクライアントもElementor内の他のものと同じように編集できる。コードウィジェットも、別のスタイルシートも、ビルド工程もない。