更新日: 2022 / 04 / 19

Elementorの使い方 初心者入門ガイド

カテゴリー: topick

ElementorはWordpressを高機能なWebサイトビルダーにできる無料プラグインです。FigmaやAdobeXDで作ったデザインからコーディングすることなくWordpressサイトの構築が可能になります。

このページではElementorの使い方から実践的なカスタマイズ方法まで詳しく解説していきます。

Elementorのはじめ方

Elementorがはじめての方はこちら。Elementorの全体像やElementorを使うべき理由についてまとめています。

Elementorとは?メリットデメリットなどをまとめて解説!

ふつうにホームページを作ろうと思うと、HTMLやCSSでコーディングしたり、Wordpressのテーマをカスタマイズすることが多いです。この場合HTMLやPHPなどのプログラム言語を使う必要があり、…

  • 2022 / 02 / 04

Elementorを使ったホームページの作り方 超入門

Wordpressでホームページを作る方法は書籍やブログなどでたくさん公開されているのですでに知っている人もいると思います。でも実際作ってみると PHPやWordpressのテンプレートタグなど覚え…

  • 2022 / 02 / 15

Elementor対応のおすすめWordpressテーマまとめ

ElementorはプラグインとしてどんなWordpressテーマにもインストールできます。 Wordpressテーマの中にはElementorに最適化されているものがあり、Elementorで使え…

  • 2022 / 02 / 17

Elementorテンプレートのカスタマイズ方法

ホムペディアストア で公開しているようなElementor向けのテンプレートや、ElementorライブラリのテンプレートでWebサイトを作る際によく使うカスタマイズのポイントを紹介します。 よくあ…

  • 2022 / 03 / 11

Elementor使うなら絶対入れておきたい無料で使える拡張プラグインまとめ

Elementorをインストールするだけで、数多くのウィジェットやテンプレートを使用することができますが、それだけではイメージにぴったりのデザインを作れなかったり、足りない機能が出てくる場合がありま…

  • 2022 / 03 / 22

Elementorおすすめ国産テンプレートまとめ

ElementorはWordpressをノーコードのWebサイトビルダーに変身させることができる超便利なツール。HTMLやPHPなどの知識がなくても簡単にホームページを作成することができます。 とは…

  • 2022 / 04 / 08

Web制作でコスト削減したい人がElementorを使うべき5つの理由

Web制作の現場では予算も時間も人材も足りないことが多く、ホームページ作成やリニューアルを諦めたり、後回しにしたりするのはよくあるパターンです。 このような状況でとにかく低コストでWebサイトを作成…

  • 2022 / 04 / 15

Elementorの機能を解説

Elementorの無料版で使える機能やElementorの基本的な使い方について解説しています。とくに新しいバージョンで追加された「Container」ウィジェットはすごく便利な機能で、より複雑なレイアウトも簡単に作成できるようになります。

Elementorで共通のヘッダー、フッターを作る方法

Elementorでは固定ページごとにヘッダーやフッターを作成できますが、全ページで共通のヘッダーフッターをつくことができません。 この問題を解決するにはプロ版にアップグレードする方法と、無料のプラ…

  • 2022 / 02 / 05

メンテナンスモードなどElementorの設定でできることまとめ

Elementorの設定とツールについて解説します。 サイトの構築中にはメンテナンスモードにできたり、新しいバージョンで不具合が起こった際に古いバージョンに戻せるといった便利な機能や、ページの読み込…

  • 2022 / 02 / 07

Elementor無料版ウィジェットの使い方まとめ

PhotoshopやFigmaでデザインしたWebサイトをElementorで作ろうと思っても、 何をどう組み合わせればいいのかわからないとうまくデザインを再現できなくて、残念な見た目のホームページ…

  • 2022 / 02 / 11

秒でWordpressサイトを構築できるElementorテンプレートの使い方

Elementorにはテンプレート機能という地味にすごい機能が備わっています。 Elementor以外のページビルダーでもテンプレートが用意されているのですが、Elementorの場合は別のサイトで…

  • 2022 / 02 / 14

Elementor Bootstrap風レイアウトを作れるマル秘テク

WordpressをWebサイトビルダーにしてくれるElementorがさらに進化してかなり複雑なデザインにも対応できるようになりました。 Bootstrap5で作るようなレイアウトや高品質なWeb…

  • 2022 / 02 / 20

Elementorを使いこなす! 目的別スタイリングのやり方まとめ

ElementorはWordpressで最もよく使われているWebサイトビルダーで、 しっかり使いこなせばPhotoshopやFigmaで作ったものをそのまま再現できるレベルの機能が揃ってる ツール…

  • 2022 / 02 / 22

Elementorでサクッとスマホ対応のレスポンシブサイトを作る方法

作成したホームページのレスポンシブ化(スマホ対応)はSEOにも影響する可能性があるため必ずやっておきたい作業です。 Wordpressで作ったホームページの場合はHTMLやCSSを編集する必要があり…

  • 2022 / 02 / 24

Elementor Flexbox Containerの使い方

ElementorのようなWebサイトビルダーでよくある問題が、AdobeXDやFigmaで作ったデザインをそのまま表現しづらいため、どうしても単純なレイアウトになってしまいます。 そのような問題を…

  • 2022 / 04 / 13

