HTML to Elementor
チュートリアルに戻る

Turning converted blocks into a reusable Elementor library

1ページ変換すれば午後の時間を節約できる。変換・整理済みセクションのライブラリを構築しておけば、その後のあらゆる構築スピードが変わる。

ページではなくセクションを保存する

ページ全体が再利用できることはまれだが、セクションはほぼ常に再利用できる。ヒーロー、機能グリッド、料金行、お客様の声ブロックを変換・整理したら、その単一のコンテナを説明的な名前でテンプレートライブラリに保存しよう。プロジェクトではなく形状を表す名前を目指すこと — 「機能グリッド、3列、アイコン上」は「client-x-section-2」よりも優れている。

2つの書き出し方法、2つの用途

  • Elementorデータをコピー — すでに開いているページにセクションを追加する場合に最速。
  • JSONテンプレートをダウンロード — ライブラリ構築に適している。ファイルは任意のサイトにインポートでき、バージョン管理にチェックインし、チームと共有できる。

ライブラリ作業では、JSON経由が追加のクリックに見合う価値がある。最終的にクリップボードの状態ではなく、持ち運び可能なファイルが手に入る。

保存前にブロックをサイト非依存にする

色やフォントをハードコードしたブロックは、次のサイトで使用すると見た目が崩れる。ライブラリに保存する前に、サイトカラーサイトタイポグラフィを使って再度変換することを検討しよう。そうすれば、ブロックは移動先サイトが定義するパレットとフォントを採用するため、同じブロックがどこでも自然に見える。

構造をきれいに保つ

再利用可能なブロックは、浅いツリーを持つ1つのトップレベルコンテナであるべきだ。保存前に、残った空のラッパーを削除し、カード行が各カードを冗長なコンテナに入れるのではなく、ウィジェットを直接保持するグリッドまたはフレックスコンテナになるようにする。整ったツリーは、6か月後の再スタイルがはるかに簡単になる。

本当に共有するパーツにはグローバルウィジェットを

多くのページで同一に保たなければならないもの — CTAバンド、保証ストリップなど — には、テンプレートよりもグローバルウィジェットの方が強力だ。一度編集すればすべてのインスタンスが更新される。出発点にはテンプレートを使い、ずれてはいけないものにはグローバルウィジェットを使おう。

はっきり述べておくべき注意点が1つある。グローバルウィジェットはElementor Proの機能だ。無料版では保存済みテンプレートのみが使え、それはコピーだ。1つを5ページに挿入すると、更新すべき独立したコピーが5つできる。無料版を使っていて、どうしてもずれてはいけないものがある場合は、複製するのではなく、単一の正規ページを保持してそこへリンクしよう。

サイト間で引き継がれるもの、引き継がれないもの

JSONテンプレートは持ち運び可能だが、自己完結ではない。初めてブロックを別のサイトにインポートしたとき、次の3つのことで人々はよく驚く。

  • 画像はファイルではなくURLとして移動する。 ブロックは画像をアドレスで参照する。元のホストに到達できないサイト、またはそのファイルが後で削除されたサイトにインポートすると、画像が壊れる。長く保持するライブラリの場合は、保存前に写真を自分のメディアまたは意図的なプレースホルダーに置き換えよう。
  • フォントはすでに存在していなければならない。 テンプレートにはファミリー名が保存される。移動先サイトにそのファミリーがインストールされていない場合、テキストは黙ってフォールバックする。サイトタイポグラフィモードで保存されたブロックは、ファミリーを一切持たないため、この問題を完全に回避できる。
  • グローバルカラーは名前による参照だ。 グローバルカラーにバインドされたウィジェットは、移動先サイトでそのグローバルカラーを探す。そこにない場合の動作はElementorのバージョンによって異なり、望んだ結果になることはまれだ。ライブラリブロックを明示的な色に保つか、作業するサイト間でグローバルパレット名を標準化するか、どちらかにしよう。後者は最初の手間は大きいが、その後はずっと良い。

コードのように名前とバージョンを付ける

ライブラリは、必要なものを見つけられなくなった瞬間に役に立たなくなる。次の2つの習慣がその大部分を支える。

  • 由来ではなく形状を説明する。 「ヒーロー、分割、画像右」は使えるかどうかを教えてくれる。「acme-homepage-v2」は教えてくれず、正しいものを見つけるために5つのテンプレートを開くことになる。
  • JSON書き出しのファイル名には日付またはバージョンを入れる。 ブロックを改良して古いものに戻したくなるのは、まさに1回だけだろう — しかし、そのとき本当に戻したくなる。

JSONファイルをプロジェクトと一緒にリポジトリに保管しておけば、差分と履歴が無料で手に入る。ページセクションをバージョン管理された成果物として扱うのは珍しいが、何が変わったのかを知る必要が初めて生じたときに報われる。

信頼する前にブロックをテストする

このテストは安価で、上記のすべてを捕捉する。ブロックを、構築したサイトではないスクラッチサイトにインポートしよう。理想的には別のテーマと空のグローバルパレットを使う。壊れた画像、間違ったフォント、グローバル欠落の問題はすべて即座に現れる。修正に1分しかかからない今のうちに — クライアントの前や、引き渡そうとしているページの上ではなく。

持つ価値のあるライブラリ

適切な名前が付いたサイト非依存のセクション10〜15個で、マーケティングサイトに必要なものの大半をカバーできる。ヒーロー、機能グリッド、分割機能、ステップ、お客様の声、ロゴストリップ、料金、FAQ、CTAバンド、フッター。変換済みソースから一度構築すれば、将来のほとんどのページは構築ではなく組み立てになる。

また、ゼロから始める必要もない。このサイトのテンプレートライブラリには、プレビュー、変換、適応できる既製ブロックがある。すべてのセクションをゼロからデザインせずに、自分のセットの隙間を埋める合理的な方法だ。