フリップボックス
フリップボックス
この記事を書いたときのバージョン：Elementor 3.5.5 Elementor Pro 3.6.2
Push
up
カード上のセクションをパタパタとアニメーションすることができます。表の情報をユーザーにロールオーバーしてもらって、裏にあるボタンをクリックしてもらうようなイメージです。
スマホにはロールオーバーという操作が無いので、タップするとカードがめくられ次のアクションが起きるまで裏返ったままになります。
Flip
Up
フリップアップ、アイコン使用
Slide
右
右からのスライド、svg使用
Push
up
プッシュアップ、jpg使用
Zoom in
ここが表の本文
ズームイン、アイコン使用
Zoom out
ここが表の本文
ズームアウト、裏の背景にjpg
Fade
背景に写真も配置できます
フェード、表の背景にjpg
フリップボックスを編集：コンテンツ
カードの表裏の内容を入力するパネルです。カードの見た目はスタイルで指定するので、あくまでコンテンツエリアでは内容の設定がフォーカスされています。
カードの背景には画像も指定可能で、上のサンプルでアイコンが配置されている部分もWordPressのメディアライブラリから画像を指定することが可能です。
動きの種類もコンテンツの設定で指定します。
フリップボックスを編集：スタイル
カードの表裏がロールオーバーで切り替わるので、表の設定、裏の設定が必要になります。
カードの中に表示できるのは表がカスタムアイコン、見出し、本文、裏が見出し、本文、ボタンになります。
アニメーションの種類は以下の通りです。
