でホバー アニメーションを作成しますか? Elementor ?

このチュートリアルでは、飛んで、それについての説明を明らかにするペプシの缶を使用します。

次のビデオをチェックして、私たちがあなたに見せたいもののアイデアを得ることをお勧めします。

Elementorでホバーアニメーションを作成する

単一の列セクションを挿入し、サイドバーで選択します 最小の高さ シュール 横柄

オン 最小の高さ クリック VH 次に、スライダーをにドラッグします 100。 常にタブに レイアウト 定義します 650 として largeur.

Elementorでホバーアニメーションを作成する

列とフィールドのサイドバーを選択します 垂直方向の配置 選択 真ん中.

Elementorでホバーアニメーションを作成する

タブ内 形式、カラーピッカーをクリックして背景色を変更し、次のように入力します #D37636 その後、セクションで 国境、つかみましょう 20 すべての縁石半径に対して。

Elementorでホバーアニメーションを作成する

タブ内 高度な、パディングバインディングをオフにして入力します 75 内部マージンの場合 オー et ロー et 25 内部マージンの場合 不器用な et 右へ.

Elementorでホバーアニメーションを作成する

次に、列にウィジェットをドラッグします 内部セクション。 内部セクションから列のXNUMXつを削除しましょう。

Elementorでホバーアニメーションを作成する

残りの内側セクションの列に、 タイトルウィジェット タイトルをに変更します ペプシラブ.

次のガイドもお読みください。 Elementorのポートフォリオからエフェクトカードを作成する方法

次に、タブで 形式、テキストに白い色を付け、タイポグラフィの場合は タイユ シュール 32行の高さ シュール 1.2, 文字間隔 シュール 0.5.

タイトルウィジェット、ドロップ テキストエディタウィジェット テキストを編集します。 タブ内 形式、テキストの色を白に変更し、 タイユ タイポグラフィ 16行の高さ シュール 1.5 文字間隔 シュール 0.5.

タブ内 高度な マージンを変更する ロー シュール -10.

セクションで ポジショニング タブ 高度な、変更します シュール Personnalisé幅カスタム 後者をに設定します 310.

Elementorでホバーアニメーションを作成する

段落の下に、 ボタンウィジェット テキスト用 続きを読みます.

Elementorでホバーアニメーションを作成する

タブ内 形式 ボタンに色を付けます ブランチ とテキストの色はそれをに設定します .

次に、の列を選択します 内側のセクション、セクション 高度な タブ 高度な リンクをオフにしてパーセンテージをクリックし、マージンを設定します 不器用な シュール 20 とで 内部マージン のそれを定義する 不器用な シュール 20.

次に、をドラッグします フォトウィジェット の上に 内部セクション 画像を挿入します。 例として、ウェブ上で簡単に見つけられる飲み物の画像を選択しました。

画像を挿入したら、 画像サイズ シュール 全体 Alignement クリックしましょう センター.

タブ内 高度な、セクションに移動します 役職 シュール 選択 オンライン(自動)上の 役職 選択 絶対水平方向 選択 それから シフト 入ります -9.9 そして シフト 垂直方向の -105.

さらに下に行く 変換セクション 定義 リサイズ シュール 0.5.

次に、の列を選択します 内部セクション とタブで 高度な の名前を入力してください cssクラス ペプシテキスト。

次に、メインセクションを選択し、セクションに移動します カスタムCSS 彼のタブの 高度な、  次のコードをコピーして貼り付けます。

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

レマルク : このセクションがない場合は、に移動する必要があります Elementorのプロバージョン.

ここで、テキストから背景色を削除する場合は、メイン列を選択し、[スタイル]タブで背景色を無効にします。

このとき、アニメーションはブラウザで正常に実行されます。

タブレットでのアニメーションも完璧なようです

しかしスマートフォンでは正常に表示されません。 この問題を解決しましょう。

ブラウザを表示してみましょう

ブラウザでセクションを選択し(まだスマートフォンモードになっていることを確認してください)、 シュール 320

次に、メイン列とそのタブを選択します AVANCE、すべての内側マージンをに設定します 25

Elementorでホバーアニメーションを作成する

ブラウザで画像を選択し、タブで 形式、cliquezシュール PX de に設定します 180.

タブ内 高度な du 画像ウィジェット続けて 役職、を選択します 絶対水平オフセット 入ります 75 そして中 垂直シフト 入ります 236。 つまり、異なるオフセットを使用して、画像を円の中央に配置してください。

Elementorでホバーアニメーションを作成する

これで、さまざまなデバイスでアニメーションをプレビューできます。

ElementorProを今すぐ入手!!!

まとめ

そう ! ホバーでアニメーションを作成する方法を示すこの記事は以上です。 Elementor. 行き方についてご不明な点がございましたら、 commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...