ElementorでHappyAddonsを使用してカラムとFlexboxコンテナの高さを等価にする方法

ウェブサイト内にカラムを作成し配置する場合、デザイン全体をすっきり見せるためには、カラムの高さを揃える必要があります。これは、適切な HTML コードはこれを実装しているが、コードの書き方を知らない非技術的なユーザーにとっては本当に難しい。

この記事では、その方法を紹介する。エレメンタ列の高さは等しく、以下のものが含まれる。フレックスボックスコンテナ最後までお読みください。

ウェブサイトをデザインしていると、カラムやウィジェットの高さが一定でないことに気づくことがあります。高さは通常、含まれるコンテンツによって異なります。上の画像をよく見てください。

一目見て、左の写真が気に入りましたか？私たちは、あなたがこれを気に入ることはないだろうと予測できる！あなたと同じように、ほとんどの人がバラバラだと感じるでしょう。そして、右の写真はより良く、よりきれいに見えます。

この機能はすべてのElementorウィジェットでシームレスに動作します。また、他のサードパーティプラグインのウィジェットにもこの機能を適用できます。以下のプラグインがインストールされ、有効になっていることを確認してください：

これらの手順が完了したら、次のステップは以下の方法です。

このアプローチを説明するために、我々は次のようなものを選んだ。エレメンタの価格リストウィジェットを作成し、そのウィジェットのコンテンツを埋めました。

価格表ウィジェットを選択 ウィジェットを設定して、テキスト、価格、ラベル付きバンド、その他の詳細を必要に応じて追加します。各セクションの情報は一致しない場合がありますので、価格リストウィジェットの高さが不揃いになる場合があります。

ウィジェットの高さをチェックする よく見ると、価格表の各カラムに異なるレベルのコンテンツを追加したにもかかわらず、HappyAddonsのアイソメトリック機能を使用すると、すべてのカラムが同じ高さになり、全体的な見た目がよりすっきりしました。

この機能をHappyAddonsウィジェットに適用してみましょう。メニューバーからウィジェットを1つ選び、高さを調整するプロセス全体を表示するためにカードウィジェットを選びました。

ウィジェットを選択する 必要に応じてカスタムウィジェット.画像、テキスト、その他のデザインを追加できます。各セクションのデータが一致しない場合があるので、ウィジェットの高さが異なることに気づくでしょう。

メニューバーの高さを修正 次に「Advanced（詳細）」セクションに行き、「Isometric（アイソメトリック）」オプションを見つけます。それを有効にします。

以前は、輪郭機能は列ベースのデザインにのみ利用可能でした。しかし現在では、この機能を使用して、複数の垂直方向に整列した輪郭を作成することができます。フレックスボックスコンテナの高さは等しい。下図のように、同じセクションに2つのコンテナがあり、一方は他方より高い。

セクション全体を選択 6つの点のアイコンをクリックしてセクション全体を選択し、詳細設定に進みます。
輪郭オプションを有効にする 詳細設定]で[等しい高さ]オプションを見つけ、有効にします。対応するウィジェットを選択すると、コンテナの高さが等しくなるのがわかります。

HappyAddonsのアイソメトリック機能により、デザイナーは複雑なコードを書くことなく、列の高さが一定しない問題を素早く効率的に解決し、ページ全体をよりすっきりとプロフェッショナルに見せることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み