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

Elementor 3.2で新しいウィジェットが登場しました!
その名も『Text Path』ウィジェットは、テキストをカーブをつけて表示させたり、設定次第では渦巻き状にも表示させられる面白いウィジェットです。
この記事では、Elementor 3.2で新しく登場した『Text Path』ウィジェットの使い方を説明します。

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

Text Pathウィジェットの挿入

Text Pathウィジェットを挿入

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

ウィジェット挿入後の表示画面

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

コンテンツタブの編集

コンテンツタブの説明

テキスト

テキストの説明

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

Path Type

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

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

Wave

Path Type一覧

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

Arc / ライン

Path Type:ライン・Arcのサンプル画像

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

Path Typeをテキストがデフォルトの状態で『円』にした時

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

テキストを追加した後の『円』の表示

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

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

Oval / Spiral

Path Type: Oval・Spiral

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

リンク

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

配置

配置の説明・中央にした時の表示画面
配置:中央

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

  • 左(デフォルト)
  • 中央

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

Text Direction

Text Directionの説明・LTR
デフォルト(LTR)

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

  • デフォルト= LTR
  • RTL (Right to Left:右から左)
  • LTR (Left to Right:左から右)

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

Text Direction:RTL

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

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

Show Path

Show Pathを『はい』にした時の表示画面

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

スタイルタブ・Text Path

スタイルタブ・Text Pathの編集

サイズ

サイズの変更

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

回転

回転の説明

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

書体

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

Word Width

Word Spacingの説明・値を最大値にした時の表示画面

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

Word Spacingを最小値にした時の表示画面

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

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

Starting Point

Starting Pointの説明

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

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

Path Type:円で、Starting Pointの値を『25』にした時の表示画面

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

文字色の変更

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

マウスオーバー

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

マウスオーバーの文字色の説明

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

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

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

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

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

トランジション所用時間

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

スタイルタブ・Path

スタイルタブ・Pathの編集

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

Pathの色の変更

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

Stroke / 幅

Pathの幅の説明

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

Stroke / 色

Strokeの色の変更

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

マウスオーバー ・ 色

マウスオーバーのPath色の変更

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

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

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

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

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

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

Path Type:カスタムの説明

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

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

メディアライブラリ・自作SVGの挿入

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

自作SVG挿入後の表示画面

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

自作Pathの作り方

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


Text Pathウィジェットは今まで直線でしか表示させられなかったテキストをカーブや円、渦巻きなどにアレンジすることができるとても面白いウィジェットです。
サイトにビジュアル的にもアピールできるので是非、Text Pathウィジェットを活用してみてはいかがでしょうか?

コード書かないウェブ制作を学べるサロン『TOFUラボ』​

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。