フリップ ボックス ウィジェットを使用すると、ユーザーがアクションを起こすと反対側に反転するアニメーション ボックスを作成できます。クリックとホバーの両方で Element またはフリップ ボックスを作成できます。このウィジェットを使用して、フリップ ボックスの両面をカスタマイズできます。

ElementsKit を使用して WordPress サイトにフリップボックスを追加する方法 #

以下で説明する手順に従って、ElementsKit と を使用して WordPress サイトにフリップ ボックスを簡単に追加します。 エレメンター:

ステップ 1: フリップ ボックス ウィジェットを有効にする #

案内する ElementsKit ⇒ ウィジェット ⇒ フリップボックスウィジェット、 ウィジェットをオンにする、 そして 「変更を保存」をクリックします。

ステップ 2: ウィジェットをドラッグ アンド ドロップします。  #

「Elementor で編集」オプションを使用してページを編集します。それから 検索 Ekit アイコンを備えたフリップ ボックス ウィジェットの場合は、単純に ウィジェットをドラッグアンドドロップします ページ上で。

ステップ 3. 設定をカスタマイズする  #

[フリップ ボックス] メニューを展開して、次の設定を変更します。

• フリップ: 反転には、反転、ズームイン、スライドイン、3D の 4 つのオプションがあります。
• 反転方向: 反転方向には複数のオプションが使用できます。ただし、このオプションは、[反転] オプションで選択した値に基づいて表示されます。
• フリップトリガー: ここで、反転をトリガーするオプションを選択できます。ホバー、ボックス クリック、およびボタン クリックの 3 つのオプションが使用可能です。
• フリップボックスの高さ: このオプションを使用してフリップ ボックスの高さを調整できます。

[ボックスの高さを反転] の下に、[前] と [後] の 2 つのタブがあります。いずれかのオプションを選択して、各側のフリップ ボックスの要素をカスタマイズします。両側で同じオプションが見つかります。 

フリップ ボックスの各面でカスタマイズできるオプションには次のものがあります。 

• メディアタイプ： アイコンまたは画像を選択できます。メディア ファイルを追加したくない場合は、なしオプションを選択することもできます。.
• アイコン/ファイルを選択: [メディア タイプ] で選択したオプションに応じて、ここでアイコン/画像を選択できます。. 
• タイトル： タイトルを付けます。
• 字幕： ここにサブタイトルを追加できます。
• フリップの説明: このオプションを使用して、関連する説明を記述します。
• 配置: 配置を左、中央、または右に設定できます。

フリップ ボックスの両面のコンテンツの準備が完了したら、スタイルを変更します。 

ステップ 4: フリップ ボックスのスタイルを設定する #

次に、「スタイル」タブに移動し、各セクションを展開して、関連するスタイル オプションを変更します。

ラッパー: ラッパーの下で、背景のタイプ、色、場所、2 番目の色、場所、タイプ、角度などをカスタマイズできます。フリップ ボックスの表側と裏側の両方のオプションをカスタマイズできます。

アイコン： このオプションを展開すると、通常ビューとホバー ビューの両方で、色、背景の種類、ボックスの影、境界線の種類などを変更できます。フリップ ボックスの前端と後端の両方のアイコン スタイルをカスタマイズできます。

タイトル： ここでは、フリップ ボックスの両側のタイトルのタイポグラフィ、タイトルの色、マージンをカスタマイズできます。

字幕： このオプションを展開すると、フリップ ボックスの両側のタイポグラフィ、タイトルの色、およびサブタイトルのマージンをカスタマイズできます。

説明： ここでは、フリップ ボックスの両側の説明のタイポグラフィ、説明の色、マージンをカスタマイズできます。

ボタン： ボタンセクションを展開して、テキストの色、背景色、枠線の種類、枠線の半径、枠線ボックスなどのオプションをカスタマイズします。通常ビューとホバービューの両方でボタンのスタイルを設定できます。

最後に、[公開/更新] をクリックして変更を保存し、Elementor フリップ ボックスをプレビューします。