フローティングアバウトカードをDiviサイトに追加する方法

アクセスするほとんどすべてのWebサイトで、要素がポップアップし、ページに貼り付けられます。 Cookieの警告とオプトイン、電子メールのサインアップ、およびチャットボックス。 私たちは皆、ある時点でそれらを無視する傾向があり、ウェブサイトが私たちに伝えようとしていることは何でも見えなくなります。 読まずにXをクリックするだけです。 しかし、それはこれらの種類の要素が役に立たず、場所がないという意味ではありません。 Diviを使用すると、サイトに付加価値を与えるフローティングアバウトカードを簡単に作成して、自分が誰であり、ブランドが何をしているのかを目立たないように説明できます。 それがいかに簡単か見てみましょう。

プレビュー

デスクトップ

モバイル

1.ページテンプレートを作成します

あなたが最初にしたいことは、あなたがこのフローティングアバウトカードを含めるページを決めることです。 あなたはそれをあなたのウェブサイトのすべてのページに望むかもしれません、あるいはあなたはそれを特定のランディングページにだけ望むかもしれません。 どちらの方法でも、Diviテーマビルダーを使用して設定できます。 グローバルテンプレートとして、または特定のページにのみ適用されるテンプレートとして。

テーマビルダーを使用してテンプレートを作成する

まず、WordPressダッシュボードのDivi – ThemeBuilderに移動します。 フローティングアバウトカードを適用するページのカスタムボディセクションを選択するか、グローバルボディを選択してどこにでも適用します。

Divi Visual Builderをロードしたら、選択肢が表示されたら[最初から開始]を選択します。

1列の行を追加してコンテンツモジュールを投稿する

次に、プロンプトが表示されたら単一列の行を選択します。

次に、投稿コンテンツモジュールを選択します。 これは、動的コンテンツ機能の例です。 このモジュールは、Diviページ自体の内部に構築された付随するデザインを表示します。つまり、このモジュールは、このテンプレートを使用して、ページごとに異なるコンテンツを表示します。 ブログ投稿の場合は、ブログコンテンツになります。 ショップページは商品となります。 また、個々のページについては、Diviを使用して作成したカスタムコンテンツ。

セクションと行の間隔を調整する

それらを配置したら、いくつかの間隔を調整する必要があります。 セクション設定（Diviビルダーの青い境界線）に移動し、上下のパディングをすべて削除します。 あなたは、[デザイン]タブ、[間隔]見出しの下にこれを行うにして、パディングの下でトップに0PXとボトムを設定します。

変更を保存して、行設定を入力します。 ここでも、上部と下部のパディングを0pxに設定します。

次に、[サイズ設定]見出しを見つけて、[カスタムガター幅を使用]をオンに切り替え、その値を1に設定します。次に、[幅]と[最大幅]を100％に設定します。

準備ができたら、フローティングアバウトカードを作りましょう！

2.フローティングカードを追加します

新しいセクションと行を追加する

まず、新しいセクションを追加する必要があります。 これを行うには、ページの一番下までスクロールし、青い+円をクリックして、セクションのタイプの入力を求められたら[通常]を選択します。

宣伝文モジュールを追加する

これは、フローティングカード専用のセクションになります。 内部に、別の単一列の行を追加します。 その中で、フローティングカード自体にBlurbモジュールを使用したいと思います。 Divi Blurbモジュールは、ビルダーで最も用途の広いモジュールである可能性があるため、この機能に提供される機能を利用したいと考えています。

セクションと行の設定を調整する

それが整ったら、この行とセクションのパディングと位置を調整する必要があります。 そのため、最初にセクション設定に移動し、[表示]-[間隔]で[上部と下部のパディング]を0pxに設定します。

次に、[詳細設定]タブで、[位置]見出しを見つけます。 Zインデックスを12に設定します。数値が大きいほど、セクションとそのコンテンツが「最前面」に配置されます。 また、フローティングカードなので、他のすべての要素の上にフロートさせたいと考えています。

最後に、行の設定に移動し、もう一度0PXする上部と下部にそのパディングを設定します。

宣伝文モジュールの内容

次に、カード自体のスタイルを設定します。 宣伝文モジュールの設定を入力します。 それはあなたのビジネスを説明する要素なので、あなたはあなたの会社やブランドが何をしているのかについて簡単に言及したいと思うでしょう。 これは投稿例であるため、ゾンビ風味のloremipsumで埋めました。 タイトルと本文のコンテンツは、[コンテンツ]タブで設定できます。

背景色を設定する

フローティングカードをサイトに視覚的に一致させたいのは明らかなので、適切な背景色を選択することが非常に重要です。 #ffffff （白）を使用します。 [コンテンツ]タブにもこれが含まれており、[背景]見出しと[ペイント缶]の下にあります。

