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

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

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

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

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

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

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

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

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

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

フッターレイアウトは、レイアウトに追加されるレイアウトセクションです。 EXのためにampル、カスタムフッターは、グローバルまたはカスタム・レイアウトのいずれかに添加してもよいフッターレイアウトセクションが必要です。 次のセクションでは、カスタムフッターレイアウトセクションの作成について説明しますが、最初に、Avadaレイアウトの紹介について説明します。

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

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

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

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

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

レイアウトセクションビルダ画面で、レイアウトセクションの種類を選択します(この例では名前を入力ampル、フッター、おそらくグローバルフッター)および以下に示すように、新しいレイアウトセクションを作成]をクリックします。

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

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

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

カスタムレイアウト編集

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

カスタムフッターには、AvadaBuilderで作成できるものをすべて含めることができます。 多数の列、写真などを含めることができます。 これにより、非常に高い柔軟性が得られます。 レイアウトセクションは、フッターマテリアルが表示される場所です。 素材はビルダーからのものであり、あなたの創造性が唯一の制約です。

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

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

条件付きレイアウト設計

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

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

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

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

Avada LayoutBuilderからの列の追加

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

列の追加は、Avada LayoutBuilderを使用すると比較的簡単です。

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

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

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

カスタム幅は、 [列]>[デザイン]>[幅ます。 以下に示すように、パーセンテージの数値を使用すると、カスタム幅を指定できます。 したがって、ポジショニングに制限はありません

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

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

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

結論

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

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

ハンソンF。

最近の投稿

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

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

2022年1月6日

WordPressテーマの比較:AstraとOceanWP

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

2022年1月2日

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

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

2021年10月25日

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

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

2021年10月18日

AvadaWooCommerceビルダーでeコマースを構築する方法

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

2021年10月4日

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

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

2021年9月21日