Diviの列と変換オプションを使用して重複する列を作成する方法

最新のDiviアップデートの1つで、ビルダーの列にいくつかの非常にすばらしいコントロールを追加しました。 列のオーバーラップを作成することがこれまでになく簡単になりました。 このチュートリアルでは、Diviの列と変換の設定を使用して、3つの重複する列を持つ紹介文セクションを作成する方法を示します。

このデザインでは、リッチオレンジ＃ff8300、ウォームイエロー＃ffd400、目立つブルーグラデーション＃0c99c1の3色を使用します。 この重なり合う柱のデザインをWebサイトプロジェクトにすぐに適用できます。

始めましょう。

プレビュー

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

デスクトップ

モバイル

1.新しい通常のセクション+3列の行を作成します

最初に行う必要があるのは、3列の行を持つ通常のセクションを作成することです。

セクションの間隔を調整する

セクションの上部と下部のパディングを増やします。

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

行のサイズと間隔を調整する

行設定を開き、それに応じてサイズ設定を変更します。

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

その後、間隔の設定を変更します。

• ボトムパディング：0px
• 左パディング：11vw
• 右パディング：8vw

グラデーションの背景を追加

次にグラデーションの背景を追加します。

• 背景スタイル：グラデーション
• 最初の色：白#ffffff
• 2番目の色：オレンジ＃ff8300
• グラデーションタイプ：線形
• 勾配方向：180度
• 開始位置：35％
• 終了位置：35％

2.スタイル列

モジュールを列に追加する前に、各列のスタイル、間隔、および変換の設定を個別に変更します。

列1

列のスタイリングの最初のステップは、丸みを帯びた角とボックスの影です。

• 境界線：すべての丸い角で20px
• ボックスシャドウ：最初のボックスシャドウオプション
• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度：80px
• 影の色：rgba（0,0,0,0.3）
• ボックスシャドウの位置：外側

*変換設定を追加する前に、これらのアイテムスタイルをコピーして2列目と3列目に貼り付けます。

列1の設定を再度開き、[デザイン]タブに移動します。 変換設定を使用して、最初の列を2番目の列とオーバーラップさせます。 念のため、x軸は水平、y軸は垂直です。

• 変換翻訳：
  • デスクトップ：x軸= 3vw。 y軸= 14.2vw
  • タブレットと電話：x軸= -14vw。 y軸= 16vw
• 可視性：Zインデックス10

列2

2列目へ！ ボックスシャドウ（前の手順の1つで追加した）に移動し、ボックスシャドウのぼかしの強度を上げます。

• ボックスシャドウブラー強度：50px

列2にいくつかのカスタム間隔値を追加して続行します。

• トップパディング：
  • デスクトップ= 3vw
  • タブレット+電話= 5vw
• ボトムパディング：
  • デスクトップ= 5vw
  • タブレット+電話= 7vw
• 左パディング：
  • デスクトップ= 2vw
  • タブレット+電話= 4vw
• 右パディング：
  • デスクトップ= 2vw
  • タブレット+電話= 4vw

2番目の列を変換する時が来ました！ 2番目の列はデスクトップ用の場所に残りますが、小さな画面全体にいくつかのカスタム変換設定を適用する必要があります。 先に進み、変換変換タブを調整します。 さらに、Zインデックスを9に増やします。

• 変換翻訳：
  • タブレットと電話：x軸= 9vw。 y軸= 13vw
• 可視性：Zインデックス9

列3

3列目へ！ 既存のボックスシャドウのボックスシャドウのぼかし強度を上げます。

• ボックスシャドウブラー強度：50px

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

• 背景：グラデーション
• グラデーションカラー1：＃0c99c1
• グラデーションカラー2：rgba（5,0,78,0.72）
• グラデーションタイプ：線形
• 勾配方向：220度
• 開始位置：0％
• 終了位置：100％

それでは、間隔を追加しましょう。

• トップパディング：
  • デスクトップ= 3vw
  • タブレット+電話= 10vw
• ボトムパディング：
  • デスクトップ= 3vw
  • タブレット+電話= 7vw
• 左パディング：
  • デスクトップ= 1.5vw
  • タブレット+電話= 10vw
• 右パディング：
  • デスクトップ= 1.5vw
  • タブレット+電話= 10vw

