Diviの背景パターンとマスクオプションを使用して一意のCTAを作成する方法

Diviの新しい背景パターンとマスクオプションにより、Webサイトに人目を引くユニークなCTA（Call-to-Action）セクションを簡単に作成できます。 画像、グラデーション、パターン、マスクをさまざまなカスタマイズオプションと組み合わせて、訪問者の注意を引く独自の背景デザインを作成できます。

このチュートリアルでは、Diviの新しい背景パターンとマスクオプションを使用して独自のCTAセクションを作成する方法を示します。

始めましょう！

スニークピーク

これは、このチュートリアルで設計するCTAセクションのプレビューです。

始めるために必要なもの

始める前に、Diviテーマをインストールしてアクティブ化し、WebサイトにDiviの最新バージョンがあることを確認してください。

飛び込みましょう。

Diviの背景パターンとマスクオプションを使用して一意のCTAを作成する方法

既成のレイアウトで新しいページを作成する

このチュートリアルでは、Diviライブラリから事前に作成されたレイアウトを使用します。 このデザインでは、IceCreamShopレイアウトパックのIceCreamShopLandingPageを使用します。

新しいページを作成し、タイトルを追加してから、DiviBuilderを使用するオプションを選択します。

この例では、Diviライブラリから作成済みのレイアウトを使用するため、[レイアウトの参照]を選択します。

アイスクリームショップのランディングページのレイアウトを検索して選択します。

[このレイアウトを使用]を選択して、ページにレイアウトを追加します。

これで、デザインを作成する準備が整いました。

背景パターンとマスクのレイアウトを変更する

このレイアウトから月のCTAセクションのフレーバーを変更します。 背景パターンとマスクデザインのレイアウトを変更してみましょう。

行設定

[行の設定]を開き、[デザイン]を選択します。

[サイズ設定]で、列の高さを等しくします。

• 列の高さを等しくする：はい

[間隔]で、上部のパディングを削除して、コーンをセクションの上部に移動します。

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

列1の設定

行設定の[コンテンツ]タブで、[列1]設定を選択します。 [背景]で、オレンジ色の背景を削除します。

列2の設定

次に、列2の設定を選択します。 元のデザインには必要のない間隔があるので、それを取り除きましょう。 [デザイン]で、[間隔]に移動し、上部のパディングを削除します。

次に、[詳細]を選択し、次のカスタムCSSをメイン要素に追加して、「今月のフレーバー」テキストが垂直方向の中央に配置されるようにします。

margin:auto;

セクション設定

セクション設定を開きます。 [デザイン]で、[パディング]を選択します。 トップコーンがページの最上部に揃うようにセクションパディングを調整します。

• パディング：0px

CTAセクションへの背景パターンとマスクの追加

レイアウトが変更されたので、背景パターンとマスクを追加できます。 Diviの新しいオプションを使用すると、背景パターンとマスクに無限のオプションがあります。つまり、数回クリックするだけで、CTAセクションの独自のデザインを作成できます。 これらの設定で目を引く背景をデザインする方法を学ぶために続いてください。

背景色、パターン、およびマスクの設定

セクションの背景設定に移動します。

[色]タブで、オレンジ色の背景を追加します

• 色：＃FFA256

[パターン]タブで、パターンの形状と色を設定します。

• 形：紙吹雪
• 色：＃FF7D14

それでは、マスクを追加しましょう。 マスクタブを選択し、次のように設定を追加します。

• 形状：コーナーブロブ
• マスクの色：#FFFFFF
• マスク変換：水平
• マスクのアスペクト比：風景
• マスクサイズ：カバー

デザインの調整

背景が整ったので、デザインに最終的な調整を加えましょう。

「購入」ボタンの設定を開き、「デザイン」タブで配置を変更します。

• ボタンの配置：左

「購入」ボタンのホバー状態の背景色を変更して、オレンジ色の背景に対して目立つようにします。

• ホバーのボタンの背景：＃FF7D14

また、行のレイアウトを調整して、オレンジ色の背景と右側の「今月のフレーバー」セクションの間にスペースを追加します。 レイアウトを1：1から3：2に変更します。

これでデスクトップのデザインが完成し、Diviの背景パターンとマスクオプションを使用して独自のCTAセクションを作成する方法を学びました。

CTAセクションを応答性の高いものにする

CTAセクションを電話またはタブレットで表示すると、列2のコンテンツが列1の下にスタックされます。これにより、デザインで読みやすさの問題が発生する可能性があります。 Diviの組み込みのレスポンシブ設定を使用して、コンテンツを最適化し、小さな画面用にデザインするために、いくつかの調整を行いましょう。

テキストをボタンの前に配置したいので、「今月のハイライトフレーバー」テキストを「7月オレンジチョコレート」テキストモジュールにコピーします。 このテキストを電話とタブレットのバージョンにのみ追加していることを確認してください。

• 「オレンジチョコレート」のテキストをH3に変更します。

次に、この背景で目立つようにテキストにいくつかの変更を加えます。 [デザイン]タブに移動し、次の変更を加えます。

• H2（電話およびタブレット）テキストの色：＃000000
• H2（電話およびタブレット）テキストサイズ：30px
• H3（電話およびタブレット）テキストの色：＃000000
• H4（電話およびタブレット）テキストの色：＃000000

次に、元の「今月のフレーバー」テキストモジュールの設定に移動し、デスクトップデバイスでのみ表示されるように表示を変更します。 これにより、元のテキストモジュールが小さなデバイスで非表示になります。 今月のフレーバーのテキストがボタンの上に表示され、他のテキストがページに表示されます。

• 無効にする：電話とタブレット

次に、行の設定を開き、次に列1の設定を開きます。 左右のパディングを外します。

• 右パディング：0px
• 左パディング：0px

セクション設定に移動し、次に背景に移動して、マスク設定を編集します

• マスク変換：反転
• マスクアスペクト比：ポートレート

これで、Diviの背景パターンとマスクオプションのおかげで、独自の背景を持つ完全に応答性の高いCTAセクションが作成されました。

最終結果

最終結果を見てみましょう。

最終的な考え

Diviの強力な背景パターンとマスクオプションのおかげで、ユニークで人目を引く行動を促すフレーズのセクションを設計するのは非常に簡単です。 さまざまな色、パターン、マスク、設定の組み合わせを試して、創造性を解き放ちましょう。 デザインは簡単で、数回クリックするだけで完璧な外観が見つかるまで設定を調整できます。 最も重要なのは、Diviに組み込まれていることです。 別のプログラムで背景グラフィックをデザインする必要はもうありません。 背景設定を他のセクション、行、モジュールに適用して、さらにユニークなデザインにすることができます。 Diviの背景パターンとマスク機能について詳しく知りたい場合は、背景マスクとパターンを使用したヒーローセクションのチュートリアルを確認し、Diviのグラデーションビルダーを背景マスクとパターンと組み合わせる方法を学習してください。

WebサイトでDiviの背景パターンとマスクオプションをどのように使用しましたか？ 以下のコメントであなたが作成したものを教えてください！