Elementor：プロファイルカードをズームする方法

パー パッシーガイ | Elementor

ページ ビルダー プラグインを使用してプロファイル カードをズームする方法を知りたいですか。 Elementor ?

この新しいチュートリアルでは Elementorでは、プロファイルの名前とソーシャル ネットワーク アイコンを表示しながら、プロファイル カードにズーム効果を適用する方法を紹介します。

本日何についてお話したいかわからない場合は、次のビデオをご覧ください。

それでは、ここにいる理由に戻りましょう。

このチュートリアルを完了するには、次のものが必要です。 ElementorのProバージョンのこのバージョンでのみサポートされているカスタム CSS コードを使用するためです。Elementor.

3列構造の新しいセクションを作成してから、パネルで定義します。 横柄 シュール 最小の高さそして、 最小の高さ クリックしましょう VH スライダーをに設定します 100.

3列セクション

ウィジェットを追加しましょう 内部セクション 真ん中の列にあります。 内部セクションウィジェットはデフォルトで2つの列で構成されていますが、そのうちのXNUMXつを削除しましょう。 パネルの残りの部分を変更して構成しましょう 横柄 シュール 最小の高さ と 最小の高さ カーソルをに設定しましょう 400.

内部セクションウィジェットを追加する

タブ内 形式、変更しましょう 背景オーバーレイ。 Cliquez sur 古典的な 背景の種類で、ライブラリから画像を選択し、画像設定で、 中心中心 位置に カバー サイズについて。 不透明度 1と

セクションで ボーダー クリック % と入力します 4 すべての縁石半径に対して。

ボックスの数で、スライダーを 0 シュール 水平な、へ 70 シュール 垂直、へ 63 シュール Flou（フラウ）、へ -60 シュール ディフューザー。 画像の下に美しい影の効果が表示されます。

で 内部セクション をスライドさせます タイトルウィジェット。 タイトルとしてSteveJobsと入力し、[スタイル]タブで白を選択します ＃FFFFFF. タイポグラフィで、サイズを選択します 20.

次に、Internal Section Widgetの列を選択し、[Style]タブで、[Solid]、[1]のすべての幅、および#FFFFFFの色をクリックして境界線のタイプを選択します。

タブ内 高度な、マージンをに変更します 15 および内部マージン 20.

Elementorを使用してマップにズームを適用する

次に、ソーシャルメディアアイコンウィジェットを[内部]セクションにドラッグして、ソーシャルメディアアイコンを挿入します。

タブ内のソーシャル メディア リンクを編集する 中身 各ソーシャルネットワークをクリックしてください。 他のソーシャルネットワークを追加したい場合は、「追加」ボタンをクリックしますer要素

アイコンフィールドで[アイコンライブラリ]をクリックし、検索バーにソーシャルネットワークの最初の文字を入力します。見つけたらすぐに選択して、[挿入]ボタンをクリックします。

次に、タブに移動します 形式、セクション アイコン、色をに変更します Personnalisé.

に関するガイドもお読みください。 Elementorでページ付けを追加する方法

オン メインカラー、透明度を最小に設定します。

オン 二次色、色を選択します ＃FFFFFF。 [サイズ]に次のように入力します 20、内部証拠金 0.4.

次に、タブをクリックします 高度な、およびセクション ポジショニング、cliquezシュール Personnalisé。 上の カスタム幅、 入力 0.

発見も Elementorでカラーピッカーを使用する方法

オン 役職、sélectionnez 絶対、シフト時 15上の 垂直方向 選択 ローと シフト シュール 20.

もう一度選択します 内部セクション とタブで 高度な、セクション カスタムCSS （このセクションがない場合は、すぐにElementorのプロバージョンにアップグレードして続行してください）

次のコードをコピーしてこのセクションに貼り付けます。

/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
    overflow: hidden !important;
}
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    -webkit-transform-origin: left;
            transform-origin: left;
}
selector:hover .elementor-background-overlay{
    -webkit-transform: scale(2);
            transform: scale(2);
}

先験的にはあまり見えないはずですが、画像にカーソルを合わせると、画像にズームが適用されているのがわかります。

Elementorを使用してマップにズームを適用する

次に、前のコードの後に​​次のコードをコピーして貼り付け、列の特定の要素を表示または非表示にします。

/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.75s !important;
    transition: all 0.75s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

これで、画像にカーソルを合わせるとすぐにズームが画像に適用され、ソーシャルネットワークの名前とアイコンが表示されます。

Elementorを使用してマップにズームを適用する

この列を2回複製し、他の2つの列を削除してみましょう。

Elementorを使用してマップにズームを適用する

内部セクションの背景画像、およびソーシャルネットワークの名前とリンクを変更します。

これで、このタスクを簡単に実行できました。 タブレットとスマートフォンの動作をプレビューし、各デバイスに合わせてマージンを変更してみてください。

Elementor Proを今すぐ入手！

まとめ

そう ！ プロファイルカードにズーム効果を適用する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.

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

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

...

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.