コンテンツへスキップ
RiARiSE – WEB制作 Wordpress、Elementor
  • サービス内容
  • プロフィール
  • 制作実績
  • ブログ・ナレッジ
    • ブログ
    • ナレッジ
  • お問い合せ
  • FEATURES
    • HTML5を使ったクロスプラットフォームなアプリ開発
    • Unity3Dを利用したAR(拡張現実)アプリ制作
    • Unityを利用したゲーム開発・スマホアプリ開発
    • WAI-ARIAに基づいたホームページ制作
  • HOME
  • HOME
  • test
  • WORKS
  • お問い合せ
  • ブログ
  • プロフィール
RiARiSE – WEB制作 Wordpress、Elementor
  • FEATURES
    • HTML5を使ったクロスプラットフォームなアプリ開発
    • Unity3Dを利用したAR(拡張現実)アプリ制作
    • Unityを利用したゲーム開発・スマホアプリ開発
    • WAI-ARIAに基づいたホームページ制作
  • HOME
  • HOME
  • test
  • WORKS
  • お問い合せ
  • ブログ
  • プロフィール

入門編

  • Elementorのインストール方法
  • Elementorでページを作成、編集する
  • ElementorのUI画面操作説明
  • Elementor セクション役割・できること
  • ページの下書き保存と公開
  • Elementorでカラムを作成、編集、スタイル設定する方法
  • トップ
  • ナレッジベース
  • 入門編
  • ElementorのUI画面操作説明

ElementorのUI画面操作説明

目次
  • Elementorで編集するには?
  • Elementor編集画面のレイアウト/構造
  • セクションの追加方法

Elementorは簡単にサイト構築ができる便利なプラグインですが、画面操作が複雑ですね。このページでは、Elementor エディタの操作チュートリアルとして、Elementor エディタ自体の構造とレイアウト、およびエディタ内でページのレイアウトと構造を作成する方法について説明します。

Elementorで編集するには? #

Elementor エディタでの作業を開始するには、WordPress のページまたは投稿エディタから「Elementor で編集」ボタンをクリックします。

Elementor編集画面のレイアウト/構造 #

大きくわけて6つエリアがあります。下の画像と数字を合わせてみてください。

  1. パネルヘッダーエリア
    左のハンバーガーメニューから「グローバルサイト設定」、または右の点線アイコンから「ウィジェットパネル」に戻ります。
  2. ウィジェット選択とウィジェット設定エリア
    ウィジェットを選択、またはウィジェットの設定を変更します。
  3. パネルツールバー
    ページ設定、ナビゲータ、履歴、レスポンシブ表示、変更点のプレビュー、公開/更新、テンプレートの保存などのツールがあります。
  4. コンテンツ/セクションエリア
    配置したウィジェットやセクションの選択、削除、複製等を行います。またウィジェットをドラッグ&ドロップすることで要素を追加することができます。
  5. ナビゲーターエリア
    ページを作成しているとセクションやカラム、ウィジェットの構造がわかりにくくなってきます。その際に構造の確認にしようします。ナビゲーター上で配置の変更も可能です。
  6. 新しいセクション/テンプレートの追加
    「プラス」アイコンを使ってページに新しいセクションを作成するか、「フォルダ」アイコンを使って編集可能な既存のテンプレートを挿入するか、どちらかを選択します。

セクションの追加方法 #

ページに新しいセクションを簡単に追加できます。セクションは1つまたは複数のカラムで構成されます。カラムとは一定の横幅でセクションを区切る箱です。各カラムは、1つまたは複数のウィジェットで構成されます。
下図の水色枠線がセクション、灰色の点線がカラムとなります。

  1. 「プラス」アイコンをクリックして、新しいセクションを作成します。
  2. カラムのパターン(1カラム、2カラム、3カラムなど)が表示されますのでクリックしてレイアウトを選択します。
  3. エディターでドラッグするか、パネルに値を入力して、各カラムの正確な幅を編集します。
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on 2022年7月15日
Elementorでページを作成、編集するElementor セクション役割・できること
目次
  • Elementorで編集するには?
  • Elementor編集画面のレイアウト/構造
  • セクションの追加方法

Copyright © 2023 RiARiSE - WEB制作 Wordpress、Elementor