あなたがあなた自身があなたのウェブページのデザインに深く埋もれている特定の要素が1つの特定の要素が埋もれていることを見つけるために無限にスクロールしていることに気付いたことがあるなら、あなたは一人ではありません。幸いなことに、Beaver Builderのアウトラインパネルは、ワークフローをスピードアップし、ページの構築カオスを組織化された効率に変えるためにここにあります。

Beaver Builderのアウトラインパネルは、ページレイアウトの視覚的なツリービューを提供し、ワークフローを流し、ページビルディングの効率を向上させる、行、列、モジュールのナビゲート、選択、整理が簡単にできるようにします。

この記事では、組織化されたWordPressプロジェクトを維持しながら、ビーバービルダーのアウトラインパネルを活用してページの構築時間を半分に削減する方法を学びます。

ビーバービルダーのアウトラインパネルとは何ですか？

Beaver Builderアウトラインパネルは、編成されたナビゲーション可能な形式でページ構造全体を表示する階層的なツリービューです。レイアウトを視覚的に狩る代わりに、すべての列、列、モジュールの鳥瞰図を取得します。

一目で重要な利点：

• 大規模なレイアウトを即座にナビゲートします
• ドラッグアンドドロップのシンプルさでコンテンツを再編成します
• 構築するときに要素にラベルを付けて整理します
• レイアウトの問題を迅速にトラブルシューティングします
• チームメンバーとより効果的に協力します

この強力な機能は、レイアウトとの対話方法を変換し、ページ構造を完全に制御できる合理化されたインターフェイスを提供します。シンプルなランディングページまたは複雑なマルチセクションのWebサイトを構築するかどうかにかかわらず、アウトラインパネルはすべてを整理してアクセスしやすくします。

開発マネージャーのジェイミーは、ビーバービルダーでの彼女のお気に入りの機能について尋ねられたときに言わなければならなかったことです。

「アウトラインパネルはこのようなタイムセーバーです。コンテンツ構造を一目で確認でき、長いページをナビゲートしやすくなります。トラブルシューティングにも最適です。メインエディターでモジュールの設定が開かない場合は、代わりにアウトラインパネルからアクセスしてみてください！」

アウトラインパネルにアクセスする方法

方法1：アウトラインアイコンをクリックします

1. ビーバービルダーでページを開きます
2. 上部バーのアウトラインアイコンを探してください
3. クリックしてパネルを開きます

方法2：キーボードショートカット（より速い）

1. ビーバービルダーエディターでページを開きます
2. Shift + Oを押して、パネルを即座に切り取ります/閉じます
3. Shift + Tを押して、すべてのセクションを展開/崩壊させます

アウトラインパネルがビーバービルダーユーザーにとって不可欠な理由

1.大規模なレイアウトを簡単にナビゲートします

長いページの下部から行をドラッグしようとしたことのフラストレーションを覚えていますか？当時は終わりました。アウトラインパネルは、ページ上の任意の要素に即座にアクセスできるようにすることにより、無限のスクロールの必要性を排除します。アウトラインのアイテムを1回クリックして、レイアウトのその要素に直接ジャンプするだけです。ページ構造にGPSがあるようなものです。

2。コンテンツを簡単に再編成します

レイアウトの周りにコンテンツを移動すると、アウトラインパネルのドラッグアンドドロップ機能により、非常に簡単になります。メインビルダーインターフェイスのドラッグ要素に伴う視覚的な混乱なしに、行、列、モジュールをすばやく再配置できます。これは、既存のコンテンツを再構築したり、さまざまなレイアウトの配置を実験したりする場合に特に価値があります。

3。完璧な組織を維持します

アウトラインパネルは、構築プロセス全体を通じて組織化されたままにしておきます。ページの完全な構造を一目で確認でき、注意や再編成が必要な領域を簡単に識別できます。この鳥瞰図は、清潔で論理的なページ構造を維持するために非常に貴重です。

ビーバービルダー2.9のゲームを変える機能

