Avada ヘッダー、フッター、列レイアウト ビルダーの使用方法

当社独自のページ ビルダーである Avada Builder は、2 つのインターフェイスで利用できるようになりました。Avada Builder はバックエンドのワイヤーフレーム ページ ビルダーで、Avada Live はフロントエンド ビルダーで、Avada 6.0 で最近導入されたばかりです。 。

Avada Builder のどちらのバージョンでも、コンテナ、列、要素の簡単なシステムを使用して、Web サイトの美しいページ レイアウトを簡単にデザインできます。 Avada Builder は、ページ コンテンツとレイアウトのあらゆる側面を完全に制御できるため、現代の Web デザイナーとサイト所有者にとって同様に素晴らしいツールです。 Avada Builder の両方のバージョンでも同じコードが生成されます。 これらは完全に互換性があり、現在入手可能な Avada Builder を使用して両方の長所を活用できます。

[レイアウト ビルダー] ページには、すべてのレイアウトと、デフォルトで作成されるグローバル レイアウトに加えて構築したい条件付きレイアウトが表示されます。 また、ここには、レイアウト セクションをレイアウトに割り当て、条件付きレイアウトを有効にするための条件を指定する領域もあります。

レイアウト ビルダーには、Avada ダッシュボードからドロップダウン メニューから [レイアウト] > [レイアウト ビルダー] を選択してアクセスできます。 レイアウトを説明する最も簡単な方法の 1 つは、レイアウトがページの 4 つのレイアウト セクション (ヘッダー セクション、ページ タイトル バー セクション、コンテンツ セクション、およびフッター セクション) を収容するコンテナであると言うことです。 レイアウト セクションとレイアウトの違いについて詳しくは、「レイアウトとレイアウト セクションについて」(PDF) を参照してください。 このページで実行できることの詳細については、読み続けてください。

2 つの部分がレイアウト ビルダー ページの最上部にあります。 グローバル レイアウトのレイアウト セクションにデータを入力したり、条件付きレイアウトを生成したりする手法は、最初のセクションで概説されています (ヒント: これは X で閉じることができます)。画面の右側には、次のことができる領域があります。新しいレイアウトを直接作成します (下記を参照)。 新しいレイアウトの名前を入力し、[新しいレイアウトの作成] をクリックしてプロセスを完了します。 このメソッドを使用すると、空のレイアウトが作成されます。 レイアウトセクションまたは条件が指定されていません。

レイアウトを作成すると、レイアウト ビルダー ページに自動的にインポートされます。 ページの上部にある [名前の変更] ボタンをクリックすると、レイアウトの名前を変更できます。 また、歯車アイコンをクリックしてレイアウトの条件を設定したり、ページ上部のビン アイコンをクリックしてレイアウトを削除したりすることもできます。 グローバル レイアウトを除くすべてのレイアウトの下部をクリックして、基準を表示して割り当てることもできます。

各レイアウト内で、特定のレイアウトに割り当てられた 4 つのレイアウト セクション (4 つのレイアウトごとに 1 つ) が表示されます。 各レイアウト セクションには + アイコンが表示され、マウスをその上に移動すると、レイアウト セクションをレイアウトのそのセクションに割り当てることができます。 既存のレイアウト セクションをこのセクションに割り当てるか、新しいセクションを最初から作成するかを選択できます。

セクションレイアウトの使用

Avada レイアウトの一部として、Avada Builder のクリエイティブな能力全体を活用して、Web サイト用に完全にカスタマイズ可能なフッターを作成できるようになりました。

フッター レイアウトは、レイアウトに追加されるレイアウト セクションです。 amp、カスタム フッターにはフッター レイアウト セクションが必要で、これはグローバル レイアウトまたはカスタム レイアウトに追加できます。 次のセクションではカスタム フッター レイアウト セクションの構築について説明しますが、その前に Avada レイアウトの紹介を見てみましょう。

WordPress サイドバーまたは Avada ダッシュボードで、[Avada] > [レイアウト] を選択します。 Avada のレイアウトとレイアウト セクションはここで作成および管理されます。 以下に示すように、グローバル レイアウトは最初は空であり、関連するレイアウト セクションはありません。

