Elementorの画像カルーセルウィジェットで、魅力的な点滅画像エフェクトを作成する

画像は、特にファッションブランドや新しいシーズンコレクション、商品のプロモーションを紹介する際に、訪問者を惹きつける最も重要な要素の1つです。ダイナミックなイメージ効果ページの視覚的な魅力を高めるだけでなく、ユーザーのエンゲージメントとインタラクティブな体験を向上させることができます。このページでは、以下の使い方を詳しく見ていきます。エレメンタな イメージカルーセル 固定配置とフェードイン効果を組み合わせて、モダンで魅力的な画像の明滅効果を生み出すウィジェット。

デザイン概要

ファッションブランドのランディングページで、この画像効果をモダンでスタイリッシュに見せるために、私たちは イメージカルーセル ファッションブランドのコレクションを紹介し、デザイン性の高いエフェクトでページに動きを加えるウィジェットです。これらの点滅する画像エフェクトは、ページ上でユーザーにシームレスな視覚体験を提供します。

手続き

始める前に、以下のことを確認しておく必要がある：

ページのデザインはすでに基本的な枠組みを持っている。
使用する画像はすべてメディア・ライブラリにアップロードし、一貫した効果を確保するため、幅と高さが同じであることを確認した。

次に イメージカルーセル ウィジェットの詳細な設定。

ステップ1：最初の画像回転を作成する

1.単列セクションの追加

を追加する。 シングルセクション(単列セクション）に設定する。全幅を使用して、画像がページの幅にぴったり収まるようにします。

オプション全幅そして 水平アライメント によって はじめるをクリックして、画像がページの左側から表示されるようにします。

2.画像カルーセルウィジェットを挿入する

私たちはまず エレメンタ のウィジェットパネルにある イメージカルーセル ウィジェットを先ほど作成したセクションに追加する。

3.最初の回転チャートを設定する

入り込む エレメント タブの後、以下の設定を行う必要がある：

表示する画像をアップロードし、必要に応じて並べ替えます。

各スライドの幅歌で応える こうどすべての画像が同じサイズであることを確認してください。

ある スライドショー 設定]で、[表示]を選択します。 1 イメージだ。

凝固 ナビゲーター 歌で応える 対話を一時停止する場合 オプションで、ユーザーがシームレスに画像を表示できるようにします。

4.フェードイン効果の設定

ある効果設定で フェードイン 画像切り替え時のトランジションエフェクトとして。画像がスムーズに切り替わり、全体的な視覚効果が高まります。

5.固定ポジショニング

への切り替え 高いレベル タブの 見つける 設定で選択 固定ポジショニングこうすることで、画像の回転は常にページ上の固定位置に留まり、スクロール時にずれることがなくなります。

ステップ2：2つ目の画像回転を作成する

ページの階層を強化するために、最初のローテーションを複製し、すべての設定とスタイルを維持し、画像コンテンツを更新する。

1.画像をコピーして調整する

既存のウィジェットを複製するのは Elementor ではとても簡単です。最初の イメージカルーセル ウィジェットで のコピーを取ります。で、そこにある画像の内容を置き換える。

2.セッティングの調整

新しい画像を選択し、配置順序を設定します。

画像の幅歌で応える こうど新しい画像が回転の残りの部分と一致することを保証する。

溶け込む 見つける の設定で、新しい回転画像が他の回転と同じ位置に表示されるようにします。

ステップ3：最終調整と最適化

その他の回転画像はすべて上記の手順に従い、以下に調整の詳細を示す。

1.テキスト階層の調整

回転する画像の上にテキストを配置する必要があるので、これを行うには Zインデックス を入力し、テキストが他の要素の前に表示されるようにします。を入力する。 高いレベル タブ、調整 Zインデックス の値を使ってテキストの階層を高くし、画像の回転によって上書きされないようにする。

2.スペーシングの拡大

テキストと画像の間に十分なスペースを確保するには 第2節 ずぼしをさす 詰め物 値。テキストと回転チャート両者が重なることはない。

概要

とおす エレメンタ な イメージカルーセル ウィジェットを使用することで、ウェブページの魅力とインタラクティブ性を高める人目を引くビジュアルエフェクトを作成することができます。新商品の紹介、季節のイベントの宣伝、ブランドイメージの向上など、この点滅する画像エフェクトは、訪問者の注意を引き、ページの内容をさらに探検する気にさせるのに効果的です。

WordPressに関連するチュートリアルや情報については、以下を参照してください。光子ゆらぎネットワーク最も充実したWordPressチュートリアルと、最もアクティブなWordPress Exchange コミュニティ.

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み