(↑Pinterestでシェアお願いします!)

Elementor Proを使ってWordPressでホームページを作成する方法

執筆者 | 更新日 2020年09月06日 | Elementor Proの使い方 | コメント0件

今回は、Elementor Proを使ってWordPressでホームページを作成する方法をご紹介してきたいと思います。

これからWordPressでホームページを作成していきたいと思っている方は、この記事を参考に、実際に手を動かしていただければ、おそらく1日から2日以内でホームページが完成できると思います。

Elementor Proでホームページを作成するのに必要なツール

Elementor Pro ホームページ ツール

そのホームページを作成するにあたって必要になってくるツールっていうのが3点ありますのでご紹介していきます。

まず1点目についてはドメインの取得です。ドメインの取得はだいたい年間で1000円くらいかかってきます。高いものだと年間で3000円くらいかかってきますが、だいたい1000円くらいだと思っておいてください。

2点目についてはレンタルサーバーの契約です。これも契約するサーバーによって値段が変わってきますが、大体、月に1000円くらいかかります。

最後3点目は、タイトルにもあるようにElementor Proという有料プラグインの契約が必要となってきます。料金は、1サイトで使う場合は年間で49ドル、3サイトだと99ドル、1000サイトだと199ドルかかります。一番安いプランを契約すると、合計で年間約2万円くらいかかってきます。

それでは実際にステップバイステップでElementor Proを使ってWordPressでホームページを作成する方法をご紹介してきたいと思います。

Step1. WordPressのインストール

まずステップ1は、WordPressのインストールです。この作業にはドメインとレンタルサーバーが必要になってきます。ドメインというのは、「example.com」みたいなアドレスです。一方のレンタルサーバーというのは、土地みたいなもので、その土地の上にWordPressという家を建てていくイメージです。

まずは、そのドメインの取得からやっていきます。いろんなサイトで取得できますが、

この2つを契約して、WordPressサイトを構築していきます。

チェック!詳細は、『ムームードメインとXserverでWordPressをインストールする方法』記事をご覧ください。

Step2. Elementor Proの契約

次に、Elementor Proの契約をしていきます。Elementor Proは海外のツールで、ちょっと契約するのは抵抗がある方いらっしゃると思うんですけど、ステップバイステップでその契約の仕方をご紹介していきますので、その流れの通り契約を済ませてみてください。

elementor pro 料金

まずは、こちらの公式サイトから「Pricing」に移動します。そしたら4つのプランが用意されています。無料のプランに関してはElementor ProではなくてElementorの方になってしまうので、このコースでは使っていきません。厳密には、Elementorという無料のプラグインも一緒にインストールする必要はありますが、今回契約するのはこれではありません。こっちの『PERSONAL』か、『PLUS』、『EXPERT』のいずれかのプランを契約していきます。それぞれ機能は同じですが、インストールできるサイトの数が違います。49ドルプランは1サイト。99ドルプランは3サイト。199ドルプランは1000サイトまで使用することができます。

いずれのプランも年間契約になりますので、1年経つ度に料金が徴収されます。ちなみに、買い切りプランはありません。よくある質問として、更新しなかったらどうなるのか?というのがあります。更新しなかったから使えなくなるというのではなく、プラグインが更新できなくなるだけです。それ以前にページを作成していたのであれば、そのページは全然使えます。ただし、プラグインを更新することはできません。バグがあったり、新しい機能が追加されたとしても更新できないので、新機能の使用はできませんので、その点はご注意ください。

Elementor 契約

では、契約方法をご紹介していきます。まずはプランを選んでいただいて「BUY NOW」ボタンをクリックします。そしたら、チェックアウトページに移動しますので、まずは以下の項目を入力します。

  • Last Name:苗字を入力します。
  • First Name:名前を入力します。
  • Country / Region:Japanを選択します。
  • Postcode / ZIP:郵便番号を入力します。
  • Prefecture:都道府県名を選択します。

次に、クレジットカード払いか、PayPal払いかを選択します。PayPalの場合は、別のページにリダイレクトされて、そちらでログインしてから支払います。クレジットカードの場合だと

  • Card Number:クレジットカードの番号を入力します。
  • Expire Date:有効期限を入力します。
  • Card Code (CVC):CVCコードを入力します。

