ウィジェット(固定ページなどの編集ページでのElementorの機能)のうち、一般グループ – 切り替え(トグル)について説明します。
トグル ウィジェットを使用すると、折りたたまれたテキスト ボックスを作成できるので、訪問者は各テキスト ボックス アイテムのタイトルのみを見ることができます。これにより、コンテンツを凝縮した形で表示することができるので、訪問者は長いページをスクロールする必要がなく、簡単にタイトルをふるい分けることができます。
似たようなウィジェットにアコーディオン ウィジェットがありますが、トグル ウィジェットとアコーディオン ウィジェットには主に 2 つの違いがあります。
各項目のタイトルをクリックすると詳細説明が表示されます。
各項目のタイトルと説明を入力します。
Tip: アイテムはドラッグ&ドロップで、リスト内で上下に移動することができます。
アイテムの追加ボタンをクリックして、新しい切り替えを追加します。
アイテムを展開動作を表すアイコンを選択します。
「なし」、「SVGをアップロード」、または「アイコンライブラリ」からアイコンを選択します。アイコンライブラリを選択した場合、ライブラリ内に「推奨」タブが表示され、拡大概念を表すための推奨アイコンが表示されます。
アクティブなアイテムを折りたたむアクションを表すアイコンを選択します。
「なし」、「SVG をアップロード」、または「アイコン ライブラリ」からアイコンを選択します。アイコンライブラリを選択した場合、ライブラリに「推奨」タブが表示され、折りたたみの概念を表現するための推奨アイコンが表示されます。
タイトルに使用するHTMLタグをH1-H6またはDIVに設定します。
切り替えウィジェットの周りと各アイテムの間のボーダーの太さを設定します。
切り替えウィジェットの周りと各アイテムの間のボーダーの色を選択します。
各項目の間のスペースを設定します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
ボックスシャドウを切り替えウィジェットの周り、または各アイテムの間にスペースがある場合は各アイテムの周りに設定します。ボックスシャドウの色、水平位置、垂直位置、ぼかし、広がり、シャドウの位置を調整することができます。
タイトルの背景色を選択します。
アクティブでないタイトルのテキストの色を選択します。
アクティブなタイトルのテキストの色を選択します。
タイトルの書体オプションを変更します。
コンテンツの背景色を選択します。
コンテンツのテキスト色を選択します。
コンテンツの書体オプションを変更します。
コンテンツのパディングを設定します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
ドロップダウンをクリックしてアニメーションを選択します。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
Fading | Zooming | Bouncing | Sliding |
---|---|---|---|
Fade in | Zoom in | Bounce in | |
Fade in Down | Zoom in Down | Bounce in Down | Slide in Down |
Fade in Left | Zoom in Left | Bounce in Left | Slide in Left |
Fade in Right | Zoom in Right | Bounce in Right | Slide in Right |
Fade in up | Zoom in Up | Bounce in Up | Slide in Up |
Rotating | Attention Seekers | Light Speed | Specials |
---|---|---|---|
Rotate in | Bounce | Light Speed in | Roll in |
Rotate in Down Left | Flash | ||
Rotate in Down Right | Pulse | ||
Rotate in Up Left | Rubber Band | ||
Rotate in Up Right | Shake | ||
Head Shake | |||
Swing | |||
Tada | |||
Wobble | |||
Jello |
1つ目の色を選択します。
1つ目の色の位置を選択します。
2つ目の色を選択します。
2つ目の色の位置を選択します。
グラデーションの種類を選択します。
タイプ:線状を選んだ際の角度を設定します。
タイプ:放射状を選んだ際の位置を選択します。
ボーダー(枠線)タイプを選択します。
枠線の角を丸くできます。
:デスクトップ、タブレット、モバイルそれぞれで設定可能な項目です。
デスクトップ表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
タブレット表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
モバイル表示のとき、このセクションを表示または非表示にするかを設定します。
注:レスポンシブ表示はプレビューやライブページでのみ有効で、Elementor での編集中は使えません。
のメッセージが出てPRO版の利用をアナウンスします。属性を満たす
Attributes では、任意の要素にカスタム HTML 属性を追加することができます。
のメッセージが出てPRO版の利用をアナウンスします。カスタム CSS のご紹介
カスタム CSS を使用すると、任意のウィジェットに CSS コードを追加して、エディタでライブ表示することができます。