プラグインなしでDiviの任意のモジュールでフリップカードを作成する方法

フリップカードは、ユーザーがWebサイトを操作するための楽しい方法です。 クールなフリップアニメーションを提供するだけでなく、1つの簡潔な場所で追加情報を提供することもできます。 このチュートリアルでは、プラグインを使用せずにDiviモジュールをフリップカードに変換する方法を紹介します。 この方法では、1つのDiviモジュールをカードの前面として使用し、別のDiviモジュールをカードの背面として使用できます。 diviビルダーを使用して、各モジュール（前面と背面）を好きなように設計することもできます。 この機能は、CSSのほんの数スニペット（jqueryなし）によって実現されます。

これらのカードを作成するのがいかに簡単で楽しいかということに驚かれると思います。

飛び込みましょう！

スニークピーク

これが、今日構築するデザインのスニークピークです。

私たちのYoutubeチャンネルを購読する

このチュートリアルに必要なもの

このチュートリアルに必要なのはDiviだけです！ プラグインは必要ありません。 また、無料でDiviBuilder内で利用できるAppDeveloper LayoutPackも使用します。

基本的な考え方の説明

このコンセプトのインスピレーションは、実際には、折り畳み式カードを設計する方法のこの基本的な例から来ました。 必要なのは、divクラスをDiviの行、列、およびモジュールに割り当ててから、CSSを少しクリーンアップするための少しのリエンジニアリングだけでした。

Diviレイアウトは、4つの1列の行を持つ通常のセクションで構成されています。 各行に、互いに積み重ねられた2つの宣伝文モジュールを追加しました（ただし、Diviモジュールも同様に機能します）。 上部の宣伝文はフリップカードの前面として機能し、下部の宣伝文はフリップカードの背面として機能します。 セクションに「display：flex」を適用することにより、行は列のように水平に構造化されます。 これにより、カードを4列に並べて配置できます。

カスタムCSSを追加する前のセットアップは次のようになります。

次に、カスタムCSSをページ設定に追加し、対応するCSSクラスを各行、列、およびモジュールに追加しました。

それでおしまい！

既成のレイアウトを使用したDiviフリップカードの作成

既成のレイアウトをページに追加する

物事を順調に進めるには、先に進んで新しいページを作成し、ページにタイトルを付けてから、クリックしてDiviBuilderを使用します。 「既成のレイアウトを選択」オプションを選択します。 [ライブラリからロード]ポップアップから、[アプリ開発者レイアウトパック]を選択し、クリックしてアプリ開発者ランディングページレイアウトを使用します。

レイアウトがページに読み込まれたら、ページを公開し、[フロントエンドでビルド]ボタンをクリックします。 これで、フリップカードの作成を開始する準備が整いました。

セクション、行、およびモジュールの設定

レイアウトの最初のセクションの下に、1列の行を持つ新しい通常のセクションを追加します。 まだモジュールを追加しないでください。 行設定を開き、以下を更新します。

カスタムマージン：20px下
カスタムパディング：0px上、0px下

設定を保存する。

次に、行を3回複製して、セクションに合計4つの行を作成します。

次に、セクション設定を開き、次のカスタムCSSをメイン要素に追加します。

display:flex;

これにより、行が水平に表示されるように変更されます。これにより、技術的にはそれぞれ1列のDivi行であるにもかかわらず、基本的に行が4列に変換されます。

行へのモジュールの追加

ここで、事前に作成されたレイアウトがこのチュートリアルに役立ちます。 レイアウトの上部にある4つの宣伝文モジュールを使用して、フリップカードのデザインをすぐに開始します。 右クリックオプションまたはショートキーctrl + cとctrl + v（windows）およびcmd + c cmd + v（mac）を使用して、作成済みのモジュールをコピーして、作成した各行に貼り付けます。 各行に同じモジュールの重複バージョンがあることを確認してください。

これで、セクションは次のようになります。

フロントおよびバックフリップカードモジュールの設計

