前後のスライダーをWebサイトに追加する最も簡単な方法
公開: 2022-04-10前後の画像は、非常に幅広い業界でマーケティング目的で広く使用されています。 特定のプロセスが持つ効果をよりよく説明できる言葉は、そのプロセスの前後で誰かまたは何かがどのように見えたかを正確に示す画像よりもありません。 効果が見える商品を中心に展開していない企業でも、この機能をユーモラスに活用することができます。
あなたがレストランを経営しているとしましょう。あなたの宮殿で食事をする前に人がどのように見えるか、そしてあなたの料理を味わった後に彼らがどのように喜んでいるかを示すことができます。 あなたの製品/サービスの利点と利点を描写するという点でスライダーが提供する前後の可能性は無限です。 それはすべてあなたの想像力次第です。
あなたのページに視差効果を加えることであなたのウェブサイトがモダンに見えるように、前後のスライダーは画像が1000以上の単語を伝えることができるので忘れがたいです。
さらに、この機能を完全に無料で、すべて自分でWebサイトに追加できます。 この記事では、人気のある無料のプラグインQi AddonsforElementorを使用して前後のスライダーを作成する方法を紹介します。
詳細については、しばらくお待ちください。
- Elementor用のQiアドオンを使用した前後のスライダーの追加
- 詳細オプションの調査
Qi Addons for Elementorは、直感的で無料のツールであり、さまざまなゴージャスな要素をWebサイトに簡単に追加できます。 非常に実用的でユーザーフレンドリーなインターフェースが付属しており、初心者から上級者まで簡単に使用できます。 Qiの特に優れている点は、非常に多くの便利な機能に加えて、現代的なエレガンスを少しだけ提供するという事実です。
Elementor用のQIアドオンをインストールするプロセスは、他のプラグインのインストールと同じです。 ご不明な点がございましたら、上記のリンクをご確認ください。コメント欄にご記入いただくこともできます。
これはElementorプラグインであるため、新しい投稿を作成するときは必ずElementorエディターに切り替えてください。 すべてのQiアドオンウィジェットは、左側の要素メニューにきちんと表示されます。 メニューを下にスクロールするだけでそれらを見つけることができます。
前と後のスライダーウィジェットは、同じフレームに2つの画像を表示するためのシンプルで効果的な方法を提供します。 検索フィールドにウィジェット名を入力するか、メニューのウィジェットを参照して、左側のサイドバーメニューで検索します。
比較前/後スライダーを追加するには、Elementor要素を目的の場所にドラッグアンドドロップします。 ウィジェットが追加されると、すべての設定が左側になり、[コンテンツ]タブと[スタイル]タブ内にスライダーに関連するすべてのオプションが表示されます。
次に、前後の画像をスライダーに追加する必要があります。 まず、前の画像を追加します。画像フィールドにカーソルを合わせると、[画像の選択]オプションが表示されるか、フィールドの中央にある小さなプラスアイコンをクリックします。
メディアライブラリから画像を選択するか、必要に応じて画像をメディアライブラリにアップロードできます。 選択した画像をメディアライブラリにドラッグアンドドロップするだけです（まだ存在しない場合）。次に、画像を選択して選択します。
目的の画像を挿入した後、スライダーの中央にある円に表示されるテキストを変更することで、前後のスライダーをカスタマイズし続けることができます。 あなたはここに指示を書くことができます、またはよりキャッチーなメッセージ、それはあなたとあなたのウェブサイトのスタイル次第です。 テキストを垂直方向に配置するか、水平方向に配置するかを選択することもできます。
スライダーの前後の画像の境界線が表示される場所を調整する場合は、フィールドに目的のオフセット値を入力できます。 デフォルト値は50％です。これは、デフォルトの境界線が画像の真ん中にあることを意味します。 オフセットを調整すると、スライダーは次のようになります。
さて、ビフォーアフタースライダーをさらに微調整する時が来ました。 スライダーを必要な外観にするために他に何をカスタマイズできるか見てみましょう。 [スタイル]タブをクリックして、その他のオプションを確認してください。
円形のハンドルを画像の中央から移動する場合は、スライダーを使用してハンドルの上部オフセット値を調整します。 ライブの変更がすぐに表示されるので、自分に最適なものを簡単に決定できます。 また、同じ方法で円のサイズを調整し、画像の前後のバージョン間の境界線も調整します。
Nabdle Text Colorをクリックして、円内のテキストの色の濃淡を作成することもできます。また、同じ方法でテキストフォントを選択することもできます。 最後に、同じ方法で円の色をカスタマイズすることもできます。
[詳細設定]タブには、スライダーをより魅力的でキャッチーなものにするためのオプションがさらにたくさんあります。 これらのオプションは、このウィジェット専用ではありません。これらは、ページ上の他のウィジェットを編集するためにも使用できるデフォルトのElementorオプションです。
最も興味深いもののいくつかを説明しましょう。 ライブで行ったすべての変更が表示されるので、すべてのオプションを自由にテストしてください。これにより、各オプションがスライダーに対してどのように機能し、それが機能するかどうかをすぐに知ることができます。
[詳細設定]メニューを開くと、マージンとパディングを設定するためのオプションが表示されます。 各オプションの横に小さなラップトップアイコンがあり、ラップトップ、タブレット、モバイルなど、さまざまなデバイスでマージンとパディングにさまざまな値を設定できます。
モーションエフェクトは特に興味深いものであり、35を超えるモーションエフェクトから選択することができます。 また、さまざまなデバイスに表示するさまざまなアニメーションを設定することもできます。 アニメーションの種類を選択した後、必要に応じて、アニメーションの長さと遅延を調整することもできます。
次に、[変換]タブをクリックして、使用できるその他の効果を見つけます。 回転からスキュー、水平および垂直の反転まで、スライダーの表示を変更するためにできることはたくさんあります。
[境界線]タブには、選択した色で影の画像の境界線を追加することにより、サイダーを装飾できるオプションがあります。 スライドボックスの周囲に影の効果を追加して、影の効果の出力を設定することもできます。
[マスク]タブのオプションは非常に便利です。 ここで、スライダーをさまざまな形状（円、花、スケッチ、三角形、ブロブ、六角形）で表示するように設定したり、カスタム形状を追加したりすることができます。 選択した形状のサイズや位置を調整することも可能です。
[レスポンシブ]タブには特に注意してください。これは、選択したデバイスに表示されないスライダーを選択できるためです。
必要に応じてスライダーを調整した後のページのスライダーは次のようになります。
結論は
ご覧のとおり、ページに前後のスライダーを追加することは、ロケット科学ではありません。 これで、想像力を駆使して、作品、製品、またはサービスが生み出す可能性のある効果の印象的な視覚的表現を作成できます。 ご不明な点、ご意見、お問い合わせがございましたら、いつでもお気軽にお問い合わせください。
この記事がお役に立てば幸いです。 あなたがそれを好きなら、これらの記事のいくつかもチェックしてください！
- お問い合わせフォームをカスタマイズする方法7簡単な方法でスタイルを設定
- WordPressでテキストを強調表示する方法簡単な方法
- Elementorプロセスウィジェットを使用してステップフローを作成する方法