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

【Divi】マウスホバーでコンテンツをスワップさせる方法

こんにちはナオミです。

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

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

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

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

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

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

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

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

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

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

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

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

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

ホバーエフェクトの成功

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

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

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

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

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

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

Diviでマウスホバーで画像をスワップする方法を動画でご覧になりたい方はこちらからどうぞ!

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通