あなたのDiviブログ投稿のための5つの鮮やかな背景スタイルをダウンロードしてください

私たちは別の無料のDiviダウンロードでここにいます！ 今回は、ウェブサイトのブログ投稿に使用できる5種類の鮮やかな背景スタイルをご紹介します。 同じWebサイトでこれらの背景スタイルを簡単に組み合わせて、公開するさまざまなブログ投稿に異なるルックアンドフィールを与えることができます。 これらすべての鮮やかな背景スタイルを無料で提供することに加えて、作成してWebサイトに公開するブログ投稿に再利用できるブログ投稿テンプレートの作成についても説明します。

それを手に入れよう！

プレビュー

まず、5つの異なる結果と、さまざまな画面サイズのビューを見てみましょう。

鮮やかな背景スタイルを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

カラーパレット

それぞれの背景スタイルについて、以下のカラーパレットを見つけることができます。 チュートリアル全体で色番号を参照するので、作成する背景スタイルとパレットを選択して、そこから移動します。

パレット＃1

• カラー＃1：＃886DFC
• カラー＃2：＃7C56BD
• カラー＃3：＃372C66

パレット＃2

• 色＃1：＃42bcb2
• 色＃2：＃9CFEF0
• 色＃3：＃a8baf7

パレット＃3

• 色＃1：＃96b2ff
• 色＃2：＃d999ff
• カラー＃3：＃357ff4

パレット＃4

• カラー＃1：＃B981FF
• カラー＃2：＃24EEFA
• 色＃3：＃be7bf2

パレット＃5

• 色＃1：＃e02b20
• 色＃2：＃f6ff56
• 色＃3：＃db241e

新しい投稿を作成する

詳細を追加してDiviBuilderを有効にする

最初から始めましょう！ WordPress Webサイトに新しいページを追加し、ページタイトルを追加し、注目の画像をアップロードして、DiviBuilderを有効にします。

Diviページ設定

Visual Builderに切り替える前に、表示しているページの右上にある[Diviページ設定]ボックスにいくつかの変更を加えてください。 これにより、Diviと完全に連携してブログ投稿のレイアウトを作成できるようになります。 Webサイトでテンプレートを再利用する場合は、新しいブログ投稿を作成するたびに、これらの設定を変更することを忘れないでください。

• ページレイアウト：全幅
• 投稿タイトル：非表示

VisualBuilderに切り替えます

これで、VisualBuilderに切り替えることができます。

これを行うと、3つのオプションが画面に表示されます。 青いボタンをクリックして、最初から構築を開始します。

ブログ投稿デザインを作成する

セクション＃1を追加

背景画像

テンプレートの作成を始めましょう！ 上部の空のセクションから始めます。 セクション設定を開き、背景設定に移動して、選択した背景スタイルをアップロードします。 ダウンロードしたフォルダ>ヒーローに移動すると、5つのバリエーションすべてを見つけることができます。

• 背景画像サイズ：カバー
• 背景画像の位置：上部中央

間隔

背景画像が完全に表示されるようにするには、セクションの上部のパディングをいじってみてください。

• トップパディング：660px

セクション＃2を追加

間隔

追加したセクションのすぐ下に、先に進んで別のセクションを追加します。 設定を開き、間隔設定に移動して、デフォルトのカスタムパディングをすべて削除します。

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

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

間隔

次のセクションの下部にあるデフォルトのパディングをすべて削除します。

• ボトムパディング：0px

投稿タイトルモジュールの追加

要素

モジュールの追加を開始する時が来ました！ この行では、投稿タイトルモジュールのみが必要です。 追加した後、表示する要素を選択します。

タイトルテキスト設定

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

• タイトルフォント：Abril Fatface
• タイトルテキストの配置：中央
• タイトルテキストサイズ：73px（デスクトップ）、50px（タブレット）、40px（電話）

メタテキス​​ト設定

メタテキス​​トの設定も変更する必要があります。

