🚀 サイト構築が難しい?手取り足取りご案内します——「WordPressサイト構築伴走」サービスを詳しく見る →

Elementorチュートリアル 2026年初心者向けElementorサイト構築完全ガイド

世界をリードするWordPressビジュアルページビルダーPlugin「Elementor」の使用ガイド。プログラミング知識なしで、Elementorを使用してプロフェッショナルなWebサイトをデザインする方法をゼロから学びます。

10万+ ユーザー選択
ゼロベース 簡単に始められる
プロフェッショナル級 デザイン効果

Elementorとは?

この強力なWordPressページビルダーについて知る

ElementorはWordPressプラットフォームで最も人気のあるビジュアルページビルダーPluginであり、世界中で1000万以上のWebサイトで使用されています。専門的なプログラミングスキルがなくても、Elementorのドラッグ&ドロップ式デザインでWebページを作成できます。この記事は、Elementorチュートリアルこの強力なツールをゼロから習得するのに役立ちます。

WordPressには優れたビジュアルWebデザインツール(Website Builder)が多数ありますが、Elementorはそれらページビルダーの中でも特に優れています。直感的なドラッグ&ドロップインターフェース、豊富なデザイン要素、プロフェッショナルなテンプレートライブラリを提供し、誰でもプロ級のWebサイトを作成できます。

Elementorのバージョン違い

無料版

  • 基本ドラッグ&ドロップエディター
  • 30以上の基本Widget
  • 基本テンプレートライブラリ
  • レスポンシブデザイン
  • 基本スタイル制御
無料

Pro版

  • 90+ 高度なウィジェット
  • 300+ プロフェッショナルテンプレート
  • Theme ビルダー
  • WooCommerce サポート
  • ポップアップビルダー
  • フォームビルダー
  • アニメーション効果
  • グローバルスタイルシステム
$59/年から

Elementorを使用する必要がありますか?

以下のいずれかの状況に該当する場合、Elementorは理想的な選択肢です:

  • プログラミングができなくてもプロフェッショナルなウェブサイトを作成したい
  • ウェブサイトのプロトタイプを迅速に構築する必要がある
  • ウェブサイトデザインを完全にコントロールしたい
  • 複雑なページレイアウトを作成する必要がある
  • クライアントとリアルタイムで協力してデザインしたい

Elementorを使用すると、さまざまなタイプのウェブサイトを作成できます:企業公式サイト、個人ブログ、ECサイト、ポートフォリオサイト、ランディングページなど。

Elementor Pro クラック版について

オンライン上にはElementorのクラック版がダウンロードできますが、以下の問題があります:セキュリティリスク、機能制限、アップデートの取得不可、技術サポートの欠如。完全な機能、セキュリティ保証、技術サポートを得るためには正規版の購入をお勧めします。

Elementorインストールチュートリアル

詳細なインストール手順ガイド

🌐

WordPressサイトの準備

Elementorを使用する前提として、既にWordPressサイトをお持ちであること。まだの場合は、WordPressインストールチュートリアルを参照し、まずWordPressサイトを構築してください。

システム要件:WordPress 5.0+、PHP 7.4+、MySQL 5.6+、互換性の高いThemeの使用を推奨。
⬇️

Elementor Pluginのインストール

WordPress管理画面(WP Admin)にログインし、Plugin → 新規追加を選択、"elementor"を検索、公式Plugin(作者:Elementor.com)を見つけてインストール・有効化。

または、WordPress公式Pluginディレクトリからダウンロードインストールパッケージをアップロードしてインストール。

おすすめ👉Elementor完全日本語化版ダウンロード

⚙️

初期設定の完了

