ページビルダー『Elementor』でお洒落な固定ページを作ろう

2017年2月27日

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 ページビルダー テンプレート保存

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

Elementor ページビルダー 切り替え

Elementor ページビルダー 画面切り替え

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

Elementor ページビルダー テンプレート

https://elementor.com/pro/

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

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

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

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

You are here

WEB小説 > 小説サイトの構築 > ページビルダー『Elementor』でお洒落な固定ページを作ろう