ポートフォリオの効果を持つカードを作成する方法を学びたいですか？ この新しいチュートリアルでは、Elementorを使用してそれを行う方法を紹介します。
本日何についてお話したいかわからない場合は、次のビデオをご覧ください。
それでは、ここにいる理由に戻りましょう。
このチュートリアルを完了するには、次のものが必要です。 ElementorのProバージョン、このバージョンのElementorでのみサポートされるカスタムCSSコードを使用するためです。
また読みます： Elementorを使用して画像の上にテキストを表示する方法
3列構造の新しいセクションを作成してから、パネルで定義します。 横柄 シュール 最小の高さそして、 最小の高さ クリックしましょう VH スライダーをに設定します 100.
真ん中の列を選択して、この列にドロップしてみましょう 内部セクションウィジェット。 内部セクションウィジェットは、デフォルトで2列で構成されています。 2つの列の下に、ウィジェットをドロップしましょう タイトル タイトル付き レストラン、 選択する H4 HTMLタグの場合、および センター 位置合わせ用。
タブ内 高度な タイトルウィジェットの、入力しましょう 30 のために トップマージン
もう一度内部セクションを選択しましょう。 パネルで、 横柄 シュール 最小の高さ と 最小の高さ カーソルをに設定しましょう 380。 次に、内部セクションの右または左の列を削除しましょう
落としましょう 画像ウィジェット 内部セクションに、ライブラリから画像を挿入します。 選択しましょう 全体 以下のために 画像サイズ et センター 以下のために 配置。
注意：私たちのような完全なページが必要な場合は、Chrome拡張機能GoFullPageを使用してページをキャプチャすることをお勧めしますが、別のページを使用することもできます。
また発見： Elementorで画像ギャラリーを作成する方法
次にタブで スタイル、 クリック PX de 幅、スライダーをに設定しましょう 260 らレ ボーダーレイ シュール 10
次に、ぼかしを40に、拡散を-10に変更して、ボックスシャドウを変更しましょう。
[詳細設定]タブのセクション ポジショニング、 選択する 絶対 のために ポジション, 水平方向 シュール 不器用な、 décalage シュール 0、L '垂直方向 シュール ロー.
画像ウィジェットを2回複製してみましょう。 必然的にそれらはすべて重ね合わされます。 最初のウィジェットによって隠されている他のウィジェットにアクセスできるように、ナビゲーターを起動してみましょう。
XNUMX番目のウィジェットとそのタブの画像を置き換えましょう 高度な、それらを変更しましょう 下マージン et 不器用な 入力することによって 30 それぞれについて。 わずかな遅れが見られますが、
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バージョンがありません。続行する場合は、バージョンをアップグレードする必要があります）
マップにカーソルを合わせると、ズームアニメーションが表示されます。
最初の画像ウィジェット（一番下の画像ウィジェット）とそのタブを選択しましょう 高度な、つかみましょう フロント-img 以下のために CSSクラス.
XNUMX番目の画像ウィジェットには、次のように入力します ミッドimg CSSクラスの場合。
XNUMX番目の画像ウィジェットとして、次のように入力します last-img CSSクラスの場合。
参照： Elementorを使用して画像のタブ付きギャラリーを作成する方法
列にカーソルを合わせると、内部セクションのコンテンツの美しいアニメーションが表示されます。
タブレットモードでページを表示してみましょう画像が正しく表示されないことがわかります。
最初の画像ウィジェットを選択し、その[スタイル]タブで、PCをクリックし、幅として150を入力して幅を変更しましょう。 他の2つの画像ウィジェットでも同じことをしましょう。
内部セクションを選択し、そのコンテンツセクションで、 最小の高さ シュール 225.
また、問題が発生しないアプリオリでスマートフォンモードでページを表示してみましょう。 ただし、存在する場合は、[コンテンツ]セクションで[内部セクション]を選択して、最小の高さを変更しましょう。
次に、中央の列を2回複製してから、他の2つの空の列を削除します。
これらの列のタイトルを変更してから、画像を変更してみましょう
あなたはここに結果がある壮大なセクションを持っている必要があります：
これで、このタスクを簡単に実行できました。
Elementor Proを今すぐ入手！
結論
そこにそれがある ！ ポートフォリオの効果を持つカードを作成する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
