今回はどんなツールがあるのか、全体的に紹介していきます。
この記事の目次
Elementorとは
WordPressでサイトを作るとき、テキストを入力したり写真を挿入したりします。
そういった作業をより効率的に行えるようにした編集ツールは一般にページビルダーと呼ばれています。
いちばん有名なのは、WordPressに標準で付属しているグーテンベルク(Gutenberg)ですね。
Elementorもそういったページビルダーの一種です。
テーマとページビルダーの違いは？
WordPressを使い始めると、まずテーマを選ぶという作業があります。
代表的なのは”TwentyTwenty"とか”TwentyTwenty-One”というように、毎年リリースされる公式テーマですね。
でも、テーマを選んだだけではページを自由にデザインできるわけではありません。
テーマは基本的な配色やメニューの表示方法といったサイト全体のデザインを決めるもので、各ページの内容（コンテンツ）の作成にはほとんど関係ないからです。
見出しの大きさや色、本文の文字サイズといったサイト全体で統一したい部分はテーマによって決まりますが、それだけだと、どのページをみても同じような印象になってしまいます。
そこでページに応じて内容（コンテンツ）を作成するときにページビルダーを使います。
ページビルダーを使うことで、画像の位置を細かく調整したり、見出しのサイズをいろいろ変えてレイアウトにメリハリを付けるといったことが簡単にできるようになります。
おかげで、HTMLやCSSのような技術にあまり詳しくない人でも、デザインセンスを活かしたサイトを作れるようになりました。
ページビルダーを使うのに必要な知識は？
特に便利なのが、記事の一覧表示や画像ギャラリーの作成といったパーツ（要素）を並べるだけでページを組立てられることです。
昔だったら、HTMLで作ったテンプレートにPHPのスクリプトをどっからか探してきて設置しなければならなかったので、いろんな知識がないとできなかったのですが、今ではかなり簡単になりました。
特にHTMLの知識はほとんど必要ありません。
せいぜい見出しタグh1～h6の使い方を覚えておくくらいです。
また、スクリプトの知識も不要です。WordPressのプラグインの使い方がわかればOK.
ただし、CSSについてはある程度勉強が必要です。
パーツを配置したときの、マージンや余白の指定などはCSSの知識があればすぐに使いこなせるようになります。
Elementorのセットアップ
ここからはElementorに絞って説明します。
ほかのページビルダーについては経験がないのでご容赦ください。
Elementorは、WordPressのプラグインです。
一般的な他のプラグイン同様に、管理画面からインストールして有効化します。
Elementorのプラグインをインストール
Elementorに機能を追加するアドオンもいろいろありますが、複雑すぎて混乱するだけなので最初はやめておきましょう。
これですぐにElementorを使い始められますが、いちおう基本設定を見ておきましょう。
インストール済みプラグインからElementorの設定を開きます。
なおリストの中にElementor Proというのがありますが、これはElementorの有料版です。
有料版を購入するとダウンロード可能で、Elementorにさらに機能を追加します。
Pro版もプラグインで配布される
設定を開くと「一般」タブのなかに”投稿タイプ"という設定があります。
初期設定ではふたつともチェックが入っています。
固定ページを使ってWebサイトを作っていくので、”固定ページ”のほうは必ずオンにします。
ブログ記事を書くときにもElementorを使うなら、"投稿”のほうもオンにしておきましょう。
固定ページとブログ記事の両方で使える
そのほかはあまり気にする必要ありませんが「連携」タブの中には、Google reCAPTCHAやFacebook SDK、Adobe Fonts(TypeKit)などのサービスを使うときの設定を登録できます。
reCAPTCHAやFacebookとの連携情報を保存する
固定ページをElementorで編集する
では固定ページを開いてみましょう。
Elementorを使っているページ／使っていないページ
次の図では、すでに固定ページをたくさん作っていますが、よく見るとページ名の横にElementorと書かれているものとそうでないものがあります。
Elementorの文字があるのは、すでにElementorで作業したページ。
文字がないのは、単に固定ページを作っただけでまだElementorを使っていないページです。
Elementorで編集したページのサイン
単純な文字の羅列で複雑なレイアウトが必要ないページであれば、あえてElementorを使う必要はなく、WordPress標準のグーテンベルクだけで済ませることもできます。
"編集”と"Elementorで編集"
まだElementorで編集したことのないページを開くと、ふつうにグーテンベルクでの編集になります。
作成した固定ページを編集する
Elementorでの編集に切り替える
編集画面のいちばん上に［Elementorで編集］というボタンがあり、これをクリックするとElementorの変種画面になります。
左側に並んでいるのがElementorで使える要素（パーツ）で、これを並べてページをレイアウトしていきます。
Elementorの編集画面
いちどElementorで編集すると、固定ページ一覧の中に［Elementorで編集］というリンクが表示されるようになります。
コンテンツを制作するときは、このリンクで直接Elementor画面を開きましょう。
Elementorを直接呼び出せるようになる
［編集］というリンクも残っていますが、こちらをクリックするとページの基本的な編集画面になります。
パーマネントリンクのためのスラッグやアイキャッチ画像、コメントの許可、テーマに関する設定などはこちらでしか編集できません。
ページ情報などは従来の編集画面で指定する
Elementorで使える"要素”
Elementorにはいろんなパーツがあり、ドラッグ＆ドロップでページ上に配置していきます。
今回は最後にパーツの概要を紹介します。
パーツは基本、プロ版、一般、個別、WordPressの5つにグループ分けされています。
”基本”のパーツ
見出しやテキストブロック、画像などの基本的なパーツがあります。
「内部セクション」は、ページ上を細かいブロックに分けるパーツで、ブロックの組み合わせでレイアウトを組立てるのに使います。
"プロ版"のパーツ
有料版で利用可能なパーツです。
Elementor Proプラグインをインストールしていないと使えません。
その場合、各パーツの右上に錠のアイコンが表示されています。
投稿の一覧や目次、価格リスト、画像ギャラリー、画像のスライダーなど、凝ったレイアウトが簡単にできるパーツが用意されています。
マウスでポイントするとボックスがひっくり返るアニメーションや、見出しのアニメーションなどができるのも特徴です。
"一般"のパーツ
"基本"よりはちょっと複雑なレイアウトのためのパーツです。
"基本"のパーツを組み合わせて作ることもできそうですが、それでは手間が掛かってしまうのでこちらを使った方が便利でしょう。
画像カルーセルやベーシックギャラリーなど、”プロ版”と同じような機能もありますが、プロ版に比べると機能が制限されているようです。
"サイト"のパーツ
サイトのロゴやタイトル、ナビゲーションメニューなど、どちらかというとテーマに含まれるようなパーツです。
つまり、気に入ったテーマがないときはElementorで作ってしまえるということですね。
まず固定ページ上でデザインしておいて、それをテンプレート化すれば後から作ったいろんなページで簡単に使い回せる、ということでしょう。
逆にいえば、ほとんどのテーマではこれらのパーツは使わなくてもいいということです。
”個別”のパーツ
コンテンツの要約やコメント、目次、ページネーションなどがあります。
"WordPress"のパーツ
記事一覧やカテゴリリスト、カレンダー、メタ情報、タグクラウドなど、WordPressの主要なパーツが揃っています。
「カスタムHTML」のように、ほかのカテゴリのパーツと重複しているようなものも見受けられるので、たぶんWordPress本体の機能をそのまま表示しているのだと思われます。
以上、Elementorの概要についての紹介でした。
個々のパーツの使い方については、そのつど紹介していきたいと思います。