Diviで作成されたエディトリアルスタイルのセクションレイアウトの5つの例

公開: 2017-11-05

新しいDiviオプションは、多くの可能性を提供します。 モジュール、行、列は、これまで以上に、見事でユーザーフレンドリーなWebデザインへの道のりでお互いに力を与えます。 それができることの1つは、注目に値する編集スタイルのセクションを作成することです。 そして、それこそがこの投稿でお見せするものです。 さまざまなWebサイト内で使用できる5つの異なる編集スタイルのセクションレイアウト。 最良の部分？ 投稿は、各モジュール、行、列にのみ適切な設定を使用して行われます。

作成方法を示す5つの例を見てみましょう。

最初の例

デスクトップ

編集

モバイル

編集

2番目の例

デスクトップ

編集

モバイル

編集

3番目の例

デスクトップ

編集

モバイル

編集

4番目の例

デスクトップ

編集

モバイル

5番目の例

デスクトップ

編集

モバイル

編集

Diviで作成されたエディトリアルスタイルのセクションレイアウトの5つの例

私たちのYoutubeチャンネルを購読する

最初の例の作成を開始します

最初のエディタースタイルのレイアウトを作成することから始めましょう。

編集

新しいセクションを追加

新しいページを追加し、Divi Builderを有効にして、VisualBuilderに切り替えます。 Visual Builderに入ったら、標準セクションを追加します。

3列の行を追加

その標準セクション内で、3列の行が必要になります。

社説

グラデーションの背景

行設定を開き、次のグラデーションの背景を追加します。

  • ファーストカラー：＃636363
  • 2番目の色：rgba（255,255,255,0）
  • グラデーションタイプ：ラジアル
  • 半径方向：中心
  • 開始位置：0％
  • 終了位置：47％

社説

列2の背景色

また、列2の背景色として「＃d8d8d8」を設定する必要があります。

社説

サイジング

[デザイン]タブに移動し、[サイズ設定]サブカテゴリに次の設定を使用します。

  • カスタム幅を使用：はい
  • カスタム幅：100％
  • カスタムガター幅を使用：はい
  • 側溝幅：1

社説

間隔

Spacingサブカテゴリを開き、2番目の列の上下左右のパディングに「50px」を追加します。

社説

最初の列の画像モジュール

グラデーションの背景

行の最初の列に画像を追加し、次のグラデーションの背景を使用します。

  • 最初の色：rgba（255,255,255,0）
  • セカンドカラー：＃086191
  • グラデーションタイプ：線形
  • 勾配方向：107度
  • 開始位置：60％
  • 終了位置：60％

社説

配置

[デザイン]タブに移動し、左側の画像の配置を使用して、[モバイルで常に画像を中央に配置]オプションを有効にします。

社説

間隔

次に、[間隔]サブカテゴリを開き、次のマージンとパディング設定を使用します。

  • 上マージン：100px（デスクトップ）、0px（タブレットと電話）
  • トップパディング：20px
  • ボトムパディング：20px

社説

2列目のテキストモジュール

テキスト設定

次に、行の2番目の列にテキストモジュールを追加します。 [デザイン]タブに移動し、[テキスト]サブカテゴリに次の設定を使用します。

  • テキストフォントサイズ：12px
  • テキストの色：＃000000
  • テキストの向き：中央

社説

サイジング

サイジングサブカテゴリを開き、「84％」の幅を使用して、中央のモジュール配置を選択します。

社説

間隔

最後に、上下の余白に「50px」を追加します。

社説

3列目の画像モジュール

グラデーションの背景

3番目の列に別の画像モジュールを追加し、次のグラデーションの背景を使用します。

  • ファーストカラー：＃a36100
  • 2番目の色：rgba（255,255,255,0）
  • グラデーションタイプ：線形
  • グラデーション方向：73度
  • 開始位置：40％
  • 終了位置：40％

社説

配置

[デザイン]タブに移動し、左側の画像の配置を選択して、[モバイルで常に画像を中央に配置]オプションを有効にします。

社説

間隔

最後に、次のカスタムマージンとパディングを追加します。

  • 上マージン：300px（デスクトップ）、0px（タブレットと電話）
  • トップパディング：20px
  • ボトムパディング：20px

社説

結果

デスクトップでの結果をもう一度見てみましょう。

編集

そしてモバイルで：

編集

2番目の例の作成を開始します

2番目の例は、デスクトップでは次のようになります。

編集

新しいセクションを追加

まず、新しい標準セクションを追加します。

2列の行を追加する

次に、2列の行を追加します。

社説

列2の背景色

行の設定を開き、列2の背景色として「#ededed」を追加します。

社説

サイジング

[デザイン]タブに移動し、次の変更を[サイズ設定]サブカテゴリに適用します。

  • カスタム幅を使用：はい
  • カスタム幅：100％
  • カスタムガター幅を使用：はい
  • 側溝幅：1

社説

最初の列の画像モジュール

配置

最初の列に画像モジュールを追加し、左側の画像配置を使用して、[モバイルで常に画像を中央に配置]オプションを有効にします。

