fbpx

Elementor Pro『テンプレート』ウィジェットの使い方

『テンプレート』ウィジェットは、その名の通りElementorのテンプレートを呼び出すことのできるウィジェットです。
使い方はとてもシンプルで、既製のテンプレートから自分で作成したテンプレートまで、自由にサイトにテンプレートを当てはめることができます。


この記事では簡単なテンプレートの作成方法から、テンプレートの呼び出し方を交えてテンプレートウィジェットの使い方を詳しく説明していきます。

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

テンプレートウィジェットの挿入

テンプレートウィジェットの挿入

『テンプレート』ウィジェットをドラッグ&ドロップでカラムに挿入します。

ウィジェット挿入後の表示画面

こちらはテンプレートウィジェット挿入後の表示画面です。
ご覧の通り、テンプレートウィジェットにはコンテンツタブのみでスタイルタブは存在しません。

またテンプレートウィジェットは、挿入できるテンプレートがないと説明が成立しませんのでまず以下セクションでテンプレートを作成し、それをテンプレートウィジェットに挿入するという流れで説明をしていきます。

テンプレートを作成する

テンプレートは既製のものもありますが、こちらのサンプルでは自分でテンプレートを作成する方法を紹介します。

テンプレートを新規追加する

ダッシュボード・テンプレートの編集画面

こちらはダッシュボードの『テンプレート』の編集ページです。
画面上部の『新規追加』をクリックします。

テンプレートの種類を選択

するとこの様な表示画面になります。
『作業を行いたいテンプレートの種類を選択』から『セクション』を選択します。

テンプレートに名前をつける/テンプレートを作成をクリック

次に『テンプレートに名前をつける』に好きなテンプレート名を入力し、『テンプレートを作成』をクリックします。
※こちらのサンプルではテンプレート名を『テストセクションテンプレート』とします。

テンプレートライブラリ


するとこの様に『ライブラリ』が表示されます。
ここから既にできたテンプレートを選択することもできますが、このサンプルでは自分でテンプレートの作成をしますので、ライブラリの画面右上の『×ボタン』をクリックします。

テンプレート作成画面(Elementor編集画面)

するとこの様に、真っさらな状態のElementorの編集画面になります。

ウィジェットをカラムにレイアウトする

ウィジェットのレイアウト

テンプレートに載せたいウィジェットをカラムにドラッグ&ドロップします。
※こちらのサンプルではカラムを2分割し、

  • 見出しウィジェット(左上)
  • テキストエディターウィジェット(左下)
  • 画像ウィジェット(右)

を配置します。

自作テンプレートの公開

ウィジェットの挿入が終わったら、画面左下の『公開』をクリックします。
※画像ウィジェットにあらかじめ豆腐の画像を挿入しました。

公開が完了すれば既にテンプレートは作成されています。

コンテンツタブ・テンプレートを選択

コンテンツタブ・テンプレートを選択

テンプレートウィジェットのコンテンツタブには『テンプレートを選択』という項目しかありません。
『テンプレートを選択』の下の『すべて』をクリックすると上記画面の様にテキストバーが表示されますのでそこに一文字以上入力するか、テンプレート名のキーワドを入力します。

テンプレートをキーワード検索・選択

すると上記の様に、キーワードに該当するテンプレート名が出てきますのでそこからテンプレートを選択します。

テンプレート選択後の表示画面

するとこの様に先ほど作成した『テストセクションテンプレート』のテンプレートが表示されます。

テンプレートを編集する

テンプレートを編集

編集タブの一番下に『テンプレートを編集』というボタンがあります。
こちらは先ほど挿入した自作の『テストセクションテンプレート』自体の編集になります。
『テンプレートを編集』をクリックすると、

別ウィンドウで表示されたテンプレートを編集する画面

この様に別のウィンドウで現在テンプレートウィジェットに挿入中のテンプレート(テストセクションテンプレート)の編集画面に切り替わります。

テンプレート再編集・更新

例えば画像を変えて『更新』をクリックします。

テンプレートウィジェット編集画面・リフレッシュ

そしてテンプレートウィジェットの編集画面に戻り、リフレッシュボタンをクリックすると…

テンプレート変更に伴いウィジェット内で呼び出したテンプレートも変更された後の表示画面

この様に大元のテンプレートの変更に伴い、ウィジェット内で呼び出しをしたテンプレートの内容もそれに従い変更されます。


テンプレートウィジェットは同じ内容の構成のものをサイト内で多用する場合にとても役立つウィジェットですね!

またテンプレートを自作しなくとも、テンプレートライブラリにはElementorにはたくさんの既存のテンプレートが存在します。

既存のテンプレートの使い方について、『Elementorのテンプレート機能の使い方【無料でかっこいいデザイン】』の記事で詳しく説明をしていますので合わせてお読みください!

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

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

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

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

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