Beaver Builderの最新のアップデートは、アウトラインパネルをさらに強力にするエキサイティングな改善を紹介します。

強化された検索およびフィルター機能

Beaver Builder 2.9は、複雑なプロジェクトのリアルタイム節であることがわかった検索機能を紹介します。

[ボックス]、「ループ」、またはその他のモジュールタイプであろうと、拡大ガラスのアイコンをクリックして、要素の名前の部分を入力します。アウトラインパネルは、一致するノードを即座に強調表示するため、最も複雑なレイアウトでも特定の要素を見つけることが非常に簡単になります。

検索できます：

• モジュール名
• カスタムラベル
• 要素ID
• CSSクラス名

この検索機能は、カスタムクラスやID、および大規模でコンテンツが豊富なページを管理する人なら誰でも、開発者や上級ユーザーにとって特に価値があります。

たとえば、SEOのページを最適化するときに、ヘッダータグ（H1 – H6）をすばやく見つけるのに特に役立ちます。

インラインラベル編集

バージョン2.9で最も実用的な改善の1つは、アウトラインパネル内にノードラベルを直接追加および編集する機能です。

画面間をジャンプして要素を整理することはもうありません。これで、構築するときに要素にラベルを付けることができ、プロジェクトにとって意味のある明確な命名システムを作成できます。

ラベルをインラインで追加するには：

1. アウトラインパネルを開きます
2. 「タイプAラベル」フィールドを明らかにするために、あらゆる要素の上にホバリング
3. カスタムラベルをクリックして入力します
4. Enterを押すか、チェックマークをクリックして保存します

この機能は、レイアウトの整理方法を変換し、「ヒーローセクション」、「証言」、または「アクションを呼び出す」などの意味のある名前を作成することができます。

また、任意の行、列、またはモジュールの高度なタブに移動してラベルを追加することもできます。 HTML要素セクションまでスクロールして、ラベルフィールドに名前を入力します。ラベルは、要素の内容または目的の簡単な説明を提供します。

追加すると、ラベルはビーバービルダーインターフェイスオーバーレイ、設定ウィンドウ、アウトラインパネルに表示されます。

アウトラインパネルの効率を最大化するためのヒント

プロのようなキーボードショートカットを使用します

これらの重要なキーボードショートカットでワークフローをスピードアップします。

• Shift + O ：アウトラインパネルを開いて閉じます
• Shift + T ：ツリービュー全体を展開または崩壊させる

これらのショートカットは、キーボードとワークフローをスムーズに動かし続けます。

右クリックメニューをマスターします

アウトラインパネルの要素を右クリックすると、コンテキストに敏感なオプションが表示されます。

• 行と列：設定を開く、複製、削除
• グループ：削除します
• モジュール：設定を開く、複製、削除

このコンテキストメニューは、インターフェイスを乱雑にすることなく、一般的なアクションへの迅速なアクセスを提供します。

ビジュアルインジケーターを活用します

アウトラインパネルには、要素に関する即座の洞察を提供する有用なアイコンインジケーターが含まれています。

• Blue Eyeアイコン：行、列、またはモジュールの可視性設定が、デフォルトの「常に」設定から変更されたことを示します。
• Red Eyeアイコン：条件付きロジックが行、列、またはモジュールに適用されると表示されます。このオプションは、Beaver Themerがインストールされているときに利用できます。
• コードアイコン：カスタムCSSまたはJavaScriptが、 Advanced Tabを介して行、列、またはモジュールに追加されたことを示しています。
• 感嘆符アイコン：レイアウトからモジュールが欠落していることを示します。これは、モジュールが無効になっている場合、またはモジュールを提供するサードパーティプラグインが非アクティブ化またはアンインストールされている場合に発生する可能性があります。

これらの視覚的なキューは、特別な構成または潜在的な問題を備えた要素をすばやく識別するのに役立ちます。

スマートラベル付けで整理します

プロジェクトのために一貫したラベル付けシステムを開発します。次のような機能と場所の両方を示す記述名を使用することを検討してください。

