Divi用の5つのカラーパレットを備えたユニークなソーシャルフォローデザインをダウンロードする

ウェブサイトとソーシャルメディアはしばしば密接に関連しています。 ソーシャルネットワークはウェブサイトへのトラフィックを増やすために使用されますが、特にソーシャルネットワークへのエンゲージメントを増やしたい場合は、その逆も当てはまります。 そのため、ほとんどのWebサイトでは、さまざまなページにソーシャルネットワークへのリンクが含まれています。 従来の方法でアイコンを追加することも、よりユニークなアプローチを試すこともできます。

ダウンロードして、Diviを使用して構築した任意のWebサイトで使用できる、魅力的でクリエイティブなソーシャルフォローデザインを作成しました。 さらに、このデザインに最適な5種類のカラーパレットも用意しています。

それを手に入れよう！

プレビュー

このデザインのさまざまなバリエーションとさまざまな画面サイズのビューを見てみましょう。

ソーシャルフォローデザインを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

カラーパレット

プロセスを段階的にご案内します。 ただし、その前に、選択したカラーパレットを選択し、カラーコードを近くに置いてください。 チュートリアル全体で色番号を参照します。

パレット＃1

• カラー＃1：＃D09CF1
• 色＃2：＃00e2df

パレット＃2

• 色＃1：＃ffa0a0
• カラー＃2：＃10007f

パレット＃3

• 色＃1：＃ff3273
• カラー＃2：＃050042

パレット＃4

• 色＃1：＃f954ee
• カラー＃2：＃00aeff

パレット＃5

• 色＃1：＃ffca3a
• 色＃2：＃ff6005

ソーシャルフォローデザインをゼロから再現する

セクション＃1を追加

グラデーションの背景

新規または既存のページに通常のセクションを追加することから始めます。 セクション設定を開き、グラデーションの背景を適用します。

• カラー1：カラー＃1（カラーパレットで検索）
• カラー2：カラー＃2（カラーパレットで検索）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：6％

背景画像

次に、ダウンロードしたフォルダ> [背景パターン]に移動して、見つけた背景パターンをアップロードします。 背景パターンを次の背景設定と組み合わせます。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央下
• 背景画像の繰り返し：スペース

トップディバイダー

次に仕切りの設定を開き、上部の仕切りを追加します。

• 仕切りスタイル：リストで検索
• 仕切りの色：rgba（72,0,79,0.08）
• 仕切りの高さ：500px
• 仕切りフリップ：垂直

ボトムディバイダー

下部の仕切りも追加します。

• 仕切りスタイル：リストで検索
• 仕切りの色：#FFFFFF
• 仕切りの高さ：500px

間隔

次に、間隔設定に移動し、カスタムパディングを追加します。

• トップパディング：220px
• ボトムパディング：329px

アニメーション

最後に、セクションに微妙なアニメーションを追加します。

• アニメーションスタイル：スライド
• アニメーションの方向：下
• アニメーション強度：2％
• アニメーションの開始不透明度：100％

行を追加する

カラム構造

これで、次の列構造を使用して新しい行を追加できます。

テキストモジュールを追加

コンテンツを追加する

この行に必要な唯一のモジュールはテキストモジュールです。 コンテンツボックスに見出しと段落を追加します。

テキスト設定

次に、テキスト設定に移動し、いくつかの変更を加えます。

• テキストサイズ：16px
• テキスト行の高さ：2em
• テキストの向き：中央
• テキストの色：明るい

H1 / H2テキスト設定

選択した見出しの設定も変更します。

• 見出しフォント：ルービック
• 見出しフォントスタイル：大文字
• 見出しのテキストサイズ：100px（デスクトップ）、42px（タブレット）、32px（電話）
• 見出し線の高さ：1.2em

サイジング

次に、モジュールの幅を減らします。

• 幅：71％
• モジュールの配置：中央

セクション＃2を追加

前のセクションのすぐ下に、先に進んで新しい通常のセクションを追加します。 セクション設定を変更する必要はありません。

行を追加する

カラム構造

次の列構造を使用して行を追加します。

サイジング

次に、サイズ設定で行を全幅にします。

• この行を全幅にする：はい

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

モックアップをアップロード

モジュールの追加を開始する時が来ました！ 2番目の列にイメージモジュールを追加することから始めます。 選択したカラーパレットに一致するモックアップをアップロードします。 ダウンロードしたフォルダ> [モックアップ]に移動すると、すべての種類のモックアップを見つけることができます。

サイジング

イメージモジュールのサイズも変更します。

• 幅：82％（デスクトップ）、100％（タブレットと電話）
• モジュールの配置：中央

間隔

イメージモジュールと前のセクションを重ね合わせるには、イメージモジュールに負のマージンを追加します。

• 上マージン：-300px

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

コンテンツを追加する

これで、すべてのソーシャルネットワークを追加できます！ それらを作成するために、私たちは宣伝文句モジュールを使用しています。 先に進み、最初の宣伝文句モジュールを3番目の列に追加して、内容を変更します。

リンクを追加

次にソーシャルページへのリンクを追加します。

アイコンを選択

アイコンも選択してください。

背景色

