ビフォーアフターツールの機能
ビフォーアフタースライダーツールのすべての機能と、最も効果的なツールを作成する方法をご紹介します。
それ自体を語る
ポートフォリオを
作成する
ビフォーアフターの画像は、製品のプラスの効果を視覚化したり、提供するスキルやサービスの力を示したりするのに役立ちます。2枚の写真のURLを申請するだけです。スライダーは自動的に作成され、ユーザーは仕切りを動かして変更を確認できます。これは、あなたのオファーがお金に見合う価値があることを証明し、新しい売上を引き付けるのに最適な方法です。
説明とラベルを写真と調和させる
各スライドに説明を追加するオプションは、ユーザーが写真で見ることができるものの説明または詳細な説明を提供し、プロセスをよりよく理解できるようにするのに役立ちます。必要に応じて、リンクを挿入してユーザーを別のページにリダイレクトすることもできます。スライダーのラベルも編集可能で、単純な「ビフォー」と「アフター」よりも創造的なものを考えることができます。
使用例
あなたのウェブサイトをグレードアップさせるための
ビフォーアフタースライダーの可能性を探求するために
実際の使用例を見てください。
ページネーションを備えた
人間工学に基づいた
回転レイアウト
一連のスライドを表示する必要があるが、それらを使用してページを並べて表示したくない場合は、カルーセルレイアウトが最適です。すべてのスライドを1つのギャラリーに配置し、画像間を移動するために使用されるページ付け矢印を付けます。ユーザーは前後にスライドしてすべての写真を表示できます。もちろん、各写真の仕切りを移動することもできます。
広々としたリストレイアウト
ビフォーアフタースライダーツールでは、寛大で大規模なリストレイアウトを備えています。スライドを次々に配置したい場合のために特別に設計されました。訪問者がページを下にスクロールすると、写真の前後でますます印象的なものが表示されます。スライドの流れにより、すべてのユーザーがWebサイトに関心を持ち続けることができます。
画像の比率と適応可能なウィジェットの幅の選択
ウィジェットツール全体のスケール（ピクセルまたはパーセンテージで簡単に設定できます）だけでなく、画像の比率も変更します。このために、ウィジェットに7つのすぐに使用できる画像比率のバリエーションを追加しました。これらには、正方形や4〜3などの最も人気のあるものが含まれています。あなたの写真に最適なものを見つけることができます。
使用例
あなたのウェブサイトをグレードアップさせるための
ビフォーアフタースライダーの可能性を探求するために
実際の使用例を見てください。
ユーザーに写真を
全画面で
表示させる
フルスクリーンモードを使用すると、訪問者は写真全体の大きな変化を確認できます。写真は全画面表示になり、矢印を使用してナビゲートできるスライダーが作成されます。これは、ユーザーが変換のすべての詳細をチェックして、同じものが必要かどうかを確認できる絶好のチャンスです。
スライドの方向を選択してください
ビフォーアフター比較スライダーは真に適応性があります。さまざまなケースに対応するため、縦横方向に使用できます。必要に応じて、仕切りの最も適切な方向を選択できます。ラベルは自動的に適応し、必要な場所に配置されます。また、左、右、または中央の位置合わせを選択することもできます。
仕切りを適切な場所に設定します
仕切りは画像の真ん中にある必要はありません。自分で最適な位置を選択できます。指定して各写真の割合を変えることが可能です。仕切りはサイズを変更することもできます–あなたはそれをより厚くまたはより薄くすることができます。もう1つの制御要素である矢印は、オンまたはオフに切り替えることができます。
2つのスライダー相互作用オプション
ユーザーの快適性を高めるために、スライダーの仕切りを移動する方法を選択できます。ウィジェットには、仕切りをクリックして移動するドラッグ＆クリックオプションとホバーオプションがあります。仕切りはホバーすると移動し、訪問者のカーソルに従います。モバイルデバイスでは、ユーザーはスワイプするだけで画像を変更できます。
より最適化するためのペイントオプション
さまざまなスタイルオプションを使用して、スライダーをパーソナライズします。背景画像URLで指定するか、任意の色を選択できます。すべてのテキスト要素：ラベル、キャプション、ヘッダーは、サイズを変更したり、任意の色でペイントしたりできます。そして仕切りも塗装可能です。