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

ElementorProのダイナミック機能 を使ってみよう!

ElementorProのダイナミック機能 はPro版の代表する機能の1つで、投稿や固定ページに付随する情報やデータを呼び出して、表示させる事が出来る機能です。

おじさん
おじさん
ん〜何言ってるかわからない・・・
ちょっとあんたは黙ってて!
おばさん
おばさん
おじさん
おじさん
えっ? なんで、お前がいるんだよ・・・(汗)

あ、ご夫婦だったんですか?(笑)

 

ダイナミック機能とは?

以前、ダイナミック機能の紹介記事もありますので、合わせてご覧頂くとよりわかりやすいかもしれませんので、是非!

Elementor(PRO版)ダイナミック機能徹底レビュー

dynamic-image

例えば、投稿日をページのある部分に大きく表示したいとします。

dynamic01

その場合は、見出しウィジェットやテキストエディターウィジェット、ボタンウィジェットなどとにかくテキスト系のウィジェットを配置し、ダイナミック表記がある部分をクリックし、出したいデータの種類を選択(この場合は「Post Date」)

dynamic02

おじさん
おじさん
おぉ〜出た!

記事の投稿日データをここに呼び出し表示されました。

テキストデータだけではなく、画像データも投稿や固定ページから引っ張ってくる事が可能です!

dynamic03

今度は画像ウィジェットや画像ボックスなど画像系ウィジェットを配置し、ダイナミックをクリックし、呼び出すデータを選択します。すると・・・

dynamic04

すごいわね・・・
おばさん
おばさん

そうなんです!工夫次第では色々なデータを使ったページも自由自在です!

しかも、1ページごと作るとかではなく、テーマビルダーですから・・・投稿や固定ページ用デザインを組んでしまえば・・・

dynamic05

あとは中身となるコンテンツを作るだけ!

どんなデータが呼び出せるの?

ダイナミック機能を理解するには、「呼び出されるデータ」と「呼び出す側」のイメージが必要です。呼び出されるデータとは、投稿や固定ページなどに入力されたデータです。反対に、呼び出す側はダイナミックを設定するウィジェットの各種項目の事を指します。

呼び出す側

一言で言えば、「ダイナミック機能が使えるウィジェット項目タイプ」です。

dynamic-widget1
↑まずは一番多くダイナミック機能が使えるテキストタイプの項目

dynamic-widget2
↑次にリンク系の項目

dynamic-widget3
↑画像系の項目

dynamic-widget4
↑少しわかりづらいですが、数値系の項目

4つのタイプのウィジェット項目に分かれます。(設定出来る項目はウィジェットによって異なります)

それぞれのウィジェット項目のタイプにより、呼び出せるデータは異なります。

呼び出されるデータ

呼び出されるデータは種類が多いため、上記の呼び出す項目(ウィジェット項目タイプ)も合わせた一覧を作成しましたので、こちらをご覧ください。

dynamic-listfilepict-min

この様に、呼び出す側によって、呼び出せるデータが異なります。

(本家Elementorの解説ページ)
https://docs.elementor.com/article/556-dynamic-tags

ダイナミック系ウィジェット?

ダイナミック機能がそのままウィジェットになった物もあります。

dynamic-widget1

例えば、SINGLE系ウィジェットもダイナミック系ウィジェットと言えると思います。最初の右上のウィジェット「Post Titleウィジェット」は、単純に投稿タイトルを表示させるウィジェットです。

おじさん
おじさん
それって、見出しウィジェットにダイナミック機能で・・・

おぉ!素晴らしいです。おっしゃる通り、見出しウィジェットでダイナミック機能を使い、Post Titleを呼び出した物を同じになります!

あたしが言おうと思ってたのに!!
おばさん
おばさん

まぁまぁ・・・(汗)

ただ、いくつかのウィジェットでは、ダイナミック機能に含まれないものもあります。例えば、2段目の右「Post Content」で、投稿の本文部分を表示させるウィジェットです。これはダイナミック機能では再現出来ないものです。

いづれにしても、これらの機能やウィジェットを使い、好きな様にデータを呼び出して表示させる事が出来るのは、Elementor Proの魅力ではないでしょうか。

活用アイデア

では、どの様な場面でダイナミック機能が利用出来るか。

(1)記事ページのデザイン
投稿(記事)ページのデザインにはダイナミック機能は最適!もちろん、今ご覧頂いているこの記事もダイナミック機能でタイトルやカテゴリー、公開日、サムネイル画像などなど、データを引っ張ってきてます!

(2)問い合わせフォームの自動入力
例えば、「サービスAについて問い合わせる」というボタンを作成し、ダイナミック機能を使う事で、問い合わせ内容欄に「サービスAに関する問い合わせ」と事前に表示させる事が出来たりもします!

(3)ポップアップや画像のライトボックスのスイッチ
これは基本的な使い方ですが、ボタンウィジェットやアイコンウィジェットのリンクにポップアップのダイナミックを設定する事で、ポップアップを表示させるスイッチ(トリガー)にすることも出来たりします。また、同様に画像をライトボックス表示させるきっかけ(トリガー)にすることも出来ます。

まとめ

機能ってなかなか伝わりづらい部分があるかと思います。特にダイナミック機能は目に見える様な変化が少ないので・・・とはいえ、 Elementorのダイナミック機能 は他のビルダー系には無い機能で、ホームページ制作の幅をかなり広げてくれるものだと思います。

アイデア次第で魅力的なコンテンツになると思います!

 

この記事の関連講座

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

author

ITKA / 加藤 誠

ITKA / 加藤 誠

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

こちらもご覧下さい

ポップアップ!

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