Elementorポートフォリオエフェクトカードの作成方法

ポートフォリオの効果を持つカードを作成する方法を学びたいですか？ この新しいチュートリアルでは、それを行う方法を示します Elementor.

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

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

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

また読みます： Elementorを使用して画像の上にテキストを表示する方法

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

真ん中の列を選択して、この列にドロップしてみましょう 内部セクションウィジェット。内部セクションウィジェットは、デフォルトで2列で構成されています。 2つの列の下に、ウィジェットをドロップしましょう タイトル タイトル付き レストラン、選択する H4 HTMLタグの場合、および センター 位置合わせ用。

elementor-how-to-create-a-card-with-portfolio-effect-2 » BlogPasCher

タブ内 高度な タイトルウィジェットの、入力しましょう 30 のために トップマージン

もう一度内部セクションを選択しましょう。パネルで、横柄シュール 最小の高さ と 最小の高さ カーソルをに設定しましょう 380。次に、内部セクションの右または左の列を削除しましょう

落としましょう 画像ウィジェット 内部セクションに、ライブラリから画像を挿入します。選択しましょう全体以下のために 画像サイズ et センター 以下のために 配置。

注意：私たちのような完全なページが必要な場合は、Chrome拡張機能GoFullPageを使用してページをキャプチャすることをお勧めしますが、別のページを使用することもできます。

また発見： Elementorで画像ギャラリーを作成する方法

次にタブで形式、クリック PX de 幅、スライダーをに設定しましょう 260 らレ ボーダーレイ シュール 10

elementor-how-to-create-a-card-with-portfolio-effect-6 » BlogPasCher

次に、ぼかしを40に、拡散を-10に変更して、ボックスシャドウを変更しましょう。

[詳細設定]タブのセクション ポジショニング、選択する絶対のために役職, 水平方向 シュール 不器用な、 décalage シュール 0、L '垂直方向 シュールロー.

elementor-how-to-create-a-card-with-portfolio-effect-8 » BlogPasCher

画像ウィジェットを2回複製してみましょう。必然的にそれらはすべて重ね合わされます。最初のウィジェットによって隠されている他のウィジェットにアクセスできるように、ナビゲーターを起動してみましょう。

XNUMX番目のウィジェットとそのタブの画像を置き換えましょう 高度な、それらを変更しましょう 下マージン et 不器用な 入力することによって 30 それぞれについて。わずかな遅れが見られますが、

elementor-how-to-create-a-card-with-portfolio-effect-10 » BlogPasCher

XNUMX番目の画像ウィジェットについても同じことを行いますが、 60 下マージンと左マージン。これで、3つの画像ウィジェットすべての概要がわかります。

内部セクションウィジェットを選択して、そのタブに移動しましょう 高度な とセクションで カスタムCSS、次のコードスニペットをコピーして貼り付けます。

selector .elementor-widget-image{
    transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
    transform: scale(.65);
}
selector:hover .front-img{
    transform-origin: center left;
}
selector:hover .mid-img{
    transform-origin: center top;
}
selector:hover .last-img{
    transform-origin: bottom right;
}

（このセクションがない場合は、Proバージョンがありません。続行する場合は、バージョンをアップグレードする必要があります）

マップにカーソルを合わせると、ズームアニメーションが表示されます。