文字を円や波などの線に沿わせ、短いキャッチコピーを装飾できます。
このページでできること
曲線に沿って文字を表示する
曲線に沿って文字を表示する
スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。
① 「テキストパス」を追加する
- 編集したいページを「Elementorで編集」で開きます。
- 左上の「＋」（要素を追加）を押し、「テキストパス」で検索します。
- 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
② 文字と曲線を選ぶ
赤い番号は手順の番号に対応しています。
- 「テキスト」に表示したい短い言葉を入力します。
- 「パスタイプ」から波・アーク・円などを選びます。
- 必要なら「リンク」に移動先を入力します。
- 「パスを表示」で、文字が沿う線を見せるか決めます。
ここを確認：文字の末尾が切れず、全部読める。
③ 見た目と表示を確認する
赤い番号は手順の番号に対応しています。
- 「スタイル」の「サイズ」で全体の大きさ、「回転」で向きを調整します。
- 「タイポグラフィ」と「文字間隔」で読みやすく整えます。
- 「開始点 (%)」で曲線上の文字の始まる位置を調整します。
入力・使い方の例
「WELCOME」を円に沿わせ、入口の案内に使います。長い説明文は通常のテキストで載せます。
④ スマホで確認して保存する
上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。
完了チェック
- 文字の末尾が切れず、全部読める。
- スマホでも文字が重ならず、リンクが使える。
うまくいかないとき
文字が途中で切れる・重なる
文章を短くするか、文字サイズ・文字間隔・パスのサイズを調整します。
画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。