Astra Proフッターウィジェットモジュールとフッター固定セットアップチュートリアル

ウェブサイトのデザインにおいて、フッターは重要な情報を表示するだけでなく、全体のデザイン美を反映する重要な要素でもあります。アストラ・プロ 非常に便利なフッターウィジェットモジュールを提供します。オープニング色、フォント、その他の要素について説明します。この記事では、具体的な設定方法について説明し、コンテンツが少なすぎて空白になってしまうのを避けるために、フッターをページの一番下に固定させる方法を補足します。

フッターウィジェットモジュールの紹介

アストラ・プロ フッターウィジェットモジュールは 7 さまざまなレイアウトの種類。例えば、ウェブサイトの構成やブランドスタイルに合った配置を選ぶことができます：

• シングルカラムレイアウト
• 2列や3列などの横並びの組み合わせ
• 左右構造の非対称分布

モジュールがアクティブになると、各エリアに ワードプレス フォーム、ナビゲーション、ソーシャルアイコンなど、サードパーティプラグインが提供するコンテンツモジュールもサポートするネイティブウィジェット。

セットアップ手順

• Astraテーマをインストールして有効にする アストラ・プロ プラグイン。
• 入り込む ワードプレス バックステージ" をクリックしてください。外観" > "カスタマイズ" > "フッタービルダー".
• フッタービルダーで適切なレイアウト構造を選択します。
• 各列に希望する内容を設定するには、次のようにします。"カスタマイズ" > "ウィジェット" > "フッターウィジェットエリア"をクリックし、表示したいガジェットの種類を追加します。

スタイルと組版のコントロール

アストラ・プロには、詳細なスタイル設定オプションが用意されている：

• インナーマージンフッターエリアの上下左右のマージンを個別に設定できます；

• 幅の設定::
  • ブラウザの横幅いっぱいに表示されます；
  • メインページのコンテナと同じ幅のコンテンツ；

• 書体: 各ウィジェットのタイトルとボディのフォント、フォントサイズ、行サイズなどのパラメーターの設定をサポート；

• 背景と色背景色のカスタマイズや背景画像のアップロードも可能です。

これらのオプションは、一貫したビジュアルスタイルを実現し、フッターに質感を与えるのに役立つ。

ページ下部のフッターを修正する方法

ページ内のコンテンツが少なすぎる場合、フッターが真ん中にぶら下がり、全体的な印象を損なうことがある。タイポグラフィ.

以下を追加することができる。 カスケーディングスタイルシート ページの長さに関係なく、フッターが常に一番下に収まり、一番下に表示されるようにするコード。

使用されているコードは以下の通り：

#page {
    display: flex；
    flex-direction: column; min-height: 100vh；
    min-height：100vh；
}
.admin-barの#page {。
    min-height: calc(100vh - 32px); }.
}
#page .site-content { } } #page .site-content
    
}

方法を追加する：

• とおす ワードプレス バックステージ
• クリック "外装状態" > "カスタマイズ";

• 一番下までスクロールして "Extras "を見つける。 カスケーディングスタイルシート";

• 編集ボックスにコードを貼り付ける；

• 右上の "Publish "ボタンをクリックして保存します。

上記を完了すると、ページのコンテンツが多い少ないにかかわらず、フッターが浮き上がることはなくなる。

概要

アストラ・プロ フッターモジュールを使えば、ページの下部エリアを明確に構造化し、視覚的に統一することができます。シンプルな カスケーディングスタイルシート コードが追加され、フッターの表示位置がより標準化されました。この組み合わせは、ブログ、eコマースサイト、公式ビジネスサイトのページ構築に最適です。

関連記事