Astra Pro: 素晴らしいヘッダーを構成する

ヘッダーは、記事、ブログ、Web サイトにとって不可欠な部分です。 読者はヘッダーに興味がある場合にのみ、資料内を移動し、顧客は Web サイトをクリックします。 したがって、ヘッダーはオンラインでの権威を左右する可能性があります。 魅力的なヘッダーから得られる驚くべき利点をいくつか紹介します

素晴らしいヘッダーはあなたのブログ/ウェブサイトにどのようなメリットをもたらしますか?

魅力的なヘッダーは次のような機能を提供します。

1- ページをスキャン可能にする

ページのヘッダーは、読者にコンテンツのアイデアを与えます。 まったく読まないのではなく、すぐに目を通し、興味のある部分に到達することができます。

2- SEOランキングを上げる

検索エンジンは、適切なキーワードが埋め込まれたヘッダーを好みます。 よく練られたヘッダーは、SEO ランキングを向上させ、ひいては見込み客、クリック数、売上を向上させるための最良の方法です。

3- 音声検索でのナビゲーション

最近の音声検索の傾向が勢いを増しているため、ヘッダーは情報をナビゲートするための貴重なツールとなっています。 ユーザーが音声検索を使用して情報を検索すると、検索エンジンが単語を取得し、一致するヘッダーを含む結果を表示します。

ここでは、Astra Pro テーマで素晴らしいヘッダーを構成する方法についてのステップバイステップのガイドを示します。 手順に従ってすぐにお好みのヘッダーを作成できます

Astra Pro でヘッダーを構成するには?

Astra Pro を使用して、背景画像を含むページ ヘッダーをさまざまな色やパンくずリストで作成できます ページ ヘッダーの適合性に応じてサイト ヘッダーをデザインすることもできます。 WordPress Web サイトにAstra ProPlugin

アストラプロをインストールするには?

以下の簡単な手順に従って、Astra Pro のpluginを WordPress にインストールしてください。

アストラテーマをインストールする

  • Brainstorm Force のストアにログインする
  • 「アカウント」に移動し、「ダウンロード」をクリックします (「アカウント」 > 「ダウンロード」)。
  • Astra Pro Pluginのオプションを選択して、コンピューターにインストール可能な zip ファイルを取得します。
  • WordPress Web サイトに zip ファイルをインストールし、Astra Propluginをアクティブ化します。
  • Addon Astra Pro ライセンスを追加する

ページヘッダーモジュールを使用したページヘッダーの構成

Astra Pro テーマのモジュール f Page Headers を使用すると、選択した任意のスタイルとデザインでヘッダーを構成できます。 これを行うには、以下の手順に従ってください

ステップ1

Astra Pro をインストールした後、WordPress ダッシュボードを開き、[外観] のオプションに移動します。 「Astra Options」でモジュールをアクティブ化します。

WordPress ダッシュボード > 外観 > Astra オプション

ステップ2

ページヘッダーを作成するには、次のように Astra オプションの「ページヘッダー」領域にアクセスします。

 外観 > Astra オプション > ページ ヘッダー

ステップ3

ページヘッダーモジュールをアクティブ化した後、設定のオプションに移動してデザインを開始します

ステップ4

設定の下の「外観」タブに「ページヘッダー」のオプションが表示され、そこから選択した名前で新しいヘッダーを作成できます。 次に、ページ ヘッダー、表示ルール、サイト ヘッダーに使用できるさまざまなオプションを使用してさらにカスタマイズできます。 お好みの設定を選択して試して、完璧なヘッダーを作成してください。

Astra Pro のページ ヘッダーのカスタマイズ オプション

Astra Pro は、ページ ヘッダーを設計するための次のドメインのカスタマイズ オプションを提供します。

レイアウト

任意のページ ビルダーでヘッダーを作成している場合は、ページ ヘッダーを作成できます。

Stick:ヘッダーがスティッキーになるかどうかを決定します。

Stick On:ヘッダーをモバイル/デスクトップに貼り付けます。

