WordPress の前後スライダーを無料で追加する方法

eStore とその革新的な戦略の増加により、オンライン ストアの維持は時間の経過とともに競争が激化しています。したがって、所有者は、実際に製品の価値を実証するのに役立つ何かを考え出す必要があります。そして、この場合、製品の価値を希望どおりに表示するため、スライダーの前後で WordPress に勝るものはありません。

WordPress ではスライダーの前後に追加するオプションが複数あります。しかし、手間と時間を考えると、WordPress のプラグインを使うことが真っ先に思い浮かびます。また、WordPress には前後のスライダー プラグインが多数あるため、最も便利なプラグインを使用することにも重点を置く必要があります。

だからこそ、ここで、 前後のスライダーを追加するプロセスを示す 最適なWordPressプラグインを使用してください。ただし、その前に、Before および After スライダーとは何か、また、値を表示する以外にその追加の利点は何なのかを深く掘り下げてみましょう。

前後スライダーとは何ですか?

前後のスライダーは、ユーザーが次のことを可能にするプラグインです。 2つの画像を比較する WordPress サイトで 利点と機会を提示する 使用の 製品やサービス。 さらに、誰にとっても、どれが自分にとって最善の選択肢であるかという明確なビジョンが得られます。

簡単に言うと、Elementor の前後のスライダーを使用して 2 つの画像の比較を表示することで、最適な決定を下すことができます。

WordPress の前後の画像スライダーを使用する理由は何ですか?

顧客は、何の価値も提供しない最小限のコストで製品やサービスを入手することはありません。むしろ、製品が自分たちの要件やニーズを満たしているのであれば、高く払っても気にしません。つまり、顧客に行動を起こすよう説得するには、ランディング ページで製品の利点を紹介する必要があります。これが、WordPress の前後の画像スライダーが役立つ理由です。

これとは別に、長期的にビジネスを継続する次のような利点もあります。

1. 簡素化されます 顧客の意思決定プロセス。
2. オンラインの前後スライダー 売上を伸ばす そして 収益 あなたのビジネスの。
3. させてください メリットを紹介する 製品またはサービスの使用について。
4. 前後のスライダーが作成する コンバージョン率の高い WordPress ランディング ページ.
5. 次のような方法で 2 つの画像を比較します。 顧客の注目を集める.

これらが、この WordPress の前後画像スライダーを何も考えずに利用する理由です。ここで、スライダーの前後で Elementor を使用する簡単なハックを見てみましょう。

WordPressで前後にスライダーを追加する手順

ここでは、プラグインを使用してWordPressの前後にスライダーを追加します。ただし、オンライン ツールを使用して WordPress の比較画像を作成することもできます。ただし、コーディングが不要なため、サイトに比較画像を追加するには、WordPress プラグインを使用するのが最適なオプションです。したがって、以下の手順に従って、WordPress の前後スライダーを瞬時に作成します。

ステップ 1: スライダー プラグインの前後に Elementor をインストールします。

Before および After スライダーの利点を享受するには、WordPress サイトに次の 2 つのプラグインをインストールする必要があります。

• エレメンター （無料）
• ElementsKit （無料）

これらのプラグインの無料版は、WordPress をスライダーの前後に追加するのに十分です。したがって、最初のステップでは、次のことを行う必要があります。 Elementorをインストールする そして ElementsKit WordPress で。そのためには、 (1)に進みます。新しく追加する plugins の下のオプションを選択し、(2) でプラグインを検索します。 検索ボックス。その後、 (3)をクリックします。 "今すぐインストール" ボタンをクリックし、インストール後、 活性化 それ。このように、両方のプラグインをインストールして有効化します。

ステップ 2: 画像比較ウィジェットを有効にします。

次に、ElementsKit の画像比較ウィジェットを有効にします。それを有効にするには、 (1)に進みます。 ElementsKit そして (2)をクリックします。ウィジェット タブ。

その後、 (1)を有効にします。画像比較 ウィジェットと (2)をクリックします。変更内容を保存 ボタン。

ステップ 3: WordPress の前後の画像スライダーを追加します。

このステップでは、次のことを行う必要があります。 ページに行く スライダーの前後に WordPress を追加するか、新しいページを追加することもできます。それから、 (2)をクリックします。 Elementorで編集する オンラインの前後にスライダーを追加するボタン。

それから、 を検索してください 画像比較ウィジェット 検索ボックスに。ウィジェットを見つけたら、 ドラッグアンドドロップ プラスアイコン上にあります。

Elementor ダッシュボードの左側から、 前後の画像を選択する とともに ラベル アイテムタブの下にあります。

今、 「設定」タブに入ります そして オフセットを調整する WordPress の前後の画像スライダー用。また、 有効または無効にする の かぶせる、 スライダーを動かす の上 ホバリング、 そして クリックして移動します オプション。

コンテンツを編集した後、 スタイルにアクセスしてください タブと 枠線の種類を調整する, 境界半径, パディング、 そして ボックスシャドウ これは「一般」タブの下にあります。

今、 ハンドルに移動 タブと カスタマイズ:

• コントロール幅
• 身長
• 背景の種類
• 矢印の色
• ボックスシャドウ
• マージン
• 境界半径
• ディバイダーの厚さ
• 区切り線の色

ついに、 公開または更新を押します ボタンをクリックして、WordPress の前後の画像スライダーをライブにします。

最終的なWordPress比較画像

ElementsKit を使用して構築した美しい比較画像は次のとおりです。

スライダーの前後の素晴らしい WordPress のデモ

適切なプラグインを選択すれば、WordPress であらゆる種類の比較画像を追加して楽しむことができ、ランディング ページをより美しく、顧客にとって魅力的なものにすることができます。 WordPress で素晴らしい比較画像を作成するために ElementsKit を使用しました。さらに、さまざまな前後のスライダーを追加できます。 ElementsKit を使用して構築された WordPress 比較画像の例をさらにいくつか示します。

ショーケースの前後の画像スライダー

スライダーの前後に WordPress を表示すると、訪問者にサービスを受けるよう説得するだけでなく、製品に満足した場合に再び Web サイトに戻ってくることにも役立ちます。これらに加えて、上記で説明した他の機能も提供します。ただし、WordPress に比較画像を追加する方法はすでにご存知でしょう。

したがって、プロセス全体を確認し、WordPress で前後のスライドを追加します。 ElementsKit 多くの労力と時間を費やすことなく。ただし、この比較画像の作成には任意のプラグインを使用できます。ただし、これらのプラグインでは、ElementsKit のような膨大なオプションが提供されない可能性があります。

たとえば、こんな楽しみ方ができます 画像マスキング, Behanceフィード, 比較表、など、オールインワンの Elementor アドオンである ElementsKit を使用する場合は、WordPress に比較画像を追加します。したがって、サイト上で比較画像を表示するには、スライダー プラグインの前後に最適な WordPress を使用してください。