【Elementorの基本操作】最初に覚えておくべき8つの必須知識

Elementorでサイトを作っていきたいけど、基本的な操作方法がわからない。。

Elementorはできることが多くて高機能なんですけど、基本的な操作方法が分かってないと普通に難しいんですよね。

どうも、こんにちは。
YUTAROU(@yutarou_sakai)です。

僕はElementorを使ってWeb制作の副業をしています。

はじめてElementorを使ったときに、基本的な操作方法がわからずけっこうな遠回りをしちゃった経験があるので、読者の方が同じ経験をしないために解説します。

本記事ではスクショを使って解説していますが、YouTubeで動画にもしていますのでお好きな方でご覧ください。

また、Elementorを使ってノーコードWeb制作で月5万円稼ぐロードマップも公開しています。

興味がありましたら、こちらも合わせてご覧ください。

あわせて読みたい
ノーコードWeb制作で月5万円稼ぐロードマップ【副業初心者OK】 Web制作で副業を始めたいけどどうしたらいいんだろう?情報がたくさんありあすぎてどうやって始めればいいのか分からない…。Web制作で月5万円稼ぐまでの方法を誰か教え...
クリックできる目次

【Eementorの基本操作】最初に覚えておくべき8つの必須知識

次の8つの知識を身につけることで、Elementorの基本操作は完璧です。

  • セクションの追加と削除
  • カラムの追加と削除
  • セクションとカラムの修正方法
  • ウィジェットの追加と削除
  • 作成中のページのプレビュー方法
  • 作成中のページのプレビュー方法【スマホビュー】
  • 公開&下書き保存の方法
  • タイトル設定&パーマリンク設定

ちょっと多いですね。

でも、ひとつひとつはそれほど重くないので、サクサク解説していきます。

あ、Elementorのインストールと初期設定が済んでなかったら、こちらの記事を参考に準備お願いします。

あわせて読みたい
【5分でできる】Elementorのインストールと初期設定 Elementorのインストールと初期設定について、スクショをたくさん使って解説します。5分で準備完了です。

セクションの追加と削除

まずはElementorを構成している「セクション」の追加と削除の方法です。

Elementorでは「セクション」を積み上げるようにページを作っていきます。

セクションの追加と削除:セクションを追加

Elementorの編集画面に入り、「+」ボタンを押してください。

セクションの追加と削除:セクションの構造を選択する

「構造を選択」でセクションとカラムの構造例が一覧表示されます。

今回は、もっともシンプルな左上の構造を選択してみましょう。

セクションの追加と削除:セクションの追加が完了

一番上に青枠の「セクション」が追加されていれば完了です。

練習であと2つぐらいセクションを追加してみてください。

セクションの追加と削除:追加したセクションを削除する

追加セクションにカーソルを合わせると、セクションの上部に3つのメニューが表示されます。

その中の一番右「✕」ボタンをクリックしてください。

セクションの追加と削除:セクションの削除が完了

すると、セクションが1つ削除されます。

これで、セクションの追加と削除が完了しました。

カラムの追加と削除

次にセクションの中に必ず1つ以上入っている「カラム」の追加と削除をしてみましょう。

カラムの追加と削除:セクション内のカラムのメニューボタン

セクションを1つ用意しカーソルを合わせると、セクション内の枠に「黒のボックス」がチラチラ表示されます。

カラムの追加と削除:カラムのメニューを表示

この「黒のボックス」で右クリックをすると、カラムのメニューが表示されます。

メニューの「新しいカラムの追加」をクリックすると

カラムの追加と削除:カラムの追加が完了

セクションの中に2つ目のカラムが追加されました。

このようにして、セクションの中にカラムを増やしてページ構成のデザインを行います。

カラムの追加と削除:カラムの削除を行う

カラムのメニューを表示させて、メニュー一番下の「削除」をクリックすると

カラムの追加と削除:カラムの削除が完了

このようにカラムが1つ削除されました。

カラムはセクションの中に必ず1つ以上ありますので、上記スクショの状態からさらにカラムを削除することはできません。

