写真編集スキルを、インタラクティブでプロフェッショナルな方法で見せたいと思いませんか？Before Afterフォトスライダーを使用すると、訪問者はハンドルをドラッグして自分で変換を確認できるため、静的な並列画像よりもポートフォリオが魅力的になります。
最も良い点は、簡単なコード不要のソリューションでWordPressにこのエフェクトを追加できることです。ステップバイステップでご案内します。
WordPressにBefore Afterフォトスライダーを追加する簡単な手順：
Before Afterフォトエフェクトはどのように機能しますか？
Before Afterフォトスライダーを使用すると、訪問者はディバイダーをドラッグして、一方の画像をもう一方の画像の上に表示できます。静的な並列ショットの代わりに、ユーザーは各バージョンの表示量を制御できるため、変換がより魅力的になります。
例えば：
- 歯科医は治療前後の結果を強調できます。
- 美容ブランドは製品の効果を示すことができます。
- eコマースストアは製品機能を比較できます。
これは、サイトで変更を直接表示するためのシンプルでありながら強力な方法です。次に、WordPressでこのエフェクトを追加する方法を説明します。
WordPressにBefore Afterフォトスライダーを追加する方法
通常、ウェブサイトにフォトスライダーウィジェットやスライドショーを追加するには、Javascript、Jquery、HTML、CSSなどのコーディング言語を使用する必要があります。多くのウェブサイト所有者はそのコードの書き方を知らないため、ウェブ開発者に助けを求めることになりますが、これはかなり高価になる可能性があります。
幸いなことに、WordPressサイトに新しい機能を追加するためのより安価な方法があります。最高のWordPressプラグインのいくつかと一緒に使用すると、大金を費やすことなくウェブサイトを簡単に強化できます。
以下のチュートリアルでは、SeedProdを使用してBefore Afterフォトスライダーを追加する方法を示します。
SeedProdは、ドラッグアンドドロップ機能を備えた最高のWordPressウェブサイトビルダーです。コードなしで柔軟なWordPressレイアウトを作成するために、既製のテンプレートとビジュアルページビルダーを使用できます。
ドラッグアンドドロップのWordPressブロックを使用すると、次のような貴重な機能でウェブサイトを強化できます。
- Before Afterスライダー
- 高度な画像ギャラリー
- 料金表
- オプトインフォーム
- コールトゥアクションボタン
- カウントダウンタイマー
- タブ付きコンテンツ
- プレゼント企画
- お問い合わせフォーム
- その他多数。
また、SeedProdを使用して、近日公開ページを作成し、WordPressをメンテナンスモードにすることができます。さらに、作成するすべてのものは100％モバイル対応であり、モバイルデバイス全体でサイトが使いやすいことを保証します。
以下のボタンをクリックしてSeedProdプラグインをダウンロードし、ウェブサイトにBefore Afterフォトスライダーを埋め込む手順に従ってください。
ステップ1. SeedProdのインストールと有効化
プラグインをダウンロードしたら、SeedProdアカウントの「ダウンロード」タブを見つけて、ライセンスキーをコピーします。
次に、プラグインをWordPressサイトにアップロードします。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこのステップバイステップガイドに従ってください。
SeedProdがインストールされたら、WordPress管理画面から「SeedProd »設定」に移動し、以前にコピーしたライセンスキーを貼り付けます。
ライセンスを有効化するには、Verify Key ボタンをクリックしてから、ステップ2に進んでください。
ステップ2. WordPressレイアウトの作成
SeedProd をインストールしたら、作成したいレイアウトの種類を決定する必要があります。カスタム WordPress テーマを作成することも、SeedProd のドラッグ＆ドロップエディターでコンバージョン率の高いランディングページを構築することもできます。
テーマビルダーオプションは、既存のウェブサイトのデザインを、ビジネスニーズに合わせて調整された新しいWordPressテーマに置き換えるのに最適な方法です。これは、通常のWordPressテーマのすべてのテンプレートファイルを生成し、強力なページビルダーで各部分を視覚的にカスタマイズできます。
SeedProdでカスタムWordPressテーマを作成するには、このチュートリアルに従ってください。
または、ランディングページビルダーを使用して、現在のWordPressテーマとシームレスに連携するスタンドアロンのランディングページを作成することもできます。これはテーマビルダーと同じビジュアルエディターを使用しており、あらゆるウェブサイトにとって素晴らしいリード獲得戦術です。
SeedProd を使用して WordPress でランディングページを作成する方法については、こちらをご覧ください。
新しいレイアウトを作成したら、ステップ3に進み、デザインにビフォーアフタースライダーを追加できます。
注意: このガイドでは、カスタム WordPress テーマを作成し、ホームページを編集します。
ステップ3. Before After WordPressブロックの追加
レイアウトを作成したら、SeedProd のページビルダーで編集したいページを開きます。
WordPress テーマのホームページを編集するので、SeedProd » Theme Builder に移動し、Homepage テンプレートの下にある Edit Design をクリックします。
次の画面で、以下のようなレイアウトが表示されます。
右側にはステップ2で選択したテンプレートのライブプレビューが表示され、左側にはデザインにドラッグ＆ドロップできるブロックとセクションが表示されます。
要素のカスタマイズは非常に簡単です。
たとえば、見出しをクリックしてライブプレビューに直接新しいコンテンツを入力することで編集できます。
または、左側の設定パネルにあるテキストを編集することもできます。これには数え切れないほどのカスタマイズオプションが含まれています。
テンプレートが希望どおりの外観になるまでカスタマイズしてください。
次に、テンプレートに自動的に含まれていない機能を追加する方法を見てみましょう。たとえば、選択したウェブサイトキットにはビフォーアフターの写真スライダーがないため、自分で追加する必要があります。
これを行うには、左側の WordPress ブロックをスクロールして Before After Toggle を見つけます。次に、ライブプレビューの目的の位置にドラッグします。
ブロックをクリックすると、左側の設定パネルでカスタマイズオプションが開きます。ここで、ビフォーアフターの画像を追加したり、スタイルを変更したりできます。
まず、最初の画像を追加しましょう。これは通常、「ビフォー」の写真になります。これを行うには、Use Your Own Image オプションをクリックし、新しい写真をアップロードするか、WordPress メディアライブラリから選択します。
次に、「アフター」画像についてもこの手順を繰り返します。テキストフィールドの名前を置き換えることで、各画像のラベルを編集できます。
画像が配置されたので、さらにいくつかの設定を見てみましょう。
向きの見出しの下で、スライダーを水平ではなく垂直にすることができます。
また、カーソルを画像に重ねたときにスライダーが移動するようにしたり、写真にカラーオーバーレイを適用したりすることもできます。
比較ハンドルの見出しを開くと、スライダーの色、幅、半径のピクセルサイズなどを変更する設定が表示されます。
詳細設定タブをクリックすると、さらに多くの設定を見つけることができます。たとえば、ラベルのタイポグラフィと色を変更したり、ブロックの間隔と属性を調整したり、モバイル画面で特定の要素を非表示にしたりできます。
ビフォーアフタースライダーの外観に満足したら、画面右上の保存ボタンをクリックし、公開をクリックします。
ランディングページを作成している場合は、ページをプレビューして、ビフォーアフター画像スライダーが実際に動作していることを確認できます。ただし、カスタムWordPressテーマを作成している場合は、ステップ4を完了する必要があります。
ステップ4.変更を有効にする
変更は保存および公開されていますが、WordPressテーマをライブにする必要があります。心配しないでください。この手順は迅速かつ簡単です。
WordPressダッシュボードからSeedProd »テーマビルダーに移動し、SeedProdテーマを有効にするトグルを「はい」の位置に切り替えます。それだけです！
これで、ウェブサイトのフロントエンドに移動して、新しい画像スライダーを試すことができます。
ビフォーアフター写真スライダーFAQ
これで、WordPressウェブサイトにビフォーアフター写真スライダーを追加する方法がわかりました。この機能をビジネスの成功に役立てる方法はたくさんあります。
では、何を待っていますか？
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
