Elementor テンプレートは JSON として保存されます。つまり、HTML ページを他の Elementor テンプレートと同様にインポートできる JSON テンプレートファイルに変換できます。持ち運び可能で再利用可能、クリップボードに依存しません。ここでは JSON ルートの仕組みと、それを選ぶべきタイミングを説明します。
2つのエクスポート形式、同じコンポーネント
HTML 変換後、2つの方法でエクスポートできます。Elementor データをコピーは、開いているエディターにすぐ貼り付けるために JSON ペイロードをクリップボードに配置します。JSON テンプレートをダウンロードは、同じ構造を.json ファイルとして保存します。コンポーネントは同一です。違いは、ファイルは持ち運び可能で、クリップボードのペイロードはそうではない点です。
JSON ファイルが適しているケース
- サイト間での再利用。Elementor 導入済みの任意の WordPress インストールで同じファイルをインポートできます。
- バージョン管理。ファイルはプレーン JSON なので、リポジトリに保管したり、2つのエクスポートを差分比較したり、特定の日付時点のデザインをアーカイブしたりできます。
- 共有。同僚やクライアントにはファイルを送れますが、クリップボードは送れません。
- ライブラリの構築。名前を付けた JSON テンプレートのフォルダは、今後のページを組み立てるためのコンポーネントライブラリになります。
Elementor に JSON テンプレートをインポートする方法
- HTML を変換し、JSON テンプレートをダウンロードをクリックします。
- WordPress でテンプレート → 保存済みテンプレートを開きます。
- テンプレートをインポートをクリックし、
.jsonファイルを選択します。 - テンプレートがライブラリに表示されます。任意のページで Elementor ライブラリボタンから挿入できます。
JSON の中身
このファイルは Elementor の要素ツリーを記述します。レイアウト、背景、境界線、余白を持つコンテナと、コンテンツやスタイル設定を持つウィジェットです。ネイティブの Elementor 形式なので、すべてが HTML ブロックではなく、編集可能なウィジェットとしてインポートされます。見出し、テキスト、画像、ボタン、アイコンボックス、画像ボックス、グリッドはすべて編集可能な状態で取り込まれます。
実用的な注意点として、JSON 内の画像参照は URL であり、埋め込みファイルではありません。ソースが実際のメディアライブラリ URL を使用している場合はインポート時に解決されます。ローカルパスと Base64 画像は空のプレースホルダーになり、後で設定する必要があります。画像を先にアップロードすることが、JSON テンプレートをクリーンにインポートするための唯一の変更点です。
保存前にテンプレートをサイト非依存にする
色やフォントをハードコードしたテンプレートは、次にインポートするサイトでは見た目が崩れます。再利用する予定のブロックをエクスポートする前に、サイトカラーとサイトタイポグラフィを使って変換してください。テンプレートはインポート先のサイトが定義するパレットとフォントを採用するため、同じ JSON がどこにインポートしても自然に見えます。
構造をクリーンに保つ
優れた再利用可能テンプレートは、最上位のコンテナ 1 つと内部の浅いツリーで構成されます。エクスポート前に構造マップを確認してください。ネストの深さが浅く、カード行が各カードを個別のコンテナでラップするのではなく、ウィジェットを直接保持するグリッドになっていると、インポート後の再スタイルがはるかに簡単になります。クリーンな入力はクリーンな JSON を生み出します。
コピーかダウンロードか—簡単な基準
今編集中のページに一度だけ挿入する場合は、クリップボードのデータを貼り付けます。複数回インポートするもの、共有するもの、保管するものには、JSON ファイルをダウンロードします。同じ変換で、宛先は 2 つ。持ち運びやすさが必要かどうかで選びましょう。