考える人普段ブログ運営してるサイト内に、1ページだけ販売用のページを作りたい！
全くデザインが違うページって作れるのかな？
今回は、既存のWordPressサイト内に、デザインの違うページを作る方法を解説していきます！
こんな方におすすめです。
- ブログに販売用のランディングページを1つ作りたい
- 特定の固定ページのみレイアウトを変えたい
- 1ページだけヘッダーやフッターのデザインを変えたい
結論、こういった場合は、ページビルダープラグインを使うのが一番便利です。
その中でも私のおすすめは「Elementor（エレメンター）」という無料プラグイン！
あおい例えば、当ブログはSwellというテーマで運営していますが、プロフィールページだけは「Elementor」で作っています。
私のプロフィールページはこちら
こんな感じで、ページ全体のデザイン・レイアウトが、他のページとは全く異なったページが作れます。
しかも！！Elementorは、直感的な操作でサイトが作れる初心者に優しいツールです。
さらに、高品質なテンプレートが使えるので、センスがなくても、かなりデザイン性の高いページが作れますよ。
それでは、さっそくみていきましょう。
あおいこの記事を書いた人
あおい（＠aoidesign）
2018年からWebデザインを学習。
副業時代を経て現在はフリーのLP専門デザイナーとして活動。
LP制作実績は200件以上。
メンターや講師の仕事も行う。
情報商材やコンテンツ販売用のページなら…
もし情報商材やセミナー、メルマガ登録、コンテンツ販売用のLPを作りたいなら、Elementor以外のプラグインもおすすめです。
Elementorは海外製ですが、上記2つは“商品販売”に特化した日本製のプラグイン（有料）です。
成果にこだわったページが作りたい方は、ぜひチェックしてみてださい。
Elementorとは？何ができるのか？
Elementor（エレメンター）は、直感的な操作でWebサイトが作れる、無料のWordPress用プラグインです。
通常、デザインの違うページを作ろうと思ったら、次のような方法があります。
- 新しいPHPテンプレートを作ってサーバーにアップする
- 既存のCSSをカスタマイズする
- Multiple Themesを使って新しいテーマを導入する
あおいこのような方法は、Web制作の初心者にはハードルが高いです…
下手にいじると、既存デザインが壊れるリスクもあります。
そこで便利なのが、Elementorです！
このプラグインを使えば、テーマの変更や追加の必要はなく、プラグインを一つ入れるだけで、新しいデザインのページを作れます。
Elementorは、ドラッグ＆ドロップの操作だけで直感的にサイトが作れるため、HTMLやコーディングの知識がなくても大丈夫です。
あおい海外製のプラグインですが、日本語にも対応しているので、日本のユーザーもかなり多いです！
機能はすべて無料で使えるの？【無料・有料プラン】
Elementorには、2つの種類があります。
- Elementor（無料版）
- Elementor Pro（有料版）
あおい結論から言うと、無料版でも十分に高品質なサイトが作れます！
少しだけ違いを説明しておくと、無料版と有料版では以下の点で差があります。
- テンプレートの数
- ウィジェットの数
- テーマビルダーの有無など…
まずは無料版で始めてみて、もし「やっぱり有料版の機能が欲しいな」と思った時に考えればいいと思います。
【全体像を確認】どんな風にページを作るのか？
Elementorの具体的な使い方に入る前に、まず通常のWordPressでページを作る流れと、Elementorを使った場合の違いを説明しますね。
普通、WordPressでページを作るときは、投稿や固定ページの「新規作成」からスタートしますよね。
その手順は、Elementorを使う場合でも同じです。
ただ、Elementorをインストールしていると、ページ編集画面の上にElementorで編集というボタンが表示されます↓
Elementorでページを作る場合は、ここをクリックしてページを作成していきます。
Elementorで編集をクリックすると、このような編集ページに移行します↓
これが、Elementorのページ編集画面です。
そして、Elementorでは「ウィジェット」と呼ばれるパーツを使って、ページを組み立てていきます。
このパーツは、例えば「見出しパーツ」や「画像パーツ」「ボタンパーツ」みたいなものですね。
↓こんな感じで、左側からパーツを選び、ドラッグ＆ドロップでページへ追加します。
パーツを追加したら、あとは色やサイズの変更をして、自分好みにデザインしていけばOK。
もう一つ便利なのが、テンプレートを使って作る方法です！
Elementorには、「Kits（キット）」と呼ばれるテンプレートがたくさん用意されています。
あおいテンプレを使えば、最初から整ったデザインを土台にして、簡単にデザイン性の高いページを作れますよ！
Elementorのプラグインを使ってページを作成する方法
ここからは本題であるElementorを使ったページの作り方を5ステップで解説します。
ちなみに、どんなテーマを使っている方でも大丈夫です！Elementorはプラグインなので、テーマの変更などは必要ないですよ。
あおい今回は「Elementorのテンプレート」を使った作り方をご紹介しますね！
- elementorのインストール
- 新規固定ページを作成
- テンプレートの選択
- ページの編集
- 公開
ステップ①elementorのインストール
まず、最初にelementorのプラグインをインストールしましょう。
WordPressの管理画面にて、左側メニューの「プラグイン」をクリックして、「新規プラグイン追加」を選びます。
画面右上にある検索窓に「Elementor」と入力して検索します。
Elementorが表示されたら、「今すぐインストール」をクリックします。
インストールが終わったら「有効化」というボタンが表示されるので、それをクリックすれば完了です。
Elementorの有効化が済んだら、次に「Envato Elements」というプラグインもインストールしてください。
Elementorと同じやり方でインストールし、有効化までおこなっておきましょう。
ステップ②新規固定ページを作成
次に、新規で固定ページを作成します。
WordPressの管理画面にて、ダッシュボードの「固定ページ」の中にある「新規固定ページ追加」をクリックします。
編集画面が開いたら、次に「タイトル」と「テンプレート」を設定して、右上の「下書き保存」をクリックします。
- タイトル：お好きなタイトル名でOKです
- テンプレート：Elementor Canvas（Elementorキャンバス）を選択
テンプレートの種類の違い
- デフォルトテンプレート：今お使いのテーマのテンプレート
- Elementor キャンバス：LP制作に向いている（サイドバーやヘッダー、フッター、タイトルがない、まっさらのテンプレート）
- Elementor 全幅：サイドバーなし、ヘッダー、フッター、タイトルはありのテンプレート
ステップ③テンプレートの選択
ここからは、ページの編集に入っていきます！
まず、先ほど作った固定ページ内にあるElementorで編集ボタンをクリックします。
前述したように、Elementorでは「ウィジェット」と呼ばれるパーツを使って、ページを組み立てていきます。
ウィジェットは、こちらから表示ができます↓
以下の画像のような感じで、左側からパーツを選び、ドラッグ＆ドロップでページへ追加します。
パーツを追加したら、左側に3つの編集項目が出てくるので、ここで細かい編集を行います。
- コンテンツ：テキストの入力や画像の入れ替えなど
- スタイル：文字の色、サイズ、フォントやその他の装飾
- 高度な設定：要素間の距離の調整やモーション設定など
あおい実際に自分でいじってみて、「ここの値を変えると、こんな風に変更されるんだ！」と分かれば、習得が早いです。
編集方法の詳細は「ステップ④ページの編集」も参考にしてください。
さて、ここからは、一からウィジェットで作るのではなく、「Elementorテンプレート」を使ってページを作る方法をご紹介します。
テンプレートの選び方
まずは、画面に表示されているアイコンの中から、一番右の緑のアイコン「Envato Elements」をクリックします。
次に、「Free Kits」というタブをクリックします。
すると、たくさんのテンプレートが出てくるので、ここから好きなものを選びましょう。
右側に「カテゴリー」タブがあるので、その中から自分の商品・サービスに合ったデザインを選ぶといいですね。
テンプレートを選んだら、「Install Kits」という緑のボタンをクリックすると、インストールが始まります。
あおい私は今回、「Startup Business」というタイトルのテンプレを選びました。
インストールが終わった後で「Installed Kits」タブの中身を確認すると、先ほどインストールしたテンプレートが追加されているのが分かります。
そしたら、次に「View Installed Kit」 をクリックしましょう。
すると、たくさんページが表示されます。
例えば、ホームのページ、特徴のページ、お問い合わせページなどいろんなページがあるので、ここから好きなものを選んでください。
ランディングページを作る場合は、「Home」という名前のページをまずは選んでみましょう。
選んだら、緑のボタン「Insert Template」をクリックします。
すると、先ほどの編集ページに自分が選んだテンプレートが追加されました！
あおいこの状態から、いよいよ自分用にページを編集していきます。
ステップ④ページの編集
ここからは、具体的なページの編集方法を解説していきますね。
自分でできそうな方は、どんどん手を動かしてページを作っていってください。
あおい実際に自分でいじってみて、「ここの値を変えると、こんな風に変更されるんだ！」と分かれば、習得が早いです。
目次を用意したので、操作方法が分からないものがあれば、解説を探して読んでみてください。
1：テキストの内容を変更する
テキストを変更する時は、まずそのテキストの上をクリックします。
すると、左に編集項目が出てくるので「コンテンツ」というタブ内の「タイトル」に入っている文字を入れ替えます。
2：テキストの文字色やサイズ、フォントを変更する
文字の色やフォントを変えたい時は、左にあるタブを「スタイル」に切り替えます。
その中に各項目があるので、編集したいものをクリックして変更します。
※文字のフォントやサイズを変えたい場合は、「タイポグラフィ」から可能です。
フォントの枠をクリックすると、選択メニューが出てきます。
日本語のフォントを利用したい場合は、検索窓に「JP」と打ち込みましょう。
あおいこの中でおすすなのが、Note Sans JP！
日本の多くのWebサイトで使用されている有名なGoogleフォントです。
3：文字を好きな位置で改行する
文字を任意の位置で改行したい場合は、その位置に<br>と打ち込んでください。
HTMLを知っている方なら見たことがあるかも知れません。ブレイクのことで、これを入力すると、その位置で改行されます。
4：いらない要素を削除する
いらない要素を削除したい場合は、いくつか方法があります。
一つ目が、右クリックからの削除です。まず、削除したい要素の上をクリックします。
すると、右上にピンク色の「テキストエディターを編集」マークが出てくるので、この位置でマウスを右クリックします。
すると、メニューが出てくるので、この中から一番下「削除」をクリックすると削除されます。
↓もう一つが、画面中央に出てくる「内部セクションを編集」の中にある「×」マークをクリックして削除する方法です。
この方法だと、大きなセクションのカタマリが丸ごと削除されます。
5：写真やイラストなど画像を変更する
画像を変更したい場合は、テキスト同様に、まずその画像の上でクリックをします。
↓背景画像の場合は、「セクションを編集」の真ん中にある6つの黒ポチマークをクリックしてください。
すると、画面左に編集項目が出てくるので「スタイル」のタブに切り替えて、「画像」という箇所から、画像の入れ替えを行ってください。
あおい画像アップロードの際の注意点は「①画像は圧縮する」にて詳しく解説しています。
6：文字と文字の間隔を広げる・縮める
文字を入れた時に、やたらと文字間隔が詰まっていたり、逆に開き過ぎていることがあります。そんな時は「マージン」を調整しましょう！
まず調整したい文字の上をクリックします。
そして、画面左から「高度な設定」タブを選択し、その中の「マージン」の値を調整してください。
今回は、「当サービスの3つの特徴〜」の上に隙間を作りたかったので、「上」の値を3くらいに変更しました。
7：新しいブロック要素を追加する
テンプレートにはない要素を新しく追加したい場合は、「セクションを追加」から簡単に追加できます。
まず、追加したい位置の周辺にカーソルを持っていき、＋ボタン（セクションを追加）をクリックします。
次に、画面左上の「＋」ボタンをクリックします。すると、ウィジェットと呼ばれるパーツがたくさん出現します。
この中から追加したいパーツを選んで、ドラッグしながら先ほど追加した「セクション」部分に持っていきます。
追加した後は、同じように編集をしていけばオッケーです。
8：フッターなどの要素を追加する
先ほど7で解説したのは、「テキスト」や「画像」など個別の小さい要素を追加する方法でした。
それ以外に、フッターやヘッダー、ギャラリー、FAQなど、まとまった大きな要素を追加することも可能です。
今回は、フッターを追加するやり方を解説します。
まずは、フッターを入れたい位置で「セクションを追加」します。
テンプレートを追加した時と同様に、一番右の緑のアイコンをクリックしてください。
次に、一番右にある「Free Blocks」タブをクリックします。
今回はその中から「Footer」をクリックします。
すると、すでにデザインが出来上がったフッターのテンプレが出てくるので、この中から好きなものを選びましょう。
選んだら、緑のマーク「Insert Template」を押してインストールします。
すると、このようにフッターがページ内に追加されました↓
9：間違った操作を一個前に戻す
編集をする中で、「間違ってしまったから一個前に戻りたい」といったことがあると思います。
通常なら【Ctrlキー ＋ Z】で戻ることができますが、Elementorでは、なぜかうまくいかないことが多いです。
そんな時は、「履歴」機能を使いましょう。
まず、画面左上の「＋」マークの中にある「履歴」をクリックします。
すると、過去の編集内容一覧が表示されるので、一個前に戻りたいなら上から2番目をクリックすればオッケーです。
10：下書き保存して、現在のページを確認する
Elementorでは自動保存がされないので、編集中は適宜「保存」するようにしましょう。
保存は、画面右上の下矢印の中にある「下書き保存」をクリックすればオッケーです。
また、「固定ページを表示」をクリックすることで、今の時点でページ全体がどんな感じになっているか確認することができます。
11：【重要】タブレットとスマホ表示を編集する
パソコン表示用のページが完成した後で、次にやっておくべきなのが、レスポンシブデザインです。
特に、今の時代はスマホでWebサイトを見るユーザーが多いです。
なので、スマホで見たときに違和感のない文字サイズやレイアウトを作ることが大切です。
↓Elementorでは、画面上のデバイスマークを切り替えることで、レスポンシブの編集ができます。
例えば、一番右のスマホに切り替えてみると、文字が異様に大きかったりすると思います。
これを見やすいサイズに変更しましょう。変更方法は、これまでのやり方と同じです。
ステップ⑤公開
最後のステップが「公開」です！
公開はとても簡単で、画面右上の「公開」ボタンをクリックすればオッケーです。
あおいお疲れ様でした！
初めて使う時は、編集に苦戦するかもしれませんが、慣れてくるとサクサク操作できるようになりますよ。
たくさん手を動かして、Elementorに慣れていきましょう！
まとめ：Elementorを使えばデザインの違うページが簡単に作れる！
Elementorを使えば、今のテーマに縛られず、自由にデザインやレイアウトを変えたページを簡単に作ることができます。
例えば、「ブログに商品販売用のページを追加したい」とか、「プロフィールだけはちょっとおしゃれにしたい」といったニーズにも、Elementorならばっちり応えてくれます。
Elementorを活用して、さらに魅力的で充実したWordPressサイトを作っていきましょう！
情報商材やコンテンツ販売用のページなら…
もし情報商材やセミナー、メルマガ登録、コンテンツ販売用のLPを作りたいなら、Elementor以外のプラグインもおすすめです。
Elementorは海外製ですが、上記2つは“商品販売”に特化した日本製のプラグイン（有料）です。
成果にこだわったページが作りたい方は、ぜひチェックしてみてださい。
