crftロゴ

Elementorの画像ウィジェットをよく見てみる

心強い基本ウィジェット!
elementor 画像ウィジェット
Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加

Elementorの画像ウィジェットをよく見てみる

無料版Elementorでも使える画像ウィジェット

Elementor 画像ウィジェット

 Elementorのウィジェットの中でも基本的なもので利用することが非常に多いウィジェットが画像ウィジェットです。

 ドロップしたエリアにライブラリにある画像を表示することができます。

画像ウィジェット

 大きくダミーイメージが表示されている部分をクリックすると、別途ライブラリの内容が表示され目的の画像を選択することができます。

 画像サイズはページに読み込むときの画像の大きさ、配置は水平方向の表示位置、キャプションは画像の下に表示する文字列、リンクは画像に設定するハイパーリンクを指定することが可能です。

スタイル用意された様々なオプション

 画像とキャプションに対して様々な指定を行うことができます。

 幅や高さの指定はもちろん、画像ウィジェットが優れているのがホバーアニメーションをマウスのクリックで指定できてしまうところです。

CSSアニメーション

 ホバー後の画像を別途用意することなくCSSの効果でホバー時の効果を指定することができます。

 CSSアニメーションでは変化するスピードも指定可能です。

tomoro small
ぼかし
tomoro small
明るさ
tomoro small
コントラスト
tomoro small
彩度
tomoro small
色相

CSS意外のホバーアニメーション

 2022年11月時点で実装されているアニメーションの種類を列挙してみました。

tomoro small
Grow
tomoro small
Shrink
tomoro small
Pulse
tomoro small
Pulse Grow
tomoro small
Pulse Shrink
tomoro small
Push
tomoro small
Pop
tomoro small
Bounce In
tomoro small
Bounce Out
tomoro small
Rotate
tomoro small
Grow Rotate
tomoro small
Float
tomoro small
Sink
tomoro small
Bob
tomoro small
Hang
tomoro small
Skew
tomoro small
Skew Forward
tomoro small
Skew Backward
tomoro small
Wobble Vertical
tomoro small
Wobble Horizontal
tomoro small
Wobble To Bottom Right
tomoro small
Wobble To Top Right
tomoro small
Wobble Top
tomoro small
Wobble Bottom
tomoro small
Wobble Skew
tomoro small
Buzz
tomoro small
Buzz Out

 残念ながらこれらのアニメーションに対して細かな設定は行うことはできません。

画像ウィジェットはElementor Proでさらに便利になる

 ElementorをPro版にすると、画像やキャプション、ハイパーリンクにダイナミックタグという機能が使えるようになります。

 ダイナミックタグを使うと、動的に画像を取得したり、検索結果によって変化する表示などが行えるようになります。

 画像ウィジェットで利用できるダイナミックタグは以下の通り。

画像部分

Post

  • アイキャッチ画像

サイト

  • サイトロゴ

Author

  • Author Profile Picture
  • User Profile Picture

キャプション部分

Post

  • Post Custom Field
  • Post Date
  • Post Excerpt
  • Post ID
  • Post Terms
  • Post Time
  • Post Title

Archive

  • Archive Description
  • Archive Meta
  • Archive Title

サイト

  • Page Title
  • SiteTagline
  • Site Title
  • Current Date Time
  • Request Parameter
  • ショートコード
  • User Info

Media

  • Featured Image Data

Author

  • Author Info
  • Author Meta
  • Author Name

コメント

  • Comments Number

ハイパーリンク

Post

  • Post Custom Field
  • Post URL

Archive

  • Archive URL

サイト

  • Site URL
  • Internal URL
  • ショートコード

Media

  • Featured Image Data

アクション

  • Popup
  • Lightbox
  • Contact URL

Author

  • Author URL

コメント

  • Comments URL

WooCommerce

  • Add To Cart

 ダイナミックタグによってはそれぞれ異なった詳細設定を行うことでより複雑な処理を行うことができるものもあります。