ヘッダーは、記事、ブログ、またはWebサイトの重要な部分です。 読者は資料をナビゲートし、ヘッダーに関心がある場合にのみ、顧客はWebサイトをクリックします。 したがって、ヘッダーはあなたのオンライン権限を作成または破壊する可能性があります。 ここに魅力的なヘッダーから得ることができるいくつかの驚くべき利点があります
魅力的なヘッダーはあなたに役立つことができます
ページのヘッダーは、読者にコンテンツのアイデアを提供します。 完全に読まなくても、すばやくスキャンして興味のある部分に到達できます。
検索エンジンは、適切なキーワードで埋められたヘッダーが大好きです。 適切に作成されたヘッダーは、SEOランキング、ひいては潜在的なリード、クリック、および売上を増やすための最良の方法です。
音声検索の最近の傾向が勢いを増しているので、ヘッダーは情報をナビゲートするための貴重なツールになっています。 誰かが音声検索を使用して情報を見つけると、検索エンジンは単語を取得し、一致するヘッダーを持つ結果を表示します。
Astra Proテーマで見事なヘッダーを構成する方法の詳細なガイドを次に示します。 手順に従って、お好みのヘッダーをすぐに作成します
Astra Proを使用して、背景画像を含むページヘッダーをさまざまな色やパンくずで作成できます。
下記の簡単な手順に従って、WordPressにAstraProのpluginをインストールします
Astraテーマをインストールする
Astra Proテーマのモジュールfページヘッダーを使用して、任意のスタイルとデザインのヘッダーを構成できます。 そのためには、以下の手順に従ってください
Astra Proをインストールしたら、WordPressダッシュボードを開き、[外観]オプションに移動します。 「アストラオプション」でモジュールをアクティブにします。
WordPressダッシュボード>外観>アストラオプション
ページヘッダーを作成するには、このようなAstraオプションの[ページヘッダー]領域にアクセスします
外観> Astraオプション>ページヘッダー
ページヘッダーモジュールをオフにした後、[設定]オプションに移動して設計を開始します
設定では、[外観]タブで[ページヘッダー]のオプションを表示できます。 そこから、選択した名前で新しいヘッダーを作成できます。 次に、ページヘッダー、表示ルール、サイトヘッダーで使用できるさまざまなオプションを使用して、さらにカスタマイズできます。 お好みの設定を選択して試して、完璧なヘッダーを作成してください。
Astra Proは、ページヘッダーをデザインするために、次のドメインでカスタマイズオプションを提供します
ページビルダーでヘッダーを作成している場合は、ページヘッダーを作成できます
スティック:ヘッダーが粘着性になるかどうかを決定します
貼り付け:ヘッダーがモバイル/デスクトップに貼り付けられます
縮小:ヘッダーをページの上端に貼り付けると、このオプションによって縮小するか縮小しないかが決まります。 縮小効果により、ヘッダーの下部と上部のスペースが削除されます
次のレイアウトオプションでページのタイトルを調整することもできます
中央揃え:ページタイトルとブレッドクラム(アクティブ化されている場合)がページ中央に互いに配置されます。
このオプションのフロントエンドビューは次のようになります。
インライン:ページタイトルとブレッドクラム(アクティブ化されている場合)を右側と左側に作成します
このオプションのフロントエンドビューは次のようになります。
このオプションでは、Webサイトにブレッドクラムを表示するかどうかを選択できます。 ブレッドクラムは、サイトの現在のユーザーの場所を表し、ユーザーがリンク階層の上から下に移動するのに役立ちます
このようにフロントエンドに表示されます
あなたはあなたのウェブサイトのパンくずリストのテキストを選択することができ、また示されているようにそれの色を選択することもできます
このようにフロントエンドに表示されます
background-sizeのオプションを使用して、ページのヘッダーの高さを選択できます。 これは、ページヘッダーのデザインも強化するため、便利な追加です。 フルサイズのオプションを選択するか、ページヘッダーのカスタムサイズを作成できます
フルサイズ:このオプションを使用すると、ページヘッダーをフルスクリーンで表示できます
フロントエンドに次のように表示されます
カスタムサイズ:カスタムサイズを使用すると、ページヘッダーに正の数の任意のサイズを指定できます。 ヘッダーの下部と上部のパディングを任意の単位とともに定義することもできます。 デフォルトの単位は「%」で、「6px」などの他のオプションもあります
このようにフロントエンドに表示されます
ヘッダーに背景の色や画像を付けることもできます。これにより、ヘッダーの魅力が高まります。
色:ページヘッダーの背景のオプションに移動すると、ヘッダーの背景に必要な色を決定できるカラーピッカーが表示されます。 ページヘッダーをポップアウトさせるお気に入りの色を決定します
画像:色と同様に、ページヘッダーの背景に表示する画像を選択できます
オーバーライド: Astra Proには、オーバーライドオプションをアクティブにすることで、ヘッダーの背景画像を注目のブログ/投稿/ページ画像でオーバーライドするオプションもあります。
オーバーレイカラー:ヘッダーに選択した背景色は、このオプションで背景画像をオーバーレイします
フロントエンドに次のように表示されます
Astra Proには、背景の画像がスクロール中に前景のコンテンツとは異なる速度で移動する視差効果のオプションが用意されています
Astra Proのこのプレミアム機能を使用すると、選択した特定の投稿またはページにページヘッダーを表示できます。 ドロップダウンリストから場所を決定し、除外および/または表示ルールを使用してページヘッダーを表示できます。
ページヘッダーをデザインする際に、 Astra Pro Addon pluginか、基本的な無料のAstraテーマを使用するかを検討していますか? ここでは、見事なヘッダーの設計と作成に利用できる機能の用語の比較を示します
特徴 | アストラ無料テーマ | Astra Proアドオン |
透明なヘッダー | ✔️ | ✔️ |
ブレッドクラム | ✔️ | ✔️ |
スティックヘッダー | ❌ | ✔️ |
モバイルヘッダー | ❌ | ✔️ |
ページヘッダー | ❌ | ✔️ |
タイポグラフィと色 | ❌ | ✔️ |
プライマリヘッダー | ❌ | ✔️ |
Astra Proは、 Astraテーマのアドオンpluginであり、さらに高度でカスタマイズ可能です。 Astra Proは、無料の基本的なAstraテーマでは利用できない一連のプレミアム機能を提供します。 個人およびビジネスのWebサイトで、手頃な価格で簡単にアクセスできるテーマを探している場合は、 AstraProが選択肢のトップになります。 だから、それをチェックして、あなたのレビューを残してください。