フリップボックス

この記事を書いたときのバージョン:Elementor 3.5.5 Elementor Pro 3.6.2

Elementor プロ版-フリップボックス
elementor

Push

up

これは見出しです

ここに裏の本文がはいります
ボタンも設置できます

 カード上のセクションをパタパタとアニメーションすることができます。表の情報をユーザーにロールオーバーしてもらって、裏にあるボタンをクリックしてもらうようなイメージです。

 スマホにはロールオーバーという操作が無いので、タップするとカードがめくられ次のアクションが起きるまで裏返ったままになります。

Flip

Up

これは見出しです

ここに裏の本文がはいります
ボタンも設置できます

フリップアップ、アイコン使用

Elementor ページビルダー

Slide

これは見出しです

ここに裏の本文がはいります
ボタンも設置できます

右からのスライド、svg使用

elementor

Push

up

これは見出しです

ここに裏の本文がはいります
ボタンも設置できます

プッシュアップ、jpg使用

Zoom in

ここが表の本文

これは見出しです

ここに裏の本文がはいります
ボタンも設置できます

ズームイン、アイコン使用

Zoom out

ここが表の本文

これは見出しです

ここに裏の本文がはいります
ボタンも設置できます

ズームアウト、裏の背景にjpg

Fade

背景に写真も配置できます

裏の見出しです

ここに裏の本文がはいります
ボタンも設置できます

フェード、表の背景にjpg

フリップボックスを編集:コンテンツ

 カードの表裏の内容を入力するパネルです。カードの見た目はスタイルで指定するので、あくまでコンテンツエリアでは内容の設定がフォーカスされています。

 カードの背景には画像も指定可能で、上のサンプルでアイコンが配置されている部分もWordPressのメディアライブラリから画像を指定することが可能です。

 動きの種類もコンテンツの設定で指定します。

フリップボックスを編集:スタイル

 カードの表裏がロールオーバーで切り替わるので、表の設定、裏の設定が必要になります。

 カードの中に表示できるのは表がカスタムアイコン、見出し、本文、裏が見出し、本文、ボタンになります。

 アニメーションの種類は以下の通りです。