Elementorのアコーディオンウィジェットの使い方

Elementorのアコーディオンウィジェットの使い方

アコーディオンといえば楽器を思い浮かべる人も多いのではないでしょうか?
蛇腹のように伸び縮みして伸縮する楽器で、その特徴がカーテンやドアなどにも活用されています。

Elementorにもアコーディオンウィジェットがサポートされています。
今回はアコーディオンウィジェットにどんな機能があるのかや、使い方を解説していきましょう。

この記事は『Elementor Proの使い方』のコースを元に作っています。
動画でみたい方は是非このコースをチェックしてみてください。
TOFUラボに参加することによって無料で見ることもできます。

要素の一般からアコーディオンウィジェットを挿入する

アコーディオンウィジェットの場所

アコーディオンウィジェットは要素の一般にあります。
基本やプロ版の下に一般があるので探してみてください。

アコーディオンウィジェットを挿入

ウィジェットを見つけたらドラッグ&ドロップでキャンバスに挿入します。

アコーディオンアイテムの編集

アコーディオンアイテムの説明

ウィジェットを挿入するとコンテンツタブが開きます。
上の画像が挿入したときのデフォルトの状態。
『アコーディオン#1』というのはアコーディオンのタイトルです。

アイテムの追加

アイテムの追加

『項目を追加』でアコーディオンの数が追加されます。
新しく『アコーディオンのタイトル』という項目ができ、キャンバスにも同様に追加されていますね。

アイテムの削除

アイテムの削除

アイテムを削除したい時は丸で囲んだ×ボタンをクリックします。
×ボタンと同じ列のタイトルのアイテムが削除されます。

タイトル・説明の編集をする

タイトル、コンテンツの編集

デフォルト状態のアコーディオンタイトルをクリックすると、タイトルや説明部分が編集出来ます。

タイトルを『概要』に変え、テキストを入れてみました。
するとキャンバスにも反映されます。

使い方はテキストエディターウィジェットの記事と同じなので詳しくはそちらをご覧ください。

画像も挿入出来る

メディアを追加する

同じ編集画面で『メディア』をクリックすると、画像の選択画面が開きます。
好きな画像を入れてみましょう。

挿入された画像を選択すると、大きさや配置も変えられます。

アイコンを選ぶ

アイコンの設定をする

アイコンの設定は『項目を追加』の下にあります。
アクティブアイコンは開いている状態のアイコンです。

丸で囲んだところをクリックして、アイコンを選んでいきましょう。

アイコンをなしにしたいときは、丸で囲んだ列の1番左を選んでください。
列の真ん中で、自分の好きなSBGアイコンをアップロードすることもできます。

アイコン選択画面の説明

アイコン選択のデフォルト画面

アイコンを選ぶ画面では、初めにこのような画面が開きます。
これだと数が少ないですよね…。

アイコン一覧

そんな時はアイコン一覧をクリックすれば、このようにたくさん出てきます。
好きなアイコンを選択したら、右下にある緑のボタンをクリックしてください。

上のようにアイコンを選択しました。
開いているアイコンと、閉じているアイコンの違いがわかると思います。

アイコンを変えた後

アコーディオンのHTMLタグを選ぶ

アコーディオンをHTMLタグにする

アコーディオンのHTMLタグはデフォルト状態で『div』が選択されています。
四角で囲んだところで好きなHTMLタグを選べばいいのですが、選択するとスタイルが変わってしまうので注意してください。

スタイルタブで4つの装飾

スタイルタブの説明

コンテンツタブからスタイルタブに切り替えます。

  • アコーディオン
  • タイトル
  • アイコン
  • コンテンツ

以上の4つをスタイルタブで装飾します。

アコーディオンの枠線関係を変える

枠線関係の変更

枠線を太くしたければ矢印で示したように、ボタンを右にスライドさせます。
枠線の色は丸で囲んだところで変えられます。

地球のマークはglobalカラーになりますので、詳しく知りたい方は『Global colorsとGlobal fontsの使い方』の記事を参考にしてください。

タイトル関連の色や書体

タイトルの色や背景の色

タイトルの項目で、背景の色やテキストの色を変えてみましょう。
『有効時の色』で開いているアコーディオンの色も別に設定できます。

書体の説明

書体に関しては鉛筆マークをクリックすると、編集できます。
詳しくは先ほど紹介したテキストエディターウィジェットの記事で確認してみてください。

パディングで余白を調整できる

パディングの設定

タイトルの項目にある『パディング』で、タイトルテキストと枠線までの余白を調整します。

数字の列の右にあるリンクを外すと、上下左右別々に調整できるようになります。
デフォルトではリンクされている状態なので、必要があれば外して調整してください。

パディングの説明

画像で説明するとパディングは矢印の部分のことです。

アイコンの配置・色・間隔

アイコンスタイルの設定

アイコンの項目はタイトルテキストとは別に、アイコンの色などを変えることが出来ます。

  • 配置:前後どちらに置くか
  • 有効時の色
  • 間隔

以上の4つの項目で変更が可能です。

配置は前後どちらか選べる

アイコンの配置:前

丸で囲んだところの左側がグレーになっているときは、アイコンがタイトルの前に配置されます。

アイコンの配置:後ろ

右側を選びアイコンの配置を後ろにすると、こんな感じになります。
好きな位置を選んでくださいね。

アイコンの色

アイコンの色

アイコンの色も閉じているときと、開いているときで分けて設定できます。
画像で言うと、概要のアコーディオンが開いているので緑色のアイコンになっていますね。

間隔はアイコンとタイトルの間

アイコンとタイトルの間隔

『間隔』はアイコンとタイトルテキストの空白を広げたり、狭くしたりします。
矢印のように右にスライドさせると間隔が広がるので、試してみてくださいね。

コンテンツも別に装飾できる

コンテンツの設定

タイトルとは別でコンテンツの装飾ができます。

『背景』でコンテンツの背景、『色』でテキストの色を変えてみました。
キャンバスの方も反映されています。
『書体』と『パディング』はタイトルと内容が同じになるのでここでは割愛します。

もし反映されなければ、プレビュー表示すると変更が確認できるようになります。

高度な設定については『高度な設定』全容解明で説明しています。ぜひ1度確認してみてください。

以上がElementorの一般アコーディオンウィジェットの解説になります。

目次

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは130人を超えます。