投稿ウィジェットのアイテムにホバー効果を追加する方法を学びたいElementor?
あなたがWordPressを使用している場合 Elementor あなたを作成するには サイトのWeb、ホバー効果機能に精通している必要があります。 この機能は主に各ウィジェット設定にあります Elementor.
ホバー効果は要素を魅力的にすることができるため、ユーザー エクスペリエンスを向上させる効果的な方法です。 ウェブサイト.
さて、ホバー効果について言えば、この記事ではウィジェット内の個々の投稿要素にホバー効果を追加する方法を説明します。 Elementor Elementor のカスタム CSS、特にズームイン ホバー効果を使用して投稿します。
このチュートリアルを作成する理由は XNUMX つあります。
- デフォルトでは、Elementor 投稿ウィジェットからホバー効果を投稿に追加できます。 ただし、ホバー効果は非常に基本的/標準的です。
- デフォルトでは、Elementor を使用すると、投稿ウィジェットにジッパー効果を追加できます (タブ 高度な -> 変成器 -> スケール）。 ただし、ホバー効果はすべての (個別ではない) 投稿ウィジェット要素に影響します。
Elementor の投稿ウィジェットから個々の投稿にホバー効果を追加する手順
チュートリアルを開始する前に、このチュートリアルでは Elementor のカスタム CSS 機能を使用していることをお知らせします。 この機能は、 Elementorプロ; バージョンがアップグレードされていることを確認してください。
ステップ 1: 投稿ウィジェットを追加する
Elementor エディターに移動すると、すべてがゼロから開始されるため、XNUMX つの列でセクションを作成します。
また読みます： MailChimp と Elementor を統合する方法
次に、ウィジェット パネルから [投稿] ウィジェットを選択し、編集領域にドラッグ アンド ドロップします。 投稿ウィジェットを追加したら、好みに応じてウィジェットを編集およびスタイルできます。
レマルク: すでに記事を公開していることを確認してください。 ウェブサイト.
ステップ 2: CSS スニペットを追加する
投稿ウィジェットの編集とスタイル設定が完了したら、次に単純な CSS スニペットを追加して、個々の投稿内にホバー効果を追加します。 投稿ウィジェットの設定で、タブに移動します 高度な -> カスタムCSS. 以下の CSS スニペットをコピーして、フィールドに貼り付けてください カスタムCSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
上記のコードは、セレクターを使用して投稿ウィジェットの個々の投稿要素を選択します .élémentor-post CSS 変換を適用します。
使用したホバー効果に満足している場合は、そのままにして、必要に応じてプロジェクトを保存できます。 ただし、遷移速度と変換スケール値をカスタマイズする場合は、CSS スニペットで値を変更できます。
レマルク: 変換/ズームインは、Web サイトで使用される一般的で人気のある効果です。 ホバー効果を変換する他の方法について詳しく知りたい場合は、こちらをご覧ください。 ページ.
また発見： 次の記事のすべての Elementor ウィジェット セレクター
ElementorProを今すぐ入手!!!
まとめ
この記事では、カスタム CSS を使用して Elementor の投稿ウィジェットの個々の投稿要素にホバー効果を簡単に追加できることを示します。
この効果に使用したテクニックは (ズームイン) で、これには 2D といくつかの疑似変換要素が含まれます。 Web サイトに最適なホバー効果が見つかるまで、あらゆるスタイルのホバー効果をカスタマイズして試してみてください。
ここは！ に最適なツールを紹介しました。 マーケティング Elementorの電子メール経由。 それらの使用方法について懸念がある場合は、以内にお知らせください。 commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