これで、カラムの追加と削除が完了です。

セクションとカラムの修正方法

セクションとカラムの構造は、「カラム追加」以外の方法でも変更可能です。

セクションとカラムの修正方法:複数カラムの構造を選択

セクションの追加時に「構造を選択」から、カラムの数とカラムの割合を選択することができます。

たとえば、今回は三分割された構造を選択してみましょう。

セクションとカラムの修正方法:カラムで三分割されたセクション構造を選択

すると、最初からセクションの中にカラムが3つある状態で生成されました。

セクションとカラムの修正方法:カラムの割合を変更

さらに、セクションのメニューを表示させ、メニュー下の「構造」を選択すると、セクション内にあるカラムの割合を変更することができます。

スクショでは、もともと「33:33:33」だった割合を「16:66:16」に変更しています。

セクションとカラムの修正方法:カラムの割合を自在に調整

また、カラムとカラムの間にカーソルを合わせてドラッグすると、決まった割合だけでなく好きな割合にダイナミックに調整することが可能です。

これで、セクションとカラムを自由自在に修正できるようになりました。

ウィジェットの追加と削除

次に、カラムの中にElementorが用意している「ウィジェット」を追加してみましょう。

まずは、Elementorメニューの右上「9つの点々ボタン」をクリックして、ウィジェットの一覧を表示させます。

ウィジェットの追加と削除:カラムにウィジェットを追加

適当なウィジェットをドラッグ・アンド・ドロップでカラムの中までひっぱってきてください。

すると、追加可能なら青いエリアが表示されるので、そこで離してあげましょう。

ウィジェットの追加と削除:カラムの追加が完了

すると、カラムの中にウィジェットが追加されました。

練習で、適当なウィジェットをどんどん追加してみてください。

ウィジェットの追加と削除:ウィジェットの簡易メニューを表示

次は、ウィジェットの削除をしてみます。

追加したウィジェットにカーソルを合わせると、「ペンマーク」のボタンが表示されます。

そこで右クリックをすると、ウィジェットの簡易メニューが表示されます。

簡易メニューの一番下に「削除」ボタンがありますので、問答無用でクリックしてください。

ウィジェットの追加と削除:ウィジェットの削除

すると、ウィジェットがきれいサッパリ削除されました。

これでウィジェットの追加と削除が完了です。

作成中のページのプレビュー方法

次に、作成中のページをプレビューしてみる方法を解説します。

プレビューをすると、セクション追加用のエリアが非表示になり、実際にページを公開したときのデザインを確認することができます。

作成中のページのプレビュー方法:簡易プレビュー方法

もっとも簡単なプレビューは、Elementorメニューの横にはみ出している「<」マークをクリックする方法です。

作成中のページのプレビュー方法:簡易プレビューを表示

すると、Elementorのメニューが閉じられ、「ウィジェットをここにドラッグ」というエリアも非表示になりました。

これがサクッとプレビューできる方法です。

作成中のページのプレビュー方法:2つ目の方法

もう一つ、プレビューを見る方法があります。

Elementorメニューの下に「目」のマークで、「変更をプレビュー」とポップアップが出るボタンがあります。

このボタンをクリックすると

作成中のページのプレビュー方法:別ページを開いてプレビューを表示

別ページが開いて、プレビューが表示されます。

たまにですが、この方法でしかプレビューできない機能がありますので、こちらのプレビュー方法も覚えておいてください。

作成中のページのプレビュー方法【スマホビュー】

実は、スマホ表示のプレビューを見ることもできます。

作成中のページのプレビュー方法【スマホビュー】:レスポンシブモードのボタンをクリック

Elementorメニューの下にスマホとタブレットのマークで、「レスポンシブモード」とポップアップが出るボタンがあります。

このボタンをクリックしてください。

作成中のページのプレビュー方法【スマホビュー】:スマホ表示

すると、Elementorの編集画面の上にメニューが追加され、「PC・タブレット・スマホ」の表示を選択することができます。

