記事内に広告を含みます

【WordPressプラグイン】ElementorでWebサイトを作ろう【ノーコード】

ElementorでWebサイトをつくろう

WordPressのWebサイトをノーコードで作りたいカメ

簡単にノーコードでWordPressのWebサイトを作りたいんだ
WordPressプラグインのElementor(エレメンター)を使うと比較的簡単にWebサイトを作ることができるよ♪

学び続けるウサギ

WordPressのWebサイトをノーコードで作りたいカメ

そうなの?

作ってみます〜♪

「ノーコードでWordPressサイトを作りたい」

と思われる方に役立つ記事になります。

今回はノーコード(ローコード)でWebサイトを作ることができるプラグインのElementor(エレメンター・Elementor Website Builder)を使用して、WordPress(ワードプレス)でWebサイトを作る方法についてご紹介していきたいと思います。

まだWordPressの開設などをしていない方は、コノハウィングでのWordPressブログの始め方の記事の見ることで簡単にレンタルサーバー契約・ドメイン登録・WordPressインストールをセットでサクッと作ることができますので参考にしてみて下さい。

ConoHa WINGでWordPressを開設 【ConoHa WING】コノハウィングでのWordPressブログの始め方

ElementorでWebサイト制作

WordPressプラグインのElementor Website Builder

WordPressプラグインのElementor Website Builderを使うことで簡単にWordPressにてWebサイトを作ることができます。

WordPressプラグインのElementor Website BuilderWordPressテーマとの相性もありますので相性が良くストレスなく作ることができるテーマを書いておきます。

Elementorと相性が良いWordPressテーマ

・Hello(Hello Elementor)

・Astra

・OceanWP

Hello elementor

Hello Elementor」はElementor社が運営してるので当たり前ですが相性抜群ですね。

AstraとOceanWP

他には「Astra」や「OceanWP」なども相性が良いです。

それぞれ海外のテーマなのでおなじみのcocoon(コクーン)みたいに日本語で情報収集しにくいのがデメリットですがドンマイです。

もちろん相性の良いテーマ以外でも作成することはできますが、上記のWordPressテーマ使うことで極力不具合などが起きずに済みますね。

Elementor社のHello Elementorが無難で安心です。

Elementorをインストール

プラグインのElementor Website Builderをインストールしたときにアカウント・サイト名など登録しても良いですが、SKIPしても無料版で始めることができます。

WordPressにプラグインのElementor(Elementor Website Builder)をインストールすることで、固定ページ投稿ページにてElementorで編集できるようになります。

・固定ページ・・トップページなどの独立した単体ページ

・投稿ページ・・時系列で一覧表示・カテゴリー分けできるページ(ブログ記事など)

Elementor → 設定でどちらかだけに適用させることも可能です。

Elementorで編集ボタン

各々のページを見てみるとElementorで編集というボタンなどが出てますね。

Elementorで編集をクリックするとElementor専用の編集画面に遷移することができます。

Elementorの使い方1

キャンバスを白紙の状態から作りたい場合は、左下の設定をクリックします。

Elementorの使い方2

一番下までスクロールして固定ページレイアウトをクリックしElementor Canvasを選択することで白紙から作成することができます。

Elementorの使い方3

Elementorの白紙の画面

白紙画面なのでプレビューをクリックしても何も表示されません。

イチからデザインを始めることができるのが良いですね。

基本的に無料でできる機能

elementor無料版で主にできること

見出し・画像・テキストなどのシンプルな機能でしたら無料でもできることが多いですね。

elementorの使い方(ドラッグ&ドロップ)

要素のタブのレイアウト基本一般などからそれぞれWebページに表示させたいもの(ウィジェット)を右側の点線の中にグイッとドラッグ&ドロップして使うことができます。

さらに便利な機能やカスタマイズは有料のElementor Proを使うことでできるようになります。

レイアウトの基本的な組み方

2つのレイアウト

レイアウトはコンテナグリッドがあるのでどちらかで組んでいきます。

  • コンテナ・・FlexBox
  • グリット・・Grid

コンテナはFlex BoxでグリッドはGridとして使っていきます。

それぞれ構造を選択することができます。

