Elementor 切り替えウィジェットで表示非表示!

切り替え(トグル(Toggle))とは、二つの状態を交互に切り替えられるような仕組みのこと。タイトルをクリックすると詳細がすらすらっと出る仕組みの事です。

えれくり的にはあまり利用しないウィジェットなのですが?いつか使ってみたいと思います。

はじめに

左パネルの一般エレメント>切り替えウィジェットを「新しいセクションの追加」へドラッグ&ドロップ。

切り替えのタイトルのタグ設定はH1〜H6、DIVから選べます。

バリエーション

切り替えウィジェットの設定を変更して3種類作成してみました。

この記事下のDEMOボタンより確認お願いします。

切り替え その1

左パネルのコンテンツエリアより

アイコン:通常時

Active Icon:選択時

各切り替えのタイトルのアイコンを変更できます。

切り替え その2

スタイルエリア>コンテンツの背景色:選択時の本文の背景色

詳細エリア>背景の色:切り替えタイトルの背景色

をそれぞれ設定できます。

また詳細エリアのボーダーから外枠の線や角丸処理の設定がおこなえます。

切り替え その3

スタイルエリアの切り替えでは各切り替えタイトルの空きや影をつける事ができます。

クリックできそうな雰囲気が出るので良いですね。?

 

あとがき

書きたい内容がたくさんあるけど、1ページにシンプルに入れたい場合や画面が小さいスマートフォンなど表示面積の少ない場面で使い道がありそうですね。?

DEMO

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.