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

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest

テンプレートとは?

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を知ってもらいたいので
\ SNSでシェアお願いします /
Share on facebook
Facebook
Share on twitter
Twitter

プロフィール

icon

 HTMLはなんとなく聞いた事があったけど、CSSって?っていうレベルの人間がこのElementorと出会い、ハマり、好きになってしまい・・・今や他社のサイト制作を受注するまでに至りました。
 プログラミングリテラシーがゼロのこの僕が、仕事でホームページ制作を請負うまでになり、今や個人事業主から中小企業まで年間のべ25〜30サイトの制作をElementorと共にやらせて頂いております。

自称:プロElementor
趣味:Elementor・デザイン・マーケティング

オススメ記事

ポップアップ!

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