ElementorとAstraテーマレイアウトのヒント：コンテナとグリッドのベストプラクティス (07)

前回はアストラのテーマタイポグラフィの基本的なヒントをご紹介しました。今日は、タイポグラフィの基本的なヒントをご紹介します。エレメンタエディタでコンテナレイアウトとグリッドレイアウトを上手に活用すれば、より柔軟で美しいウェブデザインを作成できます。初心者でも経験豊富なデザイナーでも、これらのヒントはきっと役立ちます。

2つ、4つ、またはそれ以上のレイアウトを設定する必要がある場合

上記のように、まずコンテナ（Container）を追加します。

ステップ：ウェブサイトのフロントエンド → Elementorで編集 → レイアウト → コンテナまたはグリッド

コンテナとグリッドをどのように選択するかですが、これは実際の状況に基づいて決定する必要がありますが、コンテナを優先することをお勧めします。

Containerは、様々なレイアウトを選択することができ、もちろん、Gridも動作しますが、Gridが固定されている間、Containerは常に内部にモジュールを追加することができ、以下のように、赤いボックスは、複数のモジュールを表示する必要がある場合、確かにContainerであり、黄色のボックスはGridであり、結果は明らかです！

しかし、グリッドはまた、すでにコンテナを持っている場合は、独自の利点を持っていますが、2つ、あるいは4つのレイアウトに分割されたい、そのリセットコンテナの2つのレイアウトは、最初の1つにコンテナをドラッグすることはできませんが、グリッドは、いつでも調整することができますので、我々は、実際の状況に応じて調整するために行く次のチャート。

次に、2つのレイアウトのセットアップと方法について説明します。

上記はコンテナ2つのレイアウトで、左はテキストとタイトルモジュール、テキストモジュール、ボタンモジュール、右は画像モジュールです。

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

テキスト・モジュールの編集 テキスト・エディターの編集

ステップ： フロントエンド → Elementorで編集 → テキストエディタを編集

テキストのサイズを変更する必要がある場合は、上記で説明した手順に従ってください。

それで決まりです。

ボタンモジュールは、テキストと位置を設定することができ、もちろん、背景色のスタイルも調整することができます！

ステップ：ウェブサイトフロントエンド→Elementorで編集→クリエイティブボタン

右の画像モジュールは全画面を占有するものではありません。必要であれば、適切なサイズにトリミングしてください。

これが2つのレイアウトです。

もちろん、4つのレイアウトは同じです。

つのレイアウトを設定した後、それぞれのレイアウトにタイトルとテキストモジュールを追加します。

コンテナの背景色は黒に設定されます。

モジュールの背景は白

モジュールは、幅、位置、ギャップを設定します。

概要

この記事を読み終わる頃には、ContainerとGridの使い分けについて理解が深まり、実際のニーズに合ったレイアウトを選択できるようになっているはずです。Containerはより柔軟なレイアウトのニーズに適しており、Gridは既存のコンテナ内のレイアウトを素早く分割するのに役立つことを覚えておいてください。次号では、Astraテーマに関するより実践的なヒントをお届けします。