最後になりましたが、変換変換設定を変更して、3番目の列を2番目の列とオーバーラップさせます。

• 変換翻訳：
  • デスクトップ：x軸= -10vw。 y軸= 14.2vw
  • タブレット：x軸= -14vw。 y軸= 9vw
  • 電話：x軸= -14vw。 y軸= 11vw
• 可視性：Zインデックス9

モジュールを追加する前の列のプレビューは次のとおりです。

3.モジュールを列に追加してスタイルを設定する

それでは、各列にモジュールを追加しましょう！

列1

1列目には、画像モジュールとテキストモジュールを挿入します。 最初にイメージモジュールを追加します。

1.イメージモジュールを追加します

クライアントの写真を挿入し、次のようにスタイルを設定します。

• 配置：左
• 全幅を強制：はい

画像に下の境界線も追加します。

• 下の境界線の色：黄色＃ffd400
• 下の境界線の幅：9px
• ボーダースタイル：ソリッド

2.テキストモジュールを追加します

画像モジュールのすぐ下に新しいテキストモジュールを追加し、クライアントの名前と位置を挿入します。

• 名前：見出し4
• 位置：段落

コンテンツを追加した後、テキスト設定のスタイルを設定します。

• テキストフォント：Nunito Sans
• テキストフォントの太さ：通常
• テキストの配置：中央
• テキストの色：黒＃000000
• 文字サイズ：
  • デスクトップ= 0.8vw
  • タブレット= 1.8vw
  • 電話= 2.8vw

見出しのテキスト設定に移動し、次の変更を適用します。

• 見出しテキスト：H4
• 見出し4フォント：ポピンズ
• 見出し4フォントの太さ：太字
• 見出し4テキストの色：黒＃000000
• 見出し4テキストサイズ：
  • デスクトップ= 1vw
  • タブレット= 3vw
  • 電話= 4vw

間隔の設定も変更します。

• トップマージン：
  • デスクトップ= 1.5vw
  • タブレット= 3vw
  • 電話= 7vw
• 下マージン：
  • デスクトップ= 1.5vw
  • タブレット= 3vw
  • 電話= 7vw

両方のモジュールを完了すると、列は次のようになります。

列2

2列目には、テキスト、宣伝文、および仕切りモジュールが必要です。 最初のテキストモジュールは、列の右上隅にある角度の付いたバナーのように見えるモジュールです。 この効果を実現するために、変換オプションを使用します。

1.テキストモジュールを追加します。

新しいテキストモジュールを追加し、コンテンツボックスに「お客様の声」という単語を追加します。

モジュールに黄色の背景を追加します。

• 背景色：黄色＃ffd400

[デザイン]タブに移動し、それに応じてテキストと間隔の設定を変更します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：太字
• テキストの配置：中央
• テキストの色：白#ffffff
• テキストサイズ：23px
• 右マージン：-50px
• 左マージン：-50px
• トップパディング：15px
• ボトムパディング：15px

最後になりましたが、変換設定を次のように調整します。

• 変換翻訳：
  • デスクトップ= x軸で17vw
  • タブレット= x軸に24vw、y軸に1vw
  • 電話= x軸に20vw、y軸に1vw
• 変換回転：最初の軸で32度

2.宣伝文モジュールを追加します。

最初のモジュールを完了したら、宣伝文句モジュールを追加します。

宣伝文句モジュールは、クライアントの紹介文が表示される場所です。 まず、+アイコンをクリックしてモジュールを追加し、宣伝文を選択します。

その後、コンテンツを挿入し、アイコンを選択して、次のようにアイコンのスタイルを設定します。

• アイコンを使用：はい、スター
• アイコンの色：黄色＃ffd400
• アイコンの配置：左
• アイコンのフォントサイズを使用：はい、48px

H4レベルでタイトルテキストのスタイルを設定して続行します

• タイトルテキスト：H4
• タイトルフォント：ポピンズ
• タイトルフォントの太さ：太字
• タイトルフォントの色：黒#ffffff

• タイトルテキストサイズ：
  • デスクトップ= 1.2vw
  • タブレット= 2.3vw
  • 電話= 3.3vw
• タイトル行の高さ：
  • デスクトップ= 2vw
  • タブレット= 3.4vw
  • 電話= 4.6vw

