Astra Pro:見事なヘッダーを構成する

ヘッダーは、記事、ブログ、またはWebサイトの重要な部分です。 読者は資料をナビゲートし、ヘッダーに関心がある場合にのみ、顧客はWebサイトをクリックします。 したがって、ヘッダーはあなたのオンライン権限を作成または破壊する可能性があります。 ここに魅力的なヘッダーから得ることができるいくつかの驚くべき利点があります

見事なヘッダーはどのようにあなたのブログ/ウェブサイトに利益をもたらすことができますか?

魅力的なヘッダーはあなたに役立つことができます

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

ページのヘッダーは、読者にコンテンツのアイデアを提供します。 完全に読まなくても、すばやくスキャンして興味のある部分に到達できます。

2- SEOランキングの向上

検索エンジンは、適切なキーワードで埋められたヘッダーが大好きです。 適切に作成されたヘッダーは、SEOランキング、ひいては潜在的なリード、クリック、および売上を増やすための最良の方法です。

3-音声検索での移動

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

Astra Proテーマで見事なヘッダーを構成する方法の詳細なガイドを次に示します。 手順に従って、お好みのヘッダーをすぐに作成します

Astra Proでヘッダーを構成する方法

Astra Proを使用して、背景画像を含むページヘッダーをさまざまな色やパンくずで作成できます。

Astra Proをインストールするには?

下記の簡単な手順に従って、WordPressにAstraProのpluginをインストールします

Astraテーマをインストールする

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

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

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

ステップ1

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

WordPressダッシュボード>外観>アストラオプション

ステップ2

ページヘッダーを作成するには、このようなAstraオプションの[ページヘッダー]領域にアクセスします

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

ステップ3

ページヘッダーモジュールをオフにした後、[設定]オプションに移動して設計を開始します

ステップ4

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

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

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

レイアウト

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

スティック:ヘッダーが粘着性になるかどうかを決定します

貼り付けヘッダーがモバイル/デスクトップに貼り付けられます

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

次のレイアウトオプションでページのタイトルを調整することもできます

中央揃え:ページタイトルとブレッドクラム(アクティブ化されている場合)がページ中央に互いに配置されます。

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

インライン:ページタイトルとブレッドクラム(アクティブ化されている場合)を右側と左側に作成します

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

パンくずリストを表示する

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

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

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

あなたはあなたのウェブサイトのパンくずリストのテキストを選択することができ、また示されているようにそれの色を選択することもできます

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

背景のサイズ

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

フルサイズ:このオプションを使用すると、ページヘッダーをフルスクリーンで表示できます

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

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

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

ヘッダーの背景

ヘッダーに背景の色や画像を付けることもできます。これにより、ヘッダーの魅力が高まります。

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

画像:色と同様に、ページヘッダーの背景に表示する画像を選択できます

オーバーライド: Astra Proには、オーバーライドオプションをアクティブにすることで、ヘッダーの背景画像を注目のブログ/投稿/ページ画像でオーバーライドするオプションもあります。

オーバーレイカラー:ヘッダーに選択した背景色は、このオプションで背景画像をオーバーレイします

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

視差効果

Astra Proには、背景の画像がスクロール中に前景のコンテンツとは異なる速度で移動する視差効果のオプションが用意されています 

表示オン

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

ページヘッダーのAstra ProとAstra Freeのテーマ

ページヘッダーをデザインする際に、 Astra Pro Addon pluginか、基本的な無料のAstraテーマを使用するかを検討していますか? ここでは、見事なヘッダーの設計と作成に利用できる機能の用語の比較を示します

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

最後の言葉

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

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには*