WordPress 2024 で画像ホバー効果を追加するにはどうすればよいですか? [従うべき 4 つの最良のステップ]

WordPress のホバー効果とは何ですか? ウェブサイトは独自性を持って構築される必要があります。 他の人も同じことを考えていると難しいです。 幸いなことに、最新のテクノロジーによりサイトのデザインが簡素化されています。

静止写真にホバー効果を追加するのは一例です。 WordPress で写真にホバー効果を適用する利点について。 次に、それらをウェブサイトに組み込む方法を説明します。 始めましょう！

WordPress に画像ホバー効果を追加するにはどうすればよいですか? 4 つの最善のステップ

ホバー効果とその利点について学んだ後、それらを実装する方法が知りたいかもしれません。 幸いなことに、私たちはそれを行うための包括的なガイドを作成しました。

ホバー効果はカスタム コードによって追加できます。 ただし、経験豊富なプログラマーでない場合、これは時間がかかり、場合によっては危険な作業になる可能性があります。

ただし、プラグインを使用すると、作業の複雑さが大幅に軽減されます。

　 無料の Beaver Builder WordPress プラグイン 完全に機能し、見た目も美しい WordPress サイトを作成するプロセスを簡素化します。

モジュール式 CSS から直感的な CSS へ ドラッグアンドドロップページエディタ、すべてが開発者を念頭に置いて設計されています。

さらに、このアプリを使用すると、誰でも簡単に画像にホバー効果を適用できます。 追加のインタラクティブ要素が必要な画像には、Beaver Builder を使用すれば間違いありません。

Beaver Builder テーマを使用することもお勧めします。 WordPress 投稿テンプレートを使用して、ページなどのさまざまな投稿タイプをすばやく作成します。

そうすれば、レイアウトの開発について心配する代わりに、ホバー効果などの魅力的な機能の作成に集中できます。 一方、選択した WordPress テーマで Beaver Builder を利用することもできます。

ステップ 1: 写真モジュールを追加する

始める前に、Beaver Builder プラグインをアクティブ化します。 次に、WordPress 管理画面の「ページ」に移動します。 新しいページを作成するか、既存のページを選択して、エディタをアクティブにします。

次に、右上のプラス記号をクリックします。 写真モジュールを追加します。 ドラッグ アンド ドロップにより、このモジュールを迅速に配置できます。

ステップ 2: 写真モジュールをアクティブ化する

このモジュールを使用すると、サイトに写真を投稿できます。 ライブラリから写真を選択するか、URL を入力します。 メディア ライブラリで画像をトリミングします。

写真を整形することもできます。 風景、パノラマ、ポートレート、または円形の画像はすべてホバー効果を使用できます。 画像リンクを含めることができるようになりました。 ホバー効果を使用して、トラフィックを特定の URL に誘導できます。

ステップ 3: カスタム クラスを追加する

画像モジュールのセットアップに続いて、「詳細設定」を選択します。 これは HTML要素.

「クラス」まで下にスクロールします。 ここにエフェクトのカスタムクラス情報を入力します。 そこで、クラスに hover-unblur を追加しました。 ホバー効果を使用すると、画像の色や動きを変更できます。 Beaver Builder のヒーブ効果。 影響に基づいて、特別なクラスが必要です。

ステップ 4: CSS エフェクトを統合する

最後に、ホバー CSS をサイトに追加します。 私たちのナレッジベースにはホバー CSS があります。 ホバー効果間の時間は 0.3 秒です。 または CSS を送信するとき。 移行を加速または減速できます。

左側のタイトル バーから [グローバル設定] を選択します。 次に、CSS コードを CSS タグに追加します。

すべての Beaver Builder ページで、[ツール] > [グローバル設定] に移動し、保存します。 また、Beaver Builder 以外のコンテンツには CSS ルールが適用されます。

LayoutCSS&Jscript の単一ページ。 CSS の変更を保存します。 最初のホバー効果を参照してください。画像の上にマウスを置いてテストします。

写真の行または列に効果を適用します。

クイックリンク：

• WordPress サイトのカラーパレットを作成するには?
• WordPress でメンテナンス モード ページを作成するには?
• WordPress でカスタム 404 エラー ページを作成するには?
• クライアントとのコミュニケーションを効果的に管理するにはどうすればよいですか?

結論: WordPress に画像ホバー効果を追加するにはどうすればよいですか?

Web サイトをパーソナライズする方法はたくさんありますが、最も簡単な方法の XNUMX つは、画像にホバー効果を使用することです。 ホバー効果は、Web サイトの訪問者を惹きつけ、Web サイトに長く留めておくための楽しい方法です。

よく使用するホバー効果はありますか? 下のコメント欄に書いてください！