WordPressで画像比較スライダーを作成する方法

WordPressで画像比較スライダーを作成する方法

ステップ1：ElementOのElementoアドオンをインストールしてアクティブ化します

インストール前に、WooCommerceとElementorの両方がダッシュボードでアクティブになっていることを確認してください。

プラグインをダウンロード：Elemento Addonsプラグインページにアクセスして、プラグインをダウンロードします。

WordPressダッシュボード→プラグイン→[新しい追加]→[プラグインのアップロード]に移動します。

ダウンロードしたファイルをアップロードし、[今すぐインストール]をクリックします。

インストールしたら、[アクティブ化]をクリックしてプラグインを有効にします。

Elementoアドオンをインストールするには、以下のビデオチュートリアルをご覧ください。

ステップ2： Elementorを使用してページを作成または編集します。

ページに移動>新鮮な場合は新規を追加するか、既存のページを編集するか、必要に応じて任意のページにスライダーを追加します。

[Elementorで編集]をクリックして、Elementor Page Builderを起動します。

ステップ3：画像比較ウィジェットを追加します

Elementorエディターでは、サイドバーでElementoアドオンウィジェットを探したり、ウィジェットパネルで画像比較を検索したりします。

画像比較ウィジェットをページのどこにでもドラッグアンドドロップします。

ステップ4：画像をアップロードします

ここでは、下の画像に新しく追加された画像比較ウィジェットを見ることができます。

左サイドバーを使用して、画像セクションに画像を追加して、画像の比較セクションを編集します。

参照用のサンプル画像を含めました。

ステップ5：スライダーをカスタマイズします

左サイドバーを使用して設定を編集およびカスタマイズできます。

左側のメニューを使用して、設定を変更およびパーソナライズできます。

ステップ6：ページを公開します

設定に満足したら、 [公開]をクリックして、画像の比較スライダーをライブにします。

調整に満足したら、「公開」をクリックして、画像の比較スライダーを他の人に見えるようにします。

[表示]ページをクリックして、ページを表示できます。

ライブ画像比較スライダーをご覧ください。

ショップマニアウコンメルスのテーマ

WooCommerceストアを強化するために、美しい、機能満載のテーマを探していますか？

シームレスで視覚的に魅力的なショッピング体験のために、Shop Maniaのテーマを強くお勧めします。

洗練されたデザイン、簡単なカスタマイズオプション、WooCommerceの互換性により、顧客満足度を高め、コンバージョンを向上させることを目的とした店舗に最適です。ここでチェックできます。

ショップマニアの特徴：

• すぐに吸い込むサイト：デモサイトを簡単にインポートし、店のニーズに合わせてカスタマイズします。
• 複数の製品カートテンプレート：ストアのデザインに合わせて、5つの高品質のカートテンプレートから選択します。
• クイックビュー：現在のページを離れることなく、ユーザーが製品の詳細をプレビューできるようにします。
• オフキャンバスサイドバー：ホームページを乱雑にすることなく、追加の製品とウィジェットを表示します。
• フローティングカート：便利なフローティングショッピングカートでユーザーエクスペリエンスを強化します。
• 製品のホバー効果：インタラクティブ製品ディスプレイのズーム、フェード、画像スワップ、スライドエフェクトが含まれます。
• モバイルヘッダースタイル：シームレスなモバイルエクスペリエンスに合わせた最適化されたヘッダーデザイン。
• カスタマイズ可能な単一製品レイアウト：グリッドやスライダーオプションを含む柔軟なギャラリーレイアウト。
• 高度なチェックアウトとカートスタイル：スムーズで注意散漫のないエクスペリエンスのためのパーソナライズされたチェックアウトとカートページ。