無料版Elementorでヘッダーを作成する方法【カスタマイズ方法も解説する】

まずプラグインをインストールして有効化します。「プラグイン」→「新規追加」から検索窓に「Elementor Header & Footer Builder」と入力します。

一番左上のプラグインをインストールして有効化してください。

有効化したら、「外観」のメニュー内に「Elementor Header & Footer Builder」が追加されているので、選択して開きましょう。上部の「Add New」をクリックします。

ポップアップが出ますが、SkipでOKです。

これで下記のような投稿画面が出てるかと思います。

編集画面にいく前に、各種設定を済ませます。タイトル、その他オプションを下記のように設定しましょう。

それぞれの項目の説明は下記のとおりです。自分のサイト設定に応じて変えることができますが、特にこだわりのない場合上記でOKかと思います。

設定を終えたら、「Elementorで編集」をクリックして編集画面に行きましょう。

あとは自由にElementorで編集を加えていきます。今回はベーシックな基本デザインを用意しました。

適当に作ったら「公開」します。公開したらダッシュボードに戻って表示を確認してみましょう。

先程作成したヘッダーがトップページに表示されています。

まずはテーマからAstraをインストールします。インストールしたら有効化しましょう。

「外観」→「カスタマイズ」を選択し、ヘッダービルダーを編集します。

見てもらうと、ある程度形になっているのがわかるかと思います。

ここからサイトロゴの編集やメニューの編集、追加したい項目などを選択できます。

まずはサイトロゴ（タイトル）を編集していきましょう。

左サイドバーのSite Title & Logoをクリックします。

そうすると、ロゴの様々な項目を編集できます。サイトロゴ画像のアップロードやロゴの幅なども設定可能です。

右タブの「Design」を選択すれば、色やフォントサイズを変更することも可能です。

つづいてナビメニューを編集してみましょう。ナビメニューも同様に、「ヘッダービルダー」から「メインメニュー」を選択します。ちなみにナビメニューを直接クリックしても編集可能です。

メニュー設定に移動したら、まずは表示させたいナビメニューを設定します。点線で囲われた「ここからナビメニューを設定してください」をクリック。事前にナビメニューを作成していない方はまずメニューを作成してください。

メインメニューの部分にheader（ヘッダーに表示させたいメニュー名）を設定しました。これでナビメニューには「メニュー画面」で設定した項目が出てくるようになります。

次は、ヘッダーに背景をつけてみましょう。

ビジュアル画面のヘッダー部分にマウスを合わせると鉛筆マークが出てくるのでクリックします。そうすると、メインヘッダーの編集に移動するので「DESIGN」タブをクリックしましょう。

背景の項目で色を選択して、好きな色に変更することができます。

最後にヘッダー項目に要素を追加する方法を見ていきましょう。

今回は下記のように、ナビメニュー右側にボタンを配置したいと思います。

それではやり方を解説していきます。

まずは、画面下部のナビメニュー横にカーソルを合わせるとプラスボタンが出るのでクリック。

するとメニューが表示されるのでボタンをクリックします。

これでボタンがナビメニュー右側に追加されました。

あとは、テキストや背景色の変更は先程の要領と同じです。