• 「ヘッダー - ナビゲーション」
• 「ヒーロー - メインCTA」
• 「フッター - 連絡先情報」

この体系的なアプローチにより、コラボレーションが容易になり、数か月後に完全に明確にプロジェクトに戻るのに役立ちます。

高度なアウトラインパネル手法

戦略的拡張/崩壊管理

アウトラインパネルは、拡張または崩壊したセクションを覚えています。現在取り組んでいない領域を崩壊させながら、頻繁にアクセスされるセクションを拡張しておくことにより、これを有利に使用してください。これにより、現在の焦点に一致するカスタマイズされたビューが作成されます。

他のビーバービルダー機能との統合

アウトラインパネルは、他のビーバービルダー機能とシームレスに動作します。さまざまなデバイスビューをテストしながら、異なるセクション間をすばやくナビゲートするために、レスポンシブ編集ツールと組み合わせて使用​​します。この組み合わせは、レイアウトがすべての画面サイズで完全に機能するようにするために特に強力です。

避けるべき一般的な間違い

構造を過度に複雑にします

アウトラインパネルは複雑なレイアウトを管理しやすくしますが、不必要に複雑な構造を作成する衝動に抵抗します。コンテンツの目標を果たす論理的でクリーンな階層を目指します。

ラベルの一貫性を無視します

一貫性のないラベル付けは、組織の目的を打ち負かします。プロジェクトの早い段階で命名規則を確立し、それらに固執します。

モバイルの考慮事項を忘れています

美しく整理されたデスクトップレイアウトには、モバイルデバイスの調整が必要になる場合があることを忘れないでください。 Beaver Builderのレスポンシブ編集ツールと組み合わせてアウトラインパネルを使用して、すべてのデバイスで構造が機能するようにします。

よくある質問

アウトラインパネルにアクセスするにはどうすればよいですか？

ビーバービルダーツールバーのアウトラインアイコンをクリックするか、インスタントアクセスのためにShift + Oを押します。

アウトラインパネルの要素を検索できますか？

アウトラインパネルを使用すると、ページレイアウトで要素を簡単に検索できます。拡大ガラスアイコンをクリックし、モジュール名、ラベル、CSSクラス、または要素IDで検索します。

青い目のアイコンはどういう意味ですか？

青い目のアイコンは、要素の可視性設定がデフォルトの「常に」設定から変更されたことを示しています。

要素にラベルを追加するにはどうすればよいですか？

アウトラインパネルにラベルを追加するには、任意の行、列、またはモジュールの上にホバリングするには、 [ラベルタイプ]フィールドをクリックして、カスタム名を入力します。

感嘆符が表示されるのはなぜですか？

ビーバービルダーのアウトラインパネルの感嘆符は、通常、プラグインの不活性化またはモジュールの競合により、欠落または無効モジュールを示しています。

結論：ページの構築を今日変換してください

ビーバービルダーのアウトラインパネルは、単なるナビゲーションツールではありません。完全なワークフロー変換システムです。ビーバービルダー2.9の強化された検索およびラベル付け機能から、強力な視覚指標や組織機能まで、このパネルをマスターすることで、より効率的で効果的なWordPressページビルダーになります。

重要なテイクアウト：

• キーボードショートカット（Shift + O）を使用して、アクセスを速くします
• 各プロジェクトの開始から一貫したラベル付けを実装します
• 品質保証のために視覚インジケーターを活用します
• レスポンシブデザインワークフローと統合します
• 通常の建物のルーチンのアウトラインパネルの一部を作成します

簡単なランディングページであろうと複雑なマルチセクションWebサイトを構築するかどうかにかかわらず、アウトラインパネルは、混oticとしたページビルディングを合理化されたプロフェッショナルプロセスに変える組織の基盤を提供します。

ビーバービルダーの体験を変える準備はできましたか？ Beaver Builder Editorを開き、 Shift + Oを押してアウトラインパネルを起動し、今日より効率的に構築を開始してください！