Diviの新しい高さと幅のオプションを使用してレスポンシブデザインを作成する

通常、訪問者がWebサイトについて最初に気付くのはそれらではありませんが、幅と高さのCSSプロパティは、Webサイトをまとめて見栄えを良くするのに役立ちます。 そして今、Diviの新しいドラッグ可能なサイズ設定オプションを使用すると、ビルダー自体の内部のすべての要素の幅、最大幅、最小高さ、高さ、および最大高さを文字通り制御できます。 これにより、さまざまな画面サイズで応答性の高いWebサイトを自由に作成できます。

さて、これはすべて素晴らしいように聞こえますが、実際には、これはどのようにして美しいWebサイトに変換されますか？ それがまさにこの投稿で話したいことです。 まず、Divi設定内で使用可能なすべての高さと幅のプロパティの違いを説明し、次にそれらをさまざまなシナリオで使用して、ページデザインを希望どおりに動作させることから始めます。

それを手に入れよう！

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

プロパティ間の違いを理解する

日常の設計プロセスで幅と最大幅を使用する前に、それらが何をするのかを理解することが重要です。 これが理論的な説明です。

幅–デザイン要素の実際の幅。 これが100％の場合、コンテナで許可されている幅と同じ幅になります。 幅は通常、％を使用して表されます。 幅のパーセンテージが低いほど、デザイン要素は狭くなります。

最大幅–最大幅は幅よりも強力です。 モジュールの幅が100％に設定されている場合、最大幅の値を下回っている限り、モジュールはその値に従います。 最大幅の値に達すると、それを超えることはありません。

しかし、それはどのようにレスポンシブデザインに変換されますか？ 違いを説明するために、新しいページでVisualBuilderを有効にして視覚的な比較を作成します。 1列の行を持つセクションを追加します。 次に、コンテンツ、背景色、カスタムパディングを含むテキストモジュールを挿入します。

幅の変更

テキストモジュールの幅を80％に変更すると、テキストモジュールのサイズが縮小します。 モジュールを好きなように調整する可能性も表示されます。

最大幅の変更

最大幅を変更すると、割り当てられた値は、実際の幅が最大幅の値を超えた瞬間からのみ適用を開始します。 それを本当に簡単に示しましょう：

超えていない

超過

幅と最大幅に加えて、各要素のサイズ設定で最小高さ、高さ、最大高さを見つけることもできます。 これは、これらの用語から理論的に理解できることです。

最小高さ–要素に割り当てる最小の高さ。 この値が高さの入力よりも大きい場合、最小の高さの入力が優先されます。

高さ–これは、要素に割り当てる実際の高さを定義します。

最大高さ–この値は、高さが高さに割り当てられた値を超えると、新しい高さになります。

最小の高さを変更する

要素の最小の高さを変更すると、その値が標準になります。 テストすると、テキストモジュールの高さがリアルタイムで自動的に変化することがわかります。

高さを変える

最小の高さと高さを組み合わせる場合は、高さが最小の高さよりも大きいことを確認する必要があります。 そうでない場合、高さは無視されます。 以下の2つのGIFで、違いをリアルタイムで確認できます。

超えない

超過

最大高さの変更

最大の高さは、最小の高さを超えているが高さよりも小さい場合に引き継がれます。 たとえば、最大の高さよりも最小の高さに高い値を割り当てると、最小の高さが支配的になります。

行の最大幅の変更

Webデザインのベストプラクティスの1つは、Webサイト全体の特定の最大幅を決定することです。 これにより、さまざまな画面サイズですべての応答性を維持できます。 また、設計者が正確なワイヤーフレームを作成するのにも役立ちます。

グローバル最大幅の変更

[一般設定]に移動して[レイアウト設定]に進むと、テーマカスタマイザーでコンテンツに特定のデフォルトの最大幅を設定できることを知っている場合と知らない場合があります。 最大幅を永続的に保つことは、応答性を強化するのに役立ちます。

特に1行の最大幅を変更する

新しいドラッグ可能なサイズの更新により、行の最大幅を個別に定義する機会も得られます。 これは、最大幅を大きくする方が理にかなっている例外に最適です。

モジュールに同じ高さを与える

覚えておくべきもう1つの手法は、同様の要素に同じ高さを与えることに焦点を当てています。 これは見た目に美しく、訪問者がコンテンツを簡単にスキャンするのに役立ちます。 これにアプローチする一般的な方法は2つあります。

カラムイコライザーの使用

最初の方法は、Diviで長い間使用されてきた方法です。 行の各列に同じ高さを作成する場合は、行のサイズ設定で列イコライザーを有効にできます。 列の背景色を使用している場合は、違いにすぐに気付くでしょう。

各モジュールへの高さの割り当て

これにアプローチするもう1つの方法は、追加するモジュールに事前定義された高さを割り当てることです。

モジュール内のコンテンツの整列

すべてのモジュールに高さを割り当てたら、コンテンツの配置を試すこともできます。 これを行うには、カスタムパディングを使用してモジュール内の空白を手動で決定するか、数行のCSSコードを使用してコンテンツを自動的に整列させます。

display: flex;
flex-wrap: wrap;
align-content: center;

デザイン要素の高さまたは幅を選択し、オーバーフローをスクロールに変える

新しいドラッグ可能なサイズ設定オプションで実行できるもう1つの優れた点は、オーバーフローをスクロールに変えることです。 これにより、ページのスペースを節約し、インタラクションを追加することが簡単にできます。 これには2つのステップがあります。 要素の高さを設定し、可視性設定でオーバーフローを変更します。 要素の高さを変更することから始めます。

次に、要素の表示設定に移動し、垂直オーバーフローをスクロールに変更します。

すべての画面サイズでフルスクリーンのヒーローセクションを作成する

次の最後のヒントに移りましょう！ フルスクリーンのヒーローセクションを作成したいですか？ ページのヒーローセクションを開き、サイズ設定に移動して高さを変更します。 これには高さビューポートユニットを使用して、すべての画面サイズですべてが応答し続けるようにすることが重要です。

• 高さ：100vh

フルスクリーンのヒーローセクションのコンテンツを一元的に配置したいですか？ 次のカスタムCSSコード行もセクションのメイン要素に追加します。

display: flex;
flex-wrap: wrap;
align-content: center;

最終的な考え

この投稿では、Diviのドラッグ可能なサイズ更新に付属する新しい幅と高さのオプションについて説明しました。 それらがどのように機能するか、そしてそれらを使用して、構築しているあらゆる種類のWebサイトのレスポンシブページデザインを作成する方法を示しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。