を入力して、「Checkout」ボタンをクリックします。

Step3. Elementor Proのインストールとアクティベート

Elementor Pro ログイン画面

契約が終わったら、まずは、Elementorのログインページで、ログインしましょう。おそらく、Elementorから、メールでログインページのリンクが届くと思います。もしくは、契約直後にログインした状態のページにリダイレクトされます。いずれかの方法でログインします。

Elementorのアカウントページ

プランのところに「DOWNLOAD PLUGIN」というボタンがありますので、それをクリックします。

Elementor Proのプラグインをアップロードする

次にWordPressに移動してプラグインのアップロードです。WordPressにログインして、プラグインの「新規追加」に移動し、「プラグインのアップロード」ボタンをクリックします。すると、ファイルがアップロードできるようになるので、パソコン上からダウンロードしたZipファイルを選択して、アップロードしてください。Zipファイルは、解凍せず、そのままアップロードします。そして、「今すぐインストール」したら、「有効化」まで終わらせます。

Elementorでライセンスを有効化する

次に、Elementorの「Licence」に移動し、プラグインを使えるように、Elementorのアカウントと連携していきます。「Connect&Activate」ボタンをクリックすると、

Elementorでアカウントを連携する

この画面が表示されるので、「ACTIVATE」ボタンをクリックして、連携します。チェックボックスに関しては、使用状況をElementorの方にデータとして転送するかどうかです。今後のプラグインの改善につなげるのに協力してくれないかということなので、チェックを入れても入れなくてもどちらでもOKです。

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

Astra

次、ステップの4ですね。ステップの4では『Astra』っていうWordPressのテーマのインストールをしていきます。

Elementorを使う際は、 Elementorと相性の良いテーマを使うことをお勧めします。というのもElementorは結構相性の良い悪いが激しいっていうのがありますので、Elementorと相性の良いテーマをインストールしていきます。

今回使っていくのは『Astra』というテーマです。

Elementor Proでホームページを作成するのに適したWordPressテーマ

もちろん他にもいろんなテーマあります。「OceanWP」とか「Hello Theme」などがあります。Hello Themeに関しては、Elementorが公式に配布している無料のテーマです。僕個人的にはAstraが好きというか、いつも使用しているので、今回もAstraを使っていきます。

まず、外観の「テーマ」に移動してきてください。そして「新規追加」ボタンをクリックします。そして検索窓で『Astra』というふうに検索をかけてみてください。Astraですね。左に表示されるのでこれをインストールして有効化していきます。
これでAstraが使えるようになりました。

Step5. Astraの子テーマをインストールする

次、ステップ5ではAstraの子テーマをインストールしていきます。子テーマっていうくらいなので親テーマもあるんですけど、親テーマは先ほどインストールしていただいたAstraのテーマです。基本的にはステップ4でご紹介したAstraのテーマだけでも十分サイトが構築できるんですけど、Astraの子テーマも一緒にインストールしておくことでこれからもしかしたらコードを追加してサイトにオリジナル性、オリジナリティを持たせたいっていう場合があると思うんですね。その場合は親テーマではなくて子テーマの方でデザインを変更していったほうが後々いいので、今回はその子テーマのインストールというのもやっていきたいと思います。この子テーマは、特別なサイトがありますので概要欄の方からチェックして、そのサイトに移動してください。そしたらこの 「Child Theme Name」というところで名前を付けます。これ日本語でもOKなんですけど念のため僕は英語で入力しておきます。名前の入力が終わりましたら「Generate」してください。そうすると子テーマがダウンロードできます。ダウンロードできましたらWordPressに移動して前回と同様に外観の「テーマ」にいきます。そして「新規追加」ですね。今回は検索をするのではなくてテーマをアップロードしていきます。そして「ファイルを選択」ですね。今『Astra Child Theme』をダウンロードしましたのでこのZIPファイルをアップロードしてきます。これ解凍せずにZIPファイルのままアップロードしていきます。はい、前回親テーマをインストールした状態になっていますのでそのまま有効化してしまいます。はい、これでOKですね。ということで子テーマが無事インストールすることができました。

Step6. Astraテーマをカスタマイズする

次、ステップの6はAstraのテーマのカスタマイズをやっていきます。そのやり方は外観の「カスタマイズ」に移動します。デフォルトだとリンクが青で表示されていると思います。このヘッダーの部分はちょっと以前僕が作成したものなので気にしないでいただきたいんですけど、こういったリンクとかボタンとかですね。今ボタンは表示されてないんですが、デフォルトのままになっていますのでその変更方法をご紹介していきます。まず「全般」に移動します。「全般」を開いて、「色」っていうところですね。「色」で「基本色」を開いて、「テーマカラー」こちらでご自身の企業のブランドカラーがありましたらそれを入力してみてください。16進数のカラーコードも入力できるようになっていますので、こんな感じで入力をしてみてください。それからリンクの色も変更していきます。今濃い青だったんですけど、薄い水色に変更されましたね。こんな感じで切り替えることができます。それからボタンについてなんですけど、ボタンはもう一度この「全般」のところに戻って、「ボタン」に移動します。そして「色」ですね。この「背景色」っていうのがメインの色になります。ここで同じように色を変更します。このように設定するとボタンの色が水色に切り替わりますね。その他の「枠線」とか、もし必要があればですけど設定してください。この「枠線」っていうのは縁ですね。ボーダーのところになるんですけどその太さを調節したりとか色も設定することができますので、必要があればこの枠線も設定してみてください。

Step7. Elementor Proでトップページを作成する

Divi トップページ scaled

ステップ7では、サイトの一番最初に表示するトップページを作成していきます。上の画像は、僕が簡単にパパッと作成したものです。所々デフォルトの文章になっていますが、ページ作成の大まかな流れをご紹介していきます。これは、Elementorで用意されているテンプレートを活用し、作成しました。非常に綺麗なテンプレートがたくさん用意されているので、画像を変更したり、テキストを変更するだけで簡単にかっこいいページが作れます。

トップページを新規追加する

それでは、実際にページを作成していきましょう。今回はトップページになりますので、一般的な「投稿」ではなくて「固定ページ」で作成していきます。まず、「新規追加」ボタンをクリックし、ページに名前を付け、「Elementorで編集」というボタンをクリックします。

テンプレートを選択する

Elementorの編集画面に移動したら、テンプレートをインストールします。フォルダーのアイコンをクリックし、好きなテンプレートを選択しましょう。どれを選んでいただいても全然構いません。Elementorの無料版を使用している方は、使えるテンプレートが限られていますが、Elementor Proなら全てのテンプレートが使用できますので、サイトの雰囲気に合ったものを選んで頂ければと思います。「挿入」というボタンをクリックして、キャンバスに反映させます。

Elementor全幅

追加できたら、ページの基本設定をしていきます。左下のギアのアイコンをクリックして、「設定」に移動します。最初は、「デフォルト」というキャンバスになっているので、「デフォルト」ではなくて「Elementor全幅」に切り替えます。「Elementorキャンパス」だと、ヘッダーやフッターが非表示になってしまいます。ホームページの場合は、ヘッダーもフッターも残しておいた方が良いと思いますので、「Elementorキャンパス」ではなく「Elementor全幅」がおすすめです。

セクションの背景画像を変更する

あとは、文字を変更したり画像を変更していきます。じゃあ、一番上からご紹介していきます。それほど詳しくやるほどでもありませんが、セクションの6つの点をクリックして、セクションというのを変更してきます。セクションというのは一番大きい箱だと思ってください。そこにテキストとか入っていますが、そのテキストを入れるための箱のことです。これを開いて、背景をちょっと青っぽくなった画像に変更していきます。その変更の仕方は「スタイル」に切り替え、画像を変更します。デフォルトで挿入されている画像をクリックして、変更したい画像を選び、「メディアを挿入」します。

セクション背景のオーバーレイカラーを調節する

さらに、若干暗くするためには、「背景オーバーレイ」を設定します。「背景オーバーレイ」で「色」が設定されていて、それを切り替えることによって色を変更することができます。あとは、透明度の設定です。つまみ、もしくは数値を調節することで、オーバーレイの色の透明度を調節することができます。

