WordPressにビフォーアフターの写真スライダーを追加する方法（コードなし） 

インタラクティブでプロフェッショナルな方法で写真編集のスキルを紹介したいですか？ビフォーアフター写真のスライダーは、訪問者がハンドルをドラッグして変身を見ることができ、静的な横並びの画像よりも魅力的なポートフォリオになります。

一番いいのは、シンプルでコード不要のソリューションでWordPressにこのエフェクトを追加できることだ。

WordPressにビフォーアフターの写真スライダーを追加する簡単な手順：

• ステップ1.SeedProdのインストールとアクティベート
• ステップ2.ワードプレスのレイアウトを作成する
• ステップ3.ビフォーアフターのWordPressブロックを追加する
• ステップ 4.変更を有効にする

WordPressでビフォーアフターの写真スライダーを追加する方法

通常、フォトスライダーウィジェットやスライドショーをウェブサイトに追加するには、Javascript、Jquery、HTML、CSS、その他のコーディング言語を使用します。多くのウェブサイトオーナーはそのコードの書き方を知らないため、ウェブデベロッパーに助けを求めますが、それにはかなりの費用がかかります。

幸いなことに、WordPressサイトに新しい機能を追加するには、もっと安い方法があります。最高のWordPressプラグインを使えば、お金をかけずに簡単にウェブサイトを強化することができます。

以下のチュートリアルでは、SeedProdでビフォーアフターの写真スライダーを追加する方法をご紹介します。

SeedProdは、ドラッグアンドドロップ機能を備えた最高のWordPressウェブサイトビルダーです。あらかじめ用意されたテンプレートとビジュアルページビルダーを使用して、コードなしで柔軟なWordPressレイアウトを作成できます。

ドラッグ・アンド・ドロップのWordPressブロックにより、あなたのウェブサイトを以下のような価値ある機能で強化することができます：

• スライダーのビフォー・アフター
• 高度な画像ギャラリー
• 価格表
• オプティン・フォーム
• コール・トゥ・アクション・ボタン
• カウントダウン・タイマー
• タブ付きコンテンツ
• プレゼント
• お問い合わせフォーム
• その他にもいろいろある。

また、SeedProdを使って近日公開ページを作成し、WordPressをメンテナンスモードにすることもできます。さらに、作成したサイトはすべて100%モバイルに対応し、モバイルデバイスでも使いやすくなっています。

下のボタンをクリックしてSeedProdプラグインをダウンロードし、手順に従ってウェブサイトにビフォーアフター写真スライダーを埋め込んでください。

ステップ1.SeedProdのインストールとアクティベート

プラグインをダウンロードした後、SeedProdアカウントのダウンロードタブを見つけ、ライセンスキーをコピーしてください。

さて、先に行くと、WordPressサイトにプラグインをアップロード.ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップのガイドに従うことができます。

SeedProdをインストールしたら、WordPressの管理画面からSeedProd " Settingsに移動し、先ほどコピーしたライセンスキーを貼り付けます。

Verify Keyボタンをクリックしてライセンスをアクティベートし、ステップ2に進みます。

ステップ2.ワードプレスのレイアウトを作成する

SeedProdをインストールした後、どのタイプのレイアウトを作成するかを決める必要があります。カスタムWordPressテーマを作成したり、SeedProdのドロップアンドドロップエディタを使ってコンバージョンの高いランディングページを構築することができます。

テーマビルダーオプションは、既存のウェブサイトデザインをあなたのビジネスニーズに合わせた新しいWordPressテーマに置き換えるのに最適な方法です。典型的なWordPressテーマのすべてのテンプレートファイルを生成し、その強力なページビルダーで各パーツを視覚的にカスタマイズすることができます。

このチュートリアルに従って、SeedProdでカスタムWordPressテーマを作成してください。

