SmartSliderで全面モーション付きのスライダーを作成
以前にも紹介したSmartSlider3ですが、今回はPro版の機能を一部紹介いたします。
無料版のSmartSlider3は全面スライダーはできませんでしたが、有料のPro版では、選択できます。また、文字などに、フェードインなどのモーションをつけることができます。文字を入れる場合はテキスト入力し、レスポンシブレイアウトで見せるようにします。今回のDEMOはバイクの詳細ページを元に作成しました(モーションが付くので動くものをテーマに)。
メインは2カラムで左にスライダー、右にアコーディオンで詳細情報を載せました。アコーディオンにすることで見た目がすっきりするので、情報が多い場合よく使用します。今回は、数が多いので、まとめて管理できる「Easy Accordion」というプラグインを使用しました。
出典 : Easy Accordion
ファイルを新規グループを作成し、アコーディオンを必要数作成。テーブルは、ブロックエディターで作成したものをコピペしました。スタイルを設定画面下の部分で設定すれば簡単にシンプルなアコーディオンが作成できます。
「Description」の「テキスト」にコードをコピペ
「TYPOGRAPHY」で文字の色やサイズの設定
ギャラリーは、プラグイン「Modula」を使用しました。
6枚写真を選択し、「Gallery Type」を「Masonry」に設定します。
写真を選択し「Gallery Type」を「Masonry」に設定
では本題です。今回のデモではバイクと見出し、テキストをPC、SPでレイアウト変更するため、背景の上にカラムを設置しました。今回は、「レイアウト」から「全画面」を指定します。背景写真をスライドページとして設定していきます。
「レイアウト」を「全画面」に指定
バックの写真を指定
では、スライドの設定をしていきます。まず1枚目のスライドをクリックし、編集画面に移行します。
まず、「見出し」をクリックし、「コンテンツ」で型番を入力します。「スタイル」でフォントの種類とポイント数を指定します。次に左のサイドバーから「テキスト」を選択し、キャプションを入力します。最後に「画像」をクリックし、バイクの透明背景画像を選択します。すべて、左右中央揃えになっていれば完了です。
「見出し」をクリックし「コンテンツ」で入力。「スタイル」でサイズ、フォントを設定。
「テキスト」をクリックし「コンテンツ」で入力。
「画像」をクリックし、バイク画像を選択。ビジュアルの完成
次に2枚目のスライドをクリックし、編集画面に移行します。左のサイドメニューの一番下の「行」をクリックします。すると編集画面の上にブロックエディターでいう2カラムが設置されます。左にバイクの写真、右に見出し、テキストを入れて、文字ポイントを調整します。
左サイドの「行」をクリック。70% : 30%の比率にする。
左に画像、右に見出しとテキストを配置。
3枚目は2枚目と文字、画像を左右反対に設置します。これで、文字と写真の設定は終了です。プレビューを確認しOKならモーションを付けていきます。
左に見出しとテキスト、右に画像を配置。
もう一度1枚目の写真をクリックし、編集画面に移動します。まずバイクの写真をクリックします。「アニメーション」から「フェード」を選択します。下のフェードタブをクリックし、オフセットのXに「100」を入力します。次に見出しをクリックし、同じようにフェード、を選択し、オフセットの数値をX「50」にします。テキストはオフセットX「-50」に設定します。これでモーションの完成です。同じように他の2枚も設定します。
バイク画像を選択し、画像アニメーション>フェードをクリック
「オフセット」を「100」に設定。同様に、見出しは「50」、テキストは「-50」に設定。
SmartSlider Pro版の一部を紹介しました。他にもいろいろなモーションをつけることができ、また、カルーセルやショーケースといったスライダーも使用することができます。いろいろな場面で使用できそうなので、紹介していきたいと思います。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。