レイアウトのカスタマイズ

このセクションはグローバル レイアウトまたは条件付きレイアウトに追加でき、特定のカスタム投稿の種類または単一ページにのみ表示されます。 グローバル レイアウトはすでに存在しますが、最初に条件付きレイアウトを開発する必要があります。

以下に示すように、[レイアウト] ページで名前を追加し、[新しいレイアウトの作成] をクリックします。

既存のレイアウトまたはグローバル レイアウトに追加する場合は、フッター レイアウト セクションを作成します。

以下に示すように、[レイアウト セクション ビルダー] 画面で、レイアウト セクションのタイプを選択し、名前 (このampではフッター、場合によってはグローバル フッター) を入力し、[新しいレイアウト セクションの作成] をクリックします。

次の図は、レイアウトから直接レイアウト セクションを生成する方法を示しています。 サイトのレイアウト セクションをレイアウトに追加する必要があります。 最初は単にグローバル レイアウトが存在します。 したがって、グローバル カスタム フッターを作成するには、それをこのレイアウトに追加します。 [カスタム フッター レイアウト] セクションに条件を追加して、基準に従ってレイアウトが表示されるようにします。

何も問題はありませんが、状況を考慮することが重要です。 レイアウトが現在アクティブな場合 (つまり、条件があるか、グローバル レイアウトである場合)、新しいレイアウト セクションはすぐにアクティブになり、空になります。 最初にレイアウト セクション ビルダー ページを介してグローバル レイアウトにカスタム フッターを追加し、それからグローバル レイアウトに追加する方が合理的です。

あるいは、フッター、ヘッダー、または列のレイアウト セクションを条件付きレイアウトに追加して作成することもできます。 条件は、条件が追加されるまで使用されません。 以下に示すように、フッター レイアウト セクションにマウスを移動して編集アイコンをクリックすることで、フッター レイアウト セクションを変更できます。

カスタムレイアウト編集

新しいレイアウト セクションを編集すると、デフォルトの WordPress エディターが表示されます。 ここから Avada Builder または Avada Live を使用できます。 カスタム レイアウト セクションはここで作成されます。 詳細については、「レイアウト セクション コンテンツの作成」を参照してください。つまり、ここではあらゆるものを構築できます。

カスタム フッターには、Avada Builder で構築できるものはすべて含めることができます。 多数のコラムや写真などを含めることができます。 これにより、非常に高い柔軟性が得られます。 「レイアウト」セクションにはフッター素材が表示されます。 マテリアルはビルダーから提供され、制約となるのはあなたの創造性だけです。

以下のタクシー デモ用に作成されたオリジナルのフッターを参照してください。 これはテーマのオプションとフッターウィジェットを変更することで作成されました。

このカスタム ヘッダーのデスクトップ バージョンがここに示されていますが、このカスタム ヘッダーの範囲を正しく把握するには、ここからアクセスできるライブ サイトにアクセスする必要があります。

条件付きレイアウト設計

グローバル レイアウトには条件がありません。 レイアウト セクションを追加すると、グローバルであるため、すべてのページで使用されます。 単一のブログ記事など、サイトの一部のページでのみカスタム フッターが必要な場合は、条件付きレイアウトを使用する必要があります。

条件付きレイアウトには、既存のレイアウト セクションのみを含めることができます。 次に、レイアウトの [フッターの選択] タブで [既存] までスクロールします。ここで、以下に示すように、レイアウト セクションを追加できます。

条件付きレイアウトには条件を設定する必要があります。 レイアウトは、条件が指定されるとすぐにアクティブになります。 したがって、レイアウトセクションを作成する前にこれを実行すると、条件に一致するページが空になります。

条件を追加するには、レイアウトの下部メニューから「条件の追加」を選択します。 以下に示すようなダイアログ ボックスが表示されます。 条件付きレイアウトの詳細については、「条件付きレイアウトについて」を参照してください。ただし、このampでは、以下に示すように、[投稿条件] タブで [すべての投稿] を選択します。

Avada レイアウト ビルダーからの列の追加

列要素は、コンテナ要素と同様、Avada サイトを設計する際に不可欠な構造コンポーネントです。

