絞れば、出てくる、アイディア。

Essential Addons for Elementor【3つの使えるウィジェット】

Essential Addons for Elementor の使い方【3つの使えるウィジェット】

Elementorのプラグイン「Essential Addons for Elementor」(エッセンシャル・アドオンズ フォー・エレメンター)は、無料で多くの機能を使うことができるとっても便利なプラグインです。

今回は、Essential Addons for Elementor のウィジェットの中で、ウェブサイト制作に使えるおすすめの3つのウィジェットの特徴&使い方を紹介します!

《今回の記事で紹介するウィジェット》

  • Image Accordion(イメージ アコーディオン)
  • Filterable Gallery(フィルターブル ギャラリー)
  • Content Ticker (コンテンツ ティッカー)

↓Essential Addons for Elementor の基本の使い方については、こちらの記事をご覧ください!↓

1. Image Accordion(イメージ アコーディオン)

Image Accordion(イメージ アコーディオン)マウスをかざすと画像が広がり、タイトルやコメントが表示される機能です。
画像を背景文字を載せることができます!

今回は、上のようなカフェのメニューのカテゴリを作った方法を紹介します。

まず初めに、ワードプレスのメニューから「Essential Addons」をクリックします。 一番上のメニューから、「Elements」をクリックし、中央あたりまでスクロールして「Creative Elements」の中の「Image Accordion」がONになっているかを確認します。

↑まず初めに、ワードプレスのメニューから「Essential Addons」をクリックします。

一番上のメニューから、「Elements」をクリックし、中央あたりまでスクロールして「Creative Elements」の中の「Image Accordion」ONになっているかを確認します。
(画像のように紫色になっていればONになっています)

Image Accordionを設置したい固定ページ(または投稿)の編集画面で要素の検索に「Image」と入力します。 「Image Accordion」が表示されるので、設置したい箇所にドラッグ&ドロップします。

Image Accordionを設置したい固定ページ(または投稿)の編集画面で要素の検索「Image」と入力します。
「Image Accordion」が表示されるので、設置したい箇所にドラッグ&ドロップします。

Image Accordionを設置したら、画面左側に編集メニューが表示されます。

Image Accordionを設置したら、画面左側に編集メニューが表示されます。

Background Imageに写真、Titleには名前の通りタイトルを登録します。
その下にコメント、そしてタイトルのリンクも設定できます。

文字の大きさやフォント、色などのスタイルももちろん編集できます。 ただ、スタイルは全てのアコーディオンで共通に設定されます。

文字大きさフォントなどのスタイルももちろん編集できます。
ただ、スタイルは全てのアコーディオンで共通に設定されます。

他のアコーディオンにも同様に画像やコメントを設定して、完成です!

2. Filterable Gallery(フィルターブル ギャラリー)

Filterable Gallery(フィルターブルギャラリー)も、マウスをかざすとタイトルとコメントが表示される機能ですが、アコーディオンのように画像自体の動きはありません。

シンプルなギャラリーなので、飲食店のメニューや商品紹介のサムネイルに最適です。
もちろん各画像にタイトルやリンクを埋め込む事もできます。

一番上のメニューから、「Elements」をクリックし、中央あたりまでスクロールして「Creative Elements」の中の「Filterable Gallery」がONになっているかを確認します。

↑ワードプレスのメニューから「Essential Addons」をクリックします。

一番上のメニューから、「Elements」をクリックし、中央あたりまでスクロールして「Creative Elements」の中の「Filterable Gallery」ONになっているかを確認します。
(画像のように紫色になっていればONになっています)

Filterable Gallery を設置したい固定ページ(または投稿)の編集画面で要素の検索に「Filter」と入力します。「Filterable Gallery」が表示されるので、設置したい箇所にドラッグ&ドロップします。

Filterable Gallery を設置したい固定ページ(または投稿)の編集画面で要素の検索「Filter」と入力します。
「Filterable Gallery」が表示されるので、設置したい箇所にドラッグ&ドロップします。

