Diviの新しい行配置オプションをクリエイティブに使用する方法

今日のDiviチュートリアルでは、Diviの新しい行配置オプションを活用する方法を紹介します。 行の配置オプションを他の組み込みのデザインオプションと組み合わせて、Diviの高度なデザインオプションで何が可能かを理解できるようにします。 再作成する方法を示す例には、追加のコードがまったく含まれていません。つまり、どのスキルレベルの人でもこの設計を実現できます。

始めましょう！

デザインプレビュー

これが、今日（デスクトップ上で）作成するものの概要です。

そして、これがモバイルでのデザインの見え方です。

Diviの新しい行配置オプションをクリエイティブに使用する方法

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

テーマカスタマイザ設定

プライマリメニューバー

お気づきのように、メインメニューもレイアウトに合わせています。 プライマリメニューバーを変更するには、 WordPressダッシュボード>外観>カスタマイズ>ヘッダーとナビゲーション>プライマリメニューバー>に移動し、次の変更を加えます。

• ロゴ画像を非表示：有効にする
• メニューの高さ：30
• テキストサイズ：17
• 文字間隔：-1
• フォントスタイル：大文字
• テキストの色：#FFFFFF
• アクティブリンクの色：#FFFFFF
• 背景色：rgba（255、255、255、0）
• ドロップダウンの背景色：rgba（255、255、255、0）

ヒーローセクション

メインメニューを変更したら、レイアウトを開始します。 最初に行う必要があるのは、新しいページを追加し、Visual Builderに切り替えて、新しい標準セクションを追加することです。 この最初のセクションは私たちのヒーローセクションになり、次のようになります。

セクション設定

グラデーションの背景

標準セクションを追加したら、それにグラデーションの背景を追加できます。

• ファーストカラー：＃9e5555
• 2番目の色：＃000000
• グラデーションタイプ：線形
• グラデーション方向：180度
• 開始位置：50％
• 終了位置：50％

行設定

カラーオーバーレイ

次に、そのセクションに1列の行を追加し、その設定を開きます。 最初に行う必要があるのは、カラーオーバーレイを追加することです。 濃い灰色を選択することで、画像をどの程度暗くするかを選択できます。 この場合、「＃595959」を使用しました。

背景画像

次に行う必要があるのは、1列の行に背景画像を追加し、カラーオーバーレイを適用することです。 カラーオーバーレイと背景画像を混合するには、背景画像のブレンドとして[乗算]を選択します。

中央の行の配置

ほとんどのWebサイトと同様に、ヒーローセクションの中央の行の配置を選択します。

行を全幅にする

また、行を全幅にする必要があるため、[デザイン]タブの[サイズ設定]サブカテゴリ内でそのオプションを有効にします。

カスタムパディング

行設定内で最後に行う必要があるのは、上部と下部に「300px」のカスタムパディングを追加することです。

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

すべての設定が完了したら、最初のテキストモジュールを行に追加します。 [コンテンツ]タブに表示するテキストを選択し、[デザイン]タブに移動します。 [デザイン]タブで、次の設定が[テキスト]サブカテゴリに適用されていることを確認します。

• テキストフォント：Arvo
• テキストフォントサイズ：64（デスクトップ）、47（タブレット）、33（電話）
• テキストの色：#FFFFFF
• テキスト行の高さ：1em
• テキストの向き：中央

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

次に、別のテキストモジュールを追加します。 2番目のテキストモジュールには、代わりに次の設定が含まれています。

• テキストフォント：Lato
• テキストフォントサイズ：25（デスクトップ）、18（タブレット）、16（電話）
• テキストの色：#FFFFFF
• テキスト行の高さ：1.7em
• テキストの向き：中央

2番目のセクション

ヒーローセクションが完了したら、2番目のセクションに進むことができます。 このセクションでは、中央の行の配置ではなく、右の行の配置をカスタムの余白と列の背景と組み合わせて使用​​して、美しい効果を作成します。 このセクション内に、デスクトップバージョンとタブレット/電話バージョンの2つの行バージョンを作成する必要があります。 これにより、あらゆる種類の画面でデザインが見事に見えるようになります。

セクション設定

グラデーションの背景

2番目のセクションを追加したら、それに次のグラデーションの背景を追加します。

• 最初の色：＃000000
• 2番目の色：＃d6d6d6
• グラデーションタイプ：線形
• グラデーション方向：184度
• 開始位置：20％
• 終了位置：20％

デスクトップ行を追加

次に、先に進んで最初の2列の行を追加します。 この行はデスクトップバージョンになります。 幸いなことに、タブレット/モバイルバージョンでもそのほとんどを再利用できます。

行設定

列の背景

[コンテンツ]タブで、2番目の列の背景色として「#FFFFFF」を追加します。

右列の配置

[デザイン]タブに移動し、正しい行の配置を選択します。

行を全幅にする

次に、[サイズ設定]サブカテゴリを開き、[この行を全幅にする]オプションを有効にします。

カスタムパディング

行設定で最後に行う必要があるのは、行に「300px」の上部パディングを追加し、2番目の列に次のパディングを追加することです。

• 上：35px
• 右：35px
• 下：150px
• 左：35px

列1

最初のディバイダーモジュール

最初の列では、Dividerモジュールを追加することから始めます。 [コンテンツ]タブの[表示]サブカテゴリで、[仕切りを表示]オプションを有効にします。

