ソーシャルメディアをDiviでアイコンスティッキーに従わせる方法

Rifat Divi Tutorials Feb 16, 2022

Diviの組み込みのスティッキー設定を使用して、スティッキーソーシャルメディアフォローモジュールをすばやく作成できます。これにより、ユーザーがページを下にスクロールしている間、ソーシャルネットワークのロゴが前面に表示されます。 さらに、スティッキー状態モジュールにカスタムデザインを追加することで、スクロールでスティッキー状態を使用するときに独自のデザイン変換を構築できます。 このガイドは、粘着性のあるソーシャルメディアのフォローボタンのスタイルを究極的に制御したい場合に役立ちます。

デザインレイアウト

これが今日のレイアウトです。 これが私たちが構築しようとしているものです。

ランディングページのレイアウト

スティッキーソーシャルメディアフォローモジュールを開発する前に、いくつかのサンプルページコンテンツを用意する必要があります。 これを行うには、設定メニューに移動し、[ライブラリからロード]オプションを選択します。 [ライブラリからロード]ボックスからFashionDesignerのランディングページレイアウトを見つけて選択します。 次に、右側にある緑色の[このレイアウトを使用]ボタンをクリックします。

スティッキーなソーシャルメディアアイコンでランディングページをデザインする

デザインに通常のセクションを追加します。

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

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

今すぐ始める

次に、新しく追加したセクションをページの上部に移動します。

セクション設定を開き、背景色を変更します。

  • 背景色:\ 0023fff9f2

[デザイン]タブから、パディングを更新します。

  • パディング:10px上10px下

行の追加

次に、新しく準備したセクションに1列の行を追加します。

行設定を開き、次の変更を更新します。

  • カスタムガター幅を使用:はい
  • 側溝幅:1
  • 幅:100 \ 0025
  • 最大幅:100 \ 0025
  • パディング:0px上、0px下

ソーシャルメディアモジュールの追加

次に、新しいソーシャルメディアフォローモジュールを行に追加します。

次に、ソーシャルメディアのモジュール設定を開き、[詳細設定]タブのDivi \ 2019sスティッキーオプションを使用して、モジュールにスティッキー位置を追加します。

  • スティッキーポジション:トップにこだわる

[デザイン]タブから、次の設定を更新します

  • モジュールの配置:中央
  • アイコンの色:\ 0023000(デスクトップ)、\ 0023fff(ホバー)、\ 0023fff(スティッキー)
  • 幅:100 \ 0025
  • 最大幅:100 \ 0025
  • パディング:上20px、下12px、左10px、右10px

ソーシャルネットワーク設定

モジュールの設定が完了したら、さまざまなソーシャルネットワークアイコンの装飾に進むことができます。 まず、1つのソーシャルネットワークアイコンのスタイルを設定します。 次に、ソーシャルネットワークをコピーして他のネットワークを作成します。

デフォルトでは、コンテンツタブの下に2つのソーシャルネットワークがリストされているはずです。 それらの1つを削除し、クリックして残っているものを編集します。

ソーシャルネットワークを選択し、ソーシャルネットワーク設定でデスクトップ、ホバー、およびスティッキー状態の背景色を調整します。

  • ソーシャルネットワーク:TikTok(またはあなたが望むもの)
  • 背景:透明(デスクトップ)、\ 0023fe2c55(ホバー)、\ 0023000(スティッキー)

次に、タブを切り替えて背景色を確認します。

次に、レイアウトに少しよく一致するように、アイコンに素敵な楕円形を付けましょう。

  • 丸みを帯びた角:50 \ 0025
  • ボーダー幅:1px
  • 境界線の色:\ 0023000(デスクトップ)、透明(ホバー)

アイコンは現在、円のような形をしています。 右側と左側にさらにパディングを追加して、より楕円形のフォームを作成できます。 アイコン間にスペースを追加するために、左右の余白を追加することもできます。 また、タブレットと電話のディスプレイの間隔を必ず更新してください。

  • マージン(デスクトップ):左15ピクセル、右15ピクセル
  • マージン(スティッキー):左0px、右0px
  • マージン(電話):左0px、右0px
  • パディング(デスクトップ):左16ピクセル、右16ピクセル
  • パディング(タブレット):左14ピクセル、右14ピクセル
  • パディング(電話):左0px、右0px

アイコンを複製してさらに作成する

最初のソーシャルネットワークの設計が完了したので、アイコンを複製してさらに作成することができます。 ソーシャルメディアフォローモジュール設定を開き、ソーシャルネットワークアイテムの複製アイコンをクリックしてこれを実行します。 この例では、さらに4つ作成しましょう。

ここで、各ソーシャルアイコンをソーシャルメディアアイコンに置き換えます。 これにより背景色が変更されます。背景色も更新する必要があります。

これを行うには、複製されたソーシャルネットワーク設定を開き、以下を更新します。

  • ソーシャルネットワーク:Facebook
  • 背景色:透明(デスクトップ)、\ 00233b5998(ホバー)

同じプロセスに従って、残りのソーシャルネットワークを更新します。

最終出力

最終的なデザインは次のようになります。

終わりの考え

ソーシャルメディアのフォローボタンは、どのWebサイトでも事実上常に重要です。 これらは、ソーシャルメディアプラットフォームをWebサイトに接続するために最もよく使用される方法の1つです。 その結果、 Diviのソーシャルメディアフォローモジュールには、サイトに最適なソリューションを作成するために必要なすべてのネットワークアイコンとスタイルオプションが含まれています。 うまくいけば、これらの粘着性のあるソーシャルメディアは、将来のプロジェクトに役立つモジュール設計に従うことがわかります。