Elementorで画像の上にテキストを乗せる方法

画像の上にテキストを表示するのはコーポレートサイトなどによくあるデザインで、コンテンツを印象的に見せる効果があります。

Elementorで画像の上にテキストを表示する方法はいくつかあり、やり方はどれも簡単ですが細かい調整が必要なものもあります。この記事では画像の上にテキストを乗せるための具体的な方法を解説します。

Elementorのレイアウトの作り方やスタイリングの方法などは「Elementorの使い方 初心者入門ガイド」にまとめているのでこちらもあわせてご覧ください。

Elementorで画像の上にテキストをのせる4つの方法

画像の上にテキストを乗せるには、以下のような方法があります。

  • 画像ウィジェットとテキストウィジェットを使う
  • 左右に配置したテキストウィジェットを画像に重ねる
  • テキストウィジェットの背景に画像を設定する
  • セクションやカラムの背景に画像を設定する

画像の中央にテキストを配置するだけでなく、横に配置した画像の上にテキストの一部が重なるようなデザインにも対応することができます。

画像ウィジェットとテキストウィジェットを使う

画像の中央にテキストを配置するようなコンテンツを作る場合は、画像ウィジェットの下に配置した見出しやテキストウィジェットを上に移動させます。

上に移動させるには、下に配置した見出しウィジェットの「高度な設定」タブでマージンの上を-40%などに指定することで配置を移動できます。

Elementorで画像の上にテキストをのせる4つの方法 画像ウィジェットとテキストウィジェットを使う

左右に配置したテキストウィジェットを画像に重ねる

テキストの一部を横のカラムに配置した画像に重ねる場合も先ほどと同じでマージンを使います。

横に配置した画像に重ねたいテキストの「高度な設定」タブでマージンの左右をマイナスに設定します。ここでは-200pxにしています。

Elementorで画像の上にテキストをのせる4つの方法 左右に配置したテキストウィジェットを画像に重ねる

テキストウィジェットの背景に画像を設定する

画像ウィジェットを使わずに見出しやテキストウィジェットだけで実装する必要がある場合は、テキストウィジェットの背景を設定します。

テキストウィジェットの「高度な設定」タブにある「背景」で設定することができます。画像を設定したら位置やサイズを調整できます。

Elementorで画像の上にテキストをのせる4つの方法 テキストウィジェットの背景に画像を設定する

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

セクションやカラムの背景を指定することで画像の上にテキストを表示することもできます。

テキストウィジェットのに直接背景を指定する方法との違いは、コンテンツを複数入れることができるところです。サブタイトルやボタンなどを入れることができるので複雑なコンテンツも作成できます。

Elementorで画像の上にテキストをのせる4つの方法 セクションやカラムの背景に画像を設定する

デザイン済みの格安Elementorテンプレートで効率よくWeb制作する

Figmaなどのデザインツールで作ったWebサイトをElementorで実装する場合、細かい設定やデバッグなどが必要です。

ホムペディアストアではWeb制作を効率化するためのElementorテンプレートを公開しており、Wordpressを使ったホームページを低コストで構築することが可能です。

Copyright © 2022 homupedia.com