Diviの新しい列構造を使用して見事なセクション遷移を作成する方法
公開: 2018-09-26毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。
今週は、進行中のDivi設計イニシアチブの一環として、Diviの新しい列構造を使用して見事なセクション遷移を作成する方法を紹介します。 さまざまな列構造をDiviの組み込みオプションのいくつかと組み合わせて、ページデザインを次のレベルに引き上げます。
それを手に入れよう！
プレビュー
まず、Diviの組み込みオプションのみを使用して最初から作成する3つの異なる例を見てみましょう。 これらの例は、小さい画面サイズでも同様に見栄えがします。
Diviのメイクアップアーティストレイアウトパックのランディングページを使用する
Diviのメイクアップアーティストレイアウトパックのランディングページを使用します。 レイアウトパックを確認したい場合は、次のブログ投稿にアクセスしてください。 特定のレイアウトパックを使用してこのチュートリアルを示していますが、他のレイアウトでも簡単にテクニックを使用できます。
セクション移行＃1
新しいセクションを追加
見つける
Diviのビジュアルビルダーを使用して、メイクアップアーティストレイアウトパックのランディングページを開きます。 次に、ヒーローセクションのすぐ下に新しい通常のセクションを追加します。
間隔
次に、セクションのデフォルトの間隔をすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造でセクションに新しい行を追加して続行します。
サイジング
行の幅も増やします。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：0
間隔
次に、デフォルトの上部と下部のパディングを削除します。
- トップパディング：0px
- ボトムパディング：0px
フィルター
行をより鮮やかにするには、フィルター設定で彩度を上げます。
- 飽和度：200％
Divider Module＃1を列1に追加します
仕切りを隠す
デザインの最初の正方形を作成するために、列1にディバイダーモジュールを追加します。[ディバイダーを表示]オプションを無効にします。
グラデーションの背景
次に、グラデーションの背景をディバイダーモジュールに追加します。
- 色1：rgba（255,255,255,0）
- 色2：rgba（176,182,219,0.34）
間隔
正方形を作成するには、間隔の値を変更します。
- 上マージン：-120px
- トップパディング：120px
- ボトムパディング：120px
クローンディバイダーモジュールと2列目に配置
DIviderモジュールの変更が完了したら、クローンを作成して2番目の列に配置します。
グラデーションの背景を変更する
グラデーションの背景から始めて、この複製にいくつかの変更を加える必要があります。
- 色1：rgba（228,237,234,0.58）
- 色2：rgba（255,255,255,0）
間隔を変更する
間隔設定も変更します。 これにより、このディバイダーモジュールと最初の列のディバイダーモジュールとの間の距離が長くなります。
- トップマージン：142px
- トップパディング：120px
- ボトムパディング：120px
クローンディバイダーモジュール＃1を2回、列3と5に配置します
紫色のディバイダーモジュールのクローンを2回作成し、複製を3列目と5列目に配置します。
Divider Module＃2のクローンを作成し、列4に配置します
緑のディバイダーモジュールも複製し、4列目に配置します。
タブレットと電話の列3、4、5のディバイダーモジュールを非表示にする
列3のディバイダーモジュールを開きます
もちろん、これらのセクション遷移は、小さい画面サイズでも同じように表示されるようにする必要があります。 そのため、使用したモジュールの一部を非表示にします。 列3のディバイダーモジュールの設定を開くことから始めます。
タブレットと電話で非表示
[詳細設定]タブに移動し、携帯電話とタブレットでモジュールを無効にします。
可視性スタイルのコピー
4列目と5列目の仕切りも非表示にする必要があります。 プロセスを高速化するには、3列目の仕切りの可視性設定をコピーします。
可視性スタイルの貼り付け
そして、それらを4列目と5列目のディバイダーモジュールに貼り付けます。
セクション移行＃2
新しいセクションを追加
見つける
2番目のセクション遷移を作成するには、ここに新しいセクションを追加します。
トップディバイダー
セクション設定を開き、次の上部仕切りを追加します。
- 仕切りスタイル：リストで検索
- 仕切りの色：#ffffff
- 仕切りの高さ：236px
- 仕切りフリップ：垂直
- 仕切りの配置：セクションの内容の上に
ボトムディバイダー
同様に、下部の仕切りも追加します。
- 仕切りスタイル：リストで検索
- 仕切りの色：#ffffff
- 仕切りの高さ：236px
- 仕切りの配置：セクションの内容の上に
間隔
次に、間隔設定を変更します。
- トップマージン：100px
- 下マージン：100px
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
新しいセクションに行を追加する時が来ました！ 次の列構造を選択します。
サイジング
モジュールを追加せずに、行設定を開き、幅を変更します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
デフォルトの上部と下部のパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
Divider Module＃1を列1に追加します
背景色
次に、DividerModuleを最初の列に追加します。 その設定を開き、背景色を追加します。
- 背景色：rgba（176,182,219,0.34）
仕切りの色
仕切りの色も変更します。
- 仕切りの色：#ffffff
仕切りスタイル
次に、[スタイル]設定に移動し、次のディバイダースタイルを使用します。
- 仕切りスタイル：ダブル
仕切りの重量
仕切りの重量は次のようになります。
- 仕切りの重量：18px
間隔
大事なことを言い忘れましたが、カスタムパディングを使用してディバイダーモジュールのサイズを増やします。
- トップパディング：50px
- ボトムパディング：50px
クローンディバイダーモジュールと2列目に配置
最初の列のDividerModuleの使用が完了したら、それを複製し、複製を2番目の列に配置します。
背景色を変更する
それに応じて、この複製の背景色を変更します。
- 背景色：＃e4edea
Divider Module＃1のクローンを作成し、3列目と5列目に配置します
紫色のDividerModuleを2回複製し、複製を列3と5に配置して続行します。
Divider Module＃2のクローンを作成し、列4に配置します
緑のディバイダーモジュールも複製し、複製を列4に配置します。
タブレットと電話の列3、4、5のディバイダーモジュールを非表示にする
タブレットと電話で非表示
最初のセクションの遷移の例で行ったのと同じことを行います。 3列目のディバイダーモジュールの設定を開き、携帯電話とタブレットで非表示にします。
可視性スタイルのコピー
これらの可視性スタイルをコピーします。
可視性スタイルの貼り付け
そして、それらを4列目と5列目のディバイダーモジュールに貼り付けます。
セクション移行＃3
新しいセクションを追加
見つける
最後のセクショントランジションをページに追加するには、ここに新しいセクションを追加します。
トップディバイダー
セクション設定を開き、上部の仕切りを追加します。
- 仕切りスタイル：リストで検索
- 仕切りの色：#ffffff
- 仕切りの高さ：150px
- 仕切りの配置：セクションの内容の上に
ボトムディバイダー
次に下の1つを追加します。
- 仕切りスタイル：リストで検索
- 仕切りの色：#ffffff
- 仕切りの高さ：150px
- 仕切りフリップ：垂直
- 仕切りの配置：セクションの内容の上に
間隔
次に、[間隔]設定に移動し、いくつかの変更を加えます。
- トップマージン：100px
- 下マージン：100px
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
このセクションで必要な行の列構造は次のとおりです。
サイジング
モジュールを追加せずに、行設定を開き、行の幅を増やします。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
Divider Module＃1を列1に追加します
仕切りを隠す
最初の列にディバイダーモジュールを追加して続行します。 'ShowDivider'オプションを無効にします。
背景色
代わりに、仕切りに背景色を追加します。
- 背景色：rgba（176,182,219,0.34）
間隔
上部と下部のパディングを使用して、モジュールのサイズを大きくします。
- トップパディング：100px
- ボトムパディング：100px
クローンディバイダーモジュールと2列目に配置
背景色を変更する
最初の列でディバイダーモジュールのクローンを作成し、2番目の列に複製を配置します。 その設定を開き、背景色を変更します。
- 背景色：rgba（228,237,234,0.58）
Divider Module＃1のクローンを作成し、3列目と5列目に配置します
紫色のディバイダーモジュールのクローンを2回作成し、3列目と5列目に配置します。
Divider Module＃2のクローンを作成し、列4に配置します
緑のディバイダーモジュールも複製し、複製を列4に配置します。
タブレットと電話の列3、4、5のディバイダーモジュールを非表示にする
タブレットと電話で非表示
タブレットと電話の列3のディバイダーモジュールを非表示にします。
可視性スタイルのコピー
これらの可視性スタイルをコピーします。
可視性スタイルの貼り付け
そして、それらを4列目と5列目のディバイダーモジュールに貼り付ければ完了です。
プレビュー
すべての手順を完了したので、作成した3つの異なる例を最後に見てみましょう。
最終的な考え
このユースケースのブログ投稿では、Diviの新しい列構造を使用して見事なセクション遷移を作成する方法を示しました。 このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何かを入れようとしています。 ご不明な点がございましたら、下のコメント欄にコメントを残してください！