【プラグイン】ドラッグ&ドロップの操作だけでWEBサイトを作るElementor Website Builderを使ってみよう

author
21412

バナーの存在を知ったのは2年前。 好きな食べ物はメロンとスイカです。

私は、Wixを使ってサイトを作ったことが何度かあります。

Wixに慣れていると、WordPressが難しく感じることがよくあります。

見かねた会社の人が、Wixのようにドラッグ&ドロップでサイト制作ができる「Elementor」というプラグインがあることを教えてくださいました。

Elementorのテンプレート機能を使うと、1からページを作る必要がありません。

もうすでに完成されたデザインに要素を当てはめていくだけでサイトを作ることができます。

テンプレートには無料版と有料版があります。

 

 

 

【Elementorと相性のいい無料テーマ】

Elementorと相性のいい無料テーマがあるとのことで紹介します。

無料テーマ

⇒Hello Elementor

⇒Astra

⇒Ocean WP

私は、Elementorと相性がよくないテーマを使ったら途中で動かなくなりました。困りました。

相性は大事だと思いました。

 

 

 

【プラグインを追加する】

ダッシュボード≫プラグイン≫「新規追加」をクリックします。

プラグインを新規追加

 

キーワードに「Elementor」と入力し、検索します。

「今すぐインストール」をクリックします。

今すぐインストール

 

「有効化」をクリックします。

有効化

 

 

 

【Elementorを起動する】

ダッシュボード≫「固定ページ」または「投稿」のページを開き、「新規追加」ボタンをクリックします。

固定ページ新規追加

 

「Elementorで編集」ボタンをクリックします。

Elementorで編集

 

左側にサイドバーがあるこのような画面に切り替わります。

Elementorサイドバー

 

 

 

【Elementorを使って編集する】

「+」ボタン(新しいセクションの追加)をクリックし、カラム数を決めます。

左側サイドバーから使う要素をカラム内にドラッグ&ドロップします。

「Pro」の表記があるものは有料です。

セクションの追加、要素の選択

 

フォント、文字色、線の幅やレイアウト、画像の変更などは左側サイドバーから自由に設定することができます。

見出しを編集

 

テンプレートを使うことも可能です。

「テンプレートの追加」ボタンをクリックします。

テンプレートの追加

 

ライブラリの中の「ブロック」「固定ページ」タブから好きなテンプレートを選んで追加します。

「Pro」の表記があるものは有料です。

サイト全体のテーマは変わりません。

ブロックテンプレート

 

テンプレートを使った場合も、画像や文字、レイアウトなどを左側サイドバーから自由に変更することができます。

テンプレートを編集

 

要素のドラッグ&ドロップ、またはテンプレートや要素の組み合わせを繰り返し行うと1つのページができあがります。

Elementorのテンプレートを使ってページを作ると、自分では思いつかないようなデザインができるので助かりました。

Elementorを使うと線の太さが思い通りにできるので嬉しくなりました。

でも、ヘッダーとフッターはどうやって作るのかな?と思いました。

先ほどのElementorの無料テンプレートにあるのかと思ったらありませんでした。

ヘッダーとフッターを作るには、

有料のElementor Proを利用する方法と無料のプラグインを追加する方法などがあるとのことでした。

私にも分かりやすく説明してくださるサイトがあったので紹介します。

 

 

 

〇無料版Elementorでヘッダーを作成する方法【カスタマイズ方法も解説する】

https://zumilog.org/elementor-free-build_header/

 

〇【超簡単】Elementorでフッターを作成する方法を教えます

https://nocode-navi.com/elementor/774/

 

私は、分かりやすく説明できる人を尊敬します。

自分は誰かに説明する時にしどろもどろになるので、上手に説明できる人はすごいなと思います。

 

 

 

関連記事

WordPressに投稿した記事をTwitterに反映させる方法

WordPressに投稿した記事をTwitterに反映させる方法

カラムブロックとボタンブロックを利用してリンクボタンを設置する方法

カラムブロックとボタンブロックを利用してリンクボタンを設置する方法

Color Palette Generatorを使ってみよう

Color Palette Generatorを使ってみよう

プラグインを追加して「ご依頼の流れ」ページを作る方法

プラグインを追加して「ご依頼の流れ」ページを作る方法

プラグインを使用してスライドショーを作る方法

プラグインを使用して新着情報を表示する方法