【ノーコード】Elementorを使用して画像の上に文字を設置する方法と?

2021.12.16
ハック集

サイトを作成する際に画像の上に文字を載せたい場面があると思います。

今回の記事では、そんなあなたの悩みを解決するためにElementorで画像の上に文字を設置する方法をがお説明します。

とても簡単ですので、ぜひ最後までご覧いただき試してみてはいかがでしょうか?

Elementorの公式サイトはこちら

Elementorで画像の上に文字を設置する方法

それでは、早速Elementorで画像の上に文字を設置する方法をご紹介します。

今回ご紹介するのは、

  • 画像編集をして文字を組み込む
  • セクションの背景に画像を設定する

の2種類です。

それぞれ詳しく解説していきます。

画像編集をして文字を組み込む

Elementorで画像の上に文字を設置する方法の1つ目は、「画像編集をして文字を組み込む」です。

こちらはその名の通りadobeなどの画像編集ソフトを使用して、画像の上に文字を設置して物を用意します。

その後Elementorの編集画面で画像を設置したい部分に画像ウィジットかセクションの背景などを使用して反映させるだけです。

セクションの背景に画像を設定する

Elementorで画像上に文字を設置する方法の2つ目は、「セクションの背景に画像を設定する」です。

手順をご説明します。

➀Elementorの編集画面を開きます。

➁セクションの編集から画像を設定します。

➂背景画像を設定したセクション内にテキストウィジットをドロップ

④入力したい文字を設置する

➄文字の位置を「配置」やマージンを利用して設定する

※この際画像が崩れないように気を付けてください

これにて終了です。

まとめ

今回の記事では、そんなあなたの悩みを解決するためにElementorで画像の上に文字を設置する方法をがお説明しました。

いかがでしたでしょうか。

どちらの方法もとても簡単ですので、ぜひ参考にしてみてはいかがでしょうか。

プロフィール

ノーコード歴5年のフリーランス

初めまして!ノーコード歴5年のフリーランスです! Elmentorをこよなく愛するものです。 コミュニティも運営していますのでぜひご参加ください!

アクセスランキング

  • 2021.09.26

    Elementorで日本語フォントを使う3つの方法をご紹介します!【フォントでもう悩まない】

  • 2021.12.13

    Elementorで起こる403エラーとは?解決策教えます!

  • 2021.08.28

    Elementorでスマホへのレスポンシブ対応の設定方法

  • PAGE TOP