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

ページビルダー『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ドル となっています。

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

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

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

Amazon Kindle 電子書籍

sanmarie*comに掲載していた【「親 死んでほしい」「親 殺したい」で検索する人が多いので】の電子書籍です。心理学者・河合隼雄の名著『家族関係を考える』で紹介された『内面的な親殺し』と、父親殺しを描いたギリシャ悲劇『オイディプス』の物語をベースに、なぜ「親 死ね」「親 殺したい」といった感情が芽生えるのか、乗り越えるには何が必要か、分かりやすく解説しています。
作品詳細と冒頭部の無料サンプルはこちら。https://novella.one/oya-book

ライティングカテゴリの最新記事

Top