Diviでスプリットブレンドモードの見出しを作成する方法
公開: 2019-08-26ブレンドモードが、作業中のデザインの美学に特別な注意を払うのに役立つことは周知の事実です。 過去に、ユニークでゴージャスなデザインを作成するのに役立つブレンドモードのヒントとコツについて説明しました。 さて、列の更新が出たので、これらのブレンドモードでできるいくつかの追加のことがあります。 それらの1つは、スプリットブレンドモードの見出しを作成することです。 この投稿では、モジュールと列のブレンドモード、列の背景色、および負の余白を組み合わせることで、驚くべき結果を達成する方法を紹介します。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
スプリットブレンドモードヒーローセクションを無料でダウンロード
フリーブレンドモードのヒーローセクションに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
再作成を始めましょう！
新しいセクションを追加
間隔
作業中のページに新しい通常のセクションを追加し、デフォルトの上部と下部のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
ボックスシャドウ
ボックスシャドウオプションに移動し、微妙なボックスシャドウを追加します。
- ボックスシャドウブラー強度：70px
- 影の色：rgba（0,0,0,0.07）
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
グラデーションの背景
モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を適用します。 この投稿の次のステップでは、ブレンドモードを使用してグラデーションの背景を背景画像とマージします。
- 色1：＃00cbff
- 色2：＃bf35ff
- グラデーション方向：96度
背景画像
行に背景画像を追加し、次の背景画像設定と組み合わせて使用します。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
- 背景画像の繰り返し：繰り返しなし
- 背景画像のブレンド：画面
サイジング
次にサイズ設定に移動し、行がセクションコンテナの幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
間隔
次に、行のデフォルトの上下のパディングをすべて削除します。 これにより、この投稿の後半で追加する列2の背景色が、行とセクションのコンテナーの上下の境界線に確実に接触するようになります。
- トップパディング：0px
- ボトムパディング：0px
画面
小さい画面サイズで両方の列が隣り合って表示されるようにするために、CSSコードの1行を行のメイン要素に追加します。
display: flex;
列2の設定
背景色
一般的な行の設定が完了したら、先に進んで2番目の列の設定を開きます。 白の背景色を追加することから始めます。
- 背景色：#FFFFFF
フィルタ
[デザイン]タブに移動し、列全体にブレンドモードを追加します。
- ブレンドモード：画面
Dividerモジュールを列1に追加します
可視性
モジュールの追加を開始する時が来ました！ 最初の列に必要なモジュールは、Dividerモジュールだけです。 このモジュールは、モジュールを表示せずに最初の列にスペースを作成するのに役立ちます。 仕切りの「仕切りを表示」オプションが無効になっていることを確認してください。
- 仕切りを表示：いいえ
間隔
間隔の設定に移動し、下の余白を追加して、最初の列にスペースを作成します。
- 下マージン：50vw
テキストモジュール＃1を列2に追加します
H1見出しを追加
2列目へ！ ここでは、見出しのテキストモジュールから始めます。 お好みのH1コンテンツを入力してください。
H1テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- 見出しフォント：ポピン
- 見出しフォントの太さ：太字
- 見出しのテキストの色：#FFFFFF
- 見出しのテキストサイズ：12vw
- 見出し文字の間隔：-0.2vw
間隔
また、モジュールの周囲にスペースを作成し、カスタムマージン値を適用してモジュールを左に押します。 負の左マージンは、スプリットブレンドモードを作成する上で重要な役割を果たします。 これにより、コピーの一部を、背景色を含まない最初の列の下に表示できます。
- トップマージン：18vw
- 下マージン：2vw
- 左マージン：-27.3vw
フィルタ
さて、この次のステップでは、魔法が起こります！ モジュールと列のブレンドモードを組み合わせて、行の背景が透けて見えるようにします。 テキストモジュールには、必ず次のブレンドモードを選択してください。
- ブレンドモード：違い
テキストモジュール＃2を列2に追加します
コンテンツを追加する
2番目のモジュールに移りましょう！ お好みのコンテンツを追加してください。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：ポピンズ
- テキストの配置：正当化
- テキストの色：＃000000
- テキストサイズ：0.8vw（デスクトップ）、1.5vw（タブレット）、2.3vw（電話）
- テキスト行の高さ：2.5em（デスクトップとタブレット）、2.2em（電話）
間隔
次に、いくつかのカスタムマージン値を追加します。
- 下マージン：1vw
- 左マージン：5vw
- 右マージン：14vw（デスクトップ）、4vw（タブレット）、5vw（電話）
Dividerモジュールを列2に追加します
可視性
次のモジュールであるDividerモジュールに進みます。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
[デザイン]タブに移動し、それに応じて線の設定を変更します。
- 線の色：#FFFFFF
- 線のスタイル：実線
- ライン位置：上
サイジング
仕切りのサイズ設定も変更します。
- 仕切りの重量：0.7vw
- 幅：9％
- 高さ：0px
間隔
そして、いくつかのカスタム間隔値を追加します。
- トップマージン：2vw（デスクトップ）、5vw（タブレットと電話）
- 下マージン：3vw（デスクトップ）、6vw（タブレットと電話）
- 左マージン：5vw
フィルタ
最後になりましたが、ブレンドモードを適用して、行の背景画像とグラデーションが透けて見えるようにします。
- ブレンドモード：違い
ボタンモジュールを列2に追加
コピーを追加
次の最後のモジュールであるボタンモジュールに進みます。 お好みのコピーを入力してください。
配置
デザインタブに移動し、ボタンの配置が左に設定されていることを確認します。
- ボタンの配置：左
ボタンの設定
ボタンの設定も変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- ボタンのテキストの色：＃000000
- ボタンの境界線半径：0px
- ボタンフォント：ポピン
間隔
最後に、間隔設定にカスタムマージンとパディング値を追加します。
- 下マージン：10vw（デスクトップ）、15vw（タブレットと電話）
- 左マージン：5vw
- トップパディング：1vw
- ボトムパディング：1vw
- 左パディング：3vw
- 右パディング：3vw
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
最終的な考え
この投稿では、Diviの新しい列オプションを使用して、見事なスプリットブレンドモードの見出しを作成する方法を紹介しました。 このチュートリアルでは、Diviの組み込みオプションの用途の広さと、Diviを更新するたびにサードパーティの設計ソフトウェアが不要になる方法についてのみ説明します。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。