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

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

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

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

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

ElementorでWebサイト制作

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

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

Elementorと相性が良いWordPressテーマ

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

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

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

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

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

Elementorをインストール

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Elementor Proの料金

画像出展:elementor.com

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

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

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

画像出展:elementor.com

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

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

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

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

ESSENTIALは１サイト、ADVANCEDは３サイト、EXPERTは２５サイト、AGENCYは１,０００サイトまで使用できます。

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

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

メリット

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

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

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

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

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

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

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

レスポンシブ対応

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

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

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

デメリット

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

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

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

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

やや重い

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

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

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

エラーが出るときがある

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

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

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

まとめ：Elementorでラクラク・ホームページ制作！

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

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

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

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

Elementor（エレメンター）に興味がある方に少しでも参考になりましたら幸いです。