WordPressを使ったコード書かないウェブ制作情報サイト
Elementorのテンプレートライブラリの使い方

Elementorのテンプレート機能の使い方【無料でかっこいいデザイン】

『1週間でウェブサイトを作らないといけない・・・』
『プロがデザインしたサイトの中身を見たい・・・』

こんなことありませんか?

Elementorのテンプレート機能を使うと、1からページを作る必要がなくもうすでに完成されたデザインからウェブページを作り始めることができます。
デザインする時間も入りませんしすぐに始められます。
ウェブ制作のプロも使ってる機能です。

そして日本人が作った日本語のデザインのElemetnorのテンプレートを提供してるサイトもあります。

かっこいデザインのページをサクッと作って時間を節約したい方は、是非読んでくださいね。

Elementorのテンプレート機能の使い方を動画でご覧になりたい方はこちらからどうぞ!

Elementorのことをもっと知りたい方はElementor完全マニュアルを見てください。

Elementorのテンプレートライブラリとは

Elementorのテンプレートのリスト

Elementorのテンプレートライブラリとは、予めプロのデザイナーによって作られたElementorのレイアウトのリストであり、そこから好きなレイアウトをページにロードできます。
テンプレートは沢山あります。

テンプレートをロード

まずは普通にWordPressダッシュボードから固定ページを作成します。

テンプレートライブラリの起動

Elementorテンプレートをロード

いつもは左のプラスボタンから始めますが、今回は右のフォルダのアイコンを押します

Elementorテンプレートライブラリ
Elementorテンプレートライブラリ

するとこのように、色々なレイアウトのサムネが出てきます。
これがElementorのテンプレートライブラリです。

Elementorのテンプレートが少なく感じますか?実はもっと沢山あるんです

テンプレートのリストを見るとちょっとがっかりするかもしれません。
少ないですよね。

全てのElementerのテンプレートを見たい場合は、Elementor Kit Libraryを使う必要があります。
Elementor Kit Libraryの他にも、TOFUアカデミーという日本語のElementorのテンプレートを販売しているサイトもあります。
そして海外のテンプレートなら無料のものも結構あります。

Elementor Proでしか使えないテンプレートには『PRO』と書いてある

テンプレートライブラリのサムネの上に『PRO』と書いてありますね。
無料版ではこれらは使えません。
ですがスクロールしていくと、無料版ももっとあります

気に入ったものを選択そして『挿入する』を押す

テンプレート挿入ボタンをおす

サムネをクリックすると、このような画面が表示され、そのテンプレートがどのようなものなのか詳しく見ることができます。
右上の『挿入する』をクリックします。

テンプレートロード完了

ローディングスクリーンが表示された後、このようにテンプレートが表示されればロード完了です!

挿入するテンプレートに合わせてWordpressテンプレートを選択する

テンプレートには様々な形式があります。

Wordpressのテンプレートを選択

テンプレートに合わせて、Wordpressテンプレートを選択してください。

Elementor Canvas

テンプレートをそのまま使う場合はElementer Canvasを選択

Elementer Canvasはヘッダーもフッターも何もないまっさらな状態からElementerでページを構成する時に使います。
これは必須ではありませんが、テンプレートがヘッダーやフッターなど全て含んでいて、そのまま使用する場合は『Elementer Canvas』を使うのがベストです。

デフォルトテンプレート

既存のヘッダーフッタを使用する場合はデフォルトテンプレートを選択

デフォルトテンプレート既存のヘッダーフッターを使用し、コンテンツ部分のみ構成する時に使います。
テンプレートがヘッダーやフッタを含んでいなかったり、テーマなど既存のヘッダーフッターを使いたい場合は、『デフォルトテンプレート』を選択します。

ロードされたテンプレートを改良する

テンプレートは自由に編集することができます。

【変更前】

ロードしたテンプレートをアップデート変更前

【変更後】

ロードしたテンプレートをアップデート変更後

このように、全てElementorで出来ていますから自由にアップデートすることが出来ます。
好きなように改良しましょう。

自分のテンプレートを作り、ライブラリに追加する方法

実は自分が作ったレイアウトをElementorのテンプレートライブラリに保存し、使い回すこともできるんです。
今回はページのテンプレートを作成しています。

レイアウトをテンプレートライブラリに保存

左下の公開の隣のアイコンを押すと、『テンプレートとして保存』というリンクが出てきますので、それをクリックします。

Elementorのテンプレートライブラリに保存

この画面が出てきますので、好きな名前を入れて保存します。

Elementorのライブラリにレイアウト保存成功

この画面が出たら保存成功です。
画像のように『テンプレート』というタブの中に、カスタムで作ったテンプレートは表示され、『挿入する』というボタンをクリックすることで、Elementorに最初から入ってるテンプレートのようにページを挿入することが可能です。

コンテナ(ブロック)もロードそしてライブラリに保存可能

このライブラリのところに『ブロック』とありますよね。

Elementorテンプレートライブラリでブロックをロード

実はページ全体をロードせずに、コンテナのみをロードすることも可能です。
操作はページと同じです。
クリックして『挿入する』を押して見てください。

コンテナをライブラリに保存する

Elementorブロックをライブラリに保存

画像のように保存したいコンテナにいき、ピンクの枠で囲まれた部分で右クリックします。
すると画像のようなメニューが出てくるので『テンプレートとして保存』をクリックします。

Elementorセクションをライブラリに保存

先ほどのページとすっかり同じです。
テンプレートの名前を入れて保存を押します。

Elementorライブラリにコンテナが保存された

これで完了です。
ページではなく『コンテナ』で保存されています。

これでこれらのテンプレートをページ間で使い回すことが出来ます。
Elementorのこのテンプレートライブラリ、是非使って見てください!

日本語のElementorのテンプレートが欲しい

なんだかんだいって、結局はElemetnorが提供するテンプレートは海外のデザインですよね。
日本語で最初からデザインされたウェブサイトが欲しいと思いませんか?

TOFUアカデミーのElemetnor完成テンプレート

TOFUアカデミーで提供してるこれらのウェブサイトは、テーマではなく完成したElemetnorのウェブサイトです。
デモサイトはそのままコピーすることが可能です。
日本のデザインのElemetnorのテンプレートが欲しい方は是非TOFUアカデミーを覗いてみてください。

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

Naomi Suzuki

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

目次

「Elementorのテンプレート機能の使い方【無料でかっこいいデザイン】」への4件のフィードバック

  1. 2024年1月15日にelementorを購入しました。
    テンプレートが目当てで購入したのですが、記事のように多くのテンプレが出てきません。なにか設定や方法がありますか?
    99ドル払ってショックを受けています….宜しくお願い致します。

  2. Elementorで多言語化のウェブサイトを作ることは可能でしょうか?
    日本語と英語だけでい大丈夫です。
    ググっても出てこないので、よろしくお願いいたします。

コメントする

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

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

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

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

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