無料のElementorだけで作ったヨガのコミュニティのLPのテンプレート

Elementorの新しい
無料テンプレートサイトが追加されました!

Elementorで画像に文字を回り込ませる方法

Elementorで画像に文字を回り込ませる方法【HTML要りません】

「画像に文字を回り込ませることってElementorでできるの?」
「カラムを二つに分けても回り込まないし・・・」

実はElementorのテキストエディターウィジェットを使えば簡単にできるんです。HTMLも一切要りません。

こんな感じです。

この記事ではどうやってこのように文字を回り込ませるのか説明します。

テキストエディターウィジェットで文字を回り込ませる

少しテキストを増やしましたが、こんな感じになると思います。

画像を挿入

テキストで選択してる部分に挿入されるので注意してください。

ちょっと変な回り込みですし、画像のサイズも大きすぎますね。

文字の回り込みの設定

テキストエディターウィジェットの設定の中の画像をクリックします。
するとこのように回り込みのメニューが出ています。

一番左のボタンをクリックします。

文字がみやすくなりましたね。
でもまだ画像が大きいです。

画像を小さくする

これらのコーナーを掴んで、内側に持っていきます。

画像が小さくなりました。
これで完成です。

まとめ

一見テキストエディターウィジェットは文字だけのウィジェットに見えますが、実は画像もロードできるんですね。
そして回り込みの設定が可能で、画像のサイズも自由自在です。
是非試してみてください。


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

以下はElementorをより有効に活用できそうな方法や機能をまとめた記事です。

よろしければご覧くださいね!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通