クリックしてフリップアニメーションで名刺をデザインして、Diviでチームを紹介する方法

クリックで反転する名刺をデザインすることは、Webサイトのチームメンバーのセクションやページにクリエイティブに追加することができます。 名刺は、会社で働いている人に関する簡潔な情報を提供するための、なじみのある直感的な方法です。 したがって、同じデザインをWebで提供することは理にかなっています。 さらに、各カードで提供される情報はさらに動的でインタラクティブになるため、ユーザーは名刺内の情報をコピーしたり、リンクをクリックしたりできます。

このチュートリアルでは、実際の名刺のように、クリックで裏返して人物に関する情報を表示する機能も備えた、Diviで独自の名刺をデザインする方法を紹介します。

飛び込んで始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviでクリックすると反転する名刺のデザイン

行と列の設定

まず、通常のセクションに1列の行を作成します。

行設定を開き、以下を更新します。

• 列の高さを等しくする：はい
• 幅：90％
• 最大幅：1200px

列の設定を開き、次のようにパディングを行います。

• パディング（デスクトップとタブレット）：上30ピクセル、下30ピクセル、左50ピクセル、右50ピクセル
• パディング（電話）：上15px、下15px、左15px、右15px

[詳細設定]タブで、次のCSSクラスを列に追加します。

• CSSクラス：カード列

このクラスは、後でフリップアニメーションを引き起こすクリックイベントをトリガーするコードのターゲットとして機能します。

重複する列

1つの列を設定したので、列を複製して、各列に同じパディングとCSSクラスを持つ2列のレイアウトを作成します。

バックカードの作成

名刺デザインの最初の要素は、カード情報とともに名刺の背景として機能するバックカードと呼ぶものです。 フロントカードを作成するには、列1に仕切りを追加します。

仕切りの設定を開き、クリックして仕切りを非表示にします。 名刺の背景画像には仕切りのみを使用しています。

次に、次のオプションを更新します。

背景色

• 背景色：＃322b3f

背景グラデーション

• 背景グラデーション左色：rgba（50,43,63,0.72）
• 背景のグラデーションの正しい色：＃322b3f
• グラデーションタイプ：ラジアル
• 終了位置：34％
• 背景画像の上にグラデーションを配置：はい

背景画像

• 背景画像：[チームメンバーの画像またはポートレートをアップロード]
• 背景画像サイズ：フィット
• 背景画像の位置：中央

サイジング

• 幅：100％
• 最小高さ：300px
• 高さ：100％

ボックスシャドウ

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度：50px

CSSクラスと絶対位置

次に、次のCSSクラスを仕切りに追加します。

• CSSクラス：バックカード

そして、位置を絶対に更新します。

• 位置：絶対

バックカードのロゴを作成する

バックカード（ディバイダー）を配置したら、カード情報要素の追加を開始できます。 まず、左上隅にロゴを追加します。

仕切り/バックカードモジュールの下に画像モジュールを追加します。

次に、約60px x60pxのロゴ画像をアップロードします。

次に、CSSクラスと絶対位置を使用して画像を次のように更新します。

CSSクラス

• CSSクラス：カードコンテンツ

ポジション

• 位置：絶対
• 垂直オフセット：30px（デスクトップとタブレット）、15px（電話）
• 水平オフセット：50px（デスクトップとタブレット）、10px（電話）

名前

名刺の名前を作成するには、ロゴ画像の下に新しいテキストモジュールを追加します。

名刺に掲載したい人の名前で本文の内容を更新します。

[デザイン]タブで、段落テキストのスタイルオプションを次のように更新します。

• テキストフォント：ポピンズ
• テキストテキストの色：#ffffff
• テキストテキストサイズ：28px（デスクトップとタブレット）、22px（電話）
• 文字間隔：1px
• テキストの配置：右

職位（または役割）

カード上の人物の位置（または役割）を追加するには、前のテキストモジュールを名前で複製します。

次に、その人の位置（または役割）で本文の内容を更新します。

次に、位置テキストモジュールのデザイン設定を次のように更新します。

• テキストフォントスタイル：TT
• テキストテキストサイズ：16px（デスクトップとタブレット）、14px（電話）
• マージン：15px下

会社

名刺に会社名を追加するには、前の（位置）テキストモジュールを複製します。

次に、本文の内容を会社名で更新します。

次に、会社のテキスト設定を次のように更新します。

• テキストフォントの太さ：軽い
• テキストフォントスタイル：デフォルト
• テキストテキストサイズ：22px（デスクトップとタブレット）、18px（電話）
• テキストの配置：左

電話番号

名刺の電話番号を作成するには、（会社の）テキストモジュールの下に宣伝文モジュールを追加します。

（電話）宣伝文の本文の内容を、カードに記載する電話番号で更新します。

クリックして、宣伝文句に電話のアイコンを使用します。

設計設定で、以下を更新します。

• アイコンの色：rgba（162,71,232,0.6）
• 画像/アイコンの配置：左
• アイコンを使用フォントサイズ：はい
• アイコンフォントサイズ：20px
• ボディフォント：ポピンズ
• 本文の色：#ffffff
• 本文サイズ：16px
• マージン：10px下

