1ページを変換すれば、午後の作業時間を節約できます。変換して整理したセクションのライブラリを作っておけば、その後のあらゆる制作のスピードが変わります。
ページではなくセクションを保存する
ページ全体を再利用できることはまれですが、セクションはほぼ必ず再利用できます。ヒーロー、機能紹介のグリッド、料金表の行、お客様の声のブロックを変換して整理したら、その1つのコンテナを分かりやすい名前でテンプレートライブラリに保存しましょう。名前はプロジェクトではなく形を表すものにします。「機能グリッド、3列、アイコン上」のほうが「client-x-section-2」よりずっと役に立ちます。
2つの書き出し方法と、それぞれの用途
- Elementor データをコピー — すでに開いているページにセクションを追加するときに最速です。
- JSON テンプレートをダウンロード — ライブラリ作りに向いています。ファイルはどのサイトにもインポートでき、バージョン管理に登録したり、チームと共有したりできます。
ライブラリ作りでは、クリックが1回増えてもJSONで書き出す価値があります。クリップボードの中身ではなく、持ち運べるファイルが手元に残るからです。
保存する前にブロックをサイトに依存しない形にする
色やフォントを直接埋め込んだブロックは、次に使うサイトでは見た目がおかしくなります。ライブラリに保存する前に、移行先サイトのカラーを継承と移行先サイトのグローバルフォントを継承を選んで変換し直すことを検討してください。そうしたブロックは、移行先サイトが定義しているパレットとフォントをそのまま使うので、同じブロックがどのサイトでも自然になじみます。
構造をすっきり保つ
再利用するブロックは、中のツリーが浅い、トップレベルのコンテナ1つにするべきです。保存する前に、残っている空のラッパーを削除し、カードの行が、カードごとに冗長なコンテナに入っているのではなく、ウィジェットを直接収めたグリッドまたはフレックスボックスのコンテナになっていることを確認します。整ったツリーなら、半年後にスタイルを変えるのもずっと簡単です。
本当に共通のパーツにはグローバルウィジェットを
多くのページでまったく同じに保つ必要があるもの（CTAの帯、保証の帯など）には、テンプレートよりグローバルウィジェットのほうが強力です。一度編集すれば、すべての配置箇所が更新されます。出発点にはテンプレートを、ずれてはいけないものにはグローバルウィジェットを使いましょう。
はっきり書いておくべき注意点が1つあります。グローバルウィジェットはElementor Proの機能です。無料版で使えるのは保存したテンプレートだけで、これはコピーです。5ページに挿入すれば、更新しなければならない独立したコピーが5つできます。無料版を使っていて、どうしてもずれてはいけないものがある場合は、複製するのではなく、正となるページを1つだけ用意してそこへリンクしましょう。
サイト間で持ち運べるもの、持ち運べないもの
JSONテンプレートは持ち運べますが、それだけで完結しているわけではありません。初めてブロックを別のサイトにインポートしたとき、多くの人が驚くことが3つあります。
- 画像はファイルではなくURLとして移動します。ブロックは画像をアドレスで参照しています。元のホストにアクセスできないサイトや、そのファイルが後から削除されたサイトにインポートすると、画像が表示されなくなります。長く使うつもりのライブラリなら、保存する前に写真を自分のメディアか、意図して用意したプレースホルダーに差し替えておきましょう。
- フォントは移行先にすでにある必要があります。テンプレートに保存されるのはフォントファミリー名です。移行先サイトにそのファミリーがインストールされていなければ、テキストは何の警告もなく代替フォントで表示されます。移行先サイトのフォントを使うモードで保存したブロックは、ファミリーを一切持たないので、この問題をまったく受けません。
- グローバルカラーは名前による参照です。グローバルカラーに紐づいたウィジェットは、移行先サイトで同じグローバルカラーを探します。見つからない場合の動作はElementorのバージョンによって異なり、望みどおりになることはまずありません。ライブラリのブロックは明示的な色のままにしておくか、担当するサイト間でグローバルパレットの名前を統一するかのどちらかにしましょう。後者は最初の手間がかかりますが、その後がずっと楽になります。
コードのように名前とバージョンを付ける
ライブラリは、中のものが見つけられなくなった瞬間に役に立たなくなります。大部分を支えるのは、次の2つの習慣です。
- 由来ではなく形を書く。「ヒーロー、分割、画像右」なら、使うべきかどうかがすぐ分かります。「acme-homepage-v2」では分からず、目当てのものを探して5つのテンプレートを開く羽目になります。
- JSONで書き出すファイルの名前には日付かバージョンを入れる。ブロックを改良したあと、古いものをそのまま取り戻したくなるのは一度きりかもしれません。それでも、そのときは本当に必要になります。
JSONファイルをプロジェクトと一緒にリポジトリで管理すれば、差分と履歴が手間なく手に入ります。ページのセクションをバージョン管理された成果物として扱うのは珍しいことですが、何が変わったのかを知る必要が初めて出てきたときに、その価値が分かります。
信用する前にブロックをテストする
このテストは手軽で、ここまでに挙げた問題をすべて見つけられます。ブロックを、それを作ったサイトではないテスト用のサイトにインポートしてみましょう。できれば別のテーマを使い、グローバルパレットを空にしておきます。画像の表示切れ、フォントの違い、グローバル設定の欠落といった問題はすべてその場で現れます。修正が1分で済む今のうちに見つかるのであって、クライアントの前や、これから引き渡すページの上で見つかるのではありません。
持っておく価値のあるライブラリ
適切な名前を付けた、サイトに依存しないセクションが10〜15個あれば、マーケティングサイトに必要なものの大半をまかなえます。ヒーロー、機能紹介のグリッド、左右分割の機能紹介、ステップ、お客様の声、ロゴの帯、料金表、よくある質問、CTAの帯、フッターです。変換した素材から一度作っておけば、今後のページのほとんどは一から作るのではなく組み立てるだけになります。
ゼロから始める必要もありません。このサイトのテンプレートライブラリには、プレビューして変換し、手を加えて使える既製のブロックが揃っています。すべてのセクションを一からデザインしなくても、自分のセットの足りない部分を埋められる、手堅い方法です。