テキストにカーソルを合わせると画像を変更しますか? ページ·ビルダー Elementor ? この新しいチュートリアルでは、その方法を説明します。
本日何についてお話したいかわからない場合は、次のビデオをご覧ください。
それでは、ここにいる理由に戻りましょう。
次のガイドもご覧ください。 Elementorを使用してポートフォリオからエフェクトカードを作成する方法
このチュートリアルを完了するには、次のものが必要です。 ElementorのProバージョンのこのバージョンでのみサポートされているカスタム CSS コードを使用するためです。Elementor.
2列のセクションを作成してから、サイドパネルで定義します。 横柄 シュール 最小の高さそして、 最小の高さ クリックしましょう VH スライダーをに設定します 100.
タブ内 形式 選びましょう 背景タイプ アン・クリスチャン・シュ 古典的な、次に変更します カラー シュール#F9F9F9
タブ内 高度な、すべてを変更します 内部マージン シュール 25
次に、列幅を次のように変更します。 視聴者の３８%が 左の列と 視聴者の３８%が 右の列。
左の列に、 テキストエディタウィジェット、次にテキストを貼り付けて変更します タイトルサイズ 上のテキスト タイトル3.
タブ内 高度な、として入力 内部マージン10-25-10-30 それぞれのために 上、右、下、左の内部マージン
セクションで 背景 タブ 高度な、 クリック 概要、次にを選択します 背景タイプ シュール 古典的な、入力してみましょう 色＃DFF5FF et 移行期間 シュール 0.5.
テキストにカーソルを合わせると、カーソルを合わせると壮大な背景色を見つけることができます。
それでは、セクションに行きましょう ボーダー、をクリックします 概要、次に選択します Continue のために ボーダータイプ et 国境間のリンクを無効にしましょう 入る 4 のために 左ボーダー。 色を選びましょう ＃002FA7 に遷移期間を追加します 0.5
テキストボックスにもう一度カーソルを合わせると、左側に境界線が付いた、より目立つアニメーションが表示されます。
セクションで 国境、タブに戻りましょう NORMAL、上の境界線の種類を選択しましょう Continue、境界線間のバインディングをオフにしましょう、つかみます 4 左の境界線を非常に透明にします。
テキストにもう一度カーソルを合わせると、非常にスムーズな遷移が表示されます。
また読みます： Elementorを使用して画像の上にテキストを表示する方法
このテキストを 2 回複製し、それぞれのテキストを変更しましょう コンテンツ このような。
右の列で、 画像ウィジェット、ライブラリから画像を挿入します。
この画像の周りにスペースを作成します。 詳細設定タブ 列のを入力し、上、右、下、左のすべての内部マージンに10 – 10 – 10 –50と入力します。
画像を選択してタブで見てみましょう 高度な 後者の、セクションに行きましょう モーションエフェクト その後 エントランスアニメーション、 選択する フェードインする
セクションに入りましょう 高度な [詳細設定]タブから、[CSSクラス]フィールドにいくつかのクラス名を追加します。 だから取得しましょう すべての画像 img-1
画像を2回複製しましょう。
1番目の画像を選択し、img-2をimg-XNUMXに変更してから、画像を新しい画像に変更しましょう。
1番目の画像では、img-3をimg-XNUMXに変更してから、画像を新しい画像に変更します。
セクションを選択して、そのタブに移動しましょう 高度な。 セクションで カスタムCSS、次のコードスニペットをコピーして貼り付けます。
selector .all-img{
display: none;
}
selector .img-1{
display: block;
}（このセクションがない場合は、Proバージョンがありません。続行する場合は、バージョンをアップグレードする必要があります）.
最初のテキストエディタを選択して、[詳細設定]タブに移動します。 属性セクション。 現場で Attributes、次のコードスニペットをコピーして貼り付けます。
data-showme|img-1img-1をimg-2またはimg-3に変更しながら、他のテキストエディタに対してこれを実行します
次に、HTMLウィジェットをページに追加しましょう。 次のスクリプトをコピーして貼り付けます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('[data-showme]').hover( function(){
event.preventDefault();
var showme = $(this).attr('data-showme')
$('.all-img').hide()
$('.' + showme).show()
})
})
</script>
次に、ページを保存または更新してからプレビューします。
これで、このタスクを簡単に実行できました。
Elementor Proを今すぐ入手！
まとめ
そこにそれがある ！ テキストにカーソルを合わせて画像を変更する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