有効化後、設定ウィザードが表示されます。アカウント作成ステップはスキップ可能です。互換性の高いTheme(例:AstraテーマまたはGeneratePress。

Themeの推奨:初心者にはHello Themeの使用はお勧めしません。これは完全に空白のThemeであり、すべての要素をゼロからデザインする必要があり、初心者にとっては難易度が高いためです。

設定完了後、WordPressのAdmin Dashboard左側メニューにElementor関連のオプションが表示されれば、インストール成功を意味します。

Elementor使用チュートリアル

最初のPage作成から始める

最初のElementor Pageを作成する

ステップ1:新規Page作成

WordPressのAdmin Dashboardで、Page → 新規Pageを選択し、Pageタイトルを入力した後、Page上部の"Elementorで編集"ボタンをクリックします。

クリックして拡大画像を表示

ステップ2:作業インターフェースを理解する

左側の要素パネル

すべての利用可能なウィジェットと要素を含み、基本、プロフェッショナル、汎用などのカテゴリに分類されています。鍵アイコンが付いているものはPro版の機能です。

中央編集エリア

ページコンテンツをリアルタイムでプレビューおよび編集し、WYSIWYG(見たままが得られる)編集体験を提供します。

設定パネル

要素を選択すると詳細な設定オプションが表示され、コンテンツ、スタイル、高度な設定の3つのタブが含まれます。

上部ツールバー

レスポンシブプレビュー、履歴、設定などの機能ボタンを含みます。

クリックして拡大画像を表示

ステップ3:デザインを開始

方法1:テンプレートから開始

Elementor自体に付属しているテンプレートは多くありません。AstraなどのThemeに付属しているテンプレートをインポートしてから修正することをお勧めします。これは最も迅速なサイト構築方法です。

方法2:ゼロから開始

左側の要素を編集エリアにドラッグ&ドロップし、段階的にページレイアウトを構築します。特定のデザイン要件を持つユーザーに適しています。(スクリーンショット1 スクリーンショット2 スクリーンショット3

ページ構造を整理するには、コンテナ(Container)の使用をお勧めします。旧版のセクション(Section)よりも柔軟でモダンです。

以下の無料機能拡張セクションには、より実用的な機能ウィジェットや、選択可能ないくつかの優れた無料テンプレートも含まれています。

💡 プロのヒント

初心者はまずテンプレートを使用して学習と修正を行うことをお勧めします。これにより、Elementorのデザイン思考とベストプラクティスをより早く理解できます。基本操作に慣れた後、ゼロからデザインを試みてください。

高度な機能の詳細解説

これらのテクニックをマスターして、あなたのデザインをよりプロフェッショナルに

PERFORMANCE

パフォーマンス最適化

DOM出力の最適化、CSSの結合などの機能により、サイトの読み込み速度を確保し、ユーザー体験を向上させます。

DESIGN
🎨

グローバルスタイル設定

サイト全体の色、フォント、間隔などのスタイルを統一設定し、デザインの一貫性を確保します。一度設定すれば、サイト全体に適用されます。

RESPONSIVE
📱

レスポンシブ編集

デスクトップ、タブレット、モバイル向けに表示効果を最適化し、すべてのデバイスでの完璧な表示を保証します。各ブレークポイントのスタイルを独立して設定できます。

NAVIGATION
🔗

アンカーリンク

ページ内ジャンプ効果を作成し、ユーザーエクスペリエンスとページナビゲーションを向上させます。高度な設定でCSS IDを追加するだけです。

ANIMATION
🎬

アニメーション効果

エントランスアニメーション、ホバー効果などを追加し、ページをより生き生きと楽しくします。遅延、継続時間などの細かい制御をサポートします。

ADVANCED
🎯

カスタムCSS

経験豊富なユーザー向けにカスタムCSS機能を提供し、より正確なスタイル制御を実現します。

HEADER
🏗️

ヘッダー・フッター編集

Elementor Proテーマビルダーを使用して、サイトのヘッダーとフッターデザインを完全にカスタマイズし、テーマの制限から解放され、独自のブランドイメージを実現します。

TEMPLATE
📄

ページテンプレート作成

再利用可能なページテンプレートとブロックを作成し、デザイン効率を向上させます。動的コンテンツの表示をサポートし、記事ページ、商品ページなど様々なページタイプに適用できます。

無料Elementor機能拡張

サードパーティPluginを通じてElementor機能を拡張

Essential Addons for Elementor

最も人気のあるElementor拡張Pluginの一つで、データテーブル、価格表、チームメンバー紹介など、90以上の追加Widgetを含む実用的な機能を提供します。(無料版 プレミアム版を割引購入

データテーブル 価格表 チーム紹介 カウントダウン プログレスバー

Premium Addons for Elementor

カルーセル、チャート、地図などの高度な機能を含む、高品質な拡張Widgetコレクションです。デザインが美しく、パフォーマンスに優れています。(無料版 プレミアム版を割引購入

カルーセル チャート表示 地図統合 動画再生 ギャラリー

ElementsKit Elementor Addons and Templates

最も包括的なElementor拡張プラグインの一つで、90以上のWidgetと900以上のプリセットテンプレートを提供し、ヘッダー/フッタービルダー、スーパーメニューなどの高度な機能を含みます。インストール数は100万以上。(無料版 プレミアム版を割引購入

ヘッダー/フッタービルダー スーパーメニュー Widgetビルダー 900以上のテンプレート WooCommerce サポート

Happy Addons for Elementor

ユーザーエクスペリエンスに特化したElementor拡張Pluginで、50以上の美しいWidgetと豊富なデザインオプションを提供し、インターフェースが使いやすく、性能に優れ、多くのユーザーから愛されています。(無料版 プレミアム版を割引購入

カードデザイン アイコンリスト 画像比較 タイムライン アニメーション効果

Unlimited Elements For Elementor

ユニークなElementor拡張Pluginで、無制限のWidgetとテンプレートライブラリを提供し、カスタムWidget作成をサポートし、あなたのデザイン創造性を無限に広げます。(無料版 プレミアム版を割引購入

無制限Widget カスタム作成 テンプレートライブラリ 高度なアニメーション サードパーティ統合
⚠️ 使用上の推奨事項:過剰な拡張Pluginのインストールは推奨しません。サイトの読み込み速度と安定性に影響を与える可能性があります。実際の必要に応じて、高品質な拡張機能を1〜2個選択し、機能の重複を避けることをお勧めします。

Elementor Pro 高度な機能

プロフェッショナルレベルのウェブサイトデザイン能力を解放

Theme ビルダー

ヘッダー、フッター、Postページ、製品ページなど、すべてのテンプレートを完全にカスタマイズし、真のサイト全体のデザインの自由を実現します。

  • カスタムHeaderデザイン
  • 個別化されたFooterレイアウト
  • 記事ページテンプレート
  • 商品ページデザイン
  • 404エラーページ
  • 検索結果ページ

ポップアップビルダー

様々なタイプのポップアップを作成し、ユーザーエンゲージメントとコンバージョン率を向上させます。複数のトリガー条件と美しいアニメーション効果をサポートします。

  • メール購読ポップアップ
  • プロモーション活動ポップアップ
  • 退出意図ポップアップ
  • 年齢確認ポップアップ
  • Cookie通知ポップアップ
  • 動画再生ポップアップ

フォームビルダー

追加のPluginなしで様々なフォームを作成でき、メールマーケティングサービスと統合し、条件付きロジックとファイルアップロードをサポートします。

  • お問い合わせフォーム
  • メール購読フォーム
  • アンケートフォーム
  • ファイルアップロードフォーム
  • マルチステップフォーム
  • 支払いフォーム

WooCommerceビルダー

ECサイト専用に設計されており、商品ページ、ショッピングカート、チェックアウトページなどをカスタマイズして、独自のショッピング体験を構築できます。

  • 商品ページデザイン
  • 商品リストレイアウト
  • ショッピングカートページ
  • チェックアウトプロセス
  • マイアカウントページ
  • 感謝ページ

Pro版へのアップグレードをご検討ですか?

完全なウェブサイトデザインの自由度を獲得し、すべてのプロ機能をアンロック

Elementor Proを今すぐ購入 - 年間わずか69元

正規ライセンス | インストール・有効化対応 | 生涯アップデート

Elementor よくある質問

使用中によくある疑問を解決

🎬

Elementorでスライドショー・スライダーを追加するには?

+

スライドを追加する方法は2つあります:

  1. Shortcodeを使用:Slider RevolutionやSmart Slider 3などのプロフェッショナルスライドショープラグインをインストールしている場合、Elementorで"Shortcode"Widgetを追加し、スライドショーのShortcodeを貼り付けるだけで利用できます。
  2. Pro版スライダーを使用:Elementor Proには、組み込みのMedia CarouselおよびSlides Widgetが提供されており、直接ドラッグ&ドロップで使用でき、様々なトランジション効果をサポートしています。
🎨

Elementorで文字サイズと色を変更するには?

+

文字スタイルを変更する手順:

  1. 変更したい文字要素(例:見出し、テキストエディター)を選択する
  2. 在左侧设置面板点击"样式"标签
  3. 在"排版"部分设置字体大小、颜色、字重等属性
  4. 可以分别为桌面、平板、手机设置不同的样式
  5. 使用全局颜色和字体可以确保网站风格一致
📝

Elementor怎么添加联系表单?

+

添加联系表单有几种方法:

  1. 使用Pro版表单:Elementor Pro内置表单构建器,可直接创建各种表单,支持邮件通知和第三方集成。
  2. 第三方插件:安装Contact Form 7、WPForms、Ninja Forms等插件,创建表单后使用短代码添加到页面。
  3. 推荐插件:Fluent Forms (免费简单)、WPForms(功能强大)、Gravity Forms(专业级)
🔗

怎么在Elementor页面添加跳转效果?

+

创建页面内跳转(锚点链接):

  1. 选中要跳转到的目标元素或容器
  2. 在"高级"设置中的"CSS ID"字段输入唯一ID(如:section1)
  3. 在按钮或链接的URL中输入:#section1
  4. 保存页面后,点击链接即可平滑跳转到对应位置
  5. 可以在WordPress自定义器中调整滚动偏移量
📱

Elementor怎么编辑手机端显示效果?

+

响应式编辑步骤:

  1. Elementorエディター上部ツールバーでレスポンシブモードアイコンを探す
  2. タブレット(768px)またはモバイル(360px)ビューに切り替える
  3. 対応するビューで要素の表示効果を調整する
  4. 異なるデバイスでのフォントサイズ、間隔、表示/非表示などを設定可能
  5. "デバイスでのみ表示"機能を使用して、異なるデバイスに異なるコンテンツを表示できる
🎯

Elementorでサイトのヘッダーとフッターを変更する方法は?

+

ヘッダー・フッター変更方法:

  1. Pro版を使用:Elementor ProのTheme Builderでは、HeaderとFooterを直接編集でき、完全なデザイン自由度を提供します。
  2. 無料プラン:"Header Footer Elementor"または"Elementor Header & Footer Builder" Pluginをインストールします。
  3. Themeサポート:Astra、GeneratePress、OceanWPなど、ElementorをサポートするThemeを選択します。
  4. カスタムプラン:Themeのカスタマイズ機能とElementorを組み合わせて特定のエリアをデザインします。

Elementorサイトの読み込みが遅い場合はどうすればよいですか?

+

Elementorサイトの速度を最適化する方法:

  1. キャッシュを有効化:WP Rocket、W3 Total CacheなどのキャッシュPluginを使用
  2. 画像最適化:WebP形式を使用し、遅延読み込み機能を有効化
  3. プラグイン削減:必要なElementor拡張プラグインのみを保持
  4. 適切なホスティングを選択:SSD StorageとCDNアクセラレーションサービスを利用
  5. Elementor設定:Elementor > 設定で最適化オプションを有効にする

その他のElementorチュートリアルリソース

Elementorをさらに深く学ぶ

🛠️

おすすめプラグイン

  • Essential Addons for Elementor
  • Ultimate Addons for Elementor
  • Elements Kit
  • JetElements
  • PowerPack for Elementor
🎨

デザインリソース

  • Elementor公式テンプレートライブラリ
  • Envato Elements
  • Template Monster
  • Freepikデザイン素材
  • Unsplash無料画像
🎓

学習プラットフォーム

  • Elementor Academy
  • YouTube公式チャンネル
  • Naiba サイト構築ノートブログ
  • Elementorコミュニティフォーラム
  • Facebookユーザーグループ

専門的なElementorウェブサイト構築サービスが必要ですか?

専門的なWordPressウェブサイト構築サービスが必要な場合、またはElementorの使用中に問題が発生した場合は、お気軽にお問い合わせください。サイト計画から公開・運用までのワンストップサービスを提供しています。

このチュートリアルがお役に立てた場合は、必要としている他の友人と共有してください。ご質問がある場合は、以下のコメント欄でディスカッションすることもできます。

4.1/5 - (17 票)

💬ディスカッションと交流

Elementorに関する質問や経験共有があれば、下記コメント欄でお気軽にご議論ください

<

《 „Elementorチュートリアル、この1記事でElementorを使ったサイト構築をマスター“ 》 に 78 件のコメント

  1. 云飘舞言う:

    设计归档模板时,条件为作者归档。但发布后,归档页还是原主题自带的样式,自己设计的归档模版,并没有生效。不知是什么原因。条件切换为日期,模板就会生效。真是很奇怪。希望奶爸讲解一下。

    • Lee言う:

      我测试了下,设置之后没有问题。可能是你哪里设置的不对。Query设置根据作者筛选,日期所有,排序按照日期,倒序。设置之后多用户只显示自己设置的那个用户的文章归档。

  2. davin言う:

    安装Essential Addons插件后,左侧的elementor面板就变灰了,无法拖拽了。然后关闭Essential Addons插件就正常了,这是什么原因呢?

  3. 立刻言う:

    汉化版能发一下吗?

  4. BritishRoses言う:

    Elementor是一个页面的编辑器,我对于Elementor与Theme的关系没搞明白:
    我想自建一个to B的外贸站,主要是接询盘,
    1)单用Elementor免费版行么?既然可以拖拽编辑,为什么还要用theme?
    2)用Elementor Pro可以替代theme么?
    3)如果用flatsome,那还要装Elementor么?
    4)to B的网站,需要用woocommerce么?
    5)to B的网站,用什么样的组合好?Elementor + Astra?
    我真的是没有搞清楚概念,麻烦奶爸答疑解惑,多谢。

    • Lee言う:

      1、可以
      2、可以,不推荐新手这么做
      3、不需要,flatsome自带构建器
      4、看情况,可用可不用
      5、合适自己的最合适。
      elementor类似于装修队,主题类似于不同户型的房子,如果你想自己布置房间布局,那就装elementor官方的hello主题,自己设计每个房间的布局和风格等等。

      • BRITISHROSES言う:

        多谢您,您回复得太迅速了,感谢感谢。
        1)如果是to C的网站,用flatsome+woocommer,有问题么?这两者有重叠么?
        2)我刚刚浏览到别的网站,它提到用Elementor Pro + Astra免费版(说是最轻),这样的组合,比只用Elementor Pro,针对to B的网站,在建站难度、美观、功能,这3方面有多少差别呢?

        • Lee言う:

          2c不管你用什么主题,woocommerce都必须安装的。
          建站难度,美观,功能不能统一。

          • BRITISHROSES言う:

            “建站难度,美观,功能不能统一” ??
            不好意思,没懂呀。。。

          • Lee言う:

            就是你想要难度低,美观,功能强大的没有。功能强大难度肯定高。美观也需要有设计功底,所以也不简单。

  5. BRITISHROSES言う:

    多谢多谢。还有最后一个问题,to B 网站,如果要做多产品打包询盘,做成quote cart那种,elementor Pro + Woocommerce + yith woocommerce request a quote , 这样组合可以么?Woocommerce是 必须的是么?只是to B,不需要实际交易,Elementor Pro可以add to cart的话,是不是就可以不用Woocommerce了?原谅我问的可能很无语,但确实疑惑,还请指教,谢谢。

  6. Barbosa言う:

    请教一个问题,安装了elementor之后出现无法加载的现象,用安全模式也不行,这是什么原因呢

  7. 程彩虹言う:

    奶爸你好,我建站的时候不管首页还是关于我们还是联系我们之类的页面点开都是首页的页面,不知道是哪里出了问题,然后我跟着网上的教程把阅读设置更改了之后首页变得不可编辑了,而且很容易卡死没办法进入网站,显示504错误,现在我懵了

    • Lee言う:

      这种问题单从你描述看不出来问题所在的,估计是服务器或者网站设置哪里不对引起的。

      • 程彩虹言う:

        它显示的504错误过几个小时就会自动变好,又会能进入首页

        • Lee言う:

          504错误代表网关超时 (Gateway timeout),是指服务器作为网关或代理,但是没有及时从上游服务器收到请求。
          504通常是服务器配置不当或者是网站资源占用不正常引起的服务器崩溃,原因很多。

  8. 遂原风言う:

    使用elementor设计网站,首页调用文章列表,文章标题和文章日期如何做到横排,在elementor找不到设置的地方,请指教

    • Lee言う:

      这个取决于你安装的elementor附加组件或者主题自带的元素是否支持横排,如果不支持的话你就没办法那么设置。elementor本身是把一些代码的内容可视化了,但是如果没有那么代码,你想可视化出来的效果就没有。

  9. sg言う:

    请问一下页面的 download app 应该怎么去掉

  10. Hao言う:

    奶爸你好,我在下载Elementor插件的时候出现HTTP 500内部服务器错误的情况,在Elementor官网注册账号时也会出错,请问如何解决。我是在本地建站的,phpstudy集成环境

  11. 小王言う:

    你好,我准备去家公司做网页内容撰写,现在公司已有自己网站B2B,Elementor插件能用上吗?

  12. dhs言う:

    请问elementor账号注册总是失败?

  13. dhs言う:

    您好,总是提示出问题了,请再试一次。我这里再多试几次看看,也可能跟访问Google的一些相关服务产生障碍。

  14. 李强言う:

    你好,我导入了主题模板后,用Elementor编辑网页。原本的网页的右上方有模板的logo,而我点开用Elementor编辑时,Elementor的菜单栏遮盖了logo部分,无法编辑提货logo图片。请问这种情况需要如何解决?谢谢

  15. sharely言う:

    奶爸,你好,初用ELEMENTOR,不知道怎么回事。
    选中标题或图象需要编辑的地方,左边再选样式的时候,就不显示样式的菜单了,试过删除再安装,还是一样到选样式就卡了。

    但可以增加信息,每次增加信息,都提示更新,是每次都要更新么?

  16. Emily言う:

    您好,想请教一下“简码”的问题:
    在wp后台下载并安装了插件YITH插件,通过elementor编辑插入简码:[yith_ywraq_button_quote]
    但是页面并没有生成按钮,只显示了我输入的简码本身:[yith_ywraq_button_quote]
    请问这个问题要如何排查修复呢? 谢谢!

  17. 菠菜言う:

    是否有关于generateblock 和generate press 的介绍

    • Lee言う:

      没有,毕竟都要花钱买。目前的情况Elementor免费版就够很多网站用了。generateblock的那些效果实际上用ele基本上也都可以弄出来。

  18. 言う:

    你好 网站上的破解版和那种正版的可以一个elementor账户可以支持多个网站哪个有啥区别

    • Lee言う:

      破解版,传上去随便哪个网站都可以用,但是只能用他的pro功能,不能用他在线的模板素材。正版的是一个网站绑定一个授权,可以用功能和在线模板库。模板库就是给你做了一些现成的模板,你可以直接点击导入到你网站上使用。

  19. 言う:

    现在购买了正版,到期后不续费了,那之前建站时用的那些Pro版本的元素和模板,是不是就用不了了?

  20. 言う:

    奶爸,你好,用elementor做完前端页面后,如何调取数据库数据呢,比如要实现新闻列表和详情页动态数据,怎么实现呢?

返信sg 返信をキャンセル

あなたのメールアドレスは公開されません。 必須項目は*でマークされています

🔒 セキュリティ認証
キウイを選択
🥝
キウイ
🍇
グレープ
🍑
チェリー
🍎
リンゴ

×
二维码

QRコードをスキャンしてフォロー