割合を横長のバーで表し、進み具合を分かりやすく見せます。
このページでできること
割合をバーで表示する
割合をバーで表示する
スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。
① 「進行状況バー」を追加する
- 編集したいページを「Elementorで編集」で開きます。
- 左上の「＋」（要素を追加）を押し、「進行状況バー」で検索します。
- 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
② 割合と説明を設定する
赤い番号は手順の番号に対応しています。
- 「タイトル」に「準備の進み具合」などと入力します。
- 「パーセント」に0〜100の値を入力します。
- 数値を見せる場合は「パーセント表示」を表示にします。
- 「内部テキスト」にバーの中へ載せる短い説明を入力します。
ここを確認：数値とバーの長さが一致している。
③ 見た目と表示を確認する
赤い番号は手順の番号に対応しています。
- 「スタイル」でタイトルの文字色を整えます。
- 「パーセント」の色・背景色・高さでバーを調整します。
- 「内部テキスト」の色を、バーの上でも読みやすくします。
入力・使い方の例
タイトル「準備の進み具合」／パーセント75／内部テキスト「準備中」
④ スマホで確認して保存する
上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。
完了チェック
- 数値とバーの長さが一致している。
- スマホでも内部の文字が読める。
うまくいかないとき
進捗が自動で変わらない
通常は設定した割合を表示します。実際の進捗に合わせて数値を更新します。
画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。