商品カードを作成してプレゼントしたいと思ったことはありませんか? Elementor ?
これが、このチュートリアルで紹介する内容です。 今日お話しする内容をかなり正確に把握するには、次のビデオをご覧ください。
このチュートリアルでは、サイズ、色、およびそれぞれの購入ボタンを強調表示して、靴である製品を紹介します。 各カードにカーソルを合わせると、この情報が表示されます。 これが私たちが行うことの簡単な要約です。
このチュートリアルに従うために、靴の写真を見つけて持っていることをお勧めします ElementorのProバージョン。 まだお持ちでない場合は、このリンクをクリックして入手してください.
しかし、私たちがここにいる目的に戻りましょう。
ページを作成して変更しましょう Elementor.
これでは、3列の構造を選択しましょう。 解決しましょう 横柄 シュール 最小の高さ、 VHの最小の高さで、カーソルをに設定します 100.
[スタイル]タブで、背景色を選択して #130640
真ん中の列に 画像ウィジェット ライブラリから靴の画像を選択します。
[スタイル]タブに移動し、画像プロパティで幅を80に設定します
次に、をドラッグします タイトルウィジェット タイトルを入力してください ナイキシューズ -これは一例であり、まったく別のブランドである可能性があります-
また読む： Elementorを使用してWebサイトのレイアウトを最適化する方法
HTMLタグをH3に設定し、配置を中央に配置します
[スタイル]タブに移動し、テキストの色を白色に変更します
タイポグラフィも変更してください
次に、をドラッグします 内側セクションウィジェット 下 タイトルウィジェット 上に挿入したもの。
デフォルトでは、このウィジェットは2つの列を提供し、そのうちのXNUMXつを削除します。 これで 内側セクションウィジェット、挿入 タイトルウィジェット。
タイトルとして付けてください 切る ： HTMLタグをに設定します スパン.
[スタイル]タブで、[タイトルの色]、[サイズ]を15に、[太]を300に変更します。
[詳細設定]タブで、右マージンのみを5に設定し、プロパティで ポジショニング 選択 インライン（自動）.
同じ内部セクションに、テキスト8用のボタンウィジェットと0のアイコン間隔を追加します。
また読みます： Elementorでポートフォリオの長い画像をスクロールする方法
[スタイル]タブで、ボタンのテキストの色と背景色をそれぞれ黒と白に変更し、[内部マージン]で[内部の右上-右-下のマージン-左]にそれぞれ6-10-6-10と入力します。
[詳細設定]タブで、左マージンのみを5に設定し、[位置]プロパティで[インライン（自動）]を選択します。
このボタンを3回複製し、最後の3つのボタンのテキストを9,10,11に変更します-これは、S、M、L、XL、XXLの文字を使用して行うこともできます-
セクションの編集をクリックし、水平方向の配置を中央に設定します
次に、この内部セクション-内部セクション-を複製し、色でサイズを変更して3つのボタンを削除し、残っているボタンのボタンテキストを消去します。
タブ内 中身 ボタンのアイコン ライブラリから円アイコンを選択し、[挿入] をクリックしてボタンに追加します。
[スタイル]タブで、タイポグラフィにサイズ24を指定し、内部余白をリンクして0を入力します。背景色で透明度を最小に設定すると、たとえばテキストの色を青に変更できます。
次に、このボタンを3回複製し、他の5つの色を黄色と赤に変更します。 次に、内側のセクションをクリックして編集し、[詳細設定]タブで上と下の余白を-10とXNUMXに設定します。
次に、XNUMX番目の内部セクションウィジェットの下にボタンウィジェットを追加し、テキストとして入力します Achetezメンテナンス とセンターへの配置。 [スタイル]タブで、ボタンを白に設定し、ボタンのテキストを黒に設定してから、すべての境界線の半径を20に設定します。
作業したメイン列を選択し、配置を設定します 垂直 シュール 真ん中、[スタイル]タブで、[背景の種類]を選択します。 劣化 タイプとして選択 ラジアル 次に、メインカラーで透明度と場所をに設定します 94。 XNUMX番目の色については、場所を次のように設定します 77 エッジの半径は10を超えています。
[詳細設定]タブで、余白を0-35-0-35に設定し、内側の余白を50-20-50-20に設定します。
次に、パネルを非表示にして、作業がどのように見えるかを確認できます。 カードがとてもきれいであることがわかりますが、特定のセクションをアニメーション化することで、カードに命を吹き込みます。 そのために、サイズ、色、購入ボタンをアニメーション化します。
また見なさい： Elementorでページスクロールのヘッダーを変更する方法
最初のセクションで、製品のサイズを表示する最初の内部セクションを作成し、[詳細設定]タブで次のように定義します。 フェードインアップ 動きの効果として-エントリアニメーションとアニメーションの遅延 300.
色を表示する内部セクションでも同じことを行いますが、アニメーションの遅延は800です。購入ボタンの場合、遅延は1000になります。
次に、クラスを割り当てます 非表示-最初 内側のセクションと購入ボタン。 最初の内部セクションを選択し、[詳細設定]タブで、[詳細設定]プロパティの[CSSクラス]フィールドにhide-firstと入力します。 他の内部セクションと購入ボタンについても同じようにします。
したがって、列全体をアニメーション化するCSSコードを追加します。 次のコードをコピーします。
セレクター{
高さ：400px。
ディスプレイ：フレックス;
}
/ *表示/非表示のCSS * /
セレクター.hide-first {
表示：なし;
}
セレクター：ホバー.hide-first {
表示：ブロック;
}
/ *画像変換* /
セレクターimg {
移行：.5sを緩和します。
}
セレクター：ホバーimg {
変換：平行移動（-20px、-40px）回転（-25度）スケール（1.4）;
}
/ *モバイルの概要* /
@media（max-width：767px）{
セレクター：ホバーimg {
変換：平行移動（-20px、0px）回転（-10度）スケール（1）;
}
セレクター{
マージン：50px 10px;
}
}
変更する列を選択して[詳細設定]タブに移動し、[カスタムCSS]フィールドにこのコードを貼り付けます。
注意: このオプションは、Pro バージョンを使用している場合にのみ利用可能であることを知っておく必要があります。Elementor.
完了すると、マップはマウスオーバーでアニメーション化されますが、デフォルトではサイズ、色、購入ボタンが非表示になります。
コードの説明については、コメント部分で概要を説明しています。 しかし、値を変更することで、各命令の目的を理解できます。
参照してください： 同じ列にXNUMXつのボタンを並べて追加する方法 エレメンターで
すべてが正常に機能する場合は、この列を2回複製し、他の空の列を削除します。
あなたがしなければならないのは、他のブロックの画像とタイトルを置き換えて、最後にあなたの作品をプレビューすることです。
これで、美しい商品カードが作成されました。
Elementor Proを今すぐ入手！
まとめ
そう ！ Elementorで製品カードを作成する方法を示すこのチュートリアルは以上です。 そこへの行き方について懸念がある場合は、 commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