[デザイン]タブに移動し、仕切りの色として[#FFFFFF]を選択します。

次に、[スタイル]サブカテゴリ内の[ディバイダースタイル]として[ソリッド]を選択し、[ディバイダー位置]として[トップ]を選択します。

Divider Moduleの[Design]タブで最後に行う必要があるのは、Sizingサブカテゴリに次の調整を加えることです。

• 仕切りの重量：3
• 高さ：0px
• 幅：20％
• モジュールの配置：右

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

Divider Moduleのすぐ下に、最初のText Moduleを追加し、[Design]タブの[Text]サブカテゴリ内で次の設定を使用します。

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

最初のディバイダーモジュールのクローンを作成し、配置を変更する

作成したディバイダーモジュールのクローンを作成し、最初のテキストモジュールのすぐ下に配置します。 変更する必要があるのは、SizingサブカテゴリのModuleAlignmentだけです。 右側に配置する代わりに、左側を選択します。

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

最初の列に追加する必要がある最後のものは、次の設定を持つ別のテキストモジュールです。

• テキストフォント：Lato
• テキストフォントサイズ：14
• テキスト行の高さ：1.7em
• テキストの向き：中央

列2

画像モジュール

2番目の列に最初に追加する必要があるのは、[デザイン]タブの[間隔]サブカテゴリ内に次の設定がある画像モジュールです。

• 画像の下にスペースを表示：はい
• 上マージン：-300px
• 左：-80px

テキストモジュール

次に、画像モジュールのすぐ下にテキストモジュールを追加し、[デザイン]タブの[テキスト]サブカテゴリ内で次の設定を選択します。

• テキストフォント：Lato
• テキストフォントサイズ：14
• テキスト行の高さ：1.7em
• テキストの向き：中央

ソーシャルメディアフォローモジュール

2番目の列に追加する必要がある最後のものは、ソーシャルメディアフォローモジュールです。 必要な数のソーシャルアイコンを追加し、[デザイン]タブの[アイテムの配置]として[中央]を選択していることを確認してください。

タブレットと電話で無効にする

それがすべて完了したら、先に進んでPhone＆Tabletの行を無効にすることができます。

モバイル行を追加

デスクトップ行のクローン

デスクトップ版を作成したので、モバイル版を作成する方がはるかに高速です。 デスクトップ行のクローンを作成し、次の手順に従います。

列の切り替え

両方の列にあるモジュールを切り替えることから始めます。

列の背景色

その後、2番目の列の背景色を削除し、代わりに最初の列に配置します。

列のパディング

2番目の列にカスタムパディングを配置する代わりに、最初の列にカスタムパディングを配置する必要があります。 また、下のパディングは「150px」ではなく、上、右、左のパディングのように「35px」です。

中央の行の配置を使用する

次に、行の配置を「中央」に変更する必要もあります。

デスクトップで無効にする

最後になりましたが、デスクトップで行が無効になっていることを確認してください。

第三セクション

3番目のセクションは2番目のセクションと非常によく似ています。 このセクションの作成は、2番目のセクションの設定のほとんどを引き継いで、いくつかの調整を行うことができるため、簡単になります。 すべての手順を完了すると、次の結果を確認できます。

セクション設定

グラデーションの背景

新しい標準セクションを追加し、次のグラデーションの背景を使用します。

• 最初の色：＃d6d6d6
• 2番目の色：＃9e5555
• グラデーションタイプ：線形
• グラデーション方向：184度
• 開始位置：30％
• 終了位置：30％

カスタムマージン

次に、「-200px」のカスタムマージンも追加します。

デスクトップ行

3番目のセクションでも同じ作業方法が重要です。 デスクトップとタブレット/電話のバージョンを作成します。

2番目のセクションのデスクトップ行のクローンを作成します

前のセクションのデスクトップ行のクローンを作成することから始めます。 ほとんどの設定は同じであり、必要な変更について説明します。

列の切り替え

行う必要のある変更の1つは、両方の列にあるモジュールを切り替えることです。

列の背景色

次に、2番目の列の背景色を削除し、最初の列の背景色として「＃000000」を追加する必要があります。

列のパディング

列2のカスタムパディングを削除し、最初の列の上下左右のカスタムパディングに「35px」を使用します。

左列の配置を使用する

また、行の配置を右から左に変更します。

画像モジュールのカスタムマージン

画像モジュールの間隔サブカテゴリにもいくつかの変更が必要です。

• 上：-150px
• 右：-80px

最初のディバイダーモジュールのカスタムマージン

次に、2番目の列内の最初のディバイダーモジュールに「200px」の上マージンを追加します。

反対の色を使用する

お気づきのように; 色の使用は、2番目のセクションの反対です。 先に進み、すべてのフォントの色を「#FFFFFF」に変更し、仕切りの色を「＃000000」に変更します。

タブレットと電話で無効にする

タブレットと電話では（クローンのために）行はすでに無効になっていますが、確認したい場合は、[可視性]サブカテゴリに移動できます。

モバイル行

前のデスクトップ行のクローンを作成する

モバイル版の場合は、作成したデスクトップ行のクローンを作成し、この投稿の次の部分に続く変更を加えます。

中央の行の配置を使用する

行設定を開き、行の配置を中央に変更します。

画像モジュールのカスタムマージン

もう1つ行う必要があるのは、画像モジュールの上部マージンを「-20％」に変更することです。

デスクトップで無効にする

最後になりましたが、この最後の行がデスクトップで無効になっていることを確認してください。

結果

このチュートリアルをステップバイステップで実行すると、デスクトップで次の結果を達成できるはずです。

そして、モバイルでの次の結果：

最終的な考え

この投稿では、DiviBuilder内で行のさまざまな配置オプションをクリエイティブに使用する方法を示しました。 人々は行うことによって最も多くを学びます、それが私たちがあなたに作成する方法を段階的に示した例をあなたに提供した理由です。 質問や提案がある場合; 下のコメント欄にコメントを残してください。

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