Elementorで見出しのテキストを変更する

テキストの変更の仕方は、ウィジェットという、それぞれの要素を左クリックすると、左に編集画面が表示されますので、そちらから文字を変更します。「HTMLタグ」は、Hタグと言われるものです。SEOでも重要なものなので、適切なものを設定するようにしましょう。トップに表示している見出しは、基本的には「H1」でOKだと思います。

見出しのサイズを調節する

その他の設定は、「スタイル」に移動すると「スタイル」で「書体」を開くと文字の大きさ等を調整することができます。

テキストを変更する

「見出し」ウィジェットの下に表示されているのが、「テキストエディター」ウィジェットというものです。ここで、会社の簡単な説明を記入してみると良いのかなと思います。

カウンターウィジェットの変更

次は「カウンター」ウィジェットっていうのが入っています。カウントアップする感じ数字を表示することができます。例えば、携わったプロジェクトの数とかクライアント数、業務提携企業数、顧客満足度みたいな感じのタイトルを付けます。今回は、4つのカラムになっていて、4つとも全てカウンターウィジェットが使用されていますので、それぞれ同じ手順で設定してみてください。

不必要なカラムを削除する

必要ないカラムがありましたら、ウィジェットの灰色のところを右クリックします。そして削除すると、カラムを消すことができます。

メニューアンカーの設定

次のセクションのトップでは、「メニューアンカー」というウィジェットが追加されています。これは何かというと、ページ内ジャンプという使い方をします。IDが割り振られていて、これがリンクとして機能します。ページの左側にアイコンが浮かんでいますが、そこにIDが割り振られています。

アイコンリストでページ内ジャンプのリンクを追加する

これを開いてみると、アイコンリストウィジェットが使われていて、一番上のリストに「#info」というのテキストがリンクとして追加されています。これをクリックするとこんな感じで、このメニューアンカーの設定している部分までジャンプすることができようになっています。これがメニューアンカーの使い方です。ページ内ジャンプということで、同じページの別のセクションまでジャンプすることができます。

セクションのCSS IDでも同じページ内ジャンプの設定が可能

ただし、メニューアンカーを追加しなくてもセクションに割り振ることも可能です。どういう事かと言うと、「セクション」を開いて「高度な設定」に移動します。そして「CSS ID」に「info」というテキストを入力します。すると、メニューアンカーを削除してしまっても、テキストを設定したセクションまで移動することができます。

ボタンの文言を変更する

ボタンについては、編集画面で「テキスト」でボタンの文言を変更します。例えば「詳細を確認」とかです。ボタンの中にリンクを埋め込めるようになっていますので、こちらで別のページに飛ばしたり、先ほどみたいに『#info』と入力して、メニューアンカーのように使うこともできますので、用途に合わせて使い分けてみてください。同じページの別のセクションで、提供しているサービスや商品を羅列しているという場合は、ページ内ジャンプ、別にサービスページ・商品ページを用意しているなら、そのページのリンクを取得してきて、ボタンに入力しておきます。

コールトゥーアクションウィジェットの文言を変更する

右の部分に関しては、「コールトゥアクション」というウィジェットが4つ追加されています。基本的には、使い方はテキストエディターとかと同じですが、「コンテンツ」の「タイトル」で、太字の部分を入力して、サービスの内容とかをその下で設定します。

フリップボックスウィジェットの文言を変更する

次のセクションでは、先ほど同様にメニューアンカーや見出しが入っているので、適切な文言に変更しておきましょう。メインでご説明していくのは、「フリップボックス」というウィジェットです。ここでは提携企業の紹介が行われています。この設定は、先ほどのコールトゥアクションと大体同じで、「タイトル」のところにその企業の名前、そして企業の説明をその下に入力してみてください。あとは、途中にも設定が必要な項目がありますが、同じウィジェットが使われているので飛ばしてしまいます。

Testimonial Carouselウィジェットのコンテンツを変更する

