Elementorのページレイアウト設定の理解

Elementorで設計するとき、ページレイアウト設定は、ウェブサイトのデザインにおいて重要な役割を果たします。

これらの設定を使用すると、ページの構造、スタイリング、さらにはデフォルトの設計基盤を制御できます。
ブログ、ランディングページ、またはカスタムレイアウトを作成している可能性があります。すべての場合において、これらのオプションを理解することは、自信を持って設計するのに役立ちます。

このガイドでは、Elementorのページ固有の設定とグローバルレイアウト設定を進め、レイアウトの編集に関する一般的な質問に答え、ページを作成するときに最適なアプローチを決定するのに役立ちます。

Elementorのページレイアウト設定の理解

Elementorでページレイアウトを編集する方法は？

Elementorでページレイアウトを編集するには、WordPressダッシュボードにログインしてページに移動します。カスタマイズするページを選択し、[Elementorで編集]をクリックします。

Elementorの中に入ったら、中央にある小さなギアアイコンを探してください。これをクリックすると、ページ設定パネルが開き、その特定のページの一般、スタイル、および高度な設定を調整するオプションがあります。

• 一般的な設定タイトル、特集画像、コメント、ページレイアウトを管理します。
• スタイル設定を制御する背景、間隔、およびアライメントを制御します。
• 高度な設定では、カスタムCSSとアニメーションを追加できます。

一般的な設定

一般的なタブは、ページの必需品を設定する場所です。ここでの各オプションは、ページの表示方法と、テーマやWordPress環境との対話方法に影響します。

1. タイトル：コンテンツの目的を説明するページタイトルを説明してください。よく選択されたタイトルは、訪問者の読みやすさを向上させ、SEOに貢献します。
2. ステータス：ページがドラフト（訪問者に表示されない）、公開（サイトでライブ）、またはプライベート（適切な権限を持つログインユーザーにのみ表示される）であるかどうかを選択します。
3. 抜粋：ページコンテンツの要約を書きます。これは、検索エンジンのスニペットや、アーカイブまたはリストページにプレビューを表示するのに役立ちます。
4. 注目の画像：視覚的にページを表すように機能した画像を設定します。ソーシャルメディアでリンクを共有する場合、またはブロググリッドやウィジェットに投稿を表示する場合に便利です。
5. 注文：番号を使用して、ページのシーケンスをメニューまたはページリストに配置します。数字が少ないページが最初に表示され、表示の順序を制御できます。
6. コメントを許可する：訪問者がページにコメントを残すことができるかどうかを決定します。これは通常、ブログの投稿で有効になりますが、ランディングページまたは静的コンテンツに対して無効になることがよくあります。
7. タイトルを非表示：デフォルトのページタイトルを削除し、クリーンキャンバスから始めたい場合は、このオプションを切り替えます。これはです
8. ページレイアウト： Elementorは、コンテンツの表示方法を制御するためのいくつかのページレイアウトオプションを提供します。各オプションは、作成するページのタイプに応じて、異なる目的を提供します。
   • デフォルト：このレイアウトは、Elementorパネルに設定されたデフォルトページテンプレート>>ハンバーガーメニュー>>サイト設定に従います。それはあなたのテーマで定義されたデザイン構造を保持します。サイト全体で一貫性が必要な通常のページやブログに最適です。
   • Elementor Canvas：ヘッダー、フッター、サイドバーのない完全に空白のページを提供します。このオプションは、ランディングページ、間もなく登場するページ、販売ページなどの注意散漫のないデザインに最適です。
   • Elementorの全幅：ヘッダーとフッターをテーマから保持しますが、サイドバーを削除して、メインコンテンツが画面の全幅に伸びることができます。没入型レイアウト、ヒーローセクション、または全幅スライダーを設計するときの良い選択。
   • テーマ：アクティブなテーマからデフォルトページテンプレートを使用します。テーマに複数のテンプレートのバリエーション（「サイドバーなし」や「コンテンツのみ」など）が付属している場合、ここにも表示される場合があります。
   • ページなしタイトル：テーマの構造の残りをそのままに保ちながら、ページタイトルを削除します。このオプションは、上部にデフォルトのタイトルが表示されないクリーンなデザインが必要な場合に役立ちます。

スタイル設定

スタイルタブは、ページの視覚的な外観に焦点を当てています。ここでは、コンテンツをフレーム化する背景と間隔を定義できます。

