レボリューションスライダー

レボリューションスライダーは、ページ上に画像をスライダーとして追加し、アニメーションのような効果を与えることができるビルダーブロックです。

セクションを追加 -> ビルダー -> レボリューションスライダー

レボリューションスライダー

ここではどのようなスライド遷移をさせるかを選択することができ、この点が"レボリューションスライダー"と"スリックスライダー"の大きな違いです。

スライダーが変化する速度の時間間隔は設定可能です。まず"レボリューションスライダー"ブロックを追加し、さらに"スライド レボリューションスライダー"というブロックを追加します。 そこでスライダー用の画像を選択したり、カスタマイズしたりすることができます。"スライド レボリューションスライダー"ブロックの数は、スライドさせたい枚数にに応じて追加してください。

レイアウト

"高さ"のドロップダウンリストから、画像の高さを選択することができます。"高さの最小値" と "画像の高さサイズ"は、0〜1000pxの範囲で設定可能です。

列の大きさは、"コラムのサイズ"のドロップダウンリストで選択できます。

スライダーには、次または前のスライダーに移動するのに便利な矢印表示またはブレット表示の選択肢があります。

"ディレイ(遅らせる)(秒)" は3秒から15秒の間でスライダーが次のスライダーに変わる時間間隔を設定することができます。

画像やコンテンツにパララックス効果(視差効果)をつけたい場合、 "画像パララックス"スケールを0〜16、"コンテンツパララックス" スケールを0〜16で設定できます。

"プリロードの余白"オプションを有効にすると、"レボリューションスライダー"が組み込まれている"ビルダー"セクションのスペースが、ストアページがロードされている間の約2-3秒間、除外されます。ページのロードが完了すると、ブロック全体が再び表示されます。

スライド レボリューションスライダー

一般設定

このセクションでは、スライダーがクリックされたときにリダイレクトさせるページのURLを追加することができます。ドロップダウンリストからページを選択するか、希望のページがこのリストになければURLを貼り付けることもできます。

画像

ここでデスクトップ版とモバイル版の両方に画像を追加することができます。推奨画像サイズは1440×550ピクセルです。

モバイル版では、画像位置を"モバイルイメージの調整(水平軸)"の目盛りを用いて0～100%の間で設定することもできます。50%は中央、0%は左寄せ、100%は右寄せを意味します。 レイアウト→高さ で"画像に応じる"を選択すると設定を無効にすることもできます。

テキスト

ここでは、スライドのテキストコンテンツをカスタマイズすることができます。

追加できるテキスト行は3行です。要素を隠したい場合はテキストやボタンの入力欄を空欄にし、改行には「<br>」を使用します。

テキストコンテンツのスタイルは "カラースタイル"で変更することができ、8つのスタイルの中から選択することができます。

ボタン #1 - #2

レボリューションスライダーには、カスタマイズ可能なボタンを2つ追加することができます。ボタンには、3つのカスタマイズオプションがあります。ボタンテキスト、ボタン URL、ボタンスタイルです。

ボタン テキストには、ボタンのタイトルを書くことができます。例えば、「Shop now」、「More」などです。

ボタン URLでは、ボタンをクリックされたときにリンクさせるURLを設定します。

ボタンスタイルでは、ドロップダウンリストからボタンのスタイルを選択することができます。

その他のコンテンツ

カスタム HTML

このオプションを使用すると、レボリューションスライダー内のテキストコンテンツ全体をページコンテンツに置き換えることができます。ページの追加と編集の方法は、こちらをご覧ください。

ビデオ

ページに動画を掲載したい場合は、こちらのレボリューションスライダーに動画を追加することができます。YouTubeやVimeoであれば、"Youtube もしくは Vimeo のビデオの URL"にリンクをするだけで設定可能です。

ビデオのソースがこれらと異なる場合は、Shopify 管理画面-> 設定 ->ファイル で動画をアップロードし、そのURLをコピーして"ビデオ URL"に貼り付けてください。

"ビデオの自動再生"や"ビデオコントール表示"などのオプションを有効にしたり無効にしたりすることで、ビデオに自動再生やコントロールを持たせるかどうかを決定することができます。

レイアウト

ここでは、スライド上のテキストのレイアウトの種類を選択することができます。 『MISEル』テーマには、多くの種類のレイアウトがありますので、その中からストアに最適なものを選んでください。

"コンテンツの位置(デスクトップ)"と "コンテンツの水平調整"を選択することができます。テキストを左側または右側に配置し、コンテナにテキストを含める必要がある場合は、オプション"コンテナを加える"を有効にしてください。このオプションは、タイプ #1 v1(画像上にテキスト)と、ビルダーセクションで設定した"コンテンツ幅"が"全幅" の場合にのみ機能します。

"コンテンツ幅"の変更は0〜100%の範囲で可能です。テキストの幅も "テキスト最大幅"の目盛りで0〜1000pxまで設定でき、0は自動サイズ、1000pxは幅の100%に相当します。

エフェクト

こちらはより高度な設定項目です。

このセクションの設定によって、"スライド レボリューションスライダー"ブロックにユニークなエフェクト効果を追加することできます。

最初に特定のスライドについて、スライド遷移に要する時間を設定できます。これは、他のスライダーの時間設定と異なるようにもできますし、0～60秒の"ディレイ(遅らせる)"目盛りで0を選択すれば同じにすることも可能です。

"スライドのアニメーションの種類"では、スライド遷移のコードを追加できます。このためのコードは、Slide Transitionsで確認できます。

"HTML レイヤーアニメーション"では、レイヤートランジション用のコードを追加することができます。このためのコードは、Layer Transitionsで確認できます。