画像の上にテキストを表示する方法を知りたいと思ったことはありませんか? Elementor ?

この新しいチュートリアルでは、その方法を説明します。

本日何についてお話したいかわからない場合は、次のビデオをご覧ください。

それでは、ここにいる理由に戻りましょう。

このチュートリアルを完了するには、次のものが必要です。 ElementorのProバージョンのこのバージョンでのみサポートされているカスタム CSS コードを使用するためです。Elementor.

次のガイドもご覧ください。 Elementorで画像ギャラリーを作成する方法

3列構造の新しいセクションを作成してから、パネルで定義します。 横柄 シュール 最小の高さそして、 最小の高さ クリックしましょう VH スライダーをに設定します 100.

真ん中の列を選択して、タブで 形式、セクション 背景 クリックしましょう 古典的な のために 背景タイプ、次に暗い色を選択します。

この列に入れましょう 内部セクションウィジェット。 内部セクションウィジェットはデフォルトで2つの列で構成されていますが、そのうちのXNUMXつを削除しましょう。 パネルの残りの部分を変更して構成しましょう 横柄 シュール 最小の高さ と 最小の高さ カーソルをに設定しましょう 400.

また読みます： Elementor：プロファイルカードをズームする方法

次に、 垂直方向の配置 選択しましょう 真ん中.

次に、 タイトルウィジェット で 内側のセクション タイトル写真として入力し、配置で選択しましょう 中心。

タブ内 形式 タイトルの色を変更して、表示されていない場合でも表示されるようにします。

ドロップしましょう テキストエディタウィジェット 下 タイトルウィジェット。 次に、タブで 形式、[配置] で選択 センター。 また、テキストが表示されるようにテキストの色を変更してみましょう。

参照： Elementor：セクションを作成するために仕切りを追加する方法

を選択しましょう 真ん中の列 とそのタブで 形式、背景色をリセットして画像を読み込んでから、 役職 選択しましょう 中心中心, 繰り返します シュール 非繰り返し, カバー シュール サイズ.

セクションで 国境 すべてを変更しましょう 12のうちの境界半径。 で ボックスシャドウ、スライダーをに設定します 0 以下のために 水平な、へ 0 垂直の場合、 40 ぼかしで、 -10 放送中。 画像の下に美しい影の効果が表示されます。

オン 背景オーバーレイ、 選択する 古典的な のために 背景タイプ と カラー いずれかを選択してください 黒色、不透明度で、スライダーをに設定しましょう 0.55

タブ内 高度な、つかみましょう 20 すべてのマージン。

私たちを選択しましょう 内部セクション そのタブに移動します 高度な [カスタムCSS]セクションで、次のコードスニペットをコピーして貼り付けます。

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

（このセクションがない場合は、Proバージョンがありません。続行する場合は、バージョンをアップグレードする必要があります）。

セクションの中央の列をもう一度選択してみましょう。そのタブで 形式、およびセクション 背景オーバーレイ、タブにいることを確認します NORMAL、下げましょう 不透明度 à 0.

次に、タブをクリックします 概要そして、上 古典的な のために 背景タイプ と カラー、 を選択 暗色、 そうして不透明度 シュール 0.55および用 移行期間 スライダーをに設定しましょう 0.5.

これが私たちの操作の最終結果です。

列を 2 回複製し、他の 2 つの空の列を削除しましょう。残っているのは、背景画像と背景画像を変更することだけです。 コンテンツ 2 つの新しい列のテキスト エディター。

タブレットとスマートフォンで作業をプレビューして、どのように表示されるかを確認します。 次に、それを保存または更新します。

そう。 で画像の上にテキストを表示しました ページ·ビルダー Elementor.

Elementor Proを今すぐ入手！

まとめ

そう ！ 画像の上にテキストを表示する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.

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

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

...