本記事では、無料版Elementorでヘッダーを作成する方法をご紹介します。Elementor無料版では、ヘッダーをテンプレート化できませんが、今回紹介する方法でPro版と同様にヘッダーを作成することができます。ヘッダーテンプレートをつくって、作業効率を高めましょう。今回はどちらの方法も解説するのでお好みで選んでください。Builder」を使用するテーマ「Astra」のヘッダービルダーを使用する前者はプラグイン導入、後者はテーマに依存した形でのヘッダー作成方法です。安易にプラグインを入れたくない方は後者を採用すると良いでしょう。それでは1つずつ解説していきます。Builder」プラグインを導入することで、サイトのヘッダー・フッターをElementorでカスタマイズできるようになります。オリジナルで自在にカスタマイズしたい人におすすめです。それでは使い方を解説していきます。プラグインをインストールするまずプラグインをインストールして有効化します。Builder」と入力します。プラグインをインストールして有効化してください。Builder」が追加されているので、選択して開きましょう。New」をクリックします。Builder」ポップアップが出ますが、SkipでOKです。これで下記のような投稿画面が出てるかと思います。投稿画面からヘッダーを作成する編集画面にいく前に、各種設定を済ませます。タイトル、その他オプションを下記のように設定しましょう。Builder」それぞれの項目の説明は下記のとおりです。自分のサイト設定に応じて変えることができますが、特にこだわりのない場合上記でOKかと思います。テンプレートのタイプを選択します。どのページに対して表示させるかを選択します。Website」はすべてのページで表示します。roles:ユーザーの役割を指定してテンプレートを表示します設定を終えたら、「Elementorで編集」をクリックして編集画面に行きましょう。Elementorでヘッダーをデザインするあとは自由にElementorで編集を加えていきます。今回はベーシックな基本デザインを用意しました。適当に作ったら「公開」します。公開したらダッシュボードに戻って表示を確認してみましょう。編集後のTOPページ先程作成したヘッダーがトップページに表示されています。いうわけで、ここまでがプラグインを使ったヘッダーの作成方法です。ちなみにお気づきの方も多いと思いますが、フッターも同様に作成することができます。その際は、オプション選択を「フッター」に変更するだけでOKです。テーマ「Astra」のヘッダービルダーを使用するつづいて紹介する方法は、Elementorと相性が良いテーマ「Astra」を使ったヘッダー作成方法です。AstraのヘッダービルダーはElementor同様に画面を見ながら細かくカスタマイズすることができます。それでは早速、使い方を解説していきます。AstraをインストールまずはテーマからAstraをインストールします。インストールしたら有効化しましょう。「外観」→「カスタマイズ」を選択し、ヘッダービルダーを編集します。見てもらうと、ある程度形になっているのがわかるかと思います。ここからサイトロゴの編集やメニューの編集、追加したい項目などを選択できます。サイトタイトルを編集まずはサイトロゴ(タイトル)を編集していきましょう。Logoをクリックします。Logoをクリックするそうすると、ロゴの様々な項目を編集できます。サイトロゴ画像のアップロードやロゴの幅なども設定可能です。右タブの「Design」を選択すれば、色やフォントサイズを変更することも可能です。ナビメニューを編集するつづいてナビメニューを編集してみましょう。ナビメニューも同様に、「ヘッダービルダー」から「メインメニュー」を選択します。ちなみにナビメニューを直接クリックしても編集可能です。メニュー設定に移動したら、まずは表示させたいナビメニューを設定します。点線で囲われた「ここからナビメニューを設定してください」をクリック。事前にナビメニューを作成していない方はまずメニューを作成してください。メインメニューの部分にheader(ヘッダーに表示させたいメニュー名)を設定しました。これでナビメニューには「メニュー画面」で設定した項目が出てくるようになります。ヘッダー全体に背景をつける次は、ヘッダーに背景をつけてみましょう。ビジュアル画面のヘッダー部分にマウスを合わせると鉛筆マークが出てくるのでクリックします。すると、メインヘッダーの編集に移動するので「DESIGN」タブをクリックしましょう。背景の項目で色を選択して、好きな色に変更することができます。ヘッダーに要素を追加する最後にヘッダー項目に要素を追加する方法を見ていきましょう。今回は下記のように、ナビメニュー右側にボタンを配置したいと思います。それではやり方を解説していきます。画面下部のナビメニュー横にカーソルを合わせるとプラスボタンが出るのでクリック。するとメニューが表示されるのでボタンをクリックします。これでボタンがナビメニュー右側に追加されました。あとは、テキストや背景色の変更は先程の要領と同じです。Elementor無料版でヘッダーを作成する方法まとめ今回はElementor無料版でヘッダーを作成する方法について2通りの方法を解説しました。Builder」を使用するテーマ「Astra」のヘッダーブロックを使用するヘッダーデザインにこだわりたい方はプラグインを、シンプルなヘッダーで良い場合はAstraのテーマヘッダーで、と柔軟に使い分けるとよいかと思います。2023年5月15日ありがとうございます。Astraを使っているのに知りませんでした。今回初めてテンプレートを使わずにサイトを作っています。自動で表示されるサイトタイトルを消す方法が分からず、画面設定からやり直しすることにしました。そこでヘッダー、フッターの設定をマニュアルで設定する必要が出てきたので検索しました。Iwasakiさんコメントありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。「筋トレはじめよう」と思い立ったらやるべきこと【いきなりはじめ...サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。