WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorのテンプレート を作ろう!

テンプレートとは?

Elementorのテンプレート を作る前に、少しおさらいしておきましょう!Elementorには、制作されたページをテンプレートとして保存することが出来、他のElmentorで使うことが出来る仕組みです。

template_image

WordPressのテーマの様なイメージです。もちろん、読み込んだテンプレートはElementorで自由に編集が出来るので、見方によってはテーマよりもすごかも?!

Elementorのテンプレートには大きく分けて2種類あります。

1つは、無料版でも使えるTemplatesに格納されるテンプレートです。もう1つは、有料版(Pro版)で使えるThema Builderとして利用できるテンプレートです。

おじさん
おじさん
ご無沙汰っす。久々の登場に緊張してます。がっ、ちょっと何言ってるか分からないんですけどぉ・・・

ゆっくり説明するので震えないで・・・(汗)

テンプレートの種類って知ってる?

Elementorの無料版、Pro版で作成できるテンプレートの種類ってご存知ですか?無料版をお使いの方は投稿や固定ページからElementorで編集して利用されている方が多いかと思いますので、知らない方もいるかもしれません。

無料版でテンプレートを作成する場合、作成出来るテンプレートの種類は2種類のみになります。
free_templatefmt

ページとセクションです。それに対し、Pro版で作れるテンプレートのタイプは・・・
pro_templatefmt

ページ、セクションに加え、ポップアップ、ヘッダー、フッター、シングル、アーカイブと一気に増えます。

簡単に説明します。

【ページ】(無料・Pro共通)
1つの固定ページや投稿に反映することが出来るテンプレートです。言い換えればテーマの様に自動的に反映されるものではなく、あくまで1固定ページ、1投稿に使用出来るタイプのテンプレートです。

【セクション】(無料・Pro共通)
Elementorの3大要素の1つ、「セクション」単位でテンプレート化することが出来るタイプです。繰り返し登場するパーツ(セクション)をテンプレート化することで、簡単に同じデザインを貼り付けることが出来ます。

【ポップアップ】(Proのみ)
ポップアップを作る為のテンプレートです。

【ヘッダー】(Proのみ)
テーマビルダーと呼ばれる由縁でもあるヘッダーテンプレートです。このテンプレートでヘッダーを作成し、サイト全体に反映させることで、テーマのヘッダー関係なく、自由なデザインでヘッダーを表示する事が出来ます。

【フッター】(Proのみ)
ヘッダー同様、フッターテンプレートで作成し、サイト全体に反映されば、どのページでも同じフッターが表示され、このテンプレートを修正すればWordPressのテーマ同様に、サイト全体のフッターが変更されます。

【シングル】(Proのみ)
シングルには投稿用と固定ページ用に加え、「お探しのページはみつかりません」でおなじみに404Page用にtypeが分かれます。

pagetype_template

投稿つまり、記事ページ用のテンプレートが作成出来、固定ペーシは、固定ページ用のテンプレートが作成出来ます。更には404pageもテンプレートとして作成出来ます。

【アーカイブ】(Pro)
これは、ブログなどでカテゴリーとかクリックした際に、同じカテゴリーの記事が一覧で表示されるの見た事ありませんか?アレです。

Elementor Proのテンプレートが無料版でも使えたらいいのに・・・

当たり前ですが・・・使えません。

import_ng

無理に読み込もうとするとこんな風にNGメッセが出ちゃいます。ただし、「ページ」「セクション」でかつ、Pro用ウィジェットを使用していないテンプレートであれば、利用する事が出来ます!

そして当たり前ですが、無料版で作成したテンプレートはPro版でも利用出来ます。が、無料版で作られたテンプレート(ページタイプ)をPro版のシングルタイプとしてテンプレートを利用する事はダイレクトには出来ません。一度シングルタイプのテンプレートを作成してから、ライブラリーで読み込ませる必要があります。

おじさん
おじさん
ちょいちょぃ・・・また何言ってるかわかんぞ!

すみません・・・次のコーナーで説明しますね・・・

テンプレートの作り方

テンプレートの作り方は大きく2種類あります。それは作成したいテンプレートタイプによって分かれます。特に無料版の場合、ページを作ろうとした場合、固定ページもしくは投稿で「新規追加」して作ると思います。ページが出来たら保存すればそのページは公開されます。が、テンプレートとしては保存されていません。そこで、

templatemake

左のコントロールエリアの下に小さな「▲」があるので、そこをクリックすると、「テンプレートとして保存」が選べます。これで名前をつければこの固定ペーシのデザインはテンプレートとして使い回しが出来ます!これはページ全体をテンプレートとして保存する方法です。

次にセクションタイプのテンプレートを作る場合は、セクションの枠にあるメニューアイコン部分で「右クリック」するとサブメニューが表示され、その中にテンプレートとして保存が選択出来ます!

sectiontemplate_make

固定ページや投稿ページを作って、後で保存する方法が1つ目のテンプレート(ページタイプとセクションタイプ)の作り方です。

もう1つの作り方は、直接テンプレートを作成する方法です。これは、Elementorのメニューにある「Templates」またはPro版の「ThemaBuilder」画面を開き、新規追加→セクションタイプを選択→テンプレートの名前を入れて作成します。

エクスポートとインポート

保存したテンプレートは、他のWordPressのElementorで使える様に、エクスポートする事が出来ます。

templateexport

テンプレート一覧またはThemabuilder画面で書き出したいテンプレート部分にあるメニュー「テンプレートのエクスポート」をクリックします。すると・・・

jsonfile_template

この様なファイルが出来上がりです!このファイルを読み込ませたい他のWordPressのElementorのTemplates一覧画面上部の「テンプレートのインポート」をクリックし、先ほどダウンロードされたファイル「elementor-2375-…json」を選択しインポートします。

import_elementor

テンプレートの使い方については、別の記事でも紹介しているので、合わせてご覧下さい。

Elementorのテンプレート機能を使って速攻ページ作成

それはもはやテーマの様に・・・

1テンプレートごとではなく、1サイト分のテンプレートをまとめてエクスポートする事も出来ます。

ziptemplate_zip

エクスポートしたいtemplateにチェックを入れ、一括操作のプルダウンでエクスポートを選択します。すると・・・

template_zip

お分かり頂けただろうか・・・

.zip と、圧縮されます。しかも!!!それを、zipファイルのままインポートする事も出来ます。

まとめ

いかがでしたでしょうか?友人の誕生日にテンプレートをプレゼントしたり・・・はしませんね(汗)テーマは作れないけどテンプレートなら出来ちゃいますよね?実は海外のElementorユーザーではテンプレートをテーマの様に販売している方もいらっしゃいます。

本当はこの記事でテンプレートプレゼント企画を!と思っていたのですが、間に合わず・・・近々やりたいと思います。

Elementor公式サイトでPro版ゲットする方はこちら

この記事の関連講座

Elementorのレスポンシブモード 講座
Elementorを使うためのWordPress講座
ブログの作り方講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。