制作効率アップ!Elementorでテンプレートの保存と使い方

Webサイトを作っていると、「このお問い合わせエリア、他のページでも使いたいな」「このデザイン、別のクライアントのサイトでも流用したいな」と思うことはありませんか?

毎回ゼロから作ったり、ページを開いてコピー&ペーストをするのは非常に手間がかかります。そこで活用したいのが、Elementorの「テンプレート保存機能」です。 これを使えば、作ったデザインを部品として保存し、いつでもどこでも瞬時に呼び出すことができます。

今回は、制作スピードを劇的に上げるテンプレートの基本操作について解説します。

 

作ったパーツを「保存」する

まずは、使い回したいパーツ(コンテナやセクション)を保存します。 例えば、お問い合わせへの誘導エリアや特徴紹介の3カラムなどよく使うレイアウトが定番です。

 

⚫︎手順

保存したいコンテナ、セクションを選択し、メニューからテンプレートとして保存(Save as Template)を選択します。
名前を入力するウィンドウが出るので、管理しやすい名前(例:CTA_共通、お客様の声セクションなど、を付けて保存します。

 

これで、このデザインがElementor内のライブラリに登録されました。

 

保存したパーツを「呼び出す」

次に、保存したパーツを別のページで使う方法です。

⚫︎手順

1.Elementor編集画面にある、ウィジェット追加エリアの「+」マークの横、フォルダのアイコンをクリックします。
2.ライブラリが開くので、上部のタブからマイテンプレート(My Templates)を選択します。
3.先ほど保存した名前を探し、緑色の「挿入(Insert)」ボタンをクリックします。

 

これだけで、保存したデザインがそのまま配置されます。スタイルやレイアウトも完璧に再現されるので、調整の手間がいりません。

 

【応用】別のサイトへ「移植」する(エクスポート/インポート)

この機能のすごいところは、Aというサイトで作ったデザインを、Bというサイトで使うことができる点です。

⚫︎手順

テンプレートライブラリ(マイテンプレート)を開きます。

1.保存したテンプレートの右側にある […] をクリックし、「エクスポート(Export)」を選びます。
2..json というファイルがパソコンにダウンロードされます。
3.別のサイトのElementorダッシュボードのテンプレートライブラリを開き、上部にある「テンプレートのインポート」からそのファイルを読み込みます。

制作会社やフリーランスの方であれば、「よく使うデザインセット」を自分のPCに持っておくことで、新規案件の制作スピードが圧倒的に速くなります。

 

テンプレートの注意点

テンプレート(今回紹介したもの): あくまで「コピー」を作成します。呼び出した後に内容を書き換えても、元のテンプレートや、他のページに配置した同じパーツには影響しません。
グローバルウィジェット(PRO版機能): すべての場所で連動します。一箇所変更すると、配置した全ページのパーツが同時に書き換わります。

 

まとめ

Elementorでの制作において、テンプレート機能を使いこなせるようになると、作業時間は大幅に短縮されます。

1.よく使うパーツを作る。
2.右クリックで「テンプレートとして保存」。
3.必要な場所で「フォルダアイコン」から呼び出す。

この3ステップを習慣にして、快適なWeb制作を進めていくことができます。

 


次回:Elementorでのコピー&ペースト方法

recent post

画像を好きな形に切り抜く「マスク機能」の使い方

謎のすき間の正体は?ウィジェットスペースとカラムギャップ設定の使い分け

「背景オーバーレイ」で画像上の文字の可読性を上げる方法

画像が重なる・ボタンが押せない!を解決する z-index(z-インデックス)

ただの箇条書きを卒業!「アイコンリスト」ウィジェット

Making Design Make Sense.
デザインを、感覚から理解へ。
© Design Decode. 901