fbpx

Elementor Pro『フリップボックス』ウィジェットの使い方

『フリップボックス』ウィジェットは、一つのスペースでカードを裏返す様に表と裏で2つの違った情報を入れることができるウィジェットです。

またElementor Proにのみ搭載されています。
この記事ではElementor proウィジェット『フリップボックス』について詳しく解説をしていきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

フリップボックスウィジェットの挿入

フリップボックスウィジェットの挿入

『フリップボックス』ウィジェットをカラムに挿入します。

フリップボックスウィジェット挿入後の表示画面

するとこの様な表示画面になります。
そして『フリップボックス』の最大の特徴は、ボックスにマウスオーバーした時にボックスが回転し、別の面が表示されるということです。
フリップボックスが回転する様子は以下の動画でご覧いただけます。

コンテンツタブ・Front

コンテンツタブ・Front

編集タブの一番上に

  • コンテンツ:ボックス内のタイトルやアイコンなど
  • 背景:ボックスの背景

の2つの要素があります。

どちらを選択しているかで編集タブの内容も大きく変わりますので、これらを大きく分けて以下のセクションで説明をしていきます。

背景

『背景』の編集

『背景」とは、上記画面の緑色の部分を指します。

背景タイプ / クラシック

背景タイプの説明

『背景タイプ』では

  • クラシック
  • グラデーション

のオプションどちらを選択するかで編集タブの内容も変わります。
※デフォルトは『クラシック』に設定されています。

背景の色の変更

『色』では、背景の色をカラーピッカーより自由に選択することができます。

画像

背景に画像を挿入

『画像』では、背景に当たる部分を画像にすることも可能です。
メディアライブラリ、またはファイルをアップロードをして画像を挿入します。

位置 / 添付 / 繰り返し / サイズ

背景画像の更に細かい設定

  • 位置
  • 添付
  • 繰り返し
  • サイズ

については、【Elementor – 『高度な設定タブ』全部説明】の記事の『背景』のセクションにて詳しく説明をしていますのでそちらを参考にしてください。

背景オーバーレイ

背景オーバーレイの説明

『背景オーバーレイ』は、デフォルトは透明色に設定されていますが例えば少し色みのエフェクトを加えたい時などこの様に色を入れることができます。

CSSフィルタ / ボタンモード

CSSフィルタとボタンモードの説明

また、背景オーバーレイを入れると編集タブには新たに

  • CSSフィルタ
  • ボタンモード

のエディターが表示されます。

『CSSフィルタ』の詳しい説明は【Elementorの『画像』ウィジェットの使い方】、
『ボタンモード』【Elementor Pro『Gallery』ウィジェットの使い方】の記事の『スタイルタブ・Overlay』のセクションを参考にして下さい。

背景タイプ / グラデーション

グラデーションの説明

背景タイプを『グラデーション』に選択すると、上記画像の様にグラデーションを入れることができます。
グラデーションのタイプウヤ角度なども自由に変更ができますので、ご自身で色々と試してみてください。

コンテンツ

コンテンツの編集

Graphic Element / アイコン

Graphic Elementmtの説明

『Graphic Element』では、Flip Boxの中央に配置されるアイコンや画像などの要素を編集することができます。

アイコンの選択

『アイコン』はデフォルトですでに★のアイコンが挿入されていますが、アイコンライブラリーまたはSVGをアップロードし別のアイコンを挿入することが可能です。

表示

アイコン表示のオプション

『表示』では、アイコンの表示形態を以下より選択します。

  • デフォルト
  • 重ねる
  • フレーム付き

『重ねる』『フレーム付き』等、アイコンの表示と形状ににつきましては、【Elementor アイコンウィジェットの使い方】の記事で詳しく説明をしていますのでそちらをご覧ください。

Graphic Element / 画像

Graphic Element・画像の説明

Graphic Elementsの『画像』では、文字どおり画像を挿入することができます。
上記画像Graphic Elementsの『画像』を選択した時の表示画面です。

『画像の選択』『画像サイズ』につきましては、【Elementorの『画像』ウィジェットの使い方】の記事を参考にしてください。

タイトル・説明

タイトル・説明の変更

『タイトル・説明』はフリップボックス内の文字の編集が行えます。
※文字色の変更はスタイルタブでの編集になります。

『タイトル・説明』変更後の表示画面

コンテンツタブ・Back

コンテンツタブ・Back

