ElementorはHTML・CSSのコーディングなしで使えるって本当?

ヨッチヨッチ

こんにちは。WordPressシステムマーケッターのヨッチです。
ストーリーを見る

Elementorは、ソースコードを使わなくてもページ作成できるプラグインです。
HTML・CSSの知識がなくても使えるのは、果たして本当なのでしょうか?

結論からお伝えすると、コードを使わずにページ作成は可能です。
それも、かなりハイクオリティなデザインに仕上がります。

では、なぜソースコードなしで使えるといえるのか?
その理由を、この記事で3つにまとめて紹介します。

「自分にも使えるかな?」と不安に思っていたら、一度チェックしてみませんか?

記事の内容を動画でまとめました!

ヨッチヨッチ

記事について、動画ですべてお話ししています。
補足も交えて解説しているので、気になる方はこちらもどうぞ。

【Elementor】HTML・CSSのコーディングなしで使える3つの理由

コードを見ないでエレメンターを使える理由は、この3つです。

  1. ドラッグ&ドロップでパーツを配置できる
  2. 「スタイル」からデザイン変更できる
  3. 「高度な設定」からオプションを変更できる

基本的な操作は、すべてウィジェットの設定で行えます。
実際にどんな設定ができるのか、1つずつ詳しく見ていきましょう。

【1】ドラッグ&ドロップでパーツを配置できる

エレメンターのウィジェットは、すべてドラッグ&ドロップで配置します。

「見出し」からウィジェットをドラッグ&ドロップ

ウィジェットを配置したら、内容を編集できます。
たとえば「見出し」であれば、こんな感じです。

タイトルをそのまま書く

タイトルをそのまま書くだけで、ページ内に見出しが表示されます。

ウィジェットごとの基本的な設定は、「コンテンツ」というタブにまとめられています。
なので、まずは「コンテンツ」から編集すると良いでしょう。

【2】「スタイル」からデザイン変更できる

配置したウィジェットのデザインは、「スタイル」タブから変更できます。

「スタイル」からデザイン変更できる

「スタイル」タブも、各ウィジェットごとに設定できる項目が異なります。
見出しの場合は、文字色・書体などを変更できます。

実際にスタイルを変更すると、こんな感じです。

「スタイル」変更後

文字色・書体・文字サイズを変更してみました。
どれもボックスから数値を入力するだけなので、直感的に設定できます。

【3】「高度な設定」からオプションを変更できる

さらに高度なオプションは、「高度な設定」から変更できます。

「高度な設定」からオプションを変更できる

マージン・パディングといった余白の設定から、アニメーションの設定まで可能です。
さらに、背景・枠線・絶対配置・相対配置など、かなり幅広くカスタマイズできます。

今回は、わかりやすいように「パディング」のみ変更してみました。

「高度な設定」変更後

見出しの周りに、指定した数値の余白が追加されています。
必要な項目を埋めるだけなので、コード入力なしで設定を変更できます。

ただ、CSSを知らない方にとっては「マージン」という単語もピンとこないのではないでしょうか?
なので、高度な設定に手を加えるときは、最低限の知識もあるとカスタマイズしやすくなります。

完ぺきに覚える必要はないので、軽くチェックしておくと良いかもしれません。

アマゾンでは、この書籍がベストセラーとなっています。
初心者向けの入門書なので、最初の1冊として持っておくと便利です。

【まとめ】HTML・CSSを書かずにページを編集できる

ここまで、なぜエレメンターはHTML・CSSのコーディングなしで使えるのか説明していきました。
その理由は、大きくまとめると3つです。

  1. ドラッグ&ドロップでパーツを配置できる
  2. 「スタイル」からデザイン変更できる
  3. 「高度な設定」からオプションを変更できる

入力や設定が必要なところは、テキストボックスから変更できます。
文字・数値を入力するだけでいいので、コードをまったく使わずにページ作成が可能です。

エレメンターは、ページビルダーの中でも特に使いやすくて評価も高いプラグインです。
急速に利用者を増やしているので、今から覚えておいて損はありません。

エレメンターを使いこなすと、こんなLP(ランディングページ)も作成できるようになります。

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます!
こうしてブログでお会いできたご縁に感謝しています。