背景設定に移動し、わずかに透明な背景色を使用して続行します。

• 背景色：rgba（255,255,255,0.79）

アイコン設定

次に、アイコンの設定を変更します。 ここでは、Instagramの公式カラーの1つを使用しています。

• アイコンの色：＃fb3958
• アイコンの配置：左

タイトルテキスト設定

次に、タイトルテキストの設定にいくつかの変更を加えます。

• タイトルフォントの太さ：半太字
• タイトルテキストの色：＃fb3958
• タイトル行の高さ：1.7em

間隔

モックアップとのオーバーラップを作成するために、いくつかの間隔値を追加します。

• トップマージン：-170px（デスクトップ）、-800（タブレット）、-700（電話）
• 左マージン：-60％（デスクトップ）、0％（タブレットと電話）
• 右マージン：60％（デスクトップ）、0％（タブレットと電話）
• トップパディング：20px
• ボトムパディング：20px
• 左パディング：50px
• 右パディング：50px

国境

境界線の設定も試してみます。

• 左上の境界線：20px
• 左下の境界線：20px
• 右ボーダー幅：5px
• 右の境界線の色：＃fb3958

ボックスシャドウ

ボックスシャドウを追加すると、デザイン要素に奥行きが与えられます。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-11px

アニメーション

最後に、スライドインアニメーションスタイルを使用して、人々が慣れ親しんでいるモバイル通知効果を模倣しています。

• アニメーションスタイル：スライド
• アニメーションの方向：左

宣伝文句モジュールを3回クローンする

時間を節約するために、Blurbモジュールのクローンを3回作成します。 次に、複製のそれぞれを変更して、目的の結果を作成します。

重複の負のトップマージンを削除します

全体像を把握するために、まず、重複するそれぞれの負のカスタムマージンを削除します。

独自の宣伝文モジュール設定

宣伝文モジュール＃2

コピーの変更

3番目の列の2番目の宣伝文モジュールを開き、内容を変更します。

アイコンを選択

別のアイコンも選択します。

アイコン設定

アイコンの色を、それが表すソーシャルネットワークに一致するように変更します。

• アイコンの色：＃3b5998

タイトルテキスト設定

タイトルテキストの色にも同じ色を使用します。

• タイトルテキストの色：＃3b5998

間隔

電話の反対側に別のオーバーラップを作成するには、間隔の値を変更します。

• 左マージン：-170％（デスクトップ）、0％（タブレットと電話）
• 右マージン：170％（デスクトップ）、0％（タブレットと電話）

国境

次に、境界線の設定を変更します。

• 右上隅：20px
• 右下隅：20px
• 左ボーダー幅：5px
• 左ボーダーの色：＃3b5998

アニメーション

この宣伝文句モジュールを反対側から少し遅れてスライドインさせます。

• アニメーションの方向性：右
• アニメーションの遅延：100ms

宣伝文モジュール＃3

コピーの変更

3番目の宣伝文モジュールにもいくつかの異なるコピーが必要です。

アイコンを選択

次に別のアイコンを選択します。

アイコン設定

アイコンの色を、それが表すソーシャルネットワークに一致する色に変更します。

• アイコンの色：＃1da1f2

タイトルテキスト設定

タイトルテキストの色に同じ色を使用します。

• タイトルテキストの色：＃1da1f2

間隔

間隔の設定も変更します。

• 左マージン：-80％（デスクトップ）、0％（タブレットと電話）
• 右マージン：80％（デスクトップ）、0％（タブレットと電話）

国境

境界線設定でも境界線の色を変更します。

• 右の境界線の色：＃1da1f2

アニメーション

最後に、すでに存在するアニメーションに少し遅延を追加します。

• アニメーションの遅延：200ms

宣伝文モジュール＃4

コピーの変更

最後の宣伝文句では、コンテンツを変更することから始めます。

アイコンを選択

次に、[画像とアイコン]設定で別のソーシャルアイコンを選択します。

アイコン設定

アイコンの色を、表示されているソーシャルネットワークと一致させます。

• アイコンの色：＃0077B5

タイトルテキスト設定

タイトルテキストに同じ色を使用します。

• タイトルテキストの色：＃0077B5

間隔

同様に異なる間隔設定を使用して、宣伝文句モジュールを左側に押します。

• 左マージン：-180％（デスクトップ）、0％（タブレットと電話）
• 右マージン：180％（デスクトップ）、0％（タブレットと電話）

国境

次に、境界線の設定を変更します。

• 右上隅：20px
• 右下隅：20px
• 左ボーダー幅：5px
• 左ボーダーの色：＃0077B5

アニメーション

大事なことを言い忘れましたが、この宣伝文句モジュールに別のアニメーションの方向とアニメーションの遅延を追加します。

• アニメーションの方向性：右
• アニメーションの遅延：300ms

プレビュー

すべての手順を完了したので、最後に結果を見てみましょう。

最終的な考え

この投稿では、無料でダウンロードできるユニークなソーシャルフォローデザインを共有しました。 また、適用できる5つの異なるカラーパレットも提供しています。 作成したDiviWebサイトのJSONファイルを自由に使用して、Webサイトを介したソーシャルエンゲージメントを高めてください。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！