Divi:すべての時間の中で最高のWordPressテーマ!

もっと 901.000のダウンロードDiviは世界で最も人気のあるWordPressテーマです。 完全で使いやすく、62以上の無料テンプレートが付属しています。

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

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

ポートフォリオ効果のあるカードを作成する

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

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

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

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

3列セクション

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

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

ポートフォリオ効果のあるカードを作成する

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

ポートフォリオ効果のあるカードを作成する

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

ポートフォリオ効果のあるカードを作成する

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

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

Elementorでウェブサイトを簡単に作成

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バージョンがありません。続行する場合は、バージョンをアップグレードする必要があります)

あなたはインターネットであなたの製品を売りたいですか?

WooCommerceを無料でダウンロードしてください。これは、WordPressで物理的およびデジタル製品を販売し、オンラインストアを簡単に作成するための最高のeコマースプラグインです。 初心者に最適です。

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

ポートフォリオ効果のあるカードを作成する

最初の画像ウィジェット(一番下の画像ウィジェット)とそのタブを選択しましょう 高度な、つかみましょう フロント-img 以下のために CSSクラス.

XNUMX番目の画像ウィジェットには、次のように入力します ミッドimg CSSクラスの場合。

XNUMX番目の画像ウィジェットとして、次のように入力します last-img CSSクラスの場合。

参照: Elementorを使用して画像のタブ付きギャラリーを作成する方法

列にカーソルを合わせると、内部セクションのコンテンツの美しいアニメーションが表示されます。

ポートフォリオ効果のあるカードを作成する

タブレットモードでページを表示してみましょう画像が正しく表示されないことがわかります。

ポートフォリオ効果のあるカードを作成する

最初の画像ウィジェットを選択し、その[スタイル]タブで、PCをクリックし、幅として150を入力して幅を変更しましょう。 他の2つの画像ウィジェットでも同じことをしましょう。

内部セクションを選択し、そのコンテンツセクションで、 最小の高さ シュール 225.

ポートフォリオ効果のあるカードを作成する

また、問題が発生しないアプリオリでスマートフォンモードでページを表示してみましょう。 ただし、存在する場合は、[コンテンツ]セクションで[内部セクション]を選択して、最小の高さを変更しましょう。

次に、中央の列を2回複製してから、他の2つの空の列を削除します。

ポートフォリオ効果のあるカードを作成する

これらの列のタイトルを変更してから、画像を変更してみましょう

あなたはここに結果がある壮大なセクションを持っている必要があります:

ポートフォリオ効果のあるカードを作成する

これで、このタスクを簡単に実行できました。

Elementor Proを今すぐ入手!

結論

そこにそれがある ! ポートフォリオの効果を持つカードを作成する方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.

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

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

...

0 株式
シェア
さえずります
Enregistrer