社説

間隔

[間隔]サブカテゴリを開き、次の設定を使用します。

  • 上マージン：100px（デスクトップ）、0px（タブレットと電話）
  • トップパディング：0px
  • ボトムパディング：0px

社説

2列目のテキストモジュール

テキスト設定

次に、テキストモジュールを2番目の列に追加し、次の設定をテキストサブカテゴリに適用します。

  • テキストフォント：Lato
  • テキストフォントサイズ：12px
  • テキストの色：＃000000
  • テキスト行の高さ：2.2em
  • テキストの向き：中央

社説

サイジング

サイジングサブカテゴリを開き、「75％」の幅を適用します。

社説

間隔

最後に、次の設定がSpacingサブカテゴリに適用されることを確認してください。

  • 上マージン：120px（デスクトップ）、-80（タブレットと電話）
  • 左マージン：-240px（デスクトップ）、80（タブレット）、45（電話）
  • 上、右、下、左のパディング：50px（デスクトップとタブレット）、20px（電話）

社説

結果

完了すると、デスクトップに次のデザインが表示されます。

編集

そしてモバイルで：

編集

3番目の例の作成を開始します

次に、次のような例があります。

編集

新しいセクションを追加

もう一度、新しい標準セクションを追加します。

2列の行を追加する

この行に必要な列構造は次のとおりです。

社説

列1の背景色

行の設定を開き、「＃e8e8e8」を列1の背景色として使用します。

社説

列2グラジエントバックグラウンド

2番目の列に必要なグラジエントバックグラウンドは次のとおりです。

  • 最初の色：＃e8e8e8
  • 2番目の色：rgba（255,255,255,0）
  • 列2の勾配タイプ：線形
  • 列2の勾配方向：147度
  • 列2の開始位置：25％
  • 列2の終了位置：9％

社説

サイジング

サイジングサブカテゴリを開き、次の設定を使用します。

  • カスタム幅を使用：はい
  • カスタム幅：100％
  • カスタムガター幅を使用：はい
  • 側溝幅：1

社説

間隔

最後に、最初の列の上下のパディングに「70px」を追加します。

社説

最初の列の画像モジュール

配置

最初の列に画像モジュールを追加し、左側の画像配置を使用して、[モバイルで常に画像を中央に配置]オプションを有効にします。

社説

間隔

Spacingサブカテゴリを開き、左マージンに「-300px」を追加します。
社説

2列目のテキストモジュール

背景色

2番目の列にテキストモジュールを追加し、背景色として「＃3d3d3d」を使用します。

社説

テキスト設定

[デザイン]タブに移動し、[テキスト]サブカテゴリに次の設定を使用します。

  • テキストフォント：Lato
  • テキストフォントサイズ：12px
  • テキストの色：#FFFFFF
  • テキスト行の高さ：2.2em
  • テキストの向き：中央

社説

サイジング

サイズ設定サブカテゴリを開き、幅に「75％」を使用します。

社説

間隔

最後に、Spacingサブカテゴリに次の設定を使用します。

  • 上マージン：130px（デスクトップ）、-200（タブレットと電話）
  • 左マージン：-180px（デスクトップ）、80（タブレット）、50（電話）
  • 上、右、下、左のパディング：50px（デスクトップとタブレット）、20px（電話）

社説

結果

完了すると、デスクトップでの結果は次のようになります。

編集

そして、モバイルでこのように：

編集

4番目の例の作成を開始します

作成する4番目の例は次のようになります。

編集

新しいセクションを追加

作業中のページに標準セクションを追加することから始めます。

2列の行を追加する

次に、2列の行を追加します。

社説

サイジング

サイジングサブカテゴリを開き、次の変更を加えます。

  • カスタム幅を使用：はい
  • カスタム幅：60％
  • カスタムガター幅を使用：はい
  • 側溝幅：1

社説

最初の列最初の画像モジュール

配置

最初の列に画像モジュールを追加し、適切な画像配置を使用して、[モバイルで常に画像を中央に配置]オプションを有効にします。

社説

サイジング

その画像モジュールのサイジングサブカテゴリに移動し、「89％」の幅を使用して、適切なモジュール配置を選択します。

社説

可視性

[詳細設定]タブに移動し、携帯電話とタブレットで画像モジュールを無効にします。 使用されている3つのイメージモジュールに対してこれを実行します。 タブレットと携帯電話のどちらに表示するかを自分で決めることができます。この場合は、右上隅の画像になります。

社説

1列目2番目の画像モジュール

配置

別の画像モジュールを追加し、適切な画像配置を使用して、[モバイルで常に画像を中央に配置]オプションを有効にします。

社説

国境

下にスクロールして、次の境界線を利用します。

  • 境界線を使用：はい
  • ボーダーカラー：#FFFFFF
  • ボーダー幅：5px
  • ボーダースタイル：ソリッド

社説

可視性

最後に、[詳細設定]タブに移動し、携帯電話とタブレットでイメージモジュールを無効にします。

社説

2列目最初の画像モジュール

配置