Avada Layout Builder を使用すると、列の追加が比較的簡単です。

  • + コンテナ」ボタンをクリックして、ページにコンテナを追加します。 コンテナを挿入するとき、列または列レイアウトを選択するように求められます。 空のコンテナを作成することもできますが、通常はこのステップで列を追加します。
  • 既存のコンテナに新しい列を追加するには、コンテナの上にカーソルを置き、「 + 列」ボタンをクリックします。 新しい列を追加するには、ここをクリックしてください。
  • 列の左上隅にある「列のサイズを変更」アイコンをクリックします。 これで、列と同じサイズになります。 たとえばamp 1/4 列は、 [列のサイズ変更] オプションの下に「1/4
  • 列をドラッグ アンド ドロップして並べ替えます。 列をコンテナにドラッグ アンド ドロップすることもできます。

列は、同じ幅のコンテナ要素内にのみ配置できます。 通常、これはサイトに設定したサイトの幅です。 したがって、サイトの幅を 1200 ピクセルに設定すると、1/2 列の幅は 600 ピクセルになります。 ページに追加されたときのプリセット列サイズは以下に示されています。

Avada では、大、中、極小のレイアウトで列の幅 (およびその他) を個別に設定できます。「レスポンシブ レイアウトで列の表示順序とサイズを設定する方法」では、この優れた新機能を列で使用する方法を説明しています。

カスタム幅は、 [列] > [デザイン] > [幅]。 以下に示すように、パーセンテージ数値を使用すると、カスタム幅を指定できます。 したがって、位置決めは無制限です

自動は新しい幅オプションです。 固定幅の代わりに、列はその中の最も重要な要素のスペースを占めます。 したがって、一部の場合にのみ機能します。 親列を自動に変更すると、列のサイズが要素の幅に合わせて変更されます。

Avada は、コンテナーと列のレスポンシブ オプション セットも追加します。 以下の画像に示すように、ビルダーのバックエンドでは、任意の列にレスポンシブ アイコンが表示されます。 フロントエンド ビルダーには、オプションの応答アイコンが表示されます。

新しいフレックス コンテナのみにレスポンシブ オプション セットが表示されます。 従来のコンテナの列は使用できません。

結論

Avada レイアウトのおかげで、カスタム フッター、ヘッダーを作成し、列を追加する機能が実現し、ほぼ無制限のオプションが可能になりました。 Avada Builder の機能を利用して、想像できるほぼすべてのフッターやヘッダーを構築できるだけでなく、条件付きレイアウトの機能を利用して、任意のページ、カテゴリ、カスタム投稿タイプ、またはそれらの組み合わせでそれらを表示または非表示にすることもできます。 Avada Builder を使用して考えられる基準。

WordPress レイアウトに関して言えば、Avada Layouts は文字通りの意味でゲームチェンジャーです。 このような自由な設計と展開の柔軟性が可能になるという事実は、フッターの作成プロセスが決して同じではないことを意味します。

ハンソン F.

最近の投稿

Elementor でヘッダーとフッターを使用する方法

Web サイトのヘッダーとフッターは重要な要素です。 ほとんどの場合、ヘッダーはナビゲーションを提供します…

2022 年 1 月 6 日

WordPress テーマの比較: Astra と OceanWP

市場で最も人気のある WordPress テーマの 2 つは、Astra と OceanWP です。 プロ…

2022 年 1 月 2 日

WordPress ニューステーマの比較: 新聞 vs. アストラ

優れたニュース Web サイトを作成するには、Web デザイナーになる必要はありません。 私たちは…

2021年10月25日

新聞をテーマにしたニュース関連の Web サイトを作成する

新聞テーマは、tagDiv によって設計された最も重要な WordPress テーマの 1 つです。

2021年10月18日

Avada WooCommerce ビルダーを使用して e コマースを構築する方法

オンライン ストアのセットアップに関しては、WooCommerce が頼りになるpluginです。 それ…

2021年10月4日

Elementor でスティッキーヘッダーとスクロール効果を使用する方法

ヘッダーは通常、Web サイトにアクセスしたときに最初に目にするものです。

2021年9月21日