Elementor Pro サイト間でテーマビルダーのテンプレートを再利用する方法

テーマビルダーで作成したテンプレートは、インポート・エクスポートができ、それを作ったそのサイト以外にも別のサイトで使い回しをすることが可能です。

尚インポートは別のサイトで作ったテンプレートを、今操作しているサイトへ持ってくること。
エクスポートは今操作をしているサイトで作ったテンプレートを別のサイトへ送ることです。

この記事では、一度作ったテーマビルダーのテンプレートをどの様にエクスポート、またはインポートをして各サイトで再利用する方法を詳しく説明していきます。

尚、Theme Builder 3.0が更新されてから、旧型のインポート・エクスポートの方法とTheme Builder 3.0の画面で操作する方法と2通り存在します。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementor Pro サイト間でテーマビルダーのテンプレートを再利用する方法を動画でご覧になりたい方はこちらからどうぞ!

『テンプレート』の中の『Theme Builder』の画面

こちらは画面左側のバーの『テンプレート』の中の『Theme Builder』の表示画面です。

旧・テンプレートをエクスポートする方法

テンプリートのエクスポートボタンの場所

例えば上記画面の『Elementor Archive #562』を他のサイトへエクスポートしたいとします。
そのエクスポートさせたいテンプレートのセクションをマウスオーバーすると上記画面の様に、編集やゴミ箱などの表示が出てくる中に『テンプレートのエクスポート』がありますのでそちらをクリックします。

テンプレートのダウンロード

するとこの様に該当のテンプレートがダウンロードされます。
そして別サイトのテーマビルダーのページから、このエクスポートしたテンプレートをインポートすれば別サイトでこのテンプレートを使用することが可能になります。
※インポートの方法は以下のセクションで説明します。

旧・テンプレートをインポートする方法

テンプレートのインポートボタンの場所

テンプレートを別のサイトからこちらのサイトにインポートする場合は、こちらの画面上部に『テンプレートのインポート』とあるのでそちらをクリックします。

『ファイルを選択』をクリック

するとこの様な表示画面になります。
『ファイルを選択』をクリックします。

インポートさせたいファイルを選択し、『開く』をクリック

するとこの様にファインダーが表示されるので、インポートさせたいファイルを選択し、『開く』をクリックします。
※こちらのサンプルでは『Header_from_another_site.json』を選択します。

『今すぐインポート』をクリック

すると先ほどの画面に戻ります。
『ファイルを選択』と『今すぐインポート』の間に先ほど選択したファイル名が表示されていたら、『今すぐインポート』をクリックします。

テンプレートがインポートされた後の表示画面

するとこの様に先ほどインポートしたファイルがこちらのサイトに追加されました。

新・テンプレートをエクスポートする方法

Theme Builder 3.0の画面へ行く・『Try it Now』をクリック

まずTheme Builder 3.0の画面に行くために画面右上の『Try It Now』をクリックします。

エクスポートさせたいテンプレートの選択

するとこちらの新しいTheme Builder 3.0の画面に行きます。
その中のエクスポートさせたいテンプレートをクリックします。

タブの右上の『・・・』をクリック

すると上記画面の様な表示になりますので、タブの右上の『・・・』をクリックします。

『Export』をクリック

すると下にボックスが表示され、その中に『Export』がありますのでそちらをクリックします。

テンプレートのダウンロード

するとこの様にテンプレートがダウンロードされます。

新・テンプレートをインポートする方法

Theme Builder 3.0の画面右上の『↓』をクリック
『↓』ボタン拡大図
こちらは画像を拡大したものです。

Theme Builder 3.0の画面からインポートする方法は、ページの画面右上にある『↓』のボタンをクリックします。

『ファイルを選択』をクリックしテンプレートをインポートする

するとこちらの画面に切り替わりますので、『ファイルを選択』をクリックし、インポートさせたいテンプレートを追加します。
するとファインダーが開くのでそこからインポートさせたいファイルを選択します。

インポートさせたいフォイルを選択し、『開く』をクリック

するとこの様にファインダーが開くので、そこからインポートさせたいファイルを選択し、『開く』をクリックします。
※こちらのサンプルでは『Archive_from_another_site.json』を選択します。

Edit

『Your template was imported』と『Edit / Preview』のメッセージ・『Edit』をクリック

するとこの様に『Your template was imported』(あなたのテンプレートはインポートされました。)と『Edit / Preview』の表示が出ます。
『Edit』をクリックすると、

インポートしたテンプレートの編集画面

この様にインポートしたテンプレートの編集画面にいきます。

Previwe

『Preview』をクリック

また、『Previwe』をクリックすると、

インポートしたテンプレートのサイトプレビューの画面

この様にインポートしたテンプレートのサイトプレビューの画面へ行きます。

インポート後のTheme Builder 3.0の画面表示

テンプレートをインポートし追加された後のTheme Builder 3.0の画面

また、Theme Builder 3.0の画面では、この様にインポートした『Archive_from_another_site』のテンプレートが追加されているのがおわかり頂けると思います。


この様に、テーマビルダーの画面から簡単にテンプレートをインポート・エクスポートをし再利用することができます。

正直、インポートとエクスポートに関しては旧型の方法の方が見やすいのではないかなと思います。
一度1つのテンプレート作成してしまえば、別サイトでの利用も簡単にできるので例えば姉妹サイトでレイアウトを統一させたい時など、もう一度テンプレートを作る手間も省けサイトのレイアウトも統一ができるので覚えておくととても便利なツールです。

ぜひ、サイトの管理と運営に役立ててくださいね!

テーマビルダーについて詳しく解説した記事

もありますので、そちらも合わせてお読みください!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通