メールアドレス

カードに電子メールアドレスを記載するには、（電話）宣伝文モジュールを複製し、本文の内容を電子メールアドレスで更新します。

次に、アイコンをエンベロープアイコンに更新します。

ウェブサイト

カードにWebサイトを掲載するには、（電話）宣伝文モジュールを複製し、Webサイトで本文のコンテンツを更新します。

次に、アイコンをより適切なアイコンに更新します。

ソーシャルメディアフォローアイコン

カードコンテンツの最後の部分として、ソーシャルメディアのフォローアイコンをカードに追加します。 これを行うには、（ウェブサイト）宣伝文の下にソーシャルメディアフォローモジュールを追加します。

ソーシャルメディアフォロー設定モーダルで、各ソーシャルネットワークを透明な背景で更新します。

（後で必要に応じてリンクURLを追加することもできます）

次に、モジュールを正しい位置に配置します。

すべてのカードコンテンツモジュールに同じCSSクラスを追加する

名刺のすべてのカードコンテンツモジュールの作成が完了したら、それらすべてのモジュールに同じCSSクラスを与える必要があります。 これを行うには、複数選択機能を使用してすべてのカードコンテンツモジュール（ロゴ、名前、位置、電話、電子メール、Webサイト、およびソーシャルメディアアイコン）を選択し、要素設定を開いて、次のクラスを追加します。

• CSSクラス：カードコンテンツ

このクラスをカスタムCSSコードのターゲットにして、フロントカードフリップアニメーションの前後のコンテンツを表示および非表示にします。

フロントカード

これで、すべてのカードコンテンツが配置されたバックカードが完成したので、バックカードとバックカードのコンテンツの上に配置されるフロントカードを作成する準備が整いました。 これを行うには、2列目の画像モジュールを使用してフロントカードをデザインします。次に、1列目のバックカードの上に配置するように移動します。

まず、画像モジュールを列2に追加します。

画像として使用するバックカードのロゴに使用したものと同じロゴ画像（60px x 60px）をアップロードします。

次に、バックカード（ディバイダー）モジュールの設定を開き、背景デザインをコピーします。

次に、デザインしているフロントカードの画像設定を開き、背景デザインを画像モジュールの背景オプションに貼り付けます。

[デザイン]タブで、画像の間隔を次のように更新します。

• パディング（デスクトップとタブレット）：上30px、左50px
• パディング（電話）：上15px、左10px

高度な設定

[詳細設定]タブで、画像に次のCSSクラスを指定します。

• CSSクラス：フロントカード

次のカスタムCSSをメイン要素に追加します。

[/ css]
高さ：100％;
幅：100％;
[/ css]

ポジションオプションを更新します。

• 絶対位置
• Zインデックス：13

カスタムの高さと幅（絶対位置と組み合わせて）により、画像（またはロゴ）を含むモジュールが親列の高さと幅全体に広がります。 そのため、1つの画像モジュールですが、名刺デザインの優れたフロントカードとして、2つのレイヤー画像（ロゴと背景画像）を表示するために使用しています。

背景画像を新しいものに変更することを忘れないでください。 この場合、私は同じ人物の別のポートレートを使用しています。

完了したら、フロントカードイメージモジュールを列1にドラッグします。バックカードが完全に覆われているはずです。

カスタムコード

最後のステップは、カスタムCSSとJQueryを追加して、クリック時に名刺をフリップアニメーションにする機能を完成させることです。

コードを追加するには、列1内のソーシャルメディアフォローモジュールの下にコードモジュールを追加します。

カスタムCSS

次のCSSコードをスタイルタグの間に貼り付けます。

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

JQuery

CSSの下で、スクリプトタグの間に次のJQueryを貼り付けます

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

追加の名刺の作成

追加の名刺を作成するには、作成に使用したすべてのモジュールを含む列を複製するだけです。 列を複製したら、余分なコードモジュールを削除する必要があります。 重複したコードを持つ2つのコードモジュールがあると機能しません。

列/カードが複製されたら、新しい名刺の必要に応じて、モジュールを使用して背景画像とカードの内容を更新するだけです。

最終結果

これが、クリック時にフリップアニメーションを使用した名刺デザインの最終結果です。 前面のカードの画像をクリックすると、画像が反転して消え、背面のカードの仕切りも反転しますが、表示されたままになります。 フリップアニメーションが完了すると、カード情報がフェードインして表示されます。 カードを裏返すには、カードが含まれている列の外側をクリックするだけです。 ユーザーがカード内の要素をクリックできるように、カードをクリックしたときに（トグルのように）カードを再度反転させたくありませんでした。

最終的な考え

うまくいけば、このインタラクティブな名刺のデザインは、チームメンバーのセクションやページをWebサイトに表示する方法をより創造的にするのに役立ちます。 実際、この手法は名刺に限定されていません。 表示したいほぼすべての情報に使用できます。 それを試してみて、次のプロジェクトに適しているかどうかを確認してください。

コメントでお返事をお待ちしております。

乾杯！