【Smart Slider 3】ユーザーインターフェイス(Interface)【WordPress】

ダッシュボード

ダッシュボードはSmart Sliderのメインページです。利用可能なスライダーやグループを確認したり、新規プロジェクトを作成したりできます。

ナビゲーション

ダッシュボード画面の左上は「パンくずリスト」のナビゲーションになっており、どの画面からでもダッシュボードに戻ることが出来ます。

グローバル設定・ヘルプ

ダッシュボード画面の右上には『グローバル設定』と『ヘルプ』があります。

インフォ

ポップアップが表示され、利用中のSmart Slider 3のバージョンと、最新版かどうかの確認が出来ます。
また、ライセンス状態の確認や、必要に応じてライセンスの無効化も行えます。

並べ替え

ダッシュボード画面上で、スライダーの並び順を変更できます。

Create Group、View Trash

『Create Group』では、スライダーの新規グループを作成できます。
『View Trash』では、ゴミ箱に移動済みのスライダーを確認することが出来ます。

Search Project

『Search Project』では、スライダー名かIDで検索することが出来ます。

New Project

『New Project』では、新規プロジェクトを作成したり、スライダーテンプレートをインポート出来ます。

スライダーリスト

作成（またはインポート）済みのスライダーとグループのリストが表示されます。クリックすると、スライダー設定ページまたはグループビューに移動します。

スライダーにカーソルを合わせると、右上に「••• メニューボタン」が表示され、プルダウンからアクションを選択できます。

また、左上にチェックをして選択すると『Bulk Actions』が表示され、選択中のスライダーに対してのアクションを選択できます。

表示フィルター、ページ送り

スライダーリスト最下部の「表示フィルター」で、１ページに何個のスライダーを表示させるか選択できます。表示が２ページ以上になると中央下部に「ページ送り」も表示されます。

スライダー設定ページ

ダッシュボード (あるいはスライダーグループ) 上の、スライダーをクリックすることで『スライダー設定』のページを表示することが出来ます。

スライドを追加

『スライドを追加』をクリックすると、以下のように５つのスライドタイプが表示されるので、作成するスライドに合わせて、新規のスライドを追加できます。

スライドリスト

ここには、追加済みのスライド一覧が表示されます。スライドをクリックすると、スライドエディタに移動します。
また、各スライドは、ドラッグ&ドロップで順番を入れ替えることが出来ます。

スライドにカーソルを合わせると、右上に「••• メニューボタン」が表示され、プルダウンからアクションを選択できます。

また、スライド左上にチェックをして選択すると『Bulk Actions』が左上に表示され、選択中のスライドに対してのアクションを選択できます。

非公開スライド

非公開スライドに変更すると、以下のようにグレーがかった表示に切り替わります。非公開に設定されたスライドは、スライダーに表示されなくなります。

プレビュー、BACK、保存

『トップバー』には、「プレビュー」「BACK」「保存」ボタンが配置されています。

プレビューボタンを押すと以下のような画面が開きます。デバイスごとの画面サイズに切り替えてプレビューを確認できるようになっています。

スライダー名、ID、スライダー設定タブ

『スライダーの名前』と『ID』の表示。その下には『スライダー設定』の各種タブが並んでいます。
＊『スライダー設定』の詳細については別記事で詳しく解説しています。

アクション

『アクション』ボタンから、スライダーに対して以下のアクションを行うことが出来ます。

スライドエディター

上記のスライダー設定ページで、編集したいスライドをクリックすると『スライドエディター』を開くことが出来ます。

スライドエディターが開きます。

Top Menu

スライドエディター上部にメニューボタンが並んでいます。

デバイスセレクターでは、デバイスの切替えと、横幅の指定もできるので、画面サイズによってどのように表示が変化するか確認できます。

レイヤーを追加

エディター左端に『レイヤー追加』ボタンが配置されています。
ボタンから『見出し』『テキスト』『画像』『ボタン』『行』を追加できます。

緑のプラスボタンを押すと、さらに多くの種類のレイヤーから追加することが出来ます。

スライドライブラリーからは、作成済みスライドのセットをキャンバスに読み込めます。

レイヤーウィンドウ

『レイヤーウィンドウ』では、スライドの背景(Background)とその上に配置された各レイヤー要素に対して様々な設定を行うことが出来ます。

Editor Settings

エディター左下に『Editor Settings』のボタンがあります。
ここではガイド表示の設定と、キーボードショートカットの確認を行うことが出来ます。

アニメーション再生、タイムライン

スライドにレイヤーアニメーションが設定されている場合『再生ボタン』を押すとアニメーションが再生されます。再生ボタンの下のボタンを押すと『タイムライン』が開きます。

タイムラインでは、レイヤーアニメーションの編集を視覚的に行うことが出来ます。
＊レイヤーアニメーションの編集については、別記事で詳しく解説します。

まとめ

今回は、Smart Slider3 Proの『ユーザーインターフェイス』について解説いたしました。
主に『ダッシュボード』→『スライダー設定』→『スライドエディター』の順に作業を進めていくのが基本となります。

『スライダー設定』と『スライドエディター』の詳細については、別記事で詳しく解説いたします。

Pro版を使ってみる

本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