Elementorのテキストエディターの使い方

Elementorのテキストエディターウィジェットの使い方

今回はElementor・テキストエディターウィジェットの使い方について説明していきます。

このテキストエディターウィジェットは、Elementorウィジェットの中でも一番使用率が高いウィジェットかもしれません。
だからこど、基本となるテキストエディターウィジェットしっかり学びましょう!

この記事は『Elementorの使い方』のコースを元に作っています。
動画でみたい方は是非このコースをチェックしてみてください。
TOFUラボに参加することによって無料で見ることもできます。

テキストエディターウィジェットをドラック&ドロップで使用したい場所に挿入します。

そうすると、画像の様にテキストエディターの編集画面が画面左(設定による)に表示されます。
今回はこの編集画面の『コンテンツ』と『スタイル』について詳しく説明していきますね。

『高度な設定』に関してはすべてのウィジェットで同じ設定なので別で詳しく説明します。

テキストエディター『コンテンツ』タブ

このテキストエディターは名前の通り、テキストを挿入することができるウィジェットです。

画面左側の白抜きにテキストが入力されている部分でもテキストの編集が可能ですし、テキストが表示されている部分に直接書き込んでいくことも可能です。
どちらから入力した場合も、どちらにも反映されるようになっています。

ビジュアルタブ

まずはその中でも『ビジュアル』タブから説明していきます。

左側のテキストエディター編集欄には、テキストの表示を変更させることが出来る様々なエディターが付いています。
編集したいテキスト部分を選択し、例えば『B』を選べば『太字』にテキストが編集され、『I』を選べばイタリック字体に編集されます。

画像の様に赤枠で囲っている『リスト』を選択すれば、テキスト入力でリストが使用可能になります。

さらに、Wordなどでも使い慣れている方もたくさんいらっしゃると思いますが、文章を左揃えにしたり中央揃えにしたりなど一度は見たことのあるテキストエディターの表記が沢山あるのが特徴です。
なので、是非色々と触って慣れていってくださいね。

また、テキストの編集は画像の様に直接入力する部分でも編集したいテキストを選択することで編集可能です。
ただ、編集できる機能は少ないので注意してください。

画像挿入や画像表示位置

続いて、画像の様にテキストエディターに直接画像を挿入するやり方の説明です。

『ビジュアル』タブの左側に、『メディアを追加』タブがあり画像を挿入したいテキストの部分(画像だとテキスト最初の文字手前に挿入してます)を選択しておいて『メディアの追加』タブをクリックし、挿入する画像を選択すると選択したテキスト部分に画像が挿入できます。

ここでちょっと豆知識!
すべてのウィジェットで共通なのですが、左側の編集欄は表示を拡大することができます。編集欄の右側端部分をマウスで掴めば調整できます。
今回の作業のような、画像を編集しながらテキストを記入するような場面など調整しながら行うといいですね!

では、本編に戻ります。

画像の様に左側編集欄に表示されている、画像をクリックすると画像を編集する枠が表示されます。
この編集枠は、文字に対して画像をどのように編集するかを選択する編集欄となります。

例えば、画像の様に挿入されている画像に対して左寄せを選択すると画像を左に、テキストを右に表示することが出来ます。
(ただし、画像が大きすぎると編集されない場合があるので画像の大きさを調節してください)

それ以外にも右寄せ、中央寄せなど様々なエディターがあるので試してみてください。

ドロップキャップ

ドロップキャップの使い方の説明をします。

ドロップキャップは画像の通り、機能をONにすると最初の文字が大きく表示されます。
ただし、海外では使用される機能でもあまり日本では使用されない機能だと思うので、中々使う機会はないのかもしれません。

カラム・カラムギャップ

カラムとカラムギャップの使い方の説明をします。

この機能もあまり日本では使用しない機能なのですが、画像の様にカラムを選択すると数字が表示されます。
この数字の数の通りに文章が分かれる機能がカラムです。
さらに、この分けたカラムのギャップを調整するのがカラムギャップとなります。

敢えて、文章を分ける時以外は日本の場合は常にカラムは『1』を選択して、カラムギャップは使用しないのが良いのではないでしょうか。

テキストタブ

次に『テキスト』タブの説明をします。

このテキストタブは、HTMLを直接入力する時に使用します。
なので、HTMLで何か編集したい人などはこちらを使用して編集していけますし、HTMLが分からない人はここは使用する必要がない部分となります。

テキストエディター『スタイル』タブ

『スタイル』タブはシンプルに『配置』・『文字色』・『書体』の3種類のエディターがあります。

配置

まず、『配置』の説明です。

この『スタイル』タブの配置を使用する場合の注意点ですが、例えば『コンテンツ』タブのエディターでテキスト左詰めをすでに選択している場合は『スタイル』タブの配置で何を選択しても変更されません。
『コンテンツ』タブの設定をキャンセルすると、こちらでの設定がテキストに反映するようになります。

実際にどちらかで設定しておけば問題はないのですが、設定として何故か2つあると理解して覚えておいてください。

文字色

続いて『文字色』の説明です。

これは読んで字のごとく、テキストの色を変更できる機能です。
画像の赤枠部分をクリックすれば、カラーピッカーが表示されるのでそこで好きな色を選択することでテキストの文字色を自由に変更できます。

またこれも『スタイル』タブのエディターでも変更でき『配置』と同じくそちらが優先されて表示されます。

画像のように『地球マーク』を選択すると『Global Coloes』で設定されているElementor全てに適応されているカラーに変更できます。
(この『Global Coloes』などに関してはこちらの記事で詳しく説明しています。参考にしてください。)

書体

最後に『書体』です。

この書体の『えんぴつマーク』をクリックすることで、画像のようなタイポグラフィを表示させることができます。

この中でテキストのフォントを選択して変えたり・サイズの調整をしたり・太さを調節したりなど様々な調整が可能です。
行の高さ・字間などに関しては右側の値が記載されている部分を消してしまえば、常にデフォルトに戻すことができるので覚えておいてください。


内容に関しては見て頂ければほぼ分かって頂ける内容ばかりなので、ご自身で使用してみてください。

前述もしていますが、『コンテンツ』タブと同じ設定においては『スタイル』タブで設定した値よりも『コンテンツ』タブで設定していることが優先されますので注意してください。

これで、テキストエディターウィジェットの説明は終了です。

非常にシンプルなウィジェットではありますが、その分使用する回数も圧倒的に多いウィジェットなのでしっかりと覚えておきましょう!

目次

コメントを残す

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

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

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