縮小:ヘッダーをページの上端に貼り付ける場合、このオプションはヘッダーを縮小するかどうかを決定します。 縮小効果によりヘッダーの下部と上部のスペースが削除されます

次のレイアウト オプションを使用してページのタイトルを配置することもできます

中央揃え:ページ タイトルとパンくずリスト (アクティブな場合) がページの中央に重なり合うようにします。

このオプションのフロントエンドビューは次のようになります。

インライン:ページのタイトルとパンくずリスト (有効な場合) が右側と左側に表示されます。

このオプションのフロントエンドビューは次のようになります。

ブレッドクラムを表示する

このオプションを使用すると、Web サイトにパンくずリストを表示するかどうかを選択できます。 ブレッドクラムはサイトのユーザーの現在の位置を表し、ユーザーがリンク階層内を上から下に移動するのに役立ちます。

このようにフロントエンドに表示されます

ブレッドクラムの色とタイトル

ウェブサイト上のパンくずリストのテキストを選択したり、次のように色を選択したりできます。

このようにフロントエンドに表示されます

背景のサイズ

背景サイズのオプションを使用して、ページのヘッダーの高さを選択できます。 ページヘッダーのデザインも強化されるため、便利な追加です。 フルサイズのオプションを選択するか、ページヘッダーのカスタムサイズを作成することができます

フルサイズ:このオプションにより、ページヘッダーが全画面を占めることができます。

フロントエンドシャフトに表示されます

カスタム サイズ:カスタム サイズを使用すると、ページ ヘッダーに正の数値で任意のサイズを指定できます。 任意の単位とともにヘッダーの下部と上部のパディングを定義することもできます。 デフォルトの単位は「%」で、「6px」などの他のオプションも使用できます。

このようにフロントエンドに表示されます

ヘッダーの背景

ヘッダーの背景に任意の色や画像を追加することもでき、ヘッダーをさらに魅力的にすることができます。

カラー:ページヘッダーの背景のオプションに移動すると、ヘッダーの背景に必要な色を決定できるカラーピッカーが表示されます。 ページヘッダーを飛び出すお気に入りの色を決めます

画像:カラーと同様に、ページヘッダーの背景に使用する画像を選択できます。

オーバーライド: Astra Pro では、オーバーライド オプションを有効にすることで、ヘッダーの背景画像を注目のブログ/投稿/ページの画像でオーバーライドするオプションも提供されます。

オーバーレイカラー:このオプションを使用すると、ヘッダーに選択した背景色が背景画像にオーバーレイされます。

フロントエンドシャフトに表示されます

視差効果

Astra Pro は、スクロール中に背景の画像が前景のコンテンツとは異なる速度で移動する視差効果のオプションを提供します。 

ディスプレイオン

Astra Pro のこのプレミアム機能を使用すると、選択した特定の投稿またはページにページ ヘッダーを表示できます。 ドロップダウン リストから場所を決定し、除外ルールや表示ルールを利用してページ ヘッダーを表示できます。   

Astra Pro 対 Astra ページヘッダー用の無料テーマ

ページヘッダーをデザインするときに、 Astra Pro Addonpluginを使用するか、基本的な無料の Astra テーマを使い続けるかを検討していますか ここでは、魅力的なヘッダーのデザインと作成に利用できる機能の条件を比較します。

特徴アストラの無料テーマアストラ プロ アドオン
透明ヘッダー✔️✔️
ブレッドクラム✔️✔️
スティックヘッダー✔️
モバイルヘッダー✔️
ページヘッダー✔️
タイポグラフィーとカラー✔️
プライマリヘッダー✔️

最後の言葉

Astra Pro はアドオンplugin、テーマをさらに高度でカスタマイズ可能にします。 Astra Pro は、無料の基本的な Astra テーマでは利用できないさまざまなプレミアム機能を提供します。 個人用およびビジネス用の Web サイトに手頃な価格で簡単にアクセスできるテーマを探している場合は、 Astra Pro が選択肢の最上位となるはずです。 ぜひチェックしてレビューを残してください。

アフマド

最近の投稿

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日