お知らせ
Elementorでのホームページ作成やLP制作が簡単になる「Elementorテンプレート」の販売を開始しました！
【新講座】Elementorの使い方がランディングページの作り方とともに学べます！
テンプレートの利用が時短・工数削減につながる
Elementorのテンプレートのインポートの方法がわかると、新しいサイトへの移行、デザインのバックアップやチーム共有などでも役に立ちます。制作業務をおこなっている方は、ひとつの元となるテンプレートを用意することで、デザイン制作時の工数を削減することができますよ。
画像付きでテンプレートのインポート方法を解説していきます。※テンプレートのエクスポートとインポートはElementorの無料版でも可能です
エクスポートの方法がわからない方はこちらの記事をご覧ください。
Elementorのテンプレートをエクスポートする方法（投稿や固定ページまるごと）
Elementorでインポートしたテンプレートを使う方法を3種類紹介します
（１）新規固定ページにテンプレートをインポートする方法
（２）とりあえずテンプレートをインポートしてからページに追加する方法
（３）コンテナをコピーする方法
（１）新規固定ページにテンプレートをインポートする方法
投稿や固定ページとしてテンプレートを利用するのが決まっている場合はこちらがおすすめです。
※投稿と固定ページはどちらも同じ方法です。今回は固定ページを例にランディングページを制作する例を紹介していきます。
LP用の新規固定ページを作成する
作成するページを非公開にしたいときは、公開の設定部分で非公開設定に変更してください。
編集したい固定ページを開いたら、「Elementorで編集」ボタンをクリックします。
テンプレートを追加ボタンをクリック
真ん中のアイコン「テンプレートを追加」をクリックします
ライブラリの画面で「テンプレートをインポート」（↑）ボタンをクリック
インポートしたいjsonファイルを選んで「開く」をクリックする
画面はWindowsの例です。Macでは異なりますが、手順はかわりません
注意文の内容を確認して「次へ」をクリックする
JSONファイルをインポートするにあたっての注意文です。制作者が不明なJSONファイルをインポートする危険性を説明しています。
Warning: JSON files may be unsafe
Uploading JSON files from unknown sources can be harmful
and put your site at risk. For maximum safety, only install
JSON files from trusted sources.
Do not show this message again
警告 JSONファイルは安全でない可能性があります
未知のソースからのJSONファイルのアップロードは有害である可能性があります。
あなたのサイトを危険にさらすことになります。最大限の安全のために
JSONファイルのみをインストールしてください。
このメッセージを再度表示しない
問題なければ「次へ」をクリックします。
インポートしたいテンプレートがアップロードされたので、挿入をクリックする
インポートする設定について選択する
固定ページの設定についての注意文です。
Apply the settings of this 固定ページ too?
This will override the design, layout, and other settings of the
-you’re working on.
この固定ページの設定も適用しますか？
のデザイン、レイアウト、その他の設定を上書きします。
-の設定を上書きします。
適用しない場合は「Don’t apply」を、適用する場合は「適用する」をクリックします。
要するにページの内容や設定を上書きますということです。
この記事通りに進めている方は、上書きしても問題ない新しい固定ページを作成していると思いますので、「適用する」をクリックしてもらって大丈夫です。
ページが読み込みされたら保存をする
ページが表示されたら「更新」をクリックして保存してください。
※間違って「公開」してしまっても、固定ページの編集画面から非公開にできますので安心してください。
以上でテンプレートのインポートができました。
編集してLPが完成したらページを「公開」にするのを忘れないようにご注意ください。
もしこの（１）の方法でエラーが出る場合は、（２）の手順を試してみてください。
（２）とりあえずテンプレートをインポートしてからページに追加する方法
投稿や固定ページが決まっていない場合や、とりあえずテンプレートの一部を利用したい場合はこちらがおすすめです。
サイドバーのテンプレートをクリックします。ここはテンプレートの一覧が表示されるページです。
上の方にある「テンプレートのインポート」をクリックします。
「ファイルを選択」をクリックします。
画面はWindowsの例です。Macでは異なりますが、手順はかわりません
インポートしたいテンプレートデータを選んで、開くをクリックします。
「今すぐインポート」をクリックします。
アップロードしたテンプレートが追加されました。
「表示」を押すと、そのテンプレートのビューが表示されます。
「Elementorで編集」でElementorの編集画面に移行します。
LPとして表示を確認したい場合
そのままテンプレートのビューを確認すると、そのサイトのヘッダーやフッターも表示された状態となります。
ヘッダーやフッターを表示せず、LPとして独立して表示させたい場合は、テンプレートの編集画面に行き
投稿の属性のテンプレートを「Elementor Canvas」に変更して、更新を押してください。
そうすることでヘッダー・フッターがないLPとして表示することができます。
投稿や固定ページでテンプレートを内容を呼び出したい場合
まずは投稿または固定ページを新規で作り、Elementorが編集できる画面にアクセスします。
テンプレートを追加ボタンをクリック
真ん中のアイコン「テンプレートを追加」ボタンをクリックします。
ポップアップが表示されたら「テンプレート」を選択し、さきほどインポートしたテンプレートの「挿入」をクリックします。
※テンプレートをインポートしたばかりの場合は、作成日順に並び替えると見つけやすいです
インポートする設定について選択する
固定ページの設定についての注意文です。
Apply the settings of this 固定ページ too?
This will override the design, layout, and other settings of the
-you’re working on.
この固定ページの設定も適用しますか？
のデザイン、レイアウト、その他の設定を上書きします。
-の設定を上書きします。
適用しない場合は「Don’t apply」を、適用する場合は「適用する」をクリックします。
要するにページの内容や設定を上書きますということです。
この記事通りに進めている方は、上書きしても問題ない新しい固定ページを作成していると思いますので、「適用する」をクリックしてもらって大丈夫です。
適用を押すと、テンプレートがインポートできます。
（３）コンテナをコピーする方法
Elementorは「コンテナ」や「ウィジェット」ごとにコピー・ペーストをすることができます。
（１）（２）どちらかの手順でテンプレートのインポートが済んでいる場合は、別のページに一部の必要なコンテナだけコピペすることも可能です。
例えば、いますでにLPを制作していて、そこに別のページ（またはテンプレート）にあるCTAだけを持って来たい場合に便利な方法になります。
まずはコピーしたいコンテンツがあるページまたはテンプレートの「Elementorで編集」できるページを開きます。
構造パネルをクリックし、コンテナの構造を表示させます。
構造からコピーしたいコンテナを右クリックし、「コピー」をクリックします。
追加したいページに戻って、
コンテンツを追加したい箇所で「貼り付け」をクリックします。
そうすると、コンテナ部分がペーストできます。
ちなみにコンテナ部分は「Ctrl」キーを押しながらクリックすることで複数選択することが可能です。
LPとして使う方へ：ヘッダーやフッターを表示させたくない場合
LP（ランディングページ）の場合は、ヘッダーやフッターを表示させたくないケースがあります。
その場合は固定ページの編集画面から、テンプレートの表示設定を変更しましょう。
Elementorの編集画面を開いている場合は、「固定ページの終了」からページの編集画面に移動することができます。
固定ページの編集画面を開く
固定ページの編集画面を開いたら、右のサイドバーにあるページ属性でテンプレートを「Elementor Canvas」に変更します。
更新をクリックします。これでヘッダーやフッターが非表示になりました。
テンプレートは複製・ほかのサイトで利用することもできる
LPの場合はABテストをしたり、他のサイトでも流用したいことも多いと思います。そんなときは作成したテンプレートをエクスポート・インポートして活用してください。
記事や固定ページを複製するプラグインを利用する方法もありますが、誤って上書きや削除してしまう場合があるため、定期的にエクスポート・インポートする方法をおすすめしています。
テンプレートをエクスポートする方法はこちらの記事で解説しています。
Elementorのテンプレートをエクスポートする方法（投稿や固定ページまるごと）
Elementorを活用してノーコードでもデザインの幅を広げよう
今後はっちゃんセミナーでも記事・動画（YouTube）・セミナー、Elementor(エレメンター)使い方完全ガイドで、Elementorの活用術をたくさんアップしていくので、ぜひ参考にしてくださいね！
現在、Elementorの基礎を勉強したい方向けのセミナーを開催中です！
Elementorの使い方がランディングページの作り方とともに学べる講座
→1日速習Elementorプラグインセミナー
Elementorのエラーや活用方法で悩んだら、お気軽にご相談ください！
→初心者向け・サイト担当者向けのWordPress個人レッスン