また、ランディングページビルダーを使えば、現在のWordPressテーマとシームレスに連動する独立したランディングページを作成することもできます。これは、テーマビルダーと同じビジュアルエディタを使用し、任意のウェブサイトのための素晴らしいリードジェネレーションの戦術です。

SeedProdを使ってWordPressでランディングページを作成する方法をご紹介します。

新しいレイアウトを作成したら、ステップ3に進み、ビフォーアフター・スライダーをデザインに追加します。

注：このガイドでは、カスタムWordPressテーマを作成し、ホームページテンプレートを編集します。

ステップ3.ビフォーアフターのWordPressブロックを追加する

レイアウトを作成したら、SeedProdのページビルダーで編集したいページを開きます。

WordPressテーマのホームページを編集しているので、SeedProd " Theme Builderに行き、ホームページテンプレートの下にあるEdit Designをクリックします。

次の画面では、以下のようなレイアウトが表示されます：

右側にはステップ2で選んだテンプレートのライブプレビューがあり、左側にはデザインにドラッグ＆ドロップできるブロックとセクションがあります。

どの要素もカスタマイズは超簡単。

例えば、ライブプレビュー上で見出しをクリックし、新しいコンテンツを直接入力することで、見出しを編集することができます。

あるいは、左側の設定パネルでテキストを編集することも可能で、これには無数のカスタマイズオプションが用意されている。

だから、思い通りになるまでテンプレートをカスタマイズしてください。

では、テンプレートに自動的に含まれていない機能を追加してみましょう。例えば、私たちが選んだウェブサイトキットにはビフォーアフターの写真スライダーがないので、自分で追加する必要があります。

これを行うには、Before After Toggleを見つけるまで、左側のWordPressブロックをスクロールします。そして、ライブプレビューの位置にドラッグします。

ブロックをクリックすると、左側の設定パネルにカスタマイズ・オプションが表示されます。ここでビフォーアフター画像を追加したり、スタイルを変更したりすることができます。

最初の画像を追加することから始めましょう。これは、「自分の画像を使う」オプションをクリックし、新しい写真をアップロードするか、WordPressのメディア・ライブラリから選択することで行うことができます。

このステップを "after "画像についても繰り返します。テキストフィールドの名前を置き換えることで、各画像のラベルを編集することができます。

画像が揃ったところで、さらにいくつかの設定を見てみましょう。

Orientation "見出しで、"before "と "after "のスライダーを水平ではなく垂直にすることができます。

また、カーソルを画像の上に置くとスライダーが動き、写真にカラーオーバーレイを適用することもできる。

比較ハンドルの見出しを開くと、スライダーの色、幅、半径ピクセルサイズなどを変更する設定が表示されます。

詳細設定]タブをクリックすると、さらに多くの設定を見つけることができます。例えば、ラベルのタイポグラフィや色を変更したり、ブロックの間隔や属性を調整したり、モバイル画面で特定の要素を非表示にしたりすることができます。

ビフォーアフター写真スライダーの仕上がりに満足したら、画面右上の保存ボタンをクリックし、公開をクリックします。

ランディングページを作成している場合は、ページをプレビューし、ビフォーアフターの画像スライダーを確認することができます。しかし、カスタムWordPressテーマを作成している場合は、ステップ4を完了する必要があります。

ステップ 4.変更を有効にする

変更が保存され公開されても、WordPressテーマをライブにする必要があります。ご心配なく。このステップは素早く簡単です。

WordPressのダッシュボードからSeedProd " Theme Builderに移動し、SeedProdテーマを有効にするトグルを「はい」の位置にします。これで完了です！

これで、あなたのウェブサイトのフロントエンドにアクセスして、新しい画像スライダーを試してみることができます。

ビフォーアフター・フォトスライダーFAQ

WordPressのウェブサイトにビフォーアフターの写真スライダーを追加する方法はお分かりいただけたと思います。この機能をビジネスの成功に役立てる方法はたくさんあります。

何を待っているんだい？

お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。