Elementorを使用してホバー効果にロゴスワップを追加する方法

Elementor WebsiteBuilderで無制限のカスタマイズがどのように行われるかは誰もが知っています。 そのカスタマイズにより、ユーザーエクスペリエンスを向上させ、作成するものを創造的にすることができます。

ホバー時のロゴ交換効果は、ユーザーがWebサイトに配置されたロゴにカーソルを置くと、色、形、輪郭などの詳細が自動的に変更されます。 このチュートリアルでは、 Elementorを使用してホバー効果でロゴスワップを作成する方法を理解します。

Elementorを使用してホバー効果でロゴスワップを作成する方法

あなたはすでに効果が何であるかを知っていて、あなたが作りたいものについてあなたの心の中にアイデアを持っています、先に進んでその方法を見てみましょう。

まず、ウィジェットの内部セクションを追加します。

次に、最初に作成したセクションに列を追加する必要があります。 このチュートリアルでは、 2列の構造を使用します。

次に、画像ウィジェットを作成した列にドラッグアンドドロップします。

効果を発揮させるには、2枚の写真が必要になります。 1つは通常どおりに表示され、もう1つはユーザーがカーソルを置いたときに表示されます。

同じロゴの2つのバリエーションを使用することも、まったく異なる2つの画像を使用することもできます。可能性は無限です。

画像を選択した後、カスタムCSSフィールドに次のCSSコードを貼り付けて、ホバー効果でのロゴの交換を機能させます。

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

そして完了！ ページを公開してプレビューし、Webサイトでの効果の外観を確認します。 必要に応じて、戻って変更を加えてください。

これは、 Elementorを使用してロゴスワップオンホバー効果を作成する方法です。 FacebookやTwitterに参加して、投稿の最新情報を入手してください。