今回は「スマホ」を選択して、Elementorメニューの「<」ボタンをクリックし、簡易プレビューを見てみましょう。

作成中のページのプレビュー方法【スマホビュー】:スマホ表示で簡易プレビュー

スマホ表示で簡易プレビューを見ることができました。

作成中のページのプレビュー方法【スマホビュー】:変更をプレビューをクリック

次に、「変更をプレビュー」ボタンをクリックしてみましょう。

作成中のページのプレビュー方法【スマホビュー】:プレビュー画面で検証をクリック

まずは、通常のプレビューが表示されますので、適当なところで右クリックをして「検証」をクリック。

作成中のページのプレビュー方法【スマホビュー】:ディベロッパーツールを起動

ディベロッパーツールが起動しますので、「スマホ・タブレット」ボタンを探してクリック。

作成中のページのプレビュー方法【スマホビュー】:ディベロッパーツールでスマホ表示

これで、プレビュー画面でスマホ表示を確認することができます。

作成中のページのプレビュー方法【スマホビュー】:色々なデバイスサイズで確認

こちらの方法だと、デバイス表示を細かく変更できますので、しっかりと確認することができます。

公開&下書き保存の方法

次に、変更内容を下書き保存して、公開までやってみましょう。

公開&下書き保存の方法:設定を保存ボタンをクリック

Elementorメニュー下の緑のボタン「▲」マークをクリック。

表示されたメニューから「下書き保存」をクリック。

これで変更内容の「下書き保存」が完了です。

公開&下書き保存の方法:公開ボタンをクリック

次に、「公開」をクリックしてみましょう。

公開&下書き保存の方法:公開が完了

おめでとうございます。「固定ページ」が公開されました。」と表示されれば、あなたのページは公開完了です。

タイトル設定&パーマリンク設定

次に、公開したページのタイトルとパーマリンク(ページのURL)を変更・設定してみましょう。

今回はページ公開後に行いましたが、できればページ公開前に行う方が良いです。

タイトル設定&パーマリンク設定:歯車マークをクリック

Elementorメニュー下の「歯車」マークをクリック。

タイトル設定&パーマリンク設定:固定ページ設定でタイトルを変更

「固定ページ設定」が表示されますので、「タイトル」を任意のものに変更しましょう。

タイトル設定&パーマリンク設定:ハンバーガーボタンをクリック

次に、Elementorメニューの「ハンバーガーボタン」をクリック。

タイトル設定&パーマリンク設定:ハンバーガーメニューをクリック

「ダッシュボードに戻る」をクリック。

タイトル設定&パーマリンク設定:WordPress画面でパーマリンクを変更

WordPress画面に戻ってこれますので、右メニューの「URLスラッグ」でページ固有のURLを設定してあげましょう。

基本的には「ページの内容を端的に表した英単語」がベターです。

これでElementorの基礎知識は完璧

この記事のまとめ
  • セクションの追加と削除
  • カラムの追加と削除
  • セクションとカラムの修正方法
  • ウィジェットの追加と削除
  • 作成中のページのプレビュー方法
  • 作成中のページのプレビュー方法【スマホビュー】
  • 公開&下書き保存の方法
  • タイトル設定&パーマリンク設定

お疲れさまでした。

けっこうモリモリの内容でしたね。

ですが、ここを抑えておくことで今後Elementorを使うのが非常にスムーズになり、長期的に見て大きな差が開いてきます。

何度も見返して、着実にスキルを身につけていきましょう。

さいごまでご覧いただきありがとうございます!
定期的にブログの新着記事情報を受け取りませんか?

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

YUTAROUのアバター YUTAROU 副業Webマーケター

マーケティングとコードと筋トレが好きです。
都内のITベンチャー企業でデータ分析やABテストをしてバリバリのマーケターとして働きながら、副業でブログやWeb制作メンターをしている24歳です。このブログではビジネスマンのための、副業方法やビジネススキルを発信しています。

詳細なプロフィールはこちらの記事にまとめています
YUTAROUのプロフィール

クリックできる目次
閉じる