Diviで平行四辺形を使用して洗練されたヘッダーデザインを作成する方法

洗練された新しいヘッダーデザインをページに追加することは、訪問者を驚かせる効果的な方法です。 また、ヘッダーの独自の背景をデザインすることから始めるのが最適です。 このチュートリアルでは、Diviを使用して、グラデーションの背景をクリエイティブな方法で使用して、ヘッダーデザインに平行四辺形を追加する方法を紹介します。 これにより、従来のボックスレイアウトから脱却する、デザインに優れたテクスチャ要素が追加されます。

始めましょう。

スニークピーク

これが私たちが構築するデザインの外観です。

必要なもの

このデザインを作成するには、次のことを行う必要があります。

1. ディビのテーマ
2. インテリアデザイン会社ページレイアウトについて（Divi Builder内から入手可能）

ページを設定する

このチュートリアルでは、新しいページでインテリアデザイン会社のページレイアウトについてを使用します。 WordPressダッシュボードに移動し、[ページ]> [新規追加]に移動します。 次に、ページにタイトルを付け、クリックしてDiviBuilderを使用します。 次に、ボタンをクリックしてビジュアルビルダーを展開します。 「既成のレイアウトを選択する」オプションを選択します。 次に、インテリアデザインレイアウトパックを見つけて選択します。 [バージョン情報]ページレイアウトを選択し、最後に[このレイアウトを使用]をクリックします。

ページがページに読み込まれると、編集を開始する準備が整います。

セクションの上部のパディングを取り出し、背景画像を置き換えます

これは簡単な最初のステップです。 ページの上部ヘッダーセクションの上部にカーソルを合わせるだけです。 現在の上部のパディングが10％に設定されていることがわかります。 パディングを0％までドラッグするだけです。 または、いつでもページ設定に移動して、カスタムの上部パディングを0％に設定することもできます。

この時点で背景画像を変更することもできますが、必須ではありません。 これを行うには、セクション設定に移動し、[コンテンツ]タブの下の背景画像を変更します。 次に、背景のグラデーションを取り出します。 これにより、背景画像と重なるテキストがあるため、モバイルでテキスト（白になります）が読みやすくなります。

行サイズとパディングを調整する

次に、行の設定に移動し、[デザイン]タブで以下を更新します。

カスタム幅を使用：はい
カスタム幅：100％
カスタムパディング：0px上、10vw下

行と列にグラデーションの背景を追加する

この洗練されたデザインを作成するために、開始位置と停止位置が異なるグラデーションの背景を重ねます。 最初にグラデーションの背景を行に追加し、次に列に追加する必要があります。

[コンテンツ]タブの行設定に移動し、以下を更新します。

背景のグラデーションの左の色：＃1a1a1a
背景グラデーションの右の色：rgba（255,255,255,0）
グラデーション方向：45度
開始位置：60％
終了位置：0％

列1の背景グラデーションの左の色：rgba（244,88,63,0.83）
列1の背景グラデーションの右の色：rgba（255,255,255,0）
カラムグラジエント方向：45度
カラム開始位置：66％
列の終了位置：0％

列に追加したオレンジ色のグラデーションは、ヘッダーデザインの最初の平行四辺形に使用されます。 平行四辺形を作成するには、オレンジ色のグラデーションを短くして、左側を45度に角度を付けて右側に一致させる必要があります。 これを行うには、召喚状モジュールにグラデーションを追加します。

召喚状モジュールのテキストサイズと間隔の調整

召喚状モジュールに背景グラデーションを追加する前に、最初にダイヤルインされた間隔とテキストスタイルを取得しましょう。

召喚状モジュールの設定に移動し、[デザイン]タブで以下を更新します。

テキストの向き：左
テキストの色：明るい
タイトルテキストサイズ：4.5vw（デスクトップ）、42px（タブレット）
ボタンのテキストの色：＃1a1a1a
ボタンの背景色：#ffffff
幅：100％
マージンをリセット
カスタムパディング（デスクトップ）：10vw上部、左5％、右45％
カスタムパディング（タブレット）：38％右
カスタムパディング（スマートフォン）：5％右

これで、背景のグラデーションをモジュールに追加できます。 このプロセスを高速化するには、行の設定に移動し、右クリックして行の背景のグラデーションをコピーします。

次に、[コンテンツ]タブの下にある召喚モジュールの設定に移動し、右クリックして背景のグラデーションをモジュールに貼り付けます。 次に、開始位置を47％に調整します。

ご覧のとおり、これにより、ユニークなデザイン要素の暗いグラデーションの背景に重なる長い角度の長方形の効果が作成されます。

これは現状では素晴らしいデザインですが、行の下部に重なる平行四辺形を追加して、さらにクリエイティブになりましょう。

空のテキストモジュールを使用して追加の平行四辺形を作成する

ヘッダーデザインのこの最終フェーズのコンセプトには、カスタムグラデーションを使用して2つのテキストモジュールを並べて作成することが含まれます。これらを組み合わせると、左右に同じ角度の側面を持つ単一の「ボックス」が表示されます。 これを行うには、最初にテキストモジュールを保持する1列の行を作成する必要があります。 次に、モジュールのサイズと位置を並べて配置します。

同じセクション内のアクションモジュールへの呼び出しを含むセクションのすぐ下に1列の行を追加します。

次に、左側の列にテキストモジュールを追加し、次のようにテキストモジュールを更新します。

コンテンツボックス内のすべてのコンテンツを消去します（空のテキストモジュールを使用します）
背景グラデーションの左の色：rgba（255,255,255,0）
背景グラデーションの右の色：rgba（58,80,107,0.83）
グラデーション方向：45度
開始位置：50％
終了位置：0％

次に、[デザイン]タブをジャンプして、以下を更新します。

テキスト行の高さ：0em（これにより不要な間隔がなくなります）
幅：50％
カスタムマージン：-8vw上、0px下
カスタムパディング：8vw上、8vw下

設定を保存する。

ビジュアルビルダーから、モジュールを複製し、次のように新しいモジュールのテキストモジュール設定を更新します。

背景のグラデーションプレビューにカーソルを合わせ、[グラデーションの切り替え]アイコンをクリックして、グラデーションの色を左から右に切り替えます。

モジュールの配置：右
カスタムマージン：-16vw上、0px下

設定を保存する。

モジュールの位置合わせが完了したので、行の設定を調整してモジュールを配置し、デザインに合わせてサイズを変更できます。 行設定を開き、以下を更新します。

行の配置：左
カスタム幅を使用：はい
カスタム幅：45％
カスタムマージン：残り30％
カスタムパディング：0px上、0px下

それはそれについてです！ 最終結果を確認してください。

こちらはタブレットとスマートフォンです。

最終的な考え

このデザイン手法が、Diviのグラデーション背景オプションを使用して、洗練された平行四辺形を独自のヘッダーデザインに組み込む方法について少しインスピレーションを与えてくれることを願っています。 そしてもちろん、このデザインはヘッダーに限定されません。 このデザインがあなたのために働く新しい分野を自由に探検してください。 より多くのインスピレーションについては、途中であなたを助けるかもしれないいくつかの壊れたグリッドデザインの秘密をチェックしてください。

コメントでお返事をお待ちしております。

乾杯！