カード画像を選択してください

宣伝文句モジュールには、モジュールの画像またはアイコンを含めるオプションがあり、当社を表す画像が必要です。 繰り返しになりますが、[コンテンツ]タブで、[画像とアイコン]を見つけて、モジュールで機能する画像をアップロードするだけです。

カードの角を形作る

次に、[デザイン]タブと[境界線]見出しに移動します。 Rounded Cornersオプションを見つけて、各コーナーを25pxに設定します。 これにより、カード全体の形​​状を変更することなく、鋭い四角いエッジが滑らかになります。

テキストの配置

[テキスト]見出しの下で、[テキストの配置]を中央に設定します。

フローティングカードのタイトルテキストのスタイルを設定する

以前に設定したタイトルテキストは、デフォルトでH4に設定されています。 スタイルを設定するには、[タイトルテキスト]見出しに移動し、[ H4 ]タブを選択して、次のタイトルオプションを変更します。

• フォント：ポピンズ
• フォントの太さ：太字
• テキストの色：＃ 22303f
• テキストサイズ： 20px
• 線の高さ： 1.3em

次に、[応答性]設定に移動し、モバイルデバイスのタイトルのサイズを変更する必要があります。 タイトルテキストサイズを14pxに変更します。

カードのテキストのスタイルを設定する

次に、本文テキストに移動して、タイトルのフォントと一致するポピンズに本文のフォントを変更します。

次に、[リンク]タブ（チェーンアイコン）をクリックして、リンクテキストの色をサイトの補色に交換します。 ＃97c357を選択しました。

アバウトカードのサイズ設定

[サイズ設定]見出しの下で、これらの設定に次の値を追加します。

• 画像幅： 75％
• コンテンツの幅： 25vw
• 幅： 25vw
• 最大幅： 30vw

応答性の設定で、次の値を調整します。

• コンテンツの幅： 90vw
• 幅： 90vw
• 最大幅： 95vw

これらの値により、モバイルデバイスではカードが画面の幅全体を占めるようになります。これは、通常、隅にあるフローティングカードを読み取ることができないためです。

宣伝文の間隔

間隔の見出しは、あなたが2vwに0PX、上下のパディング左マージンを設定する必要がクイックフィックス、および左右のパディング1vwにあります。

レスポンシブ設定の場合、上部と下部のパディングのみが変更されます。 これらを5％に設定します。

ボックスシャドウを追加

フローティングアバウトカードはその場所に固定されたままになるため、実際にコンテンツの上に浮いているように見せたいと思います。 この効果は、モジュールに基本的なボックスシャドウを追加することで十分に簡単です。 このオプションはボックスシャドウの下にあり、基本的なボトムシャドウを選択しました。

レスポンシブCSSの調整

今は楽しい部分です。 [詳細設定]タブに移動し、フローティングカードをページに貼り付けます。 これを行うための最初のステップは、デスクトップ用に追加したイメージをオフにすることです。 宣伝文モジュールの画像は、モバイルでのサイズと使いやすさに実際に影響を与える可能性があります。さらに、ページを読み込むための別の方法もあります。

したがって、 display：none;を追加します。 カスタムCSSのモバイル専用宣伝文フィールドの下。

位置設定でカードを固定して浮かせます

最後に、カードを浮かせたい場所に配置します。 まず、[詳細設定]タブに移動し、[位置]までスクロールします。 ドロップダウンメニューから[固定]を選択します。

次に、場所のオプションを見つけます。 これは、フローティングカードが留まる画面上のポイントです。 デスクトップの場合は、画面の下隅に配置する必要があります。 それで、それに相関する正方形をクリックします。 また、ウィンドウの境界からわずかにオフセットする必要があるため、垂直オフセットを3％に、水平オフセットを2％に変更します。

次に、モバイル用に別の場所とオフセットを作成します。 上記では、カードの幅を設定して、画面の幅全体を拡大しています。 そのことを念頭に置いて、固定位置を中央下に変更し、カードが常に画面の下部に浮かぶようにします。

さらに、モバイルの垂直オフセットのみを変更します。 この値を3％に設定します。 モバイル画面の幅で中央に配置されているため、水平オフセットは必要ありません。

最終結果

すべてが適切に設定され、個人のサイトに合わせて調整されると、最終的な製品は次のようになります。

デスクトップ

モバイル

結論

Diviの強力なオプションと直感的なインターフェイスを使用すると、フローティングアバウトカードをすぐにデザインしてサイトに貼り付けることができます。 ユーザーに最初から誰と取引しているのかを知らせることで、ブランドロイヤルティを獲得することができます。

あなたのウェブサイトでフローティングカードを何に使用しましたか？ コメントで教えてください！