• Elementorの使い方
  • 便利なページビルダーソフトelementorの使い方を詳しく紹介しています。

Eementor page builderで投稿・固定ページを新規追加・編集する方法

 Eementor page builderのインストールが終わりましたので、さっそく新しい記事を投稿してみましょう。なお、ElementorはWordPressの『投稿』(ブログのようにどんどん記事を追加するもの)と、『固定ページ』(プライバシーポリシーや沿革のように何度も見るもの)のどちらでも使えます。

Elementorの『編集画面』の開き方

 先ずは、ダッシュボードで投稿の新規追加をするか、既存の投稿にアクセスします。既存の投稿を編集する場合は「編集」をクリックします。

1、編集記事をダッシュボードから開く

 すると、新しく「Elementorで編集」ボタンが出現していますのでクリックします。

2、「Elementorで編集」をクリック

 既存の記事であっても、新規の記事であっても、「Elementorで編集」をクリックします。すると、Elementorでの編集画面になります。タイトルやアイキャッチ画像はダッシュボードで変更してもいいですし、後ほどElementorの編集画面でもできます。

『編集画面』の使い方① セクション

1. 新しいセクションの追加

 見出しやテキスト、画像などの要素を配置する場所がセクションです。セクションはコンテンツのある程度のまとまりと思っていて大丈夫です。そのまとまりの場所を追加します。

 画面中央の「+」のところをクリックします。また、直接左のウィジェットを、「ウィジェットをここにドラッグ」の枠の中にドラッグするだけでもセクションにコンテンツの追加することができます。

 すでにコンテンツ(セクション)を作成していて間に追加したい場合は、マウスカーソルをセクションに乗せると枠が表示され、「+」をクリックすればセクションを増やすことができます。

2. セクションの構造

 セクションを追加する際、下のような「構造」を選択できます。

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

▶ スポンサードリンク

 要素(ウィジェット)が見当たらないときは、筆記体のElementorの右側あたりの電話番号のボタンみたいなところをクリックすると、要素が選べるようになります。GLOBALはお金を払った人が使える高度な機能です。

『編集画面』の使い方② 見出し

1. 「見出し」を追加する

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

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

2. 「見出し」をオシャレにアレンジする

 さらに、スタイルタブで文字の色を白にして、詳細タブでボーダー対応や、囲み、ボックスシャドウなどを変更すると、こんな感じのおしゃれな見出しに変更ができます。ただ、毎回設定するのが手間なので、CSSファイルをアップロードして、簡単にできるようにしてしまいます。それはこの記事の後半で紹介しています。

『編集画面』の使い方③ 見出し

1. 「画像」を追加する

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

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

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

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

2. 「画像」の枠をオシャレにアレンジする

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

▶ スポンサードリンク

『編集画面』の使い方④ 文章の入力

1. 「テキスト」を追加する

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

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

と書かれていますので、そこを削除して文章を入力します。初めはウィジェットをCSSと同じように編集していましたが、バージョンアップしてこのエリアに直接入力できるようになりました。公開画面上に直接打ち込んでいるような感覚になりました。Wordpressユーザーにとっては、もはや革命ですし、ホームページビルダーなどでもここまでのことはできません。最強です。

 最後は、左下のウィジェットエリア最下部にある「更新」を忘れずにクリックします。どんな感じに仕上がったのか、目玉のアイコンをクリックしてプレビューを見るか、新しく更新したページにアクセスすれば公開している画面を見ることができます。

次の記事

 Elementorはスタイル(CSS)を読み込ませることが可能です。テーマ側で作成されているものだけではなく、自分で追加したものもクラス名を打ち込むだけで瞬時に反映させることができ、それを見ながら記事の作成もできます。まさに神プラグインです。

Elementorを使うと、詳細の「CSSクラス」にクラス名を入れるだけでデザインをおしゃれにすることができます。

関連記事一覧

  1. この記事へのコメントはありません。