ページビルダー『Elementor Page Builder』でお洒落なランディングページを作ろう

Elementor Page Builderを使えば、お洒落なページが作れますが、ページ自体は非常に重くなります。Pagespeed Insightで『赤レベル』。サイト全体に適用するのはSEO的に不利だと思いますので、あくまでランディングページに留めるのが賢明かと思います。
プラグインの設定で、Elementor Page Builderを使用する投稿タイプを選択できるので、「固定ページのみ」のように限定した方がいいです。
追記:2018/04/23
『Elementor Page Builder』に対する関心も高まっているようですが、非常に見映えのいいページが作成できる反面、記事のソースはグダグダになります。投稿画面のテキストエディタで記事の内容を確認すれば、判別不能な(?)タグの羅列に唖然とするかも。

そういうのが全く気にならない方はいいですが、ページスピードや管理のしやすさを重視するなら、『Elementor Page Builder』はおすすめしません。

用途でいえば、企業のランディングページ(ワンカラム)向きでしょうか。
全体のページ数がわずかで、簡単な製品情報や会社概要、コンタクトフォームなどを表示できれば良しとするタイプです。

個人ページで、見映えのいいトップページやインデックスページを作るなら、Column Shortcodesのようなプラグインを使って、カラムで画像やテキストをまとめた方がいいと思います。

WordPressもどんどん投稿を追加する分には便利ですが、見栄えのいいトップページやプロフィール、記事一覧などを作ろうと思ったら、自分でCSSを組まないといけないし、テーマ・テンプレートによっては上手く反映されないこともあり、なかなか難しいですよね。

そんな場合、ページビルダー(page builder)のプラグインを使うと、ドロップ&ドラッグで簡単にカラムやテキストエリア、アイコン付きリストなどを作成することができます。

ページビルダーのプラグインにも様々な種類があって、どれがいいのか迷うところですが、私の一押しは『Elementor Page Builder』。

https://srd.wordpress.org/plugins/elementor/

テストサイトでいろいろ試しましたが、これが一番使い勝手がよく、ショートコードの埋め込みなどもできるので、サイトの一覧性を高めたい方におすすめです。無料版でもかなり手の込んだ事ができるので、センスのいい方ならプロ級のページに仕上がると思います。

Elementorの使い方

プラグインを有効化したら、『設定』で、Elementorを組み込みたい投稿タイプを選択。

テーマ・テンプレートのフォントカラーやフォント体を引き継ぎたい場合は、「Disable Global Colors」「Disable Grlobal Fonts」にチェックを入れます。あとは好みに合わせて設定します。

ページビルダー Elementor

設定が完了すると、投稿画面にこのようなボタンが現れるので『Elementor』で編集を選びます。

ページビルダー Elementor

操作画面に切り替わります。ヘッダーやフッターはそのままです。

ページビルダー Elementor

まず最初に『新しいセクションの追加』をクリックして、構造を選択します。

ページビルダー Elementor

2カラムを選択し、枠内にポインタを当てると、このような感じになります。
あとは、枠内に挿入したい部品をドラッグ&ドロップで埋め込むだけ。

Elementor ページビルダー

たとえば、ウェルカムメッセージを入れたい場合、「見出し」を選択し、コンテンツを記入して、フォントやマージンなど、細かい設定をするだけ。

ページビルダー Elementor

フォントもGoogle Fontから好きなものを選べます。

ページビルダー Elementor

マージンやパディングも調整すれば、自分の好みの場所に要素を落ち着けることができます。アニメーション効果も付けられますよ。

ページビルダー Elementor

画像付きテキストなら、こんな感じ。

ページビルダー Elementor

画像サイズやマージンなどを整えれば、見栄えよく収まります。画像にアニメーション効果を付けることもできます。

ページビルダー Elementor

カラムやセクションの削除やコピーをしたい場合は、クリックすれば、アイコンメニューが出てきます。あとは枠をドラッグして、新しいセクション内に配置します。

ページビルダー Elementor

次に切り替え(アコーディオン)タイプの記事インデックスを作成してみます。