『Back』はマウスオーバーしたら現れる面の編集ができます。
編集の仕方は『Front』の時と概ね同じですので、上記セクションを参考にしてください。
しかし『Front』と大きく異なる部分は、Backには

  • アイコンが存在しない
  • 『Button Text』と『リンク』の編集が存在する

ことです。

FrontとBackの違い・Button Text&リンク

Button Text

Button Textの編集

『Button Text』はボタン内の文字をテキストバーから好きに変更することができます。
※デフォルトは『Click Here』と表示されています。

リンク

『リンク』はボタンにリンクを挿入することが可能です。

コンテンツタブ・設定

コンテンツタブ・設定

高さ

『高さ』の設定

『高さ』は、カーソルを左右にスライドさせることにより背景の画像の高さを拡張・縮小することが可能です。
上記画面は高さの値を『500』にした時の表示画面です。
※デフォルトの値はおそらく『280』に設定されています。

ボーダーの丸み

ボーダーの丸みの設定

『ボーダーの丸み』は、カーソルを右にスライドさせることにより背景画像の角に丸みをつけることができます。
上記画面はボーダーの丸みの値を『80』にした時の表示画面です。
※デフォルトの値は『0』に設定されています。

Flip Effect

Flip Effectのオプション

『Flip Effect』はフリップのFrontとBackが切り替わる時のアニメーションを以下から選択することができます。

  • Flip(デフォルト)
  • Slide
  • Push
  • Zoon In
  • Zoom Out
  • Fade

こちらはFlip Effectを『Slide』に設定した時のサンプル動画です。

Flip Direction

Flip Directionのオプション

『Flip Direction』はFlip Effectで設定したアニメーションがどの方向に動いていくかを以下のオプションから設定することができます。

  • Up(デフォルト)
  • Down

こちらは

  • Flip Effect : Slide
  • Flip Direction : 右

に設定した時のサンプル動画です。
アニメーションが右に向かって開始しているのがお分かり頂けると思います。

また、Flip Effectを

  • Zoon In
  • Zoom Out
  • Fade

選択時には、『Flip Direction』のオプションは表示されません。

3D Depth

3D Depthの説明

『3D Depth』の設定は、『Flip Effect』が『Flip』を選択している時のみ表示されるオプションです。
デフォルトでは3D Depthは『オフ』に設定されていますが、こちらを『オン』にした後の変化を以下の動画でご覧ください。

こちらは『3D Depth』を『オン』にした時のサンプル動画です。
コンテンツ(カエルのアイコン・テキスト)の部分にご注目ください。
背景からコンテンツが浮き出ている様な立体的なエフェクトが加わります。

スタイルタブ・Front

スタイルタブ・Front

パディング

パディングの説明

『パディング』は、基本的には背景とコンテンツの間のスペースの調整ですが、こちらのパディングでは、背景画像内でのコンテンツの配置を細かく変更ができると言う風に捉えてください。

また、デフォルトでは『値をまとめてリンク』が有効になっている状態ですが、値をまとめてリンクをしている状態でパディングの変更をしても特に何の変化も起きません。
更にパディングをマイナスの値にしても特に何の変化も起きませんのでお気をつけください。

パディング変更後の画面表示

こちらは『値をまとめてリンク』を『解除』し、『パディング:右』を『+300』した時の表示画面です。

配置

配置の説明

『配置』はコンテンツのアイコンやテキストの配置を以下のオプションより選択ができます。

  • 中央(デフォルト)

上記画像は配置を『左』に選択した時の表示画面です。
アイコン、テキストの左端が全て背景画像の左端に整列します。
尚、配置を『右』に設定した時はアイコン、テキストの右端が画像の右端に整列する様になります。

Vertical Position

Vertical Positionの説明

『Vertical Position』はコンテンツの縦位置での配置を以下より選択できます。

  • 中央(デフォルト)

上記画像はVertical Positionを『上』に設定した時の表示画面です。
アイコンの上部が画像の上部に整列します。

Vertical Positionを『下』に設定した時の表示画面

こちらはVertical Positionを『下』に設定した時の表示画面です。
テキストの下部が背景画像の下部に整列します。

ボーダータイプ

ボーダータイプのオプション

『ボーダー』とは枠線のことを意味します。
『ボーダータイプ』では以下より枠線の種類を選択することが可能です。

  • なし(デフォルト)
  • 直線
  • 2本線
  • 点線
  • 破線

上記画像は『直線』を選択した時の表示画面です。
※尚、ボーダーはボーダー幅を変更しないと表示されませんのでご注意ください。
また、各枠線がどの様に表示されるかは【Elementorの『画像』ウィジェットの使い方】の記事の『スタイルタブ』内の『ボーダータイプ』のセクションにて詳しく説明をしていますのでそちらをご覧ください。

