Elementor使い方マニュアル

ページの作成・編集・公開を始めたい6項目を見る＋

• Elementor入門｜はじめての方へ →まずは画面の見方を覚えて、見出しを1つ変更してみましょう。 このページでできること編集画面の見方・用語・最初の練習・次に読むページ 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身の […]
• Elementorでページを作成・編集する →編集したいページを開き、変更を確認できる状態にしましょう。 このページでできること既存ページの編集・新規ページの作成・下書き保存 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のペ […]
• Elementorでコンテナ・配置・余白を整える →写真や文章の並び方と、周りの空きを整えましょう。 このページでできることコンテナの選択・横並びと縦並び・余白の違い 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章や […]
• Elementorでスマートフォン表示を調整する →パソコンで作ったページを、スマホでも読みやすく整えましょう。 このページでできることスマホ表示への切り替え・文字・横並び・余白の調整 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身 […]
• Elementorで保存・公開・以前の状態への復元を行う →編集した内容を保存し、必要なときに前の状態へ戻しましょう。 このページでできること下書き保存・公開・更新・操作の取り消し・履歴 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のペー […]
• Elementorで困ったときの確認ポイント →困った症状を選び、上から順に確認しましょう。 このページでできること選択できない・変更が出ない・スマホで崩れる・間違えて消した場合の対処 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご […]

配置・余白・並び方を整えたい4項目を見る＋

• コンテナの使い方 →コンテナは、見出し・画像・文章などをまとめる「入れ物」です。中の部品を横や縦に並べ、間隔や余白をまとめて調整できます。 OptiBの実際の画面で説明します。スクリーンショットの赤い番号と、説明の同じ番号を見比べて進めてく […]
• グリッドの使い方 →グリッドは、列と行で区切ったマス目に部品を並べるレイアウトです。サービス紹介や特徴を、同じ幅で整列させるときに使います。 OptiBの実際の画面で説明します。スクリーンショットの赤い番号と、説明の同じ番号を見比べて進めて […]
• 区切り線ウィジェットの使い方 →文章の区切りに、細い横線を入れましょう。 このページでできること線の種類・長さ・太さ・上下の間隔 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章や画像が異なります。 […]
• スペーサーウィジェットの使い方 →部品と部品の間に、ちょうどよい空きを作りましょう。 このページでできることスペースの高さ・スマホ用の調整・余白との使い分け 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページと […]

文章や情報を分かりやすく伝えたい9項目を見る＋

• 見出しウィジェットの使い方 →「サービスのご案内」という見出しを作ってみましょう。実際のElementor画面を使って、文字の変更から保存まで順番に説明します。 このページでできること見出しを選ぶ・文字を変える・文字を大きくする・スマホで確認する。ウ […]
• テキストエディターウィジェットの使い方 →説明文を入力し、読みやすい段落に整えましょう。 このページでできること本文の入力・段落分け・文字の装飾・リンクの確認 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章 […]
• タブの使い方 →「サービス内容」「料金」「よくある質問」のように、選んだ項目だけを表示できます。 このページでできること項目を切り替えて内容を見せる スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写ってい […]
• アコーディオンの使い方 →質問を押すと回答が開く、折りたたみ式の案内を作れます。 このページでできることよくある質問を開閉式にする スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画 […]
• アイコンリストの使い方 →チェックマークなどを付けて、特徴・持ち物・連絡先を読みやすく並べます。 このページでできることマーク付きの箇条書きを作る スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、 […]
• アラートの使い方 →臨時休業や注意事項など、読者に気付いてほしい案内を囲みで表示できます。 このページでできることお知らせや注意書きを目立たせる スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作 […]
• 続きを読むの使い方 →対応する投稿一覧で、本文を途中まで表示して「続きを読む」へつなげます。 このページでできること投稿一覧で本文を区切る スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順 […]
• HTMLの使い方 →案内用のHTMLや、外部サービスから提供された埋め込みコードを配置できます。 このページでできることHTMLコードを埋め込む スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作 […]
• テキストパスの使い方 →文字を円や波などの線に沿わせ、短いキャッチコピーを装飾できます。 このページでできること曲線に沿って文字を表示する スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に […]

