コンテンツへスキップ
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 セクション役割・できること

Elementor セクション役割・できること

目次
  • コンテキストメニュー(ハンドルを右クリックで表示)
  • セクションに設定できる項目
    • レイアウト
      • コンテンツの幅
      • カラムギャップ
      • 高さ
      • 最小の高さ
      • 垂直方向に整列
      • 伸縮セクション
    • スタイル
      • 背景(通常時、ホバー時)
      • 背景オーバーレイ(通常時、ホバー時)
      • 枠線
        •  
      • シェイプ区切り
      • タイポグラフィ
  • 高度な設定
    • モーション効果
    • レスポンシブデザイン
    • Attributes(プロ版のみ)
    • Custom CSS (プロ版のみ)

セクションの操作やスタイル設定は、左側のパネルにある「レイアウト」「スタイル」「高度な設定」の各タブか、セクションのハンドルを右クリックして表示されるコンテキストメニューから選択することができます。

 ↑はセクションのハンドルと呼ばれます。

コンテキストメニュー(ハンドルを右クリックで表示) #

ハンドルとはセクションにマウスオーバーすると表示される山なり型のメニューです。

  1. セクションを編集
    選択すると左のパネルがセクション編集用のパネルに切り替わります。
  2. 複製
    セクションの内容を複製します。複製元のセクションの下に追加されます。
  3. コピー
    セクションをコピーします。貼り付けをすると任意の場所に貼り付けられます。
  4. スタイル貼り付け
    コピーしたセクションのスタイルを貼り付けられます。
    ただしシェイプ区切りなど利用しているとうまく反映されない場合があります。
  5. スタイルをリセット
    左パネルの「スタイル」で設定した内容がリセットされます。
    セクション内のウィジェットは削除されません。
  6. ナビゲーター
    選択されているセクションがナビゲーターパネル上で頭出しされます。

セクションに設定できる項目 #

セクションの編集をクリックすると、左のパネルに設定画面が表示され「レイアウト」「スタイル」「高度な設定」が可能になります。

レイアウト #

コンテンツの幅 #

ボックスまたは全幅を設定できます。ボックスを選択した場合、スライダーもしくは右の入力欄を使用して幅を設定します。

カラムギャップ #

列と列の間隔(スペース)を設定します。

高さ #

「画面幅に合わせる」を選択するとブラウザの高さにフィットしセクションが画面いっぱいに表示されます。

最小の高さ #

最小の高さを設定し、スライダーを使用してセクションの高さを設定します。

垂直方向に整列 #

セクションのコンテンツの垂直方向の配置を設定します。
デフォルト、上、中央、下、スペースの間隔、周りのスペース、均等に配置等選択可能です。

伸縮セクション #

「はい」を選択すると強制的に画面いっぱいの選択幅になります。

スタイル #

背景(通常時、ホバー時) #

クラシック(背景色や画像を設定可能)、グラデーション(カラーグラデーションの背景を設定可能)、ビデオ背景、画像スライドショー背景から背景の種類を選択できます。

背景オーバーレイ(通常時、ホバー時) #

クラシックまたはグラデーションのいずれかを選択できます。
ブレンドモードの設定も可能です。

枠線 #

ボーダータイプ:ボーダーの種類を設定できます。
枠線の丸み:セクションの角丸を設定できます。
ボックスシャドウ:ボックスシャドウを追加できます。

  #

シェイプ区切り #

タイプ ドロップダウンをクリックして、Shape Dividerのスタイルを選択します。
色: 色を選択します。
幅:仕切りの幅を設定します。
高さ 高さを設定します。
フリップ 図形分割の向きを反転させます。
最前面に配置 他のオブジェクトの手前に来るように強制します。

タイポグラフィ #

セクションのタイポグラフィーカラーを設定します。
※「デフォルトカラー」が有効になっている場合、「タイポグラフィの設定」の色は機能しません。

高度な設定 #

マージン:セクションの余白を設定します。
パディング :セクションのパディングを設定します。
Z-index:重なり順を設定します。
CSS ID:セクションのCSS IDを設定します。
CSSクラス:セクションにCSSクラスを設定します。

モーション効果 #

Scrolling Effects: スクロール効果をオンに設定すると、ユーザーがページをスクロールする際に発生する様々なアニメーションやインタラクションを選択することができます。
Sticky:セクションをStickyに設定し、TopまたはBottomのいずれかを選択します。
開始アニメーション:フェードインやスライドインなどアニメーションを選択できます。

レスポンシブデザイン #

カラムを逆にする(タブレット、モバイル):設定すると各デバイスにおいて列の並びが反転します。
表示錠チア:デスクトップ、タブレット、モバイルで、セクションの表示/非表示を切り替えられます。

Attributes(プロ版のみ) #

セクションのラッパーにカスタム属性を追加することができます。これにより、data-*属性、ARIA属性(アクセシビリティ)とその値、header、footer、sidebar、rel=*、およびその他の属性を追加することができます。

Custom CSS (プロ版のみ) #

独自のカスタムCSSを追加できます。

Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on 2022年7月16日
ElementorのUI画面操作説明ページの下書き保存と公開
目次
  • コンテキストメニュー(ハンドルを右クリックで表示)
  • セクションに設定できる項目
    • レイアウト
      • コンテンツの幅
      • カラムギャップ
      • 高さ
      • 最小の高さ
      • 垂直方向に整列
      • 伸縮セクション
    • スタイル
      • 背景(通常時、ホバー時)
      • 背景オーバーレイ(通常時、ホバー時)
      • 枠線
        •  
      • シェイプ区切り
      • タイポグラフィ
  • 高度な設定
    • モーション効果
    • レスポンシブデザイン
    • Attributes(プロ版のみ)
    • Custom CSS (プロ版のみ)

Copyright © 2023 RiARiSE - WEB制作 Wordpress、Elementor