Elementorのインストールが終わりましたので、さっそく機能を試しながら記事を投稿してみましょう。なお、Elementorは新規投稿と新規固定ページのどちらでも使えます。

仮投稿した記事で試す

 まだここもお試しの続きです。先ほどWordPressをインストールした際に作成したテストページを使って機能を試してみましょう。

① 投稿済みのページの一覧を見る

 そろそろWordPressのダッシュボードへのアクセスには慣れてきた頃でしょうか。ダッシュボードの「投稿」から投稿一覧を表示し、先ほど試しに投稿した記事の「編集」をクリックします。

② Elementorで編集をクリック

 すると、新しく「Elementorで編集」ボタンが出現していますのでクリックします。なお、パーマリンクなども直したいところですが、それは後ほどサイトを本格的に作ってみようという段階になってからご説明します。まずは、Elementorの機能をお試しください。

③ どんな機能があるか見てみよう

 左側にいろいろな機能のボタン(ウィジェット)があります。細かい説明よりも使ってみることが一番ですのでいろいろと試してみてください。ざっとどんなものがあるか見てみましょう。

 ただ、全く分からない中で試すというのも難しいと思いますので、いくつかの機能を例に基本的な使い方を紹介します。

④ 新しいセクションの追加

 セクションとはコンテンツのまとまりです。セクションの中に見出しや記事、画像などを配置していきますので、先ずは「新しいセクションの追加」をクリック。コンテンツを作成する枠をつくります。その際、基本的なレイアウト(段組み)を選びます。

 なお、この段組みのことをカラムと言います。カラムは後からでも追加や削除が可能ですし、幅の割合もマウスでドラッグすると変更できます。レスポンシブデザインになっているので、パソコンでは2カラムでも、スマホでみると1カラムになるようになっています。とても便利な機能ですが、私はほとんどの場合一番左の1カラムを選んでいます。クリックすると下のような枠が出ます。

 この枠がセクションのエリアです。左のウィジェットにある機能をこの枠の中にドラッグ&ドロップします。

⑤ 見出しを試してみる

 例えば(T)見出しをドラッグ&ドロップしてみます。

 このようにホームページに挿入されます。ウィジェットエリアで様々な編集が可能です。コンテンツタブで内容を編集、HTMLタグで見出しの大きさも変更できます。ちなみに、H2>H3と数字が大きくなるにしたがって、より下の階層とみなしますので、記事を構造的に考えて見出しを付けていきます。SEO対策では大切な考え方でもありますので、詳しくは別の記事で説明します。

 さらに、スタイルタブで文字の色を白にして、詳細タブでボーダー対応や、囲み、ボックスシャドウなどを変更すると、こんな感じのおしゃれな見出しに変更ができます。

⑥ 画像を入れてみます。

 先ほどの見出しの下に、ウィジェットの中から「画像」をドラッグ&ドロップします。そして、ウィジェットエリアの画像の選択をクリックし、ホームページに載せたい画像を選択します。画像は自分のパソコンからアップロードします。

 メディアの挿入画面では、ファイルを選択するか、その画面にファイルをドロップするとサーバーにアップロードされます。今回はフリー素材の写真ACよりダウンロードしたカメラを持った女性を入れてみます。

 代替テキストや画像のサイズなどいろいろ細かいことはありますが、先ずは機能の試しなので「投稿に挿入」をして画像を反映させましょう。

 このような感じになります。画像にリンクをつけることや、画像が表示されるときや、マウスを乗せたときにアニメーション効果をつけることも簡単です。

 詳細でボーダーを編集してみます。例えば、ボーダータイプ1本線、幅を9pxで色を白にします。ボックスシャドウを「はい」にして、少し影をつけるとまるで白い縁で囲んだかのように表示することができます。CSSの知識がなくてもこれだけで結構おしゃれにできますよね。

⑦ 文章を入力する

 見出し、画像と来たら次は文章ですね。文章もウィジェットから挿入します。テキストエディターをドラッグ&ドロップしてください。

 これはテキストブロックです。このテキストを変更するには編集ボタンをクリックしてください。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

 と書かれていますので、そこを削除して文章を入力します。このテキストエディタは、WordPressのエディタですので、もっと使いやすいようにプラグイン等でカスタマイズすることが可能です。この後の記事で紹介します。

 最後は、左下のウィジェットエリア最下部にある「保存」を忘れずにクリックします。どんな感じに仕上がったのか×をクリックし、固定ページを表示を選べば公開している画面を見ることができます。