FlexboxとGrid

htmlを学習したことがある方には、馴染み深いものですよね。

FlexboxやGridを使い行数・列数など自由にレイアウトすることができます。

Elementor Proの料金

Elementorの料金表

画像出展:elementor.com

Elementorは無料で使えますが、Elementor Proを使うことで便利なウィジェットなどを使ったりとできることが増えます。

詳しくは公式サイトのElementor Pro の料金表を参考にしてみてください。

英語でちょっと見にくいのでGoogle翻訳を使い日本語にして参考にさせてもらいます。

Elementorの料金表 (日本語訳Ver.)

画像出展:elementor.com

少し日本語が微妙な箇所がありますが見やすくなりました。

プラン名 ESSENTIAL ADVANCED EXPERT AGENCY
料金(年) 約9,000円 約15,000円 約30,000円 約60,000円

料金は年契約のサブスクになります。

プランによって使用できるサイト数やウィジェット数などが変わってきます。

ポップアップ作成CSSでカスタマイズしたい場合は、ADVANCED〜が良いですね。

ESSENTIALはサイト、ADVANCEDはサイト、EXPERTは25サイト、AGENCYは1,000サイトまで使用できます。

Elementor Proでチェックしてみましょう。

Elementorのメリット・デメリット

 

メリット
  • ドラッグ&ドロップで直感的にWebサイトを作成
  • レスポンシブ対応

 

デメリット
  • 無料版だと機能に制限がある
  • テーマとの相性がある
  • やや重い

メリット

ドラッグ&ドロップで直感的にWebサイトを作成

elementorはドラッグ&ドロップでWebページを作れる

ドラッグ&ドロップで作成できるのでコーディングしなくても良いのがラクです。

「2列にしてここに画像で見出しと文章をセットして〜」などと直感的に操作できます。

階層を作りたい場合は、コンテナの中にコンテナを入れるとやりやすいですね。

枠の中に枠を入れてさらに枠を入れる構造みたいな感じです。

たまに配送を頼むとダンボールの中にダンボールが入ってることがあるのですが、そんな感じです笑

ノーコードで割と自由にWordPressのWebサイトを作ることができて便利ですね。

レスポンシブ対応

elementorのレスポンシブ切り替え

レスポンシブ対応しているので、左下のレスポンシブモードのアイコンをクリックすると上部にバーが現れ、PC / Tablet / SPとそれぞれのアイコンをクリック毎に切り替えられます。

自動的にレスポンシブ化してくれるのであとは自分で微調整してあげます。

PC・Tablet・SPだけ表示・非表示させることなどもできるのでハンバーガーメニューなども作ることができます。

デメリット

無料版だと機能に制限がある

動的タグやポップアップなどは無料版だと基本的には作成できませんので自分でカスタマイズしたり、プラグインなどで代用する必要があります。

プラグインとテーマとの相性もありますので、テーマによっては不具合が出る可能性もあります。

有料版のElementor Proを使うことで安心してカンタンに作成することができるようになります。

やや重い

Webサイトを作っている時などに「やや重いな..」と感じました。

ノーコードツールは重い印象でWixの方が重かったですが、Elementorも少し重いなと感じております。

まあノーコードだしWeb上で作成できて無料で便利なのでドンマイです。

エラーが出るときがある

テーマとの相性もありますが、相性が良いとされてないテーマで作成中に「変更をプレビュー」をクリックするとエラーがでる場合がありましたね。

大体マージンパディングをいじろうとするとエラーが出ることがあったので、こまめに変更をプレビューして動く確認した方が絶望せずに安心です。

なるべくHello Elementorなど相性の良いWordPressテーマを使うと良いですね。

まとめ:Elementorでラクラク・ホームページ制作!

今回はElementorを使用してWordPressのWebサイトを作る方法についてご紹介してきました。

ノーコード(ローコード)で自由にWordPressのWebサイトを作ることができるのが良いですね。

最初は英語多めだしクセがあるかもと思いますが、慣れれば比較的簡単に作ることができますのでぜひ使ってみてください。

Elementor Proを使えばさらに機能拡張もできます。

Elementorに興味がある方に少しでも参考になりましたら幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です