ElementorProの機能を解説

ElementorPro(有料版)で使える機能についての解説です。テーマビルダーはWordpressの全ページをElementorでカスタマイズできるようになるので完全にノーコードでWordpressサイトを作成できます。

Elementor プロ版(有料版) 初心者入門ガイド

Wordpressを完全なノーコードツールに変身させることができるElementorは有料版でさらに進化させることができます。 テーマビルダーを使えばカテゴリーページや記事ページをElementor…

  • 2022 / 04 / 05

ElementorPro(有料版)で使えるウィジェットの機能まとめ

ElementorPro(有料版)で使えるウィジェットの機能や使い方について解説します。ElementorProでは無料版にはなかった動的コンテンツの表示やフォームの作成機能など非常に便利なウィジェ…

  • 2022 / 03 / 29

ElementorPro テーマビルダーの使い方を解説

ElementorProで使えるメインの機能であるテーマビルダーの使い方について解説します。 テーマビルダーを使うことでカテゴリーページや検索結果ページ、記事ページなどWordpressの全てのペー…

  • 2022 / 04 / 01

ElementorPro フォームビルダーの使い方を解説

ElementorProで使えるフォームビルダーは、Elementorの編集画面上で様々なフォームを簡単に作成できる機能です。 フォームの項目設定だけでなく、訪問者がフォーム送信ボタンを押した後に自…

  • 2022 / 04 / 05

ElementorPro ポップアップビルダーの使い方を解説

ポップアップはWebサイトの訪問者に行動を促すためによく使われるもので、ElementorPro(有料版)のポップアップビルダーを使うとコーディング不要でポップアップを作成できるようになります。 ト…

  • 2022 / 04 / 07

ElementorPro グローバルウィジェットの使い方

Elementorを使うとウィジェットを配置するだけでWordpressを使ったWebサイトを構築できてしまいます。ただウィジェットはページごとに配置して編集する必要があるので、 同じコンテンツを異…

  • 2022 / 04 / 11

Elementorの使い方Tips

Elementorで実際によくあるカスタマイズについてまとめています。高品質なスライドショーを簡単に追加する方法や「Contact Form 7」を使ったお問合せフォームの作り方を紹介しています。

Elementorで問い合わせフォームを設置する方法

ホームページに問い合わせフォームを設置するならWordpressのプラグインを使うのが一番簡単です。 Elementorなら画面にウィジェットを配置してショートコードをコピペするだけでなのでコーディ…

  • 2022 / 03 / 07

WordpressのスライドショーをElementorで設置する方法

Wordpressで作ったホームページにスライドショーを配置するには、Javascriptのプラグインを使うか、Wordpressプラグインを使うなどの方法がありますが、 どちらもElementor…

  • 2022 / 03 / 08

Elementorでサイドバーを作る方法

Elementorでサイドバーを作成する方法を解説します。Wordpressでサイドバーを作成する場合はウィジェットエリアとして作成する必要があり、レイアウトや表示内容の変更をするにはコードの修正が…

  • 2022 / 03 / 09

ElementorでHTMLとCSSを使って効率よくWebサイトを構築する方法

Elementorで表現が難しいデザインはHTMLとCSSで実装することができます。セクションごとにブロックとして保存することでレイアウトを入れ替えたりドラッグ&ドロップで順序を変更することもできま…

  • 2022 / 03 / 10

Elementorでクリックで電話やメールできるようにする方法

コーポレートサイトやLPのようなWebサイトでは電話番号やメールアドレスを表示することがよくあります。スマホからアクセスしている場合は電話番号をタップすることでそのまま電話アプリを起動することも可能…

  • 2022 / 03 / 14

Elementorでページトップに戻るボタンを作る方法

Elementorでページトップに戻るボタンを作る方法を解説します。 WordpressやHTMLでページトップに戻るボタンを作る場合は、ボタンのスタイルだけでなく配置のCSSコードも書く必要があり…

  • 2022 / 03 / 15

Elementorで画像の上にテキストを乗せる方法

画像の上にテキストを表示するのはコーポレートサイトなどによくあるデザインで、コンテンツを印象的に見せる効果があります。 Elementorで画像の上にテキストを表示する方法はいくつかあり、やり方はど…

  • 2022 / 03 / 16

Elementorで横幅100%(フルワイド)にする方法

Elementorでページを作成するとデフォルトのページテンプレートが適用されるため、フルワイド(横幅100%)にならなかったり、ウィジェットとウィジェットの間にすき間ができてしまうことがあります。…

  • 2022 / 03 / 17

Elementorでページの読み込み速度を早くする方法

ページの読み込みはUXやSEOにも影響を及ぼす重要な要素です。ElementorはWordpressの中でも比較的読み込み速度が速いWebサイトビルダーですが、大量のフォント読み込みが発生するのでど…

  • 2022 / 03 / 18

この記事を書いた人

@takeshi_du

Takeshi Sugimori

フリーランスWebエンジニア兼デザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやShopify、BASEなどのネットショップのデザイン〜フロントエンドの構築を担当しています。

関連記事