1. 背景タイプ：ページのムードを設定するために、ソリッドカラー、グラデーションの背景、または画像を選択します。適切に選択された背景は、視覚的な影響を生み出し、ブランディングを強化します。
2. 間隔：マージンとパディングを調整して、コンテンツ内およびその周辺に表示されるスペースの量を制御します。マージンは要素を引き離しますが、パディングは容器の中に呼吸室が作成されます。

また、テキストアラインメント、レスポンシブデザイン設定、および間隔調整を設定して、デスクトップ、タブレット、モバイル全体でページが見栄えを良くすることもできます。

高度な設定

柔軟性のために、Elementorには、基本を超えるオプションを備えた高度なタブが含まれています。

1. カスタムCSS：独自のCSSコードを追加して、特定の要素をスタイリングします。ここのコードは現在のページにのみ適用され、サイトの残りに影響を与えることなく、独自のカスタマイズを自由にすることができます。
2. スクロールスナップとモーションエフェクト：アニメーションまたはスクロールエフェクトを追加して、視覚的なアピールを追加します。

高度なタブは、デザイナーと開発者がページのルックアンドフィールを真にカスタマイズできる場合です。

グローバルレイアウト設定

ページ設定が個々のページを制御する間、グローバルレイアウト設定では、サイト全体のデフォルトを定義できます。グローバル設定にアクセスするには、Elementorの任意のページを開き、左上でサイト設定のアイコンをクリックし、レイアウトを選択します。

ここから調整できます。

1. コンテンツ幅：コンテンツの最大幅を定義します。標準設定は1140pxで、ほとんどのデスクトップ画面に適しています。
2. コンテナパディング：コンテナのデフォルトの内側間隔を設定します。すべての側面に同じパディングを適用したり、トップ、ボトム、左、右を個別にカスタマイズしたりできます。
3. ギャップ：コンテナ内の列と行の間のスペースを制御します。これにより、きれいなアライメントと一貫した間隔を維持するのに役立ちます。
4. ページタイトルセレクター：テーマがページタイトルに一意のセレクターを使用している場合は、ここで指定します。これにより、Elementorはタイトルを適切に非表示またはスタイルできます。
5. 伸びたセクションフィット：セクションを全幅に引き伸ばすときに使用するHTMLタグElementorが使用すべきHTMLタグ要素を定義します。最も一般的なタグはボディですが、一部のテーマは別のラッパーを使用する場合があります。
6. デフォルトページレイアウト：新しいページごとにテーマの設定に依存するのではなく、Elementor CanvasやElementorの全幅などのグローバルデフォルトを選択します。

設定を構成したら、 [変更を保存]をクリックして、サイトに適用します。

Elementorのデフォルトのレイアウト幅は何ですか？

Elementorのデフォルトのレイアウト幅は1140ピクセルです。この幅は、デスクトップ画面で快適な読書体験を提供しながら、タブレットや小さなデバイスに適しているため、広く使用されています。

この設定をサイト設定で変更できます>>デザインがより狭いレイアウトまたはより広いレイアウトが必要な場合は、レイアウトを変更できます。

Elementorでページを作成する最適な方法は何ですか？

最適な方法はあなたの目標に依存します：

• 通常のコンテンツページまたはブログを構築する場合は、デフォルトのレイアウトに固執して、ヘッダー、フッター、サイドバーのままです。
• ランディングページまたは販売漏斗の場合、気晴らしのないデザインにElementor Canvasを使用してください。
• 幅広の没入型レイアウトが必要な場合でも、ナビゲーションとフッター要素が必要な場合は、 Elementorの全幅を使用してください。

良い習慣は、グローバルなデフォルトを最初に設定することです。そのため、すべての新しいページは好みの構造から始まります。次に、必要に応じてページ設定パネルを使用して個々のページを微調整します。

ラッピング！

Elementorのページレイアウト設定では、個々のページとサイト全体の両方を制御できます。

一般、スタイル、高度、グローバルのレイアウト設定を使用する方法を学ぶことで、プロフェッショナルに見えるデザインを作成し、管理しやすく、ウェブサイトの目標に合わせます。

1回限りのランディングページを構築する場合、ページ固有の設定で十分です。

ただし、より大きなWebサイトで作業している場合、グローバルなデフォルトをセットアップすると、時間を節約し、すべてのページで設計の一貫性を確保します。

これらの設定オプションを使用すると、Elementorはあなたのウェブサイトを想像した方法で正確にデザインする柔軟性を提供します。