次の画像モジュールを2番目の列に追加し、左側の画像配置を使用して、[モバイルで常に画像を中央に配置]オプションを有効にします。

社説

国境

下にスクロールして[境界線]サブカテゴリを開き、次の設定を適用します。

  • 境界線を使用：はい
  • ボーダーカラー：#FFFFFF
  • ボーダー幅：4px
  • ボーダースタイル：ソリッド

社説

2列目2番目の画像モジュール

配置

最後の画像モジュールを2番目の列に追加し、左側の画像配置を使用して、[モバイルで常に画像を中央に配置]オプションを有効にします。

社説

サイジング

次に、サイズ設定サブカテゴリを開き、「89％」の幅を使用して、左側のモジュール配置を選択します。

社説

可視性

携帯電話やタブレットでもこの画像モジュールを無効にします。

社説

1列の行を追加する

前の行が終了したら、先に進んで別の行を追加します。 今回は、行に必要な列は1つだけです。

サイジング

行設定の[デザイン]タブに移動し、[カスタム幅を使用]オプションを有効にして、[581px]をカスタム幅として使用します。

社説

テキストモジュール

背景色

その新しい行にテキストモジュールを追加し、背景色として「rgba（255,255,255,0.92）」を選択します。

社説

テキスト設定

[デザイン]タブに移動し、次の設定を[テキスト]サブカテゴリに適用します。

  • テキストフォント：Lato
  • テキストフォントサイズ：12px
  • テキストの色：＃000000
  • テキスト行の高さ：2.2em
  • テキストの向き：中央

社説

サイジング

次に、[サイズ設定]サブカテゴリを開き、[幅]に「75％」を追加して、中央のモジュール配置を選択します。

社説

間隔

最後に、次の設定をSpacingサブカテゴリに適用します。

  • 上マージン：-580px（デスクトップ）、-200（タブレットと電話）
  • 左マージン：– 180px（デスクトップ）、80（タブレット）、50（電話）
  • 上、右、下、左のパディング：50px

社説

結果

完了すると、デスクトップで次の結果を確認できるようになります。

編集

そして、モバイルでは次のようになります。

5番目の例の作成を開始します

再作成する方法を示す最後の例は次のとおりです。

編集

全幅セクションを追加

ページに全幅セクションを追加することから始めます。

全幅画像モジュール

その全幅セクション内に、全幅画像モジュールを追加します。

社説

新しいセクションを追加

前のセクションのすぐ下に、別のセクションを追加します。 今回は、セクションを全幅ではなく標準にする必要があります。

3列の行を追加

その新しい標準セクションに3列の行を追加します。

社説

列1、2、3の背景色

行設定を開き、次の背景色を列に割り当てます。

  • 列1：#eaeaea
  • 列2：rgba（12,113,195,0.17）
  • 列3：rgba（131,0,233,0.09）

社説

サイジング

[デザイン]タブに移動し、[サイズ設定]サブカテゴリに次の変更を加えます。

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

社説

間隔

次に、Spacingサブカテゴリを開き、各列の上部マージンに「-60px」を追加し、下部パディングに「50px」を追加します。

社説

最初の列のテキストモジュール

背景色

最初の列にテキストモジュールを追加し、背景色として「rgba（255,255,255,0.89）」を使用して続行します。

社説

テキスト設定

[デザイン]タブに移動し、次の設定を[テキスト]サブカテゴリに適用します。

  • テキストフォント：Lato
  • テキストフォントサイズ：12px
  • テキストの色：＃000000
  • テキスト行の高さ：2.2em
  • テキストの向き：中央

社説

国境

Borderサブカテゴリを開き、次の設定を使用します。

  • 境界線を使用：はい
  • ボーダーカラー：#FFFFFF
  • ボーダー幅：17px
  • ボーダースタイル：ソリッド

社説

サイジング

次に、「75％」の幅を使用して、サイジングサブカテゴリ内の中央のモジュール配置を選択します。

社説

間隔

最後に、Spacingサブカテゴリを開き、次の設定を適用します。

  • 上マージン：-300px（デスクトップ）、0px（タブレットと電話）
  • 上、右、下、左のパディング：50px（デスクトップとタブレット）、20px（電話）

社説

テキストモジュールのクローンを2回作成し、他の2つの列に配置します

先に進み、テキストモジュールのクローンを2回作成します。 次に、残りの2つの列に各クローンを配置します。

間隔の2列目のテキストモジュールを変更する

2番目の列に配置されたテキストモジュールの上部マージンを「-220px」に変更する必要があります。

社説

間隔の3列目のテキストモジュールを変更する

3番目の列のテキストモジュールについても同じカウントですが、値は代わりに「-140px」です。

社説

結果

そして、ここにデスクトップでの結果があります：

編集

そしてモバイルで：

編集

最終的な考え

この投稿では、自分のWebサイト全体で使用できる美しく楽しい編集スタイルのセクションレイアウトをいくつか紹介しました。 これらの例は、Diviのオプションの柔軟性と、創造性の高さを示しています。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

ジュリアティム/shutterstock.comによる注目の画像