テスト環境
RHEL系 | WordPress 7.1.3 | Elementor 4.3.5 | 2026-10-16 確認
Elementor(エレメンター)はWordPressのページビルダープラグインで、管理画面の編集画面ではなく、訪問者が見る画面の上でウィジェットをドラッグ&ドロップしてページを作るエディターです。WordPress 7.1.3のサイトに無料版4.3.5をインストールして見出し・段落・ボタンを入れたページを公開し、無料版とProプランの違いを公式の料金表で比較しました。
1️⃣ Elementorとは:ブロックエディターとの違い
Elementorは Block Editor と並んでインストールされる、WordPressの2つ目のエディターです。投稿や固定ページごとにブロックエディターで書くかElementorで編集するかを選び、Elementorで編集したページは訪問者が見る画面の上で配置とスタイルを直接調整します。
2️⃣ Elementorの無料インストール:プラグインの追加とエディター画面
インストール自体は他のプラグインと同じですが、有効化した直後から画面が変わります。[プラグイン › プラグインを追加]でElementorを検索してインストールし、有効化すると、サイトを表示したときに管理バーに[Edit with Elementor]の項目が現れます。エディターは、ページ編集URLの後ろに[action=elementor]が付いた別の画面として開きます。
[プラグインを追加]でのElementorの検索結果
WordPress.orgのプラグインディレクトリでは、Elementorの有効インストール数は1,000万以上、評価は7,319件のレビューで4.5です。2026年10月13日に公開された4.3.5バージョンは、WordPress 6.8以上とPHP 7.4以上を必要とします。
エディターは左のウィジェットパネルと右のプレビュー画面に分かれています。4.3.5バージョンのパネルは、FlexboxやHeading、ButtonといったAtomic Elementsのグループから始まります。エディターの文言は、言語パックがインストールされる前は英語で表示され、インストール後は管理画面の言語に従います。パネル下部のフォームウィジェットとProグループには鍵マークが付いているため、無料版で使えるものと使えないものが1つの画面で見分けられます。
無料版のウィジェットパネルにあるPro項目
🧭 Elementorのインストールとページ作成シミュレーター
NEXT ▶ 1 プラグインのインストール2 固定ページを追加
ダッシュボード Dashboard 投稿 Posts メディア Media 固定ページ Pages 固定ページ一覧 固定ページを追加
コメント Comments 外観 Appearance プラグイン Plugins インストール済みプラグイン プラグインを追加
ユーザー Users ツール Tools 設定 Settings 📍 プラグイン › プラグインを追加
プラグインのインストール
検索欄にElementorと入力して[今すぐインストール]をクリックし、インストールが終わったら[有効化]をクリックします。
📍 固定ページ › 固定ページを追加 › Elementor で編集
固定ページを追加
[固定ページを追加]で新しいページを作り、ツールバーの[Elementor で編集]をクリックするとElementorのエディターが開きます。
example.com/wp-admin/plugin-install.php
プラグインを追加 プラグインのアップロード
プラグインは WordPress の機能を拡張します。このページから WordPress プラグインディレクトリ でプラグインをインストールできますし、または上のボタンをクリックして zip 形式でプラグインをアップロードできます。
検索結果 おすすめ 人気 おすすめ お気に入り
プラグインの検索 Elementor キーワード
7,046個の項目
Elementor Website Builder – 単なるページビルダーではない
今すぐインストール 有効化 有効化 詳細情報
The Elementor Website Builder has it all: drag and drop page builder, Atomic Editor, pixel perfect design, global and reusable style systems, mobile r …
投稿者 Elementor
example.com/wp-admin/post-new.php?post_type=page
+ ↶ ↷ ≡ E Elementor로 편집 W Edit with WordPress 엘리멘터 예시 페이지 · 페이지 임시 글 저장 공개
Elementor サンプルページ
ブロックを選択するには「/」を入力
‹ 前へ 左メニューの有効な項目か画面のボタンを押します。 プラグインの検索 今すぐインストール 有効化 固定ページ › 固定ページを追加 Elementor で編集 NEXT
3️⃣ Elementorでページを作る:Flexboxコンテナとウィジェット
Elementorでは、まずFlexboxコンテナを置き、その中にウィジェットを入れてページを組み立てます。[固定ページ › 固定ページを追加]でページを作ってElementorのエディターを開いたら、空の画面の[+]をクリックしてFlexboxを選びます。
コンテナの[+]をクリックするとウィジェットパネルが開き、Heading、Paragraph、Buttonを順にクリックすると、選択したコンテナの中に入ります。
文字は各ウィジェットをクリックしてから、左パネルの入力欄で直します。コンテナの[Layout]で[Direction]を縦に、[Gap]を16pxにすると、3つのウィジェットが上下に積み重なります。
ElementorエディターのFlexboxコンテナと[Layout]パネル
[Publish]をクリックすると[Your Page is live]の通知とともにすぐに公開され、訪問者の画面ではテーマのヘッダーとフッターの間にElementorで作った領域が入ります。
公開した例のページの訪問者画面
画像のいちばん上の大きな文字はテーマが表示するページタイトルで、その下の見出し、段落、ボタンがElementorのFlexboxコンテナに入れたウィジェットです。
NEXT ▶① コンテナを置く ② ウィジェットを入れる ③ 文字と配置を直す ④ 公開 방문자 화면 ⑤ 公開画面
📍 Elementorエディター › キャンバス [+] › Flexbox
空のキャンバスの[+]をクリックしてFlexboxを選びます。
📍 要素 › Atomic エレメント › 見出し · 段落 · ボタン
左パネルのウィジェットをクリックするか、キャンバスへドラッグ&ドロップします。🔒・👑の付いた項目はElementor Pro限定で、クリックしてもアップグレード案内だけが表示されます。
📍 キャンバスのウィジェット › 編集パネル · Flexbox › スタイル › レイアウト
ウィジェットをクリックすると左パネルで文字を直せ、コンテナをクリックすると方向とすき間を変えられます。👑の付いた欄はElementor Pro限定で、アップグレード案内だけが表示されます。
📍 エディター右上 [公開]
[公開]をクリックすると左下に通知が表示され、履歴パネルの[リビジョン]タブにその版が1行追加されます。
📍 サイトを表示
訪問者には、テーマのヘッダーの下に作ったとおりに表示されます。
E + Angie ✦이력 ↺디자인 시스템 ◐페이지 설정 ▤엘리멘터 예시 페이지 (임시글) ▾ ▭ ▯ ▮ 새로운 소식 🔔파인더 🔍구조 ⧉변경 사항 미리보기 👁공개 ▾
요소
위젯 구성 요소 전역
재사용 가능한 구성 요소를 생성하세요
사이트 전체에서 일관성을 유지하는 디자인 요소를 만드세요.
👑 지금 업그레이드 ☑ 전역 위젯을 만나보세요
이 기능을 사용하면 위젯을 전역으로 저장한 다음 여러 영역에 추가할 수 있습니다. 모든 영역을 한 곳에서 편집할 수 있습니다.
지금 업그레이드
일반 스타일 상호작용
설정 태그 H1 H2 H3 H4 H5 H6 ▾
태그 p ▾
링크 +
ID
속성 👑 +
표시 조건 👑 ⚙
◎ 로컬 ⋮
레이아웃 표시 블록 플렉스 그리드 없음 ▾
방향 → ↓ ← ↑
컨텐츠 정렬 |≡ ≡ ≡| |≡| ⫶ ⋮
항목 정렬 ⊤ ≡ ⊥ ⫿
간격 🔗
열 PX 행 PX
감싸기 → ↵ ↰
표시 블록 플렉스 그리드 없음 ▾
플렉스 항목
자체 정렬 |≡ ≡ ≡| ⫿
정렬 ↑ ↓ ✎
플렉스 크기 ↔ →← ✎
타이포그래피 글꼴 패밀리 ▾
T 글꼴 패밀리 ×
🔍
시스템
Arial Tahoma Verdana Helvetica Times New Roman Trebuchet MS Georgia Google
Google (Early Access)
글꼴 두께 100 – Thin 200 – Extra light 300 – Light 400 – Normal 500 – Medium 600 – Semi bold 700 – Bold 800 – Extra bold 900 – Black ▾
글꼴 크기 PX
텍스트 정렬 ≡ ≣ ≡ ☰
텍스트 색상
자세히보기 ▾ 행 높이 PX
글자 간격 PX
단어 간격 PX
열
선 꾸미기 — T T T̅
텍스트 변환 — Aa AA aa
방향 ⇥ ⇤
글꼴 스타일 — I
텍스트 외곽선 +
배경 오버레이 +
이미지 그라디언트 색상
이미지
해상도 대형 1024 … ▾
위치 ▾
반복 ⁞⁞ ⋯ ⋮ ×
크기 ⊡ ⤢ ↔ ✎
색상
클리핑 전체 요소 패딩 가장자리 콘텐츠 가장자리 텍스트 ▾
효과 혼합 모드 기본 곱하기 Screen 오버레이 어둡게 밝게 Color dodge Color burn Saturation 색상 차이 제외 Hue Luminosity Soft light Hard light ▾
불투명 %
상자 그림자 +
변환 ⇅ +
전환 +
필터 +
배경 필터 +
❏ 상호작용을 사용하여 요소에 애니메이션을 적용
페이지 로드나 스크롤 같은 사용자 상호작용에 의해 트리거되는 입장 애니메이션 및 효과 추가.
상호작용 생성 상호작용 +
On page load: Fade In ×
상세 정보 설정
트리거 페이지 로드 ▾
효과 페이드 ▾
유형 다음 위치에서 밖
방향 ↓ ↑ → ←
반복 👑 123 🔁
지속 시간 MS
지연 MS
천천히 사라지기 천천히 들어… ▾
이력
동작 리비전
☑ 아직 기록 없음
작업을 시작하면 편집기에서 수행한 모든 작업을 다시 실행/실행 취소할 수 있습니다.
페이지 설정
🔧 설정 ◐ 스타일 ⚙ 고급
일반 설정 제목 ✦ AI로 쓰기
상태 임시글 ▾
대표 이미지 ✦
⊕
정렬 0
댓글 허용 아니요
제목 숨기기 아니요
페이지 레이아웃 기본 ▾
디자인 시스템 ⋮ ×
T Defaults ◎ 변수 ◫ 클래스
태그
h1 ⋮
레이아웃
간격
크기
위치
타이포그래피
배경
테두리
효과
사용자 정의 CSS 👑
🔍 +
◎ 첫 번째 변수를 생성하세요
변수는 사이트 어디에서나 적용할 수 있는 저장된 속성입니다.
변수를 생성하세요 🔍 ▽ 0
◫ 아직 전역 클래스가 없습니다.
편집기 패널에서 생성된 CSS 클래스가 여기에 표시됩니다. 사용 가능해지면 계층을 정리하거나 이름을 변경하거나 필요에 따라 삭제할 수 있습니다.
Example ☰
엘리멘터 예시 페이지
× 어떤 레이아웃을 사용하시겠습니까?
플렉스박스 그리드
만세! 페이지가 공개되었습니다. 둘러보기
복제 ^+D 복사 ^+C 붙여넣기 ^+V 스타일 붙여넣기 ^+⇧+V 상호 작용 붙여넣기 다른 사이트에서 붙여넣기 스타일 초기화
노트 PRO 구조 ^+I 삭제 ⌦ 👇 클릭하기
4️⃣ Elementor Proとの違い:ウィジェット数・テーマビルダー・料金
無料版でできるのは、40個以上のウィジェットでページ本文を作るところまでです。サイトのヘッダー・フッター・投稿一覧のテンプレートを作るテーマビルダーと、フォーム、ポップアップ、ECのウィジェットはElementor Proにあります。
表の値は2026年10月16日にelementor.comの料金ページとWordPress.orgのプラグインページで確認しました。返金は年払いに限り30日以内に可能です。
Essentialにはテーマビルダーとフォームビルダーが含まれますが、ポップアップビルダーとカスタムCSS、EC機能は含まれません。ネットショップやポップアップが必要なサイトはAdvanced Solo以上を選ぶことになります。
5️⃣ Elementorが合わないケース:ブロックエディターで十分なサイト
記事中心のブログのように、ページデザインより本文の文章がほとんどを占めるサイトには、ブロックエディターとテーマだけで十分です。Elementorは、ランディングページや会社紹介のように配置を自分で組み立てる必要があるページに向いています。
Elementorで作ったページの文字はWordPressの本文にもコピーとして保存されますが、配置とスタイルはプラグインが生成します。プラグインを無効化すると見出し・段落・ボタンの文字は残り、コンテナの配置とボタンの色は消えるため、一度Elementorで作ったページはプラグインを使い続けることになります。
🔢 FAQ & おすすめコンテンツ
ℹ️ 提携について 当サイトのコンテンツにはアフィリエイトリンクが含まれています。訪問者がこのリンクを通じて商品やサービスを購入すると、当サイトは販売元から手数料を受け取ります。この過程において、購入者が支払う金額(イベント割引適用で金額が下がります↓) は上昇しません。掲載されている価格・割引・在庫情報は作成時点のものであり、実際とは異なる場合がありますので、ご購入前に販売元にて最終確認をお願いいたします。商品の選定および評価は独自の基準に基づいて行われており、手数料の支払いの有無は紹介順や評価内容に影響を与えません。