『切り替え』をセクション(カラム)に挿入し、記事リストのショートコードを埋め込みます。(投稿画面でPHPが使える場合は、テンプレートタグでもOK)。プラグインは『Display Posts Shortcode』を使います。

ショートコードを埋め込んだ時点では、ちゃんと反映されませんが、いったん「保存」して、「固定ページで表示」すれば、動作が確認できます。基本的に、テキストエリアはWordPressの投稿画面と同じです。

ページビルダー Elementor

ページビルダー Elementor

固定ページではちゃんと記事リストが作成されています。

記事数が増えてきたら、カテゴリー別に表示すると解りやすいですよ。

ページビルダー Elementor

アイコンボックスを使えば、インフォメーションも一目で分かります。

ページビルダー Elementor

ページビルダー Elementor

無料版だと使える要素も限られますが、個人サイトなら、これだけ使えれば十分でしょう。
WordPressの標準ウィジェット、テーマ・テンプレートのウィジェットもOKです。

ページビルダー Elementor

ページビルダー Elementor

ページビルダー Elementor

作ったテンプレートはテンプレートライブラリーに保存することができます。万一、無くしても安心ですね。

ページビルダー Elementor

ページビルダー Elementor

PC、タブレット、モバイルでの見栄えもライブプレビューで確認することができます。

ページビルダー Elementor

ページビルダー Elementor

自分で洒落たページを作る自信がなければ、有料のテンプレートライブラリーからどうぞ。コンテンツを差し替えるだけなので、簡単です。

ページビルダー Elementor

https://elementor.com/pro/

気になるお値段は、1サイト=49ドル、3サイト=99ドル、無制限=199ドル となっています。

一年間のアップデートとサポートが可能。

いったんページを作ってしまえば、毎年アップデートする必要もないでしょうし、そこは用途に合わせてお選び下さい。

個人サイトなら無料版で十分だと思います。

QUOTE CARD

  • どんな高邁な理想も、言葉だけでは人は動かせない。 身をもって示して初めて、理想が理想としての意味をもつ。 その後、彼は死ぬまで父を忘れず、その生き様を指針にするわけだが、愛とは何かと問われたら、慈しむだけが全てではない。身をもって生き様を示す勇気も至上のものだろう。 誰でも犠牲は怖い。  自分だけ馬鹿正直をして、損したくない気持ちは皆同じだ。  だが、その結果、一番側で見ている子供はどうなるか、いわずもがなだろう。  言行の伴わない親を持つほど不幸なことはない。  たとえ現世で馬鹿正直と言われても、本物の勇気、本物の優しさ、本物の気高さを間近に見ることができた子供は幸いである。 どんな高邁な理想も、言葉だけでは人は動かせない。 身をもって示して初めて、理想が理想としての意味をもつ。...
  • 「創造的」というのは詩を書いたり、絵を描いたり、という意味ではありません。無の平原から意味のある何かを立ち上げることです。 より良く生きる為に、日々、考えること、実行すること、その全てが『創造』です。 どんなに小さくても、昨日よりは今日、今日よりは明日、少しずつでも歩みを進め、善きものを積み上げることを「創造的な生き方」と言います。 「創造的」というのは詩を書いたり、絵を描いたり、という意味ではありません。無の平原から意味のある何かを立ち上げることです。 より良く生きる為に、日々、考えること、実行すること、その全てが『創造』です。...
Morgenrood 曙光

Kindle Unlimited

宇宙文明の根幹を成すレアメタルをめぐる企業の攻防と人間の生き様を描いた本格的な海洋ロマン。専門用語は使わず、予備知識のない人でも分かりやすい内容に仕上がっています。無料PDFも配布中。Kindle Unlimited 読み放題の分冊もリリース。

この記事を書いた人

石田 朋子

文芸愛好家&サブカルチャー・ファン。主に70年代~90年代の作品に思い入れがあります。寺山修司の名言『詩を作るより、田を作れ(揶揄)』をモットーに、好きな作品を次代に伝えることを目標にしています。海外在住につき、現代日本とは相容れない所がありますがご容赦ください。
※ 現在、制作巣ごもり中につき、ほとんど更新していません。