ウェブサイト內(nèi)にカラムを作成し配置する場(chǎng)合、デザイン全體をすっきり見(jiàn)せるためには、カラムの高さを揃える必要があります。これは、適切な HTML コードはこれを?qū)g裝しているが、コードの書(shū)き方を知らない非技術(shù)的なユーザーにとっては本當(dāng)に難しい。

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

アイソメトリック機(jī)能は本當(dāng)に必要なのか？

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

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

HappyAddons isometricsの使い方

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

• エレメンタ
• ハッピーアドオン(エレメンタル?プラグイン）

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

方法1：ElementorウィジェットでIsometricsを使用する

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

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

• カスタムウィジェット 次に、メニューバーの「セクションの編集」をクリックする。

• 編集セクションへ その後、アドバンス?セクションに行き、輪郭オプションが表示されるので、それを有効にすると、マジックが表示される。

• 輪郭オプションを有効にする 次に、調(diào)整したいウィジェットを選択します。ここで、タブレットモードと電話(huà)モードを無(wú)効にすることができます。

• タブレットと攜帯電話(huà)モードを無(wú)効にする 最後に、適切なマージンを選択すると、すべてのウィジェットの高さが同じになることがわかります。

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

方法2：HappyAddonsウィジェットでIsometricsを使う

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

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

• 選択したウィジェットをカスタマイズする では、各セクションの高さを修正しましょう。メニューバーの「セクションの編集」をクリックする。

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

• 輪郭オプションを有効にする 上に示したように、タブレットモードと電話(huà)モードを無(wú)効にするオプションがあります。

• タブレットと攜帯電話(huà)モードを無(wú)効にする 適切な高さを選び、仕上がりを見(jiàn)てください！

方法3: この関數(shù)を使用して、Elementorコンテナの高さを等しくします。

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

• セクション全體を選択 6つの點(diǎn)のアイコンをクリックしてセクション全體を選択し、詳細(xì)設(shè)定に進(jìn)みます。
• 輪郭オプションを有効にする 詳細(xì)設(shè)定]で[等しい高さ]オプションを見(jiàn)つけ、有効にします。対応するウィジェットを選択すると、コンテナの高さが等しくなるのがわかります。

概要

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

お問(wèn)い合わせ
チュートリアルが読めない？無(wú)料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ！	カスタマーサービス WeChat
① 電話(huà)：020-2206-9892
② QQ咨詢(xún)：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み