背景オーバーレイをかけていると生じるバグ

背景オーバーレイを入れ、かつボーダーを入れた時に生じるバグ

上記画像は、背景にオーバーレイを入れ、ボーダーの丸みをつけ、更にボーダータイプをつけた時の表示画面です。
上記画像でボーダーとオーバーレイの間に微妙な隙間が生じているのがお分かりいただけると思います。
おそらくオーバーレイに問題が生じてしまっている為この様になってしまうので、ボーダータイプのオプションをつけたい時はオーバーレイを入れないことをオススメします。

背景オーバーレイを入れ、ボーダーの丸みは入れず、ボーダータイプで直線を選択した時の表示画面

また、上記画像の様にOverlayが入っていても、ボーダーの丸みをつけず、直線の組み合わせにすると問題がないこともあります。

背景オーバーレイを入れ、ボーダータイプで点線を選択した時の表示画面


こちらはボーダータイプを『点線』にした時の表示画面です。
ボーダーの背景部分はOverlayがかかりません。
ボーダーが直角でも、ボーダータイプの組み合わせによっては変な風に反映してしまうものもありますので色々な組み合わせを試してみてください。

ボーダー幅

『ボーダー幅』は枠線の幅の変更が可能です。
エディターの『リンクをまとめて解除』を行えば、

ボーダーの色の変更

『色』ではボーダーの色をカラーピッカーより自由に変更することが可能です。

アイコン

『アイコン』は文字どおりアイコンの編集です。

スペース

アイコン・スペースの説明

『スペース』はアイコンとタイトルの間のスペースをカーソルを右にスライドさせることにより拡張することができます。
上記画像はスペースの値を『60』に設定した時の表示画面です。
※デフォルトの値は『0』に設定されています。
また、タイトルが見えやすい様にあらかじめタイトルの色を変更しています。

メインカラー

アイコン・メインカラーの説明

『メインカラー』はアイコンの色とコンテンツタブでアイコンを『囲む』に設定している場合はアイコンを囲む枠線の色も該当します。
それらの色をカラーピッカーより自由に変更することができます。

サブカラー

アイコン・サブカラーの説明

『サブカラー』は、コンテンツのアイコンを『囲む』に設定をしている場合は枠線の中の部分の色が上記画面の様に変更します。

アイコンを『重ねる』に設定している時の配色

また、コンテンツのアイコンを『重ねる』に設定している場合は上記画像の様な配色になります。

その他の編集機能

アイコンのその他の編集機能について
  • Icon Size
  • Icon Padding
  • Icon Rotate
  • ボーダー幅
  • ボーダーの丸み

につきましては【Elementor アイコンウィジェットの使い方】の記事の『スタイルタブの編集』のセクションをご覧ください。

タイトル

『タイトル』は文字通り『見出し』部分の編集ができます。

スペース

タイトル・スペースの説明

『スペース』は『タイトル』と『説明』の間のスペースをカーソルを右にスライドさせることにより、拡張することが可能です。
上記画像はスペースの値を『80』に設定した時の表示画面です。
※デフォルトの値は『0』に設定されています。

文字色

タイトルの文字色をカラーピッカーより自由に変更可能です。

書体

タイトルの書体をタイプグラフィより編集することができます。
書体の編集につきましては【Elementorの『テキストエディター』ウィジェットの使い方】の『スタイルタブの編集』のセクション内の『書体』をご覧ください。

説明

こちらの編集の仕方につきましては上記セクションの『タイトル』で説明をした通りですのでそちらを参考にしてください。

スタイルタブ・Back

スタイルタブ・Back

スタイルタブの『Back』の編集で『Front』と異なるものは『ボタン』の編集のみです。
ボタン以外の編集の仕方は『スタイルタブ・Front』のセクションで説明をした通りですのでそちらを参考にしてください。

ボタン

ボタンの編集

『ボタン』の編集の仕方につきましては【Elementorのボタンウィジェットの使い方】の記事の『スタイルの編集』のセクションをご覧ください。


『フリップボックス』は1つのスペースでで2つの違った情報が入れられる面白いウィジェットですね。
フリップが回転したり、スライドしたりとアニメーションもつけられるため、サイト閲覧者を視覚的に誘導もすることが可能です。

また、Elementor Pro特有のウィジェットになりますので、Pro版をお持ちの方は『フリップボックス』を是非活用してみてはいかがでしょうか。

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通