• メタテキス​​トの配置：中央
• メタテキス​​トの色：色＃1（パレットで検索）
• メタテキス​​トサイズ：18px
• メタラインの高さ：3em

セクション＃3を追加

背景画像

このページの最後のセクションには、ブログ投稿のコンテンツとCTAが含まれます。 選択した背景スタイルをアップロードすることから始めます。 ダウンロードしたフォルダ> Bodyに移動すると、バリエーションを見つけることができます。 背景画像をアップロードしたら、背景設定にいくつかの変更を加えます。

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

間隔

このセクションのデフォルトの上部パディングをすべて削除して、このセクションと前のセクションの間のすべての空白を削除します。

• トップパディング：0px

行＃1を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

背景色

次の行に少し透明な背景色を追加します。

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

間隔

ここでもデフォルトのカスタムパディングを削除します。

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

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

コンテンツを追加する

追加した行にテキストモジュールを追加して続行します。 ここでは、必要なすべてのブログ投稿コンテンツを追加し、さまざまなテキストスタイルを使用して目的の結果を得ることができます。 以下の印刷画面では、見出しと段落を使用しています。

テキスト設定

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

• テキストサイズ：21px（デスクトップ）、18px（タブレット）、15px（電話）
• テキスト行の高さ：2em

見出しの設定

見出しのテキスト設定も変更する必要があります。

• 見出しフォント：Abril Fatface
• 見出しのテキストサイズ：46px（デスクトップ）、40px（タブレット）、30px（電話）
• 見出し線の高さ：1.5em

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：80px
• ボトムパディング：80px
• 左パディング：80px（デスクトップ）、40px（タブレット）、30px（電話）
• 右パディング：80px（デスクトップ）、40px（タブレット）、30px（電話）

ボックスシャドウ

最後に、テキストモジュールに微妙なボックスシャドウを追加します。 これにより、ブログ投稿テンプレートにある程度の深みがもたらされます。

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

行＃2を追加

カラム構造

1つの列を使用して、前の行のすぐ下に新しい行を追加して続行します。

間隔

この行のデフォルトのカスタムパディングもすべて削除します。

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

Eメールオプチンモジュールを追加する

コンテンツを追加する

次に、CTAを追加します。 EmailOptinモジュールを使用しています。 追加したら、コンテンツを変更します。

田畑

このモジュールではメールアドレスのみを使用しているため、フィールド設定で名と姓を無効にしてください。

グラデーションの背景

グラデーションの背景をEmailOptinModuleに追加して続行します。

• 色1：色＃2（パレットで検索）
• 色2：色＃3（パレットで検索）
• グラデーション方向：144度

レイアウト

次に、モジュールのレイアウトを変更します。

• レイアウト：ボディを上に、フォームを下に

テキスト設定

テキスト設定も変更します。

• テキストの向き：中央
• テキストの色：明るい

タイトルテキスト設定

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

• タイトルフォント：Abril Fatface
• タイトルテキストサイズ：54px（デスクトップ）、40px（タブレット）、35px（電話）

ボタンの設定

ボタンの外観も変更します。

• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• フォントスタイル：下線
• アンダースコアスタイル：ダブル

間隔

最後に、Email OptinModuleの間隔設定でさまざまなカスタムパディング値を使用します。

• トップパディング：100px
• ボトムパディング：100px
• 左パディング：300px（デスクトップ）、50px（タブレットと電話）
• 右パディング：300px（デスクトップ）、50px（タブレットと電話）

再利用のためにDiviライブラリにレイアウトを保存する

あとは、レイアウトをDiviライブラリに保存するだけです。 そうすれば、他のページにも再利用できます！ 新しいページを作成するときに、既存のページとしてブログ投稿にアクセスすることもできます。

プレビュー

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

最終的な考え

この投稿では、無料でダウンロードできる魅力的で活気のある背景スタイルをいくつか紹介しました。 さらに、ブログ投稿テンプレートを最初から作成する方法についても説明しました。 自分でデザインしたブログ投稿テンプレートには、これらの背景スタイルを自由に使用してください。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！