レビューのセクションまでスクロールしてみてください。ここでは、「Testimonial Carousel」というウィジェットが使われていて、スライドショー形式でお客さんのレビューが表示できるようになっています。この使い方は、「スライド」を開いて「コンテンツ」というところでお客さんのレビュー本文やお客さんの名前、肩書きを入力します。デフォルトで、3つのスライドが表示されていますが、新しく追加したい場合は「+項目を追加」をクリックすると、新しいスライドが追加されます。もし、デザインが全く同じものを作りたいという場合は、そのスライドの書類アイコンをクリックすれば、全く同じものが複製されます。

ポストウィジェットのパディングを調節する

最後の「Case Studies」というところですが、これは事例として記事を紹介しています。全く同じような構成にしたい場合は、別途、事例を紹介した記事を作成しておきましょう。そして、ここに追加されている「ポスト」ウィジェットを開いて、「スタイル」に移動します。「Box」で「パディング」の数値を上げると、それまで左に寄ってしまっていたテキスト等が中央に移動します。このパディングというのは、テキストとそれぞれの記事カードの外枠の隙間を調節する機能です。ということで、このような感じでページを編集してみてください。基本的には画像を変更したり、テキストを変更したりすれば簡単にページが作成できると思います。

トップページのURLを変更し公開する

トップページが完成したら、サイトのトップに表示する設定をしていきます。その前に、必ずページを公開してしまってください。Elementorの編集画面の左下で「公開」するか、ダッシュボードに戻ってURLスラッグの変更をした後に公開してもOKです。URLスラッグは、「top-page」みたいに英語で記入しておくことをおすすめします。

トップページをサイトのホームページに設定する

設定が終わったら、「ダッシュボード」の「表示設定」に移動し、「最新の投稿」ではなく「固定ページ」に切り替えて「ホームページ」を作成した「トップページ」に切り替えます。そして変更保存してください。そうすると、作成したトップページがサイトのトップで表示されるようになります。

Step8. 企業概要ページ/プロフィールページを作成する

Divi 企業概要ページ scaled

次、ステップ8では企業概要ページ、プロフィールページを作成していきます。トップページと同じように、テンプレートを使って作成していきます。僕がサンプルで作ったのは上の画像ような感じです。テキストの変更など、前述した部分は省き、まだご紹介していない部分を中心にご紹介していきます。トップページ同様に、「固定ページ」で「新規作成」、そして「Elementorで編集」ボタンをクリックして、デザインを作成していきます。

Elementorのテンプレートで「about」と検索しテンプレートを選択する

テンプレートを選ぶ際は、プロフィールを表す、「about」と検索をかけてみてください。そうするとプロフィールページ、会社概要ページに適切なレイアウトが表示されます。あとは、トップページと外観が同じもを選びましょう。(もちろんその他のテンプレートでもOKですが。)あとは適宜、文章を変更してみてください。

プログレスバーの設定をする

すでに説明したウィジェットは飛ばしてしまうので、「プログレスバー」というウィジェットからご紹介していきます。「内容」の「タイトル」で「顧客満足度」などと入力します。あとは、「パーセント」でで、その顧客満足度がどれくらいになっているのかを設定します。もし、設定したパーセンテージを非表示にしたい場合は、設定を切り替えます。一番下の「内部テキスト」では、バーに表示するテキストを設定できます。

動画ウィジェットの設定をする

次のセクションでは、動画が埋め込まれています。どういった事業をやっているのかとか、クライアントのレビューなどの動画を載せてみると良いと思います。その動画ウィジェットの使い方は、まず「動画」の「ソース」で、YouTube、Vimeo、Dailymotionから1つを選択します。YouTubeを選んだ場合は、YouTubeのリンクを入力します。他に細かい設定ができたりしますが、基本的にはデフォルトのままでOKです。ただ、1つ確認しておきたいことがあります。自動再生をオンにする場合は、必ず「ミュート」にしておきましょう。ChromeやFirefox、Safariでも自動再生で音が出ると、再生が止まってしまうので、必ず、「ミュート」もオンにしておきます。

動画に画像オーバーレイを設定する方法

最後の「画像オーバーレイ」は、最初から動画を表示するのではなく、その上にオーバーレイ画像を設定することができる機能です。デフォルトで非表示になってるのでこれを表示にして画像を設定します。

切り替えウィジェットの設定をする

