Elementor『Text Path』ウィジェットの使い方

Elementor 3.2で新しいウィジェットが登場しました！

その名も『Text Path』ウィジェットは、テキストをカーブをつけて表示させたり、設定次第では渦巻き状にも表示させられる面白いウィジェットです。

この記事では、Elementor 3.2で新しく登場した『Text Path』ウィジェットの使い方を説明します。

以下はText Pathウィジェットの実用例です。

＞＞こちらはElementorのText Pathウィジェットを使って見出しを楕円状に配置するh2の見出しデザインの作り方の実演動画です。

サイト制作のアイディアとして役に立つのでぜひ参考にしてください！

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementor『Text Path』ウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ！

Text Pathウィジェットの挿入

『Text Path』ウィジェットをドラッグ＆ドロップでカラムに挿入します。
※Text Pathウィジェットは『一般』ウィジェットの所にあります。

こちらはText Pathウィジェット挿入後の表示画面です。

コンテンツタブの編集

テキスト

『テキスト』では、テキストバーに入力したものが上記画面のようにそのまま画面に反映します。

Path Type

『Path Type』では、パスの種類を以下のオプションより選択することが可能です。

• Wave
• Arc
• 円
• ライン
• Ovalq
• Spiral
• カスタム：こちらの使い方については一番下のセクションで説明します。

Wave

※デフォルトは『Wave』に設定されています。

Arc / ライン

『ライン』は直線の右肩上がりの斜めのラインになり、『Arc』はアーチ状になります。

円

尚『円』を選択するとこの様に『Arc』の様にな表示になってしまいました。
それは単純に円周を作る為の文字数が足りない為です。

『テキスト』に文字数を追加するとこの様にテキストが円形になります。

これは『Oval』と『Spiral』を選択した時も同様です。

Oval / Spiral

こちらは画面上が『Oval』で画面下は『Spiral』を選択した時の表示画面です。
上記２つは文字数が多すぎる分はテキストの後半がカットされて表示されています。

リンク

『リンク』はText Pathをクリックした時に飛ばすリンクを設定できます。

配置

『配置』はText Pathの配置をカラム内で

• 左（デフォルト）
• 中央
• 右

のいずれかに設定することができます。

Text Direction

『Text Direction』ではテキストを表示させる方法を以下から選択ができます。

