のテキストに画像を追加する方法を見つける必要があります Elementor ?

Elementor 高度なCSSスキルを必要とせずに、誰もがWebデザイナーになることを可能にしました。 そのビジュアルエディタを使用すると、CSSコードをXNUMX行も記述せずに美しいWebページを作成できます。 必要なデザイン要素(ウィジェット)を追加して、設定パネルでカスタマイズできます。

それでも、いくつかの CSS スキルを持っていると、Elementor. 関数を使用して、独自のスタイルを Web ページに適用できます。 カスタムCSS D 'Elementor。 この記事では、Elementor のカスタム CSS 機能を使用して、Elementor のテキストに画像を追加する方法を説明します。

いくつかの ツール GIMP や Photoshop などのデザインでは、通常、レイヤー マーカーを追加してテキストに画像を追加する必要があります。 Elementor では、Elementor Title ウィジェットと Text ウィジェットに画像を背景として追加する設定オプションがない CSS コードを追加することで、同じことを実現できます。

Elementorテキストに画像を追加する

カスタムCSS機能はElementorProでのみ利用可能であるため、開始する前に、Elementorのバージョンをproバージョンにアップグレードしていないことを確認してください。 準備ができたら、新しいページまたはテンプレートを作成し、Elementorで編集します。 もちろん、既存のページやテンプレートを編集することもできます。

参照してください: Elementor:目次を追加する方法

タイトルウィジェットを編集ボックスに追加します。

Elementorでテキストに画像を追加する方法

設定パネルに移動して、タブの下のデフォルトのテキストを置き換えます 中身.

次のガイドもお読みください。 Elementor: カラーピッカーの使い方

タブに移動します 形式 テキストをパーソナライズします。 の鉛筆アイコンをクリックすると、テキストサイズやフォントスタイルなどを設定できます。 タイポグラフィオプション ブロックの下 題名。 テキストの背景として画像を使用したいので、テキストの色を設定する必要はありません。

次に、タブに移動します 高度な そしてブロックを開く カスタム CSS 次のCSSコードを貼り付けます。 画像のURLを独自の画像のURLに置き換えます。

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

これが例です。

Elementorでテキストに画像を追加する方法

Elementor Proを今すぐ入手!

まとめ

ここは ! Elementorでテキストに画像を追加する方法を示すこの記事は以上です。. そこへの行き方に不安がある場合fでお知らせください commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...