Elementorのアコーディオン・切り替えウィジェットの使い方

執筆者 | 更新日 2020年02月10日 | Elementorの使い方 | コメント0件

Elementorのアコーディオン・切り替えウィジェットでできること

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

Elementorのアコーディオンウィジェットと切り替えウィジェットは、ほぼ同じ機能で、どちらも、アコーディオンのように伸び縮みし、タイトルをクリックするとテキストが表示されるようになります。例えば、FAQやQ&Aなどで使います。

【限定】Elementorの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのアコーディオン・切り替え設定

アコーディオンウィジェット コンテンツ設定

まずは「コンテンツ」にある「アコーディオン」もしくは「切り替え」の設定をご紹介していきます。

アイコン

ELementor アコーディオンウィジェット アイコンの選択

通常時のアイコンを選択します。「Icon Library」ではElementorで用意されているアイコンを、「Upload SVG」ではSVGファイルをアップロードしてアイコンを選択します。

アクティブアイコン

アクティブアイコンも同じです。

タイトルHTMLタグ

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • div

この項目では、タイトルのHTMLタグを選択します。

スタイルのアコーディオン・切り替え設定

切り替え スタイルの切り替え設定

ここからは、「スタイル」にある「アコーディオン」または「切り替え」の設定について確認していきましょう。

ボーダー幅

それぞれのタイトル・説明文を分けるボーダーの太さを調整します。

ボーダー色

ボーダーの色を設定します。

スペースの間隔

これは、「切り替え」ウィジェットにしかない項目ですが、ボーダーと次のタイトルとのスペースを調節することができます。

ボックスシャドウ

アコーディング ボックスシャドウ

  • 水平
  • 垂直
  • ぼかし
  • 拡大
  • 位置

見出しに、影をつけることができます。ボタンをクリックするだけでテキストシャドウがオンになりますが、影の濃さや位置を変更したいのであれば、上記の4項目を設定してみましょう。

スタイルのタイトル設定

Elementor アコーディオンウィジェット スタイル タイトル

背景

タイトルの背景色を設定します。

通常時のタイトルの色を設定します。

有効時の色

アコーディオン・切り替えがオンになっている時のタイトルの色を設定します。

書体

切り替え 書体

  • フォント
  • サイズ
  • 太さ
  • 変換
  • スタイル
  • 装飾
  • 行の高さ
  • 字間

書体では、タイトルの書体を設定できます。フォントやサイズ、太さなどが設定できます。

パディング

切り替えウィジェット タイトルのパディング

タイトルとタイトルセクションの外枠のスペースを設定します。

スタイルのアイコン設定

Elementor アコーディオンウィジェット スタイル アイコン

ここからは、「スタイル」の「アイコン」にある設定項目を設定していきます。

配置

アイコンの位置をタイトルの前に置くか後ろに置くか設定できます。「開始」が前で、「終了」が後ろになります。

通常時のアイコンの色を設定します。

有効時の色

アコーディオン・切り替えがオンになっている時のアイコンの色を設定します。

スペース

アイコンとタイトルのスペースを調節します。

スタイルのコンテンツ設定

Elementor アコーディオンウィジェット スタイル コンテンツ

ここからは、「スタイル」にある「コンテンツ」を確認していきましょう。

背景

コンテンツの背景色を設定します。

文章のテキストカラーを設定します。

書体

書体は、タイトルと同じです。フォントやサイズ、太さなどが設定可能です。

パディング

切り替えウィジェットのパディング

「コンテンツ」の「パディングは、説明文とそのセクションの外枠のスペースになります。数値が大きくなると、そのスペースが広がっていきます。

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

Elementorの使い方を学びませんか?

Elementorの各ウィジェットの使い方からページの作り方まで網羅的にカバーしたコースが無料で受講できます。(通常¥980)

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?