写真・動画・ギャラリーを載せたい5項目を見る＋

• 画像ウィジェット・背景画像の使い方 →写真を差し替えて、ちょうどよい大きさに整えましょう。 このページでできること画像の選択・幅の調整・背景画像との違い 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章や […]
• 動画ウィジェットの使い方 →ページ内でYouTube動画を見られるようにしましょう。 このページでできること動画URLの設定・再生オプション・表示確認 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページと […]
• 画像ボックスの使い方 →写真・見出し・説明をひとまとまりにして、サービスや商品の特徴を紹介できます。 このページでできること画像・見出し・説明をまとめる スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない […]
• 画像カルーセルの使い方 →複数の写真を横へ切り替えて見せるスライドを作れます。 このページでできること複数の写真をスライド表示する スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画 […]
• ベーシックギャラリーの使い方 →写真を格子状に並べて、作品や施工例などを一覧で見せられます。 このページでできること写真を一覧に並べる スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面 […]

ボタン・地図・案内を配置したい6項目を見る＋

• ボタンウィジェットの使い方 →押すとお問い合わせページへ移動するボタンを作りましょう。 このページでできることボタンの文字・リンク先・色と大きさの調整 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは […]
• Googleマップウィジェットの使い方 →所在地が分かる地図をページへ載せましょう。 このページでできること住所の入力・ズーム・地図の高さ・場所の確認 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章や画像が […]
• アイコンウィジェットの使い方 →星や電話などのマークを、ページの案内に使いましょう。 このページでできることアイコンの選択・色とサイズ・リンクの設定 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章 […]
• ソーシャルアイコンの使い方 →InstagramやYouTubeなどの公式アカウントへの入口を作れます。 このページでできること公式SNSへのリンクを並べる スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操 […]
• メニューアンカーの使い方 →「料金を見る」などのリンクから、同じページの指定した位置へ移動できます。 このページでできることページ内の指定位置へ移動させる スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操 […]
• サイドバーの使い方 →WordPressで登録したウィジェットエリアを、Elementorのページ内に表示できます。 このページでできること登録済みのウィジェットエリアを表示 スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてくだ […]

特徴・実績・お客様の声を伝えたい5項目を見る＋

• アイコンボックスの使い方 →記号・見出し・説明をまとめ、サービスの特徴を短く伝えられます。 このページでできることマーク付きで特徴を紹介する スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記 […]
• カウンターの使い方 →0から指定した数まで動く数字で、実績や件数を見せられます。 このページでできること実績などの数値を動かして見せる スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記 […]
• 進行状況バーの使い方 →割合を横長のバーで表し、進み具合を分かりやすく見せます。 このページでできること割合をバーで表示する スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で […]
• 推薦文の使い方 →お客様の声を、文章・写真・名前・肩書きと一緒に掲載できます。 このページでできることお客様の声を写真と一緒に載せる スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に […]
• 評価の使い方 →5点中4点などの評価を、星やアイコンで表示できます。 このページでできること星などで評価点を表示する スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で […]

お問い合わせフォームを置きたい1項目を見る＋

• カスタムフォームの使い方 →Fluent Formsで作ったフォームを選び、ページの中へ表示できます。 このページでできること作成済みのFluent Formsを配置する スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像 […]

OptiBのお知らせ・会話を載せたい2項目を見る＋

• NEWS一覧ウィジェットの使い方（OptiB） →公開済みのお知らせを、ページ内に一覧で表示しましょう。 このページでできること表示件数・記事の種類・カテゴリーの絞り込み 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは […]
• 会話ブロックウィジェットの使い方（OptiB） →質問と回答を、読みやすい吹き出しで表示しましょう。 このページでできること吹き出しの追加・人物名と発言・左右の配置 画面の番号と説明を見比べて進めてください。写真はOptiBの実際の編集画面です。ご自身のページとは文章や […]