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

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

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest
dynamic-thumbnail

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

プロフィール

icon

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

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

オススメ記事

ポップアップ!

vb_header
<注意事項>
・お問い合わせ頂きました内容により、
 ご回答・ご返信出来ない場合がございます。
・ご質問やお悩みに関する内容について、
 記事にて「匿名」にて取り上げさせて頂くことも御座います。
・上記の内容についてご了承・ご同意の上、本フォームよりお送り下さい。

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