• デフォルト＝ LTR
• RTL (Right to Left：右から左）
• LTR (Left to Right：左から右）

『デフォルト』と『LTR』全く同じです。

上記はText Directionを『RTL』にした時の表示画面です。
するとこの様にテキストの文末部分が抜粋されて表示されます。

この設定は『Spairal』などで外側から内側にかけてテキストを表示するのか、内側から外側にかけて広がる様に身時を表示するのか、またはアラビア語などの右から左に書く言語のものに使用できそうですね。

Show Path

『Show Path』を『オン』に設定すると上記画面の様に文字の下に線が出てきます。
※デフォルトは『オフ』に設定されています。

スタイルタブ・Text Path

サイズ

『サイズ』では、カーソルを左右にスライドさせることのよろText Pathを大きくしたり小さくすることができます。
上記画面はサイズの値を『250』に設定した時の表示画面です。
※デフォルトは『500』の値に設定されています。

回転

『回転』ではカーソルを右にスライドさせることによりText Pathを時計回りに回転させることができます。
上記は回転の値を『150』に設定した時の表示画面です。
※デフォルトの値は『0』に設定されています。

書体

『書体』のタイポグラフィの編集の仕方につきましては、【Elementorの『テキストエディター』ウィジェットの使い方】で紹介をしているやり方と全く同じになりますので、そちらを参考にしてください。

Word Width

『Word Spacing』では、単語と単語の間のスペースを、カーソルを左右にスライドさせることにより広げたり狭めたりすることができます。
上記はWord Spacingの値を『20』（最大値）にした時の表示画面です。
※デフォルトの値は『0』に設定されています。

こちらはWord Spacingの値を『-20』（最小値）にした時の表示画面です。
スペースとがなくなるどころか文字が重なって表示されます。

尚、こちらのWord Spacingは日本語のテキストでは、英語の様に単語で区切られている文体ではないので、文字をスペースで区切らない限りは機能しません。

Starting Point

『Starting Point』はテキストの文頭の表示をPathのどこからスタートさせるかを変更することができます。

『Path Type：円』を参考に見てみましょう。
デフォルトでは文頭が時計の時針でいう『９時』のところからスタートしています。

こちらはStarting Pointの値を『25』にした時の表示画面です。
時計の時針で言う『12時』の地点からテキストの先頭がスタートしているのがお分かりいただけると思います。

色

『色』ではカラーピッカーよりテキストの色を自由に変更することが可能です。

マウスオーバー

『マウスオーバー』はポーンターがオブジェクトに触れている時のことを言います。
こちらではText Pathにポインターが触れている時に起こる変化の設定ができます。

色

『マウスオーバー / 色』では、ポインターがText Pathに触れている間のText Pathの色を変更することができます。
※デフォルトは透明色（変化なし）に設定されています。

ホバー時のアニメーション

『ホバー時のアニメーション』は、Text Pathにマウスオーバーした時にText Pathにアニメーションをつけることが可能です。
デフォルトでは『なし』に設定されていますが、『なし』の右側の▼をクリックするとアニメーション一覧が表示されるのでそこから好きなものを選択することができます。

こちらはホバー時のアニメーションを『Pulse Grow』に設定した時の動画です。

トランジション所用時間

トランジション所用時間はマウスオーバーをしてからText Pathのアクションが開始するまでにかかる時間を最小0秒から最大3秒にの間で変更することができます。
※デフォルトは『0.3』秒に設定されています。

スタイルタブ・Path

スタイルタブの『Path』は、コンテンツタブの『Show Path』を『オン』にすると出てくる設定です。

色

『色』ではPathのカーブの内側に色が付き、またその色味をカラーピッカーより自由に変更することが可能です。
※こちらは『Path Type：ライン』のみ作用しません。（ラインはPathが直線のため）

Stroke / 幅

『Stroke』の『幅』では表示されているPathの太さを変更することができます。
上記画面はStrokeの値を『10』にした時の表示画面です。
※デフォルトの値は『1』に設定されており、『0』にするとPathは消え、最大『20』の値までの設定が可能です。

Stroke / 色

Strokeの『色』ではカラーピッカーより自由にPathの色を変更することが可能です。
※デフォルトはピンク色に設定されています。

マウスオーバー ・ 色

『マウスオーバー』を選択し、『色』を別のものに選択すればポインターがこText Pathにかかっている間の色が変更できます。

マウスオーバー・Stroke / 色 / 幅

こちらは上記セクションの普通時の『Stroke / 色』『Stroke / 幅』で説明した通りですので、そちらを参考にしてください。

マウスオーバー・トランジション所用時間

トランジション所用時間は上記セクションのスタイルタブ・Text Pathの『トランジション所用時間』で説明したことと全く同じですのでそちらを参考にしてください。

カスタム（Path Type)の使い方

『Path Type』の『カスタム』を選択すると上記画面の様に編集にSVGのタブが表示され、編集画面には何も表示されなくなりました。

カスタムは要するに、自作のPathで編集することができます。
まず、『SVG』の下のボックスをクリックし、自作SVGをアップロードします。

上記は『SVG』をすでにアップロードした状態のメディアライブラリの画面です。
右側はデフォルトですでに入っているSVGです。
自作のSVGをアップロードし、画面右下の『メディアを挿入』をクリックします。

するとこの様に、自作のPathに沿ってテキストを表示させることができます。

自作Pathの作り方

自作Pathを作るにはAdobeのイラストレーターの『ペンツール』や『シェイプ』などで作成が可能です。
Path制作の注意点は、上記のPathの様に線の端と端が繋がっていない状態で作る様にしてください。

---

Elementor 3.2の新機能・Text Pathウィジェットは、今まで直線でしか表示させられなかったテキストをカーブや円、渦巻きなどにアレンジすることができるとても面白いウィジェットです。

サイトにビジュアル的にもアピールできるので是非、Text Pathウィジェットを活用してみてはいかがでしょうか？

またText Pathと同時に登場したElementorの別の新機能『Mask機能』という画像や動画を好きな形に切り取ることのできる機能を説明した【ElementorのMask（マスク）機能の使い方】の記事もございまずので参考にしていただけたら幸いです！