Divi、マウスホバーでコンテンツをスワップ

Diviで画像スワップする方法

『マウスが画像の上に来た時、違う画像を表示させたい。』
『マウスがテキストの上に来た時違うテキストを表示させたい。』

こういう風に思ったことはありませんか?
Diviの最近のアップデートで、簡単にホバーで画像や文字を他のものにスワップすることが出来るようになりました。

それではどうやるのか説明していきます。
Diviのバージョンが3.27以上であることを確認してください。

Diviで画像をスワップする方法

Diviでホバーで画像をスワップ1

まずは画像を挿入します。

ホバーアイコンをクリック

Diviでホバーアイコンをクリック

画像の上にマウスを持っていくと、矢印のアイコンが出てきますのでこれをクリックします。
すると、『デスクトップ』と『ホバー』というテキストの入ったボックスが出てきます。
そうしたらホバーをクリックします。

ホバーの状態でも画像を設定

ホバーの状態で画像を設定

このようにホバーを選択すると、画像をまた設定できるようになります。
先ほどと違う画像を設定してみましょう。

このように画像が表示されます。
それでは、デスクトップの方を選択してみます。
前の画像が表示されれば成功です。
保存して、ビジュアルビルダーを閉じます。

ホバーエフェクトの成功

これで成功です。とっても簡単だったのではないでしょうか。

テキストでもホバーの設定可能

Divi、テキストでもホバーの設定が可能

このように、画像だけではなくテキストでもホバーの設定が可能です。

とってもシンプルですよね。
是非試してみてください。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です