一番下のセクションにある「Questions And Answers」というところは、よくある質問です。ここでは、「切り替え」ウィジェットが使われています。このウィジェットは、タイトルをクリックすると、設定しておいた答えが表示されるというウィジェットです。その設定は、それぞれの項目を開いて、「タイトル」でよくある質問を記入し、その下で答えを記入します。例えば、「どのようにして申し込めば良いですか?」という質問に対して、その手順を教えたり。

切り替えウィジェットのアイコンを変更する方法

あとは、開く・閉じるのアイコンも設定できます。Elementorにはたくさんのアイコンが用意されていますので、好きなアイコンを持ってきてみてください。基本的には矢印関係のアイコンを使用すると思いますので、「Arrow」と検索をかけて、好きなデザインを選ぶと良いと思います。

コールトゥーアクションウィジェットを削除する

その下では、デフォルトだと「コールトゥアクション」ウィジェットが追加されていますが、これをレビューに変更してみたいと思います。まず、ウィジェットを右クリックして削除します。

推薦文ウィジェットを追加する

そして、この中に「一般」の中にある「推薦文」ウィジェットを追加します。そして、「内容」でレビュー本文、それと「名前」と「タイトル」で肩書きを設定します。その変更が終わったら、「スタイル」に移動して、名前の色をテーマカラーに変更してみると良いと思います。

推薦文ウィジェットのコンテンツを左に寄せる

それから、「内容」のセクションで「配置」を左に寄せます。最後に、デフォルトで追加されていたコールトゥアクションと外観を寄せていきたいので、左にボーダーを追加したり、シャドウを追加していきたいと思います。

推薦文ウィジェットにボックスシャドウを追加する

浮かび上がるように見せたいので、「高度な設定」に移動して、「枠線」で、「ボックスシャドウ」にチェックを入れます。デフォルトだと、シャドウがちょっと濃いので、色のつまみを調節して、色の濃さを変更することをおすすめします。

推薦文ウィジェットにボーダーを追加する

次に、ボーダーを追加します。「ボーダータイプ」で「直線」を選択し、「幅」で「値をまとめてリンク」を解除します。そしたら、左だけ、数値を上げていきます。5くらいでちょうど良いと思います。あと色を、テーマカラー等に変更しましょう。

推薦文ウィジェットのパディングを調節する

最後に、文章や画像が左に寄り過ぎてしまっているので、「高度な設定」の「パディング」で隙間を調節していきます。今回はまとめてしまってOKです。数値は、15から20くらいに設定するとちょうど良いはずです。あとは、ウィジェットを右クリックして複製し、レビューの数だけ追加します。

Step9. Elementor Proでお問い合わせページを作成する

Divi お問い合わせページ scaled

ステップの9では、お問い合わせページを作成していきます。お問い合わせページは、お問い合わせフォームが一番重要なので、そこを中心にご紹介していきたいと思います。いつものように、「固定ページ」の「新規追加」に移動して、「タイトル」を入力し、「Elementorで編集」していきます。

Googleマップウィジェットを追加する Elementorでお問い合わせページ専用のテンプレートを選択する

今回もテンプレートを使用していきますが、「Contact」と検索をかけ、トップページ、企業概要ページと同じデザインのテンプレートを選びましょう。あとは、テキスト関係のウィジェットで、適宜文章を変更してみてください。

お問い合わせフォームのラベルを変更する

今回のメインお問い合わせフォームなので、「フォーム」ウィジェットの設定をご紹介していきます。フォームを開いていると、デフォルトで『Full Name』、『Email』、『Phone』、『Subject』、『Tell Us More』という5つのセクションが追加されています。それぞれ開いて「Placeholder」で、日本語に変更しておきましょう。「Required」に関しては、記入必須にするということになります。なので、「Send」ボタンを押してフォームを提出する際に、「Required」にチェックを入れた項目を記入していなければ、メッセージが表示され、提出することができなくなります。それから「カラム幅」で、パーセンテージを変更すると、それぞれのフォームの横幅を調節することができます。セクションの状態にもよりますが、30%、33%、33%にすると3つ並べることができたりもします。

お問い合わせフォームの送信ボタンの文言を変更する