Filterable Galleryを設置したら、画面左側に編集メニューが表示されます。 また、デフォルトは上記のように3カラム、6つの画像が表示されていますが、今回はこれを横並びの4カラムに設定していきます。

Filterable Galleryを設置したら、画面左側に編集メニューが表示されます。
また、デフォルトは上記のように3カラム6つの画像が表示されていますが、今回はこれを横並びの4カラムに設定していきます。

編集画面から、SettingsでItems to show を「4」、Columnsも「4」にします。 また、Link toを「None」に設定し、Titles ClickableとImage Clickableを「Enable」にします。

編集画面から、SettingsItems to show「4」Columns「4」にします。
また、Link to「None」に設定し、Titles ClickableImage Clickable「Enable」にします。

Filterable ControlsをOFF(いいえ)にすると、ギャラリーの上に表示されていた「ALL・GALLERY ITEM」という表示を消すことができます。

Filterable ControlsOFF(いいえ)にすると、ギャラリーの上に表示されていた「ALL・GALLERY ITEM」という表示を消すことができます。

それぞれの画像の中身は、「Gallery Items」で編集できます。 もちろんギャラリーの数を増やしたり、減らすことも可能です。

↑それぞれの画像の中身は、「Gallery Items」で編集できます。
もちろんギャラリーの数を増やしたり、減らすことも可能です。

画像の中身は「Item Name」でタイトル、中段の「Contents」にコメント、「Image」に画像をと入れることができます。 また、リンクも設定することができます。

↑画像の中身は「Item Name」でタイトル、中段の「Contents」にコメント、「Image」に画像をと入れることができます。
また、リンクも設定することができます。

タイトルコメントフォントや色は、「スタイル」Title TypographyContent Typographyで設定できます。

他のギャラリーにも同様に画像やコメントを設定して、完成です!

3. Contents Ticker(コンテンツ ティッカー)

Contents Ticker(コンテンツ ティッカー)は、投稿など自動で表示させることができる機能です

一番上のメニューから、「Elements」をクリックし、中央あたりまでスクロールして「Dynamic Content Elements」の中の「Content Ticker」がONになっているかを確認します。 (画像のように紫色になっていればONになっています)

↑ワードプレスのメニューから「Essential Addons」をクリックします。

一番上のメニューから、「Elements」をクリックし、中央あたりまでスクロールして「Dynamic Content Elements」の中の「Content Ticker」ONになっているかを確認します。
(画像のように紫色になっていればONになっています)

Content Tickerを設置したい固定ページ(または投稿)の編集画面で要素の検索「Ticker」と入力します。
「Content Ticker」が表示されるので、設置したい箇所にドラッグ&ドロップします。

「Content Tickerを編集」の画面では、Tag TextでTickerのタイトルを編集することができます。 また、Animation Settingsでは、コンテンツのスピードや動きなどのアニメーションの設定が可能です。

「Content Tickerを編集」の画面では、Tag TextTickerのタイトルを編集することができます。
また、Animation Settingsでは、コンテンツのスピード動きなどのアニメーションの設定が可能です。

TickerTag(タイトル)フォントサイズ「スタイル」から編集することができます。
Ticker Contentではコンテンツの内容(記事の題名など)、Tag Styleではタグ(タイトル=「今日のおすすめ記事」のところ)の色やフォント、サイズが編集できます。

 

まとめ🍋

今回は、Essential Addons for Elementor のおすすめウィジェット3つを紹介しました。
どれもウェブサイトやブログ作成に使い道があるウィジェットではないかと思います。

ぜひ、サイト制作に役立ててもらえたら嬉しいです!

無料で使えて、便利なウィジェットがたくさんの「Essential Addons for Elementor」ウィジェット紹介シリーズは今後も連載✏️予定です!!

Essential Addons for Elementor 使い方シリーズ