DIVIとDIVI Builderを使用して美しいWordPressのWebサイトを構築

Diviのフリッピングアニメーションで魅力的な名刺をデザインする方法

Rifat Divi Tutorials Oct 20, 2021

名刺は、企業の個人を個人に紹介するための一般的な方法です。 それはその個人についてのすべての必要な情報を運び、彼の有用な連絡先情報を提供します。 反転して同じ仕事をするウェブサイト上の仮想名刺はどうですか?」それは間違いなくよりダイナミックになり、ソーシャルリンクが添付されるので、誰でも簡単に個人に連絡できます。これは本当に興味深いですね。今日、 Diviでこのデザインについて学びましょう!それでは始めましょう。

デザインプレビュー

今日はこのデザインを作成します。 面白そうですね

パート1:クリックすると反転する名刺のデザイン

追加:行1

通常のセクションに1列の行を追加することから始めます。

以下の設定を更新してください。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める
  • 列の高さを等しくする:はい
  • 幅:90%
  • 最大幅:1200px

列の設定を開き、それにパディングを追加します。

パディング

  • デスクトップ-上下に30ピクセル、左右に50ピクセル。
  • タブレット-上下に30ピクセル、左右に50ピクセル。
  • 電話-上下に15ピクセル、左右に15ピクセル

[詳細設定]タブから次のCSSクラスを追加します。 このコードは、フリップアニメーションをクリックするためのトリガーとして機能します。

  • CSSクラス:card-column

カラムクローニング

前の列を複製しました。 これで、列へのレイアウトができ、それぞれに同じパディングとCSSクラスがあります。

バックカードの作成

まず、通常は背面にあり、クリックすると前面に表示される名刺を作成します。 ここでは、個人に関するすべての情報を入力します。 バックカードと呼びます。 これを作成するために、我々は唯一のカードに画像を添付する分圧器を使用しますので、その後、我々は、分周器の設定からディバイダの可視性をオフにし、カラム1の分周器を取り付けます。

背景色

  • 背景色:#322b3f

背景グラデーション

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

背景画像

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

サイジング

  • 幅:100%
  • 最小高さ:300px
  • 高さ:100%

ボックスシャドウ

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

CSSのクラスと位置

次に、CSSクラスを仕切りに追加し、位置を更新します。

  • CSSクラス:バックカード
  • 位置:絶対

追加:バックカードのロゴ

バックカードを配置しました。ロゴを追加します。

次に、ロゴをアップロードします。 サイズは約60px * 60pxである必要があります。

CSSクラス

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

ポジション

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

追加:カード所有者名

次に、ロゴモジュールの下のテキストモジュールを名前のカードに追加します。 そして、あなたが紹介したい人の名前を更新します。

デザインタブでこれを変更します。

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

追加:職位

前のテキストモジュールを複製して、ジョブの位置を追加します。 ボディコンテンツを編集し、デザインタブで調整します。

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

追加:会社名

会社名を追加するには、前のテキストモジュールを複製し、本文の内容を変更します。

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

追加:連絡先番号

個人の連絡先番号を追加します。 会社のテキストモジュールの下に宣伝文モジュールを追加します。 電話番号で本文の内容を更新し、アイコンを追加します。

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

  • アイコンの色:#20BFAC
  • 画像/アイコンの配置:左
  • アイコンを使用フォントサイズ:はい
  • アイコンフォントサイズ:20px
  • ボディフォント:ポピンズ
  • 本文の色:#ffffff
  • 本文サイズ:16px
  • マージン:10px下

追加:メールアドレス

前の宣伝文モジュールを複製し、本文の内容を電子メールアドレスとして更新します。 次に、アイコンを封筒として更新します。

追加:ウェブサイト

メールセクションの場合と同じようにします。 前の宣伝文モジュールをコピーして、内容を変更します。

追加:ソーシャルメディアアイコン

バックカードに追加する最後のモジュールは、ソーシャルメディアフォローモジュールです。 このモジュールを最後の宣伝文モジュールの下に追加します。

設定から、すべてのソーシャルアイコンを透明にし、必要に応じてURLを追加します。 すべてのアイコンを透明にするには、各ソーシャルメディアモジュールを開き、白いマークの付いたバーを下にドラッグします。 それは仕事を変えるでしょう。

また、[デザイン]タブで、ソーシャルメディアのフォローアイコンを右側に配置します。

追加:すべてのモジュールに同じクラス

すべてのモジュールの配置とカスタマイズが完了したので、 Diviの複数選択機能を使用してモジュールを選択し、共通のCSSクラスを追加します。 このCSSクラスに合わせて、フリップアニメーションでカードのコンテンツの前に表示するCSSコードを追加します。

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

「Cmd」または「Ctrl」を押しながら要素をクリックして選択します。 次に、任意のモジュールの設定をクリックして調整します。

フロントカードの作成

バックカードが完成しました。次に、バックカードの代わりに配置され、その内容を背面に非表示にするフロントカードで作業します。 列1のカードを置き換える列2の画像モジュールを使用してフロントカードをデザインします。最初に、列2に画像モジュールを追加し、モジュールにロゴ(60px * 60px)を追加します。

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

フロントカードの画像設定を開いて貼り付けます。

デザインセクションから、画像の間隔を次のように更新します。

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

高度な設定

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

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

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

height: 100%;
width: 100%;

また、位置設定を更新します。

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

これで、フロントカードの操作が完了したら、列1のバックカードモジュールにドラッグします。

パート2:カスタムコードの追加

最後に、カスタマイズされたCSSおよびJQueryコードをいくつか追加して、名刺デザインにフリップアニメーションを追加します。 このために、列1の下にコードモジュールを追加します。

追加: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コードを追加します。 それらをScriptタグ内に保持することを忘れないでください。

(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つあると設計が破損するため、クローンカードからコードモジュールを削除したことを確認してください。

ここで紹介したいすべての人に応じて、すべてのカードを変更します。

最終ビュー

私たちが行ったすべての作業の後、私たちのデザインは次のようになります。 各カードをクリックすると、カードがめくられ、個人に関する情報が表示されます。 次に、外側をクリックすると、前の位置に戻ります。

結論

インタラクティブな名刺は、ウェブサイトにチームメイトを表示するのに最適な方法です。 これを使用して、プロジェクトに関する情報を表示したり、アイデアを共有したりできます。 このチュートリアルが役立つと思われる場合は共有を押してください。質問や質問がある場合は、以下にコメントしてください。