各列に積み重ねられた2つのモジュールは、フリップカードの表と裏として使用されます。 各行の一番上のモジュールが前面として機能し、一番下のモジュールが背面として機能します。 フロントカード（上部モジュール）のデザインは、事前に作成されたレイアウトのおかげですでに完了しているため、必要なのは、バックカード（下部モジュール）のデザインと内容を調整することだけです。

Diviの複数選択機能を使用して、各行の下部のモジュールをすべて選択し、要素設定を開いて4つのモジュールすべてを同時にカスタマイズします。

これで、要素設定オプションを更新して、フリップカードのバックバージョンのスタイルを設定できます。 次のように要素設定を更新します。

内容：「これは説明です。」
背景色：＃00a2fa
テキストの色：明るい

カスタムCSSおよびCSSクラスの追加

次に、フリップカード機能を提供するカスタムCSSを使用します。 ページ設定を開き、次のカスタムCSSを追加します。

@media (min-width:981px){
.flip-box-row {
  background-color: transparent;
  width: 250px;
  height: 250px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

上記のCSSクラスは、それぞれが何をしているのかを理解するのに役立つ方法で名前が付けられていることに注意してください。 また、これらのCSSクラスをDivi要素のどこに追加する必要があるかについての有用な指標でもあります。 たとえば、クラス「flip-box-row」は、4つの行のそれぞれにスタイルを設定することを目的としています。 したがって、各行にはそのCSSクラスが必要です。

Divi要素へのCSSクラスの追加

Multiselectを使用して、各行の上位4つのモジュール（フロントカード）をすべて選択します。 次に、次のCSSクラスを追加します。

CSSクラス：flip-box-front

次に、multiselectを使用して、各行の下部の4つのモジュール（バックカード）をすべて選択し、それらのモジュールに次のCSSクラスを追加します。

CSSクラス：フリップボックスバック

最後に、multiselectを使用して4つの行すべてを選択し、次のCSSクラスを指定します。

CSSクラス：flip-box-row
列CSSクラス：flip-box-column

デスクトップでの最終設計

すべてのCSSクラスが追加されると、フリップカードは完全に機能します。 デスクトップで最終的なデザインを確認してください。

モバイル向けのデザインのカスタマイズ

すでにページ設定に追加したカスタムCSSコードには、フリップカードの機能をデスクトップのみに制限するメディアクエリがあります。 ただし、タブレットとスマートフォンでフリップカードの前面バージョンを非表示にし、ブラウザの幅を調整するときに行が適切にスタックするようにする必要があります。

フロントカードの宣伝文句モジュールを非表示にするには、multiselectを使用して各行のすべてのトップモジュール（フロントカード）を選択し（フロントエンドビルダーで物事が移動するため、ワイヤーフレームビューモードで簡単になります）、以下を更新します。

無効にする：電話とスマートフォン

次に、セクション設定を開き、前に追加したものに加えて、CSSのもう1行をメイン要素に追加します。

flex-wrap:wrap;

これにより、行がモバイルでスタックされるようになります。

それでは、タブレットとスマートフォンで最終的なデザインを確認しましょう。

ボーナスオプション：垂直フリップカード！

フリップカードを水平方向ではなく垂直方向に反転させたい場合は、カスタムCSSで2文字（文字通り）を変更するだけで済みます。 ページ設定を開き、「transform：rotateY（180deg）」が使用されている2つの場所を見つけます。 次に、「Y」を「X」に置き換えます。 まだ推測していない場合は、これにより回転が変更され、Y軸ではな​​くX軸を中心に回転します。

かなりクールなもの！ 結果を確認してください。

最終的な考え

Diviで見栄えの良いフリップカードを作成するためにプラグインに頼る必要はありません。 このチュートリアルでは、フリップカードコンテンツの無数のデザインと組み合わせを作成するためのフレームワークがあります。 カードの表と裏として機能する2つのモジュールを選択できることを忘れないでください。 だから、気軽にクリエイティブになってください！

これがお役に立てば幸いです。以下のコメントで皆様からのご意見をお待ちしております。

乾杯！