ポップアウトソーシャルメディアをデザインする方法Diviのページテンプレートへのボタンバーに従ってください

ソーシャルメディアのフォローボタンは、どのWebサイトにも引き続き人気があります。 企業や個人は、訪問者がそれらをフォローしたり、チャネルにサブスクライブしたりすることを期待して、これらのリンクを使用してユーザーをソーシャルメディアページにリダイレクトします。 通常、これらのボタンは、連絡先ページ、サイドバー、またはWebサイトのフッターに表示されます。

このチュートリアルでは、Diviのページテンプレートへのポップアウトソーシャルメディアフォローボタンバーをデザインする方法を紹介します。 これにより、これらのソーシャルメディアのフォローボタンは、気を散らすことなくサイト上でより見やすくなります。 さらに、Diviのテーマビルダーを使用すると、サイト全体の任意の（またはすべての）ページのこれらのボタンを含むページテンプレートを簡単に作成できます。

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

スニークピーク

このチュートリアルで作成したソーシャルメディアのフォローボタンを簡単に見てみましょう。

ポップアウトソーシャルメディアフォローボタンバーページテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、テーマビルダーの移植性オプションを使用してjsonファイルの1つをDiviテーマビルダーに追加するだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、Diviテーマをインストールしてアクティブ化する必要があります。 最新バージョンのDiviを使用していることを確認してください。

また、結果を表示するために新しいテンプレートをそのページに割り当てるために、テスト目的でDiviBuilderで作成された少なくとも1つのページが必要になります。

その後、あなたは行く準備ができています。

Diviでページテンプレートのポップアウトソーシャルメディアフォローボタンバーを作成する

新しいテンプレートの作成

WordPressダッシュボードから、Divi> ThemeBuilderに移動します。 次に、[新しいテンプレートの追加]ボックスをクリックして、新しいテンプレートを作成します。

プロモーションバーを表示するページにテンプレートを割り当てます。

新しいテンプレートで、[カスタムボディの追加]領域をクリックし、[カスタムボディの作成]を選択します。

次に、「最初からビルド」オプションを選択します。

ソーシャルメディアフォローボタンバーの作成

新しい行を作成する

手始めに、テンプレートに1列の行を追加しましょう。

ソーシャルメディアフォローボタンモジュールを追加する

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

ソーシャルネットワークを追加する

ソーシャルメディアフォロー設定の下に、表示したいすべてのソーシャルネットワークを追加します。 新しいネットワークを追加するには、[新しいソーシャルネットワークの追加]灰色のプラスアイコンをクリックして、リストからネットワークを選択します。

また、訪問者をリダイレクトするソーシャルメディアページのリンクURLを追加する必要があります。 これを行うには、ソーシャルメディアネットワークの設定アイコンをクリックして、アカウントリンクのURLを更新します。

ボタンモジュールの追加

ソーシャルメディアフォローモジュールネットワークが終了したら、ボタンモジュールを追加する準備が整いました。 このボタンは、ポップアウトバーを表示するためにユーザーがカーソルを合わせたものになります。 先に進み、ボタンモジュールを追加してから、ソーシャルメディアフォローモジュールの上にドラッグします。

ボタンの内容

次に、ボタンのコンテンツを次のように更新します。

• ボタンテキスト：フォロー
• ボタンリンクURL：＃

ボタンのスタイルと配置

次に、ボタンのデザイン設定を次のように更新します。

• ボタンのテキストサイズ：16px
• ボタンのテキストの色：
• ボタンの境界線の幅：0px
• ボタンの文字間隔：1px
• ボタンフォント：Montserrat
• ボタンのフォントの太さ：太字
• ボタンアイコン：右矢印（スクリーンショットを参照）
• マージン：残り100％
• パディング：100px下

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

position: absolute;

行設定

ボタンのスタイルを設定して準備ができたら、次のように行設定を更新します。

• 背景色：#ffffff
• 側溝幅：1
• 幅：100％
• 最大幅：64px
• パディング：上24px、下16px、左16px

行ボックスシャドウ

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウブラー強度：0px
• ボックスシャドウブラー強度：30px
• 影の色（デスクトップ）：透明
• 影の色（ホバー）：rgba（0,0,0,0.2）

行の配置

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

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

これにより、ブラウザの上部から3分の1下の固定位置に行が配置されます。

カスタムマージンでホバー効果をポップアウト

次に、次のマージン値を追加して、ホバー機能のポップアウトを追加します。

• マージン（デスクトップ）：-64px左
• マージン（ホバー）：0px左

それはソーシャルメディアのフォローボタンバーの世話をします。 ただし、必要な投稿コンテンツモジュールを作成して、テンプレートを完成させる必要があります。

テンプレートへの投稿コンテンツモジュールの追加

この時点で、ソーシャルメディアのフォローボタンバーを使用する準備が整いました。 ただし、これはテンプレートであるため、このテンプレートを使用してページのコンテンツを表示するには、投稿コンテンツモジュールを確認して追加する必要があります。

投稿コンテンツモジュールで新しい行を追加

ソーシャルメディアのフォローボタンバーを含む行の下に、新しい1列の行を追加します。

次に、投稿コンテンツモジュールを行に追加します。

現在、投稿コンテンツモジュールは、親行のデフォルトの幅に制限されます。 行の幅とパディングを変更して、ブラウザの幅全体にギャップがないようにする必要があります。 投稿コンテンツモジュールは、Divi Builderを使用してページを作成する必要がある領域を決定するため、これは重要です。

以下を更新します。

• 幅：100％
• 最大幅：100％
• パディング：0px上、0px下

次に、セクション設定を次のように更新します。

• パディング：0px上、0px下

それはそれについてです。 エディターを終了する前に、レイアウトを確認して保存してください。 次に、テーマビルダーの変更も保存します。

最終結果

最終結果を確認するには、テンプレートが割り当てられているページにアクセスしてください。 ポップアウトソーシャルメディアのフォローボタンバーは次のようになります。

最終的な考え

このソーシャルメディアのフォローボタンバーは、これらの重要なソーシャルネットワークを最前線に導くのに間違いなく役立ちます。 ポップアウト機能により、アイコンがユーザーの気を散らさないようになります。 また、テーマビルダーを使用して、任意のページテンプレートにバーを追加できます。 これがあなたの次のプロジェクトへの素晴らしい追加になることを願っています！

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

乾杯！