それに応じて本文の設定をスタイル設定します。

• 本文フォント：Nunito Sans
• 本文の太さ：半太字
• 本文の色：黒＃000000
• 本文のサイズ：
  • デスクトップ= 0.7vw
  • タブレット= 1.6vw
  • 電話= 2.4vw
• ボディラインの高さ：
  • デスクトップ= 1.6vw
  • タブレット= 4vw
  • 電話= 5vw

宣伝文の幅を列よりも狭くしたいので、それを実現するために、幅、マージン、およびパディング値を調整します。

まず、宣伝文の幅を調整します。

• コンテンツの幅：100％
• 幅：
  • デスクトップ= 58.4％
  • タブレット+電話= 90％

そして、間隔の設定：

• トップマージン：3vw
• 下マージン：3vw
• 右マージン：-24vw
• 左パディング：0px
• 右パディング：4px

3.ディバイダーを追加します

この列で必要な最後のモジュールは、分周器モジュールです。 次の変更を仕切りに適用します。

• Dividerを参照してください：はい
• 仕切りの色：黒#oooooo
• 仕切りの重量：1px

もうすぐ着きます！ これは私たちのこれまでの結果がどのように見えるかです：

列3

最後の3列目へ！ この列を使用して、召喚状を表示しています。 3つのモジュールを使用しています。 テキストモジュール、仕切りモジュール、ボタンモジュール。

1.テキストモジュールを追加します

この列に最初に追加するのは、テキストモジュールです。

H3にタイトルを追加し、コンテンツボックスに段落テキストを少し追加します。

先に進み、それに応じてテキスト設定のスタイルを設定します。

• テキストフォント：Nunito Sans
• テキストフォントの太さ：通常
• テキストフォントの色：白#ffffff
• テキストのフォントサイズ：
  • デスクトップ= 0.8vw
  • タブレット= -2vw
  • 電話= 2.6vw
• テキスト行の高さ：
  • デスクトップ= 1.5vw
  • タブレット= 4vw
  • 電話= 5vw

見出しのテキスト設定をスタイル設定して、テキストモジュールを完成させます。

• 見出しテキスト：H3
• 見出し3フォント：ポピンズ
• 見出し3フォントの太さ：太字
• 見出し3テキストの色：白#ffffff
• 見出し3テキストサイズ：
  • デスクトップ= 1.1vw
  • タブレット= 3vw
  • 電話= 4vw
• 見出し3行の高さ：
  • デスクトップ= 1.5vw
  • タブレット= 3vw
  • 電話= 4.5vw

2.ディバイダーモジュールを追加します

列3に仕切りモジュールを追加して続行します。仕切りのスタイルを設定するには、列2にある仕切りスタイルから仕切りスタイルをコピーして貼り付けます。

仕切りの設定を開き、色を黒から白に変更します。 上部と下部のパディングも追加します。

• 仕切りの色：白#ffffff
• トップパディング：40px
• ボトムパディング：20px

3.ボタンモジュールを追加します

最後のモジュールであるボタンモジュールに移ります。 選択したコピーをいくつか追加します。

[デザイン]タブに移動し、次のようにボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：
  • デスクトップ= 0.8vw
  • タブレット= 2.4vw
  • 電話= 3vw
• ボタンのテキストの色：白#ffffff

• ボタンの背景色：グラデーション
• グラデーションカラー1：黄色＃ffd400
• グラデーションカラー2：オレンジ＃ff8300
• グラデーションタイプ：線形
• 勾配方向：202度。

• ボタンの境界線の幅：0px
• ボタンの文字間隔：1px
• ボタンフォント：Nunito Sans
• ボタンのフォントの太さ：重い
• ボタンのフォントスタイル：TT

すべての画面サイズでボタンの見栄えを良くするために、ボタンのパディングを次のように調整します。

デスクトップ

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

タブレット

• トップパディング：2vw
• ボトムパディング：2vw
• 右パディング：6vw
• 左パディング：6vw

電話

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

プレビュー

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

デスクトップ

モバイル

まとめ

この重複する3列のビルドは、紹介文としては見栄えがしますが、他のすばらしい目的にも実装できると確信しています。 これにより、将来のプロジェクトで列変換と重複オプションを使用するように促されることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！