Dividerモジュールを使用してDiviの変換オプションで背景形状を作成する

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、Dividerモジュールを使用してDiviの変換オプションとパラリーガルレイアウトパックを使用して背景形状を作成する方法を紹介します。 Divider Modulesは非常に用途が広く、ページの全体的なデザインを大幅に向上させることができます。 Paralegal Layout Packに特に一致するいくつかの例を再作成しますが、この手法は、Diviで構築するあらゆる種類のWebサイトに使用できます。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

Paralegal LayoutPackのランディングページを使用して新しいページを作成する

新しいページを作成し、Paralegal LayoutPackのランディングページをそのページにアップロードします。

例1を再作成する

セクションオーバーフロー

最初の例の作成を始めましょう！ 先に進み、ヒーローセクションの設定を開き、[デザイン]タブに移動します。 ここでは、セクションコンテナを超えるものがないことを確認します。 そのために、メイン要素に1行のCSSコードを追加します。

overflow: hidden;

Dividerモジュールを列2に追加します

可視性

次に、先に進み、特殊セクションの2番目の列にディバイダーモジュールを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

背景色

仕切りの背景色として、レイアウトパックのカラーパレットの色を使用します。

• 背景色：＃d94144

色

次に、[デザイン]タブに移動し、仕切りの色も変更します。

• 色：＃f3f1f2

スタイル

スタイル設定に移動し、仕切りスタイルを変更します。

• 仕切りスタイル：点線

サイジング

サイズ設定も試してみてください。 このディバイダーモジュールを好きなように見せることができますが、この投稿のプレビューに表示されたとおりに見せたい場合は、次の設定を使用してください。

• 仕切りの重量：4px
• 高さ：0px

間隔

次に、いくつかのカスタムマージンとパディング値を使用して、ディバイダーモジュールの位置とサイズを変更します。 すべてが応答し続けるように、さまざまな画面サイズに応じて値を変更してください。

• トップマージン：-30vw（デスクトップ）、-100vw（タブレットと電話）
• 左マージン：-100vw（デスクトップ）、-138vw（タブレット）、-300vw（電話）
• トップパディング：0px
• ボトムパディング：1.3vw（デスクトップ）、2.2vw（タブレット）、3vw（電話）

変身

変換スケール

モジュールを変換する時が来ました！ 変換設定で最初に行うことは、次の変換スケール値を追加して分周器のサイズを増やすことです。

• 下：153％
• 右：500％

変換回転

また、変換回転設定でディバイダーモジュールを回転させます。 お気づきのように、このチュートリアルの冒頭で追加した1行のCSSコードのおかげで、Dividerモジュールはセクションを超えません。

• 左：348度

例2を再作成する

セクションオーバーフロー

次の例に移りましょう！ 繰り返しになりますが、セクションのメイン要素に1行のCSSコードを追加して、セクションコンテナを超えるものがないことを確認します。

overflow: hidden;

セクションの終わりに新しい行を追加

カラム構造

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

間隔

行が占めるサイズを小さくするために、間隔設定のデフォルトの上部と下部のパディングを削除します。

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

仕切りモジュールを追加

可視性

Dividerモジュールを追加してスタイルを設定する時が来ました！ [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

背景色

ここでも、レイアウトパックのカラーパレットの色の1つを背景色として使用しています。

• 背景色：＃d94144

色

デザインタブに移動し、仕切りの色も変更します。

• 色：＃f3f1f2

サイジング

サイズ設定もいじっています。

• 仕切りの重量：10px
• 高さ：0px

間隔

そして、さまざまな画面サイズで変更するカスタムパディングを使用して、必要な正確な形状を作成します。

• トップパディング：2vw
• ボトムパディング：2.5vw（デスクトップ）、3vw（タブレット）、3.9vw（電話）

変身

変換スケール

変身する時が来ました！ 最初に行うことは、Dividerモジュールをスケーリングすることです。 これは、セクションの最初または最後にギャップがないことを確認するために行っています。 Divider Moduleをあまりスケーリングする必要はありません。セクションを超えるものはすべて、デザインに表示されません。

• 下：153％
• 右：153％（デスクトップ）、250％（タブレット）、500％（電話）

変換翻訳

次に、Divider Moduleの位置を変更して、右側に表示されるようにします。 これらの値をさまざまな画面サイズに一致させてください。

• 下：25vw（デスクトップ）、27vw（タブレットと電話）
• 右：0px（デスクトップ）、-32vw（タブレットと電話）

変換回転

大事なことを言い忘れましたが、変換回転設定をいじって、水平仕切りを垂直仕切りに変えます。

• 左：270度

例3を再作成する

セクションオーバーフロー

次の最後の例に移りましょう！ 繰り返しになりますが、セクションのメイン要素にCSSコードを1行追加して、セクションコンテナを超えるものがないことを確認してください。

overflow: hidden;

セクションの先頭に新しい行を追加

カラム構造

セクションの上部に新しい行を追加して続行します。 チュートリアルの後半で行がその下のコンテンツと重ならないように、行を一番上に配置することが重要です。

サイジング

モジュールをまだ追加せずに、行設定を開き、列が画面の幅全体を占めるようにします。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

仕切りモジュールを追加

可視性

次に、Dividerモジュールを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

背景色

背景設定に移動し、選択した背景色を追加します。

• 背景色：＃d94144

色

仕切りの色も変更します。

• 色：＃f3f1f2

スタイル

そして、スタイル設定で仕切りスタイルを変更します。

• 仕切りスタイル：点線

サイジング

次に、サイズ設定に移動して、いくつかの変更を加えます。

• 仕切りの重量：4px
• 高さ：0px

間隔

そして、間隔設定で上下のパディングを使用して、必要な形状を作成します。

• トップパディング：3vw
• ボトムパディング：3vw

ボックスシャドウ

また、仕切りに微妙なボックスシャドウを与えることで、ページに奥行きを追加します。

• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.3）

変身

変換スケール

仕切りのスタイルを設定したので、変換を開始できます。 最初に行うことは、変換スケール設定でディバイダーモジュールのサイズを大きくすることです。

• 下：140％
• 右：140％

変換翻訳

次に、変換変換設定に移動し、ディバイダーモジュールの位置を変更します。 セクションの上部に行を配置すると、その下にある行よりも低いz-indexを維持するのに役立ち、この美しいオーバーラップが作成されます。

• 下：4vw
• 右：16vw（デスクトップ）、26vw（タブレット）、35vw（電話）

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Divider ModuleとDiviの新しい変換オプションを使用して、背景の形状を作成し、ページの全体的なルックアンドフィールを向上させる方法を示しました。 このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！