Diviの新しい列フィルター設定を使用して見事なブレンディング効果を作成する
公開: 2019-08-09Diviの新しい列フィルター設定は、多くの創造的な方法で使用できます。 この投稿では、1つのメイン行の背景画像を列のコンテンツとブレンドする方法を紹介します。 モジュールにさまざまな色のグラデーションを追加し、列の「画面」ブレンドモードを追加して、見事な効果を作成します。 このデザインが、次のDiviプロジェクトでカラムブレンドモードを使用するきっかけになることを願っています。 JSONファイルも無料でダウンロードできます！
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
カラムブレンドモードのレイアウトを無料でダウンロード
無料のカラムブレンドモードのレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
私たちのYoutubeチャンネルを購読する
3列の行を持つ新しいセクションを追加する
3列の行を持つ新しいセクションを追加して設計を開始します。
セクション間隔
セクション設定を開き、間隔を調整します。
- 左右のマージン：3vw
- 上下のパディング：84px
行設定
バックグラウンド
モジュールを追加する前に、行の設定を変更します。 背景色を追加することから始めます。
- 背景色：ミディアムグレー＃c4c4c4
次に、背景画像をアップロードし、ブレンドモードを使用して背景色を画像とブレンドします。
- 背景画像のブレンド：乗算
サイジング
次に、行のサイズ設定を調整します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- カラムの高さを均等化：はい
- 幅：100％
- 最大幅：100％
間隔
デフォルトの行パディングも削除します。
- 上下のパディング：0px
ボックスシャドウ
行に単純なボックスシャドウを追加して続行します。
- ボックスシャドウ：最初のオプション
可視性
可視性タブでZインデックスを調整します。
- Zインデックス：1
スタイル列1
最初の列の設定を入力します。
フィルタ
[フィルター]タブの列に画面ブレンドモードを適用します。
- ブレンドモード：画面
ホバー変換スケール
変換オプショングループを入力し、ホバー変換スケール設定を変更します。
- 変換スケール：x軸とy軸の両方で105％
可視性
列の可視性タブに入り、オーバーフロー設定を調整します。
- 水平方向のオーバーフロー：目に見える
- 垂直オーバーフロー：目に見える
トランジション
[トランジション]タブに移動し、トランジション期間を調整してスムーズなトランジションを作成します。
- 移行時間：500ミリ秒
列1にテキストモジュールを追加
各列には、3つのテキストモジュールが含まれています。 選択したH2コンテンツを含む最初のテキストモジュールを列1に追加し、次のように設定を調整します。
バックグラウンド
色のグラデーションで背景のスタイルを設定します。
- 背景：グラデーション
- グラデーションカラー1：＃5498ff
- グラデーションカラー2：＃16fff3
- 勾配方向：235度
- 開始位置：37％
間隔
次に、いくつかのカスタム間隔値を追加します。
- 上下のパディング：6vw
- 左右のパディング：3vw
見出しテキスト
見出しのテキスト設定を入力し、それに応じてH2テキスト設定のスタイルを設定します。
- 見出し2フォントの太さ：超太字
- 見出し2フォントスタイル：TT
- 見出し2テキストの色：黒#oooooo
- 見出し2テキストサイズ：
- デスクトップ：5vw
- タブレット：11vw
- 電話番号：13vw
- 見出し2行の高さ：
- デスクトップ：4.3vw
- タブレット：9vw
- 電話：10.5vw
フィルタ
フィルタ設定に移動し、画面ブレンドモードを追加します。
- ブレンドモード：画面
2番目のテキストモジュールを列1に追加します
選択した段落の内容を使用して、2番目のテキストモジュールを列1に追加します。
次のようにテキストモジュールのスタイルを設定します。
バックグラウンド
白い背景色を追加します。
- 背景色：白#fffffff
文章
デザインタブに入り、それに応じてテキストを調整します。
- テキストフォント：Montserrat
- テキストの配置：正当化
- テキストの色：ダークグレー＃333333
- 文字サイズ：
- デスクトップ：0.8vw
- タブレット：2vw
- 電話：2.5vw
- テキスト文字の間隔：-0.04vw
- テキスト行の高さ：
- デスクトップ：2.7vw
- タブレット：5.5vw
- 電話：6vw
間隔
間隔の設定も調整して、テキストの周囲に空のスペースを作成します。
- 上マージンと下マージン：0.5vw
- 上部と下部のパディング：
- デスクトップ：5vw
- タブレット+電話：15vw
- 左パディング：5vw
- 右パディング：
- デスクトップ：5vw
- タブレット+電話：25vw
フィルタ
最後になりましたが、[フィルター]タブで画面ブレンドモードを適用します。
- ブレンドモード：画面
3番目のテキストモジュールを列1に追加します
列の設計を完了するには、CTAコピーを含む3番目のテキストモジュールを追加します。 このモジュール全体をボタンとして使用しています。
次のようにモジュールのスタイルを設定します。
リンクを追加
リンク設定で選択したリンクを追加します。 誰かがモジュールのどこかをクリックするとすぐに、他の場所にリダイレクトされます。
バックグラウンド
最初のテキストモジュールに一致するように背景のグラデーションのスタイルを設定します。
- 背景：グラデーション
- 背景グラデーションカラー1：＃5498ff
- 背景のグラデーションカラー2：＃16fff3
- 勾配方向：235度
文章
デザインタブに入り、次のようにテキストのスタイルを設定します。
- テキストフォント：Montserrat
- テキストフォントの太さ：重い
- テキストフォントスタイル：下線付き
- テキストの下線の色：白#ffffff
- テキストの色：黒＃000000
- 文字サイズ：
- デスクトップ：1.5vw
- タブレット：3.3vw
- 電話：4vw
- テキスト行の高さ：1em
間隔
間隔の設定を調整して、テキストがモジュールに収まるようにします。
- 上部と下部のパディング：
- デスクトップ：2vw
- タブレット：6vw
- 電話番号：9vw
- 左パディング：3vw
1列目を2回複製する
最初の列が完成したら、行の設定を開き、2番目と3番目の列を削除します。 次に、最初の列を2回複製します。 もちろん、2列目と3列目のモジュールにいくつかの変更を加える必要があります。
列2 /テキストモジュール1の背景
- 背景グラデーションカラー1：＃c870ff
- 背景のグラデーションカラー2：＃ff355a
列2 /テキストモジュール2ボックスシャドウ
- ボックスシャドウ：6番目のオプション
- ボックスシャドウブラー強度：20px
- ボックスシャドウスプレッド強度：17px
- ボックスシャドウカラー：rgba（225,33,255,0.06）
列2 /テキストモジュール3背景
3番目のテキストモジュールの背景のグラデーションを調整して、最初のモジュールと一致させます。
- 背景グラデーションカラー1：＃c870ff
- 背景のグラデーションカラー2：＃ff355a
列3 /テキストモジュール1の背景
3列目へ！ それに応じて、テキストモジュール1のグラデーションの背景を変更します。
- 背景グラデーションカラー1：＃ff4800
- 背景のグラデーションカラー2：＃fc9a2a
列2 /テキストモジュール3背景
- 背景グラデーションカラー1：＃ff4800
- 背景のグラデーションカラー2：＃fc9a2a
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
それはラップです
この投稿では、Diviの列設定を使用して、見事なブレンド効果を持つ3列のデザインを作成する方法を紹介しました。 モジュール、列、行の設定を組み合わせて、作成したWebサイトで使用できる美しい結果を実現しました。 このチュートリアルが、独自の代替デザインを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！