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

コンテンツのFront設定

まずは、「コンテンツ」にある「Front」の設定項目を確認していきましょう。

コンテンツ設定

ここでは、フリップボックスの表目面のコンテンツを設定します。

Graphic Element

おもて面に表示するグラフィックを「None-なし」、「Image-画像」、「Icon-アイコン」の3種類から選択します。

画像の選択

「Graphic Element」で「画像」を選んだら、ここで表示する画像を選択します。

画像のサイズ

画像の大きさを選択します。自分で大きさを設定したい場合は、「カスタム」を選び、「幅」×「高さ」の欄に数値を記入し、「適用」ボタンをクリックします。

アイコン

「Graphic Element」でアイコンを選んだ場合は、ここでアイコンを選択します。

表示

アイコンの見せ方を「Dafault-通常」、「Stacked-塗りつぶし」、「Framed-枠」の3種類から選択します。

形状

「Stacked-塗りつぶし」、「Framed-枠」のどちらかを選んだ場合、この項目が表示されます。「Circle-丸」、「Square-四角」のどちらかを選択します。

タイトル・説明

おもて面のタイトルと説明文を記入します。

背景設定

このタブでは、おもて面の背景を設定します。

背景タイプ

背景のタイプを「クラシック」か「グラデーション」の2種類から選択します。

位置

「クラシック」タイプを選択し、画像を追加したら、ここで画像の位置を選択します。「Custom」を選ぶと、「X Position-横の位置」、「Y Position-縦の位置」が表示されますので、好きなように設定しましょう。

添付

スクロールした時の画像の挙動を設定します。「デフォルト」、「スクロール」、「固定」の3種類あります。「固定」を選ぶと、デスクトップで画像の位置が固定されて、スクロールしても画像の位置がキープされたままになります。

繰り返し

画像がウィジェットの横幅または縦幅よりも小さい場合、見栄えが悪いので、画像を繰り返し表示すると良いかもしれません。「デフォルト」、「繰り返し」、「繰り返しなし」、「横方向繰り返し」、「縦方向繰り返し」の5タイプあります。

サイズ

画像のサイズを「デフォルト」、「自動」、「カバー」、「含める」、「Custom」の5種類あります。

背景オーバーレイ

オーバーレイの色を設定します。

グラデーションを選んだ場合は、次の項目が表示されます。

色

グラデーションのメインの色を選択します。

場所

メインの色の幅を決めます。

2つ目の色

サブの色を選択します。

場所

サブの色の幅を決めます。

タイプ

グラデーションのタイプを「線状」か「放射状」のどちらかを選びます。

角度

「線状」タイプを選んだら、グラデーションの角度を設定します。

位置

「放射状」を選んだら9つの選択肢から位置を選びます。

背景オーバーレイ

背景色を選択します。グラデーションの濃さが調節できます。

コンテンツのBack設定

フリップボックスの裏面の設定を確認していきましょう。

コンテンツ設定

タイトル・説明

裏面のタイトルと説明文を記入します。

Button Text

ボタンの文言を編集します。

リンク

ボタンのリンクを追加します。リンク設定(歯車のアイコン)をクリックすると、次の項目が表示されます。

新しいウィンドウで開く

リンクをクリックしたら、新しいウィンドウが開き、ページを表示してくれます。

Nofollowを追加

クローラーに巡回してもらいたくないリンクの場合は、ここにチェックを入れておきます。

背景設定

コンテンツの設定の設定

高さ

フリップボックスの高さを設定します。

ボーダー丸み

フリップボックスの角の丸みを調節します。

Flip Effect

フリップボックスにマウスを置いた時(ホバー時)のエフェクトを選択します。「Flip」、「Slide」、「Push」、「 Zoom in」、「Zoom out」、「Fade」の6種類あります。

Flip Direction

エフェクトの方向を「Right-右」、「Left-左」、「Up-上」、「Down-下」の4つから選択します。

3D Depth

「ON」にするとフリップボックスが3Dで回転します。

スタイルのFront設定

ここからは、「スタイル」の「Front」設定を確認していきます。

パディング

おもて面のコンテンツとウィジェットの外枠のスペースを設定します。

配置

コンテンツの横の位置を「左」、「中央」、「右」の3つから選択します。

Vertical Position

コンテンツの縦の位置を「上」、「中央」、「下」の3つから選択します。

ボーダータイプ

フリップボックスのボーダーのタイプ「なし」、「直線」、「2本線」、「点線」、「破線」、「溝」から選択します。

幅

ボーダーをありにしたら、ここで太さを設定します。

色

ボーターの色を選択します。

アイコン設定

画像ではなく、アイコンを選択した場合は、次の設定をしていきます。

スペース

タイトルとアイコンとのスペースの幅を設定します。

メインカラー

アイコンのメインの色(アイコンの外側)を選択します。

サブカラー

「フレーム」を選択した場合、アイコンの外枠の色を設定します。

Icon Size

アイコンのサイズを設定します。

Icon Padding

「フレーム」を選択した場合に設定します。アイコン本体と外枠のスペースを設定します。

Icon Rotate

アイコン本体の角度を調節します。

ボーダー幅

「フレーム」を選択した場合は、ボーダーの太さを設定します。

ボーダー丸み

アイコンの外枠の丸みを調節します。

画像設定

アイコンではなく、画像を選択した場合は、次の設定をしていきます。

スペース

画像とタイトルとのスペースを調節します。

サイズ

画像の大きさを設定します。

透明度

画像の透明度を調整します。

ボーダータイプ

• なし
• 直線
• 2本線
• 点線
• 破線
• 溝

画像のボーダータイプを「なし」、「直線」、「2本線」、「点線」、「破線」、「溝」から選択します。

ボーダー丸み

ボーダーの丸みを調整します。

タイトル設定

「タイトル」では、以下の設定をしていきます。

スペース

タイトルと説明文のスペースを調整します。

文字色

タイトルの色を設定します。

書体

タイトルの書体を設定します。

説明設定

文字色

説明文の色を選択します。

書体

説明文の書体を設定します。

スタイルのBack設定

ここでは、フリップボックスの裏面のスタイルを設定します。最初の方の項目は、おもて面とほとんど同じなので、その部分は省略します。

ボタン設定

以下では、「ボタン」の設定項目を確認していきます。

サイズ

• 微小
• 小
• 中
• 大
• 特大

ボタンのサイズを上記の5つから1つを選択します。

書体

ボタンテキストの書体を設定します。

文字色

ボタンテキストの色を選択します。

背景色

ボタンの色を選択します。

ボーダー色

ボーダーの色を選択します。

ボーダー幅

ボーダーの太さを調整します。

ボーダー丸み

ボーダーの丸みを調整します。