Slider Revolution WordPress プラグインのレビューと使い方ガイド

Slider Revolution は、WordPress プラグインおよび Magento 拡張機能として利用できるプレミアムスライダーです。幅広い機能と使いやすさにより、WordPress コミュニティで絶大な人気を集めています。

この概要では、Slider Revolution WordPress プラグイン の主な機能について説明し、その後、独自のスライダーを最初から作成することがいかに簡単であるかを説明します。

テーマと一緒に Slider Revolution を入手しましょう! Slider Revolution プラグインは、バンドルプラグインとして Total WordPress テーマを購入すると無料で含まれています。したがって、素晴らしいプラグインを入手できるだけでなく、Total テーマと WPBakery ページビルダープラグインも入手できます。 (以下のバンドルされたプラグインのインストールと使用に関する注意事項を参照してください)。

スライダー革命を入手

スライダー革命: このプラグインが優れている理由

Slider Revolution には、Web サイト用のカスタムスライダーを簡単に作成できる素晴らしい機能がたくさん組み込まれています。ここでは私たちのお気に入りをいくつか紹介します。

レイアウトと応答性

Slider Revolution は、単なるスライダー以上のものに焦点を少し変更しました。バージョン 6 のアップデート以降、カルーセルやシーン (ページビルダーの行のように使用される 1 つのスライド) だけでなく、素晴らしいアニメーションスライダーも作成できるようになりました。このプラグインは、新しいインテリジェントな継承オプションを備えた応答性にも優れています。そのため、モバイルデバイス上でスライダーを単純に縮小するのではなく、スライダーまたはモジュール内の要素がサイズ変更または縮小され、デバイスに応じて読みやすく最適化されます。

複数のコンテンツソース

投稿用のスライダーを作成したいですか?それとも WooCommerce 製品用ですか?問題ありません。スライダーを作成するときに9 種類のコンテンツソースから選択してください。

この記事の執筆時点では、Slider Revolution は以下に基づくコンテンツをサポートしています。

デフォルト/カスタム: 独自の画像/動画をアップロードします。
投稿: ブログ投稿、カスタム投稿タイプ、特定の投稿 ID から選択するか、現在の投稿/ページを使用します (ブログ投稿またはポートフォリオアイテムに注目のスライダーを追加する場合に最適です)
WooCommerce: 商品を表示します
ソーシャルメディア: 具体的には、Flickr、Instagram、Twitter、Facebook、YouTube、Vimeo

簡単なオプション

Slider Revolution を使用すると、ほぼすべてのオプションを追加してカスタムスライダーを簡単に作成できます。プラグイン全体のドロップダウンメニューを使用して、スライド遅延、ナビゲーション矢印、カスタムフォント、視差背景の追加、スライダーの位置 (余白の追加)、メディアレイヤーの追加、ボタンの挿入、スライドトランジションの選択などをすべて選択します。

さらに、ほぼすべてをカスタマイズしたり、独自のプリセットを保存して、フォントスタイル、スライドトランジション、レイヤーアニメーションなどを再利用することも非常に簡単にできます。

メディアサポート

マウスを数回クリックするだけで、テキスト、リンク、画像、ビデオ、オーディオを追加できます。これにより、読者やクライアントが共感できる情報豊富なスライドを作成できるようになります。さらに、これらのメディアタイプはそれぞれ、Slider Revolution のスーパーオプションを使用して設定した独自のアニメーション、タイミング、スタイルを備えた独自のレイヤーとして追加されます。

スライダー革命の取り付け

まず、Slider Revolution WordPress プラグインのコピーを入手する必要があります。プラグインの独自のコピーを購入したか、プレミアムテーマに含まれていたかに応じて、プラグインをインストールするにはいくつかの異なる方法があります。

1. Slider Revolutionのコピーをインストールします

CodeCanyon から Slider Revolution の独自のコピーを購入した場合は、プラグインを自分でインストールする必要があります。プラグインファイルをダウンロードするには、Envato アカウントにログインし、ダウンロードページに移動します (ユーザー名にカーソルを置くとこのページにアクセスできます)。次に、Slider Revolution のコピーを見つけて、「インストール可能な WordPress ファイルのみ」のダウンロードオプションを選択します。

次に、WordPress サイトにログインし、[プラグイン] > [新規追加] に移動します。

次に、画面左上の「プラグインのアップロード」ボタンをクリックします。

ここから、「ファイルを選択」ボタンを使用して、CodeCanyon からダウンロードしたプラグインファイルを選択し、「今すぐインストール」ボタンをクリックします。

その後、プラグインを有効にするだけで、スライダーの作成を開始する準備が整います。

注: サーバーにログインし、抽出した（解凍した）プラグインを wp-content/plugins にあるフォルダにアップロードすることで、FTP 経由でプラグインをインストールすることもできます。

2.プレミアムテーマに含まれるSlider Revolutionをインストールします

多くのプレミアムテーマには、テーマのダウンロードにプレミアムプラグインのコピーが含まれています。これが Slider Revolution のコピーをインストールする方法である場合は、テーマのドキュメントを参照する必要があります。

ほとんどのテーマ開発者は、バンドルされたプラグインのインストールプロセスを簡単にするために最善を尽くしています。たとえば、通知バーやアクティベーションパネルを含めます。

私たちのガイドでは、Total WordPress テーマを使用しています。 Total をインストールしてアクティブ化すると、Slider Revolution (およびテーマに含まれるその他のプラグイン) のインストールを推奨するプロンプトが画面に表示されます。

リンクをクリックして推奨/バンドルされたプラグインのページに移動し、クリックしてプラグインをインストールしてアクティブ化するだけです。

Total には、サンプルデータをインポートするときに Slider Revolution をインストールしてアクティブにするためのデモインポーターのカスタムオプションも含まれています。インポートするデモの作成に Slider Revolution を使用した場合は、上記のようにプラグインをインストールするように求められます。

次に、「スライダーのインポート」オプションが選択されていることを確認してください。テーマはデモからカスタムスライダーを自動的にインポートします。簡単！

スライダー革命ユーザーガイド

プラグインをインストールすると、メインの WordPress ダッシュボードにメニュー項目が追加されるはずです。これをクリックすると、メインの Slider Revolution スライダー管理ページに移動します。

ここから、スライダーの作成または編集、テンプレートのインポート、プラグインの独自のコピーを購入した場合のライセンスのアクティブ化を行うことができます。

Slider Revolutionプラグインのライセンスアクティベーション

Slider Revolutionを自分で購入した場合は、それをアクティブ化してすべてのスライダー機能のロックを解除できます。ライセンスを見つけるには、CodeCanyon に戻り、Slider Revolution プラグインページにアクセスする必要があります。

ここで「サポート」タブをクリックすると、購入したすべてのライセンスが表示されます。ライセンスキーをコピーし、WordPress ダッシュボードに戻ります。

ベルのアイコンをクリックします。

次に、ライセンスキーを入力します。プラグイン作成者からサポートを受けたり、プレミアム Slider Revolution モジュールテンプレートとアドオンのロックを解除したりするには、独自のライセンスを購入する必要があります。

重要、バンドルされたプラグイン: Slider Revolution のコピーがテーマに含まれている場合は、このセクションを無視してかまいません。バンドルされたプラグインにはライセンスがないため、プラグインライセンスをアクティブ化する必要はありません。代わりに、テーマの更新内でプラグインのコピーが確実に更新されるようにするのは、テーマの作成者の責任です。これにより、スライダーの更新まで少し待たなければならない場合がありますが、プラグインがテーマと完全に互換性があることが保証されます。

スライダー革命のグローバル設定

構築を開始する前に、グローバル設定オプション (Slider Revolution の下のサブメニュー項目) にアクセスすることをお勧めします。

ここには、デフォルトのレスポンシブグリッド設定 (新しいスライダーを構築するときに適用されます)、カスタムフォントの読み込み URL、プラグインのデータベース作成などに関する重要なオプションがたくさんあります。ただし、調整することをお勧めするオプションが 2 つあります。

編集を検討する必要がある最初のオプションは、プラグインのアクセスを管理者のみに制限するために使用できる権限です。これは、サイト上でスライダーを作成しているのがあなた、Web デザイナー、または他の管理者だけであることを確認する簡単な方法です (ブログにゲスト著者がいる場合に特に便利です)。

編集する必要がある 2 番目のオプションは、デフォルトレイアウトグリッドブレークポイント オプションです。これらは、応答性設定のデバイスに応じたピクセル幅です。

ここでは、カスタムフォント、サードパーティの遅延読み込み、データベースの強制作成 (スライダー回転テーブルの問題がある場合) を有効にすることもできます。完了したら、必ず設定を保存してください。

これで、スライダーの作成を開始できます。オプションは 3 つあります。最初から始めるか、Slider Revolution の「使用例」から無料のエクスポートファイルを入手するか、テーマに含まれるサンプルスライダーをインポートするかです。

スライダーの手動インポート

Slider Revolution の使用例から別のウェブサイトからダウンロードしたスライダーをインポートするには、まずそのサイトからスライダーファイルをダウンロードし、次に WordPress に戻って [スライダーをインポート] オプションをクリックします。ここから、ダウンロードしたサンプルファイルを参照し、アップロードをクリックします。これにより、サンプルスライダーとそのすべての設定が追加され、新しいスライダーのベースとして使用できるようになります。

テンプレートからの新しいモジュール

Slider Revolution の独自のライセンスを購入した場合は、すべての既製レイアウト (180 以上から選択できます) にアクセスできます。テンプレートを使用するには、好みのテンプレートにマウスを移動し、目のアイコンをクリックしてプレビューするか、プラスアイコンをクリックしてテンプレートをインストールします。

注: Slider Revolution のコピーがテーマにバンドルされている場合、これらのテンプレートにはアクセスできません。ただし、多くのテーマ作成者は、手動でインポートできるテーマのデモに合わせて作成した独自のスライダーテンプレートを含めています。

新しいスライダーを作成する

スライダーを最初から作成する場合は、[新しい空のモジュール] オプションをクリックします。さあ、仕事に取り掛かりましょう！

まず、クイックスタートガイドを使用するオプションを含むウェルカムメッセージが表示されます。クリックして開始し、以下のガイド付きウォークスルーに従ってください。

スライダーのタイプを選択します。モジュールを選択するオプションがあります。

スライダー: 文字通り、回転して次々にスライドを表示する複数のアニメーションスライドです。
シーン: コンテンツモジュールとして使用できる単一のスライド (ページビルダーを使用する場合の行など)
カルーセル: 複数のスライドを同時に表示できる多数のスライド

次に、レイアウトを選択します。

自動: これは、WordPress テーマで定義されているメインコンテナの幅にスライダーを引き伸ばすデフォルト設定ですが、高さは引き続き定義します。
完全- 幅: まさにその名の通り、左から右まで完全に伸びる全幅スライダーオプションです。スライダーの高さを定義する必要があります。
完全- 画面: これを使用して、ブラウザやデバイスのサイズに関係なく、文字通り画面全体を埋める大きなスライダーを作成します (このオプションを使用して、ビデオを含む全画面スライダーを追加して、さらに効果を高めることもできます)。

そして最後のステップとして、応答性または「サイズ変更」設定を選択してカスタマイズする必要があります。

クラシック (リニア) サイズ変更: メイン画面のサイズ設定を構成すると、それに応じてスライダーが圧縮されます (つまり、1000x400 ピクセルのスライダーは 500x200 ピクセルのスライダーに圧縮され、フォント、画像、その他のスライダー要素も比例して縮小されます)。。
インテリジェントな継承: 選択したデスクトップ設定に基づいて 4 つのデバイスサイズが自動的に作成され、必要に応じて調整を行うことができます。
カスタム (手動): 正確なピクセルを使用してスライダーサイズを設定できます。追加オプションにより、さまざまな画面幅 (デスクトップ、ラップトップ、タブレット、携帯電話) でスライダーサイズを設定できます。

メインのスライダー設定を選択すると、Slider Revolution ビルダーが表示されます。ここで実際にすべてのスライドを作成します。

スライダー回転の一般オプション

構築する前に、いくつかの基本事項に注意する必要があります。右側にはすべてのスライダー設定があります。一般設定の歯車アイコンから始めて、そこにある内容を簡単に説明します。

タイトル: スライダーに名前を付けます。もちろん、デフォルトのスライダー 1 タイトルとエイリアスをそのままにすることもできますが、スライダーの目的に応じて、これを独自の命名規則に変更することをお勧めします。スライダーの内容や使用しているページを覚えやすいように、スライダーの名前を選択します。たとえば、ホームページでスライダーを使用する場合は、ホーム とします。ここには、スライダーを投稿やページに挿入するための簡単なショートコードもあります。

レイアウト: スライダーのタイプ (スライダー、シーン、またはカルーセル) とサイズ変更 (自動、全幅、または全画面) を選択します。クイックスタートガイドを使用した場合は、すでにこれが選択されています。ただし、ここでレイヤー領域 (スライダー要素を追加する場所) の幅と高さ、モジュールの位置 (デフォルトは中央)、スライダーのデフォルトの背景色または画像 (注) を編集することもできます。 – これは個々のスライドの背景とは別のものです）、カスタム境界線、ドロップシャドウ、およびいくつかの高度なオプション（ラッパーの最大高さ、オーバーフロー、レイヤーの遠近法など）。

コンテンツ: スライダーにコンテンツを追加する方法を選択します。 9 つのコンテンツソースから選択できますが、ほとんどの場合は、カスタム オプションを選択してスライダーを自分で作成することをお勧めします (ただし、ポストベースオプションや WooCommerce オプションも非常に便利です)。

デフォルト: このセクションで最も重要なオプションは、デフォルトのスライドの長さです。これは、各スライドがデフォルトで続く長さです (注 – これは後でスライドごとにカスタマイズできますが、これは便利ですデフォルトを設定します)。また、初期化遅延を設定して、スライダーをアニメーション化する前に指定した時間待機させることもできます。カスタムモジュール ID、クラス、応答性などには他にもデフォルトがありますが、ほとんどのユーザーはこれらを変更する必要はありません。

全般: このセクションで使用するオプションには、自動回転、ホバー時の停止、スライドのループ、指定された最初のスライドの選択 (追加したスライドと異なる場合) などのスライドショー設定が含まれます。スライダーを構築するときに最初に)。ここには、モバイル上または指定されたピクセル幅の下でスライダーを非表示または無効にするオプションもあります。

オンスクロール: Slider Revolution には、視差、3D 深度、タイムライン、フェード、ブラー、グレースケールなどの高度なスクロール効果が多数含まれています。スクロール速度、オフセット/傾きなどのカスタマイズ可能な設定がすべてあります。使いこなすにはかなりの時間がかかるため、ここでは詳しく説明しませんが、独自のスライダーライセンスを購入した場合は、いくつか試してみることをお勧めします。テンプレートライブラリの既製のオプションを使用して、これらのさまざまなスクロール効果がどのように動作するかを学びます。

スピナー: これはプリローダーです。画像やアニメーションがサーバーに読み込まれると、ページの訪問者には選択したスライダーの背景と選択したスピナーが表示されます。現在、色をカスタマイズできる 15 種類のユニークなスピナーから選択できます。

詳細: 遅延読み込みを有効にしたい場合は、ここから有効にするだけでなく、フォールバック画像を選択したり、古いブラウザ (特に iOS4 と IE8) でスライダーを簡素化したりすることもできます。

CSS/jQuery: 独自のカスタムコードをスライダーに追加できますが、コーディング言語に慣れていない限り、このオプションはそのままにすることをお勧めします。

モーダルとして: ポップアップまたはライトボックスとして表示するスライダーを作成している場合、ここでスライダーの位置のオプションを見つけます。カバーの色を使用したい場合は、ページにモーダルスライダーを挿入するときに使用するショートコード (注 – これは使用属性を追加するため、メインスライダーのショートコードとは異なります)。

スキン: スキンオプションは基本的に、スライドを作成するときに作成してテキストレイヤーに割り当てることができるプリセットです。これは、ブランドを複数のレイヤーにわたって同じに保ちたい場合に最適なツールです。

アドオン: このセクションでは、アドオンを有効にしてアクセスできます (注 – アドオンは、独自のスライダーライセンスを購入した場合にのみ使用できます。テーマにバンドルされているバージョンの Slider Revolution には含まれていません)。

スライダー回転ナビゲーションオプション

次に、キーパッド アイコンの下でナビゲーションに何を使用するかを決定します。スライダーに使用できるオプションはたくさんあります。以下のすべてのオプションには、位置/配置、サイズ変更、可視性、およびグローバルスタイル/プリセットの簡単にカスタマイズできる設定が含まれています。

進行状況: 現在のスライドの進行状況 (または完全なスライダー/モジュールの進行状況) を視覚化する進行状況バーまたは円を追加します。
矢印: 矢印を追加すると、訪問者が 13 種類のスタイルから選択してスライドをクリックしやすくなります (注 – カスタムは通常、テーマに基づいています)。
箇条書き: スライドにナビゲーションドットを追加するには、箇条書きを有効にし、14 のスタイルから選択します。
タブ: ブログ投稿に基づいてコンテンツスライダーを作成している場合は、タブナビゲーションを確認するとよいでしょう。これにより、サムネイル、タイトル、およびパラメータ (スライドオプションで定義されたもの) が表示されます。たとえば、最近の投稿ウィジェットと非常によく似ています。
サム: ナビゲーションオプションとしてサムネイル画像を表示するには、サムを選択し、5 つのスタイルから選択します。
前のサイズ: ナビゲーションに使用するプレビュー画像のサイズを定義します。
タッチ: ブロックスクロール、速度、方向のオプションを含む、タッチスワイプナビゲーションを有効にしてカスタマイズします。
キーボード: キーボードナビゲーションを有効にします (アクセシビリティのために推奨)。
マウス: マウス制御のナビゲーションを編集して、カルーセル機能または逆スクロールを使用します。
ナビゲーションエディタ: このセクションは、独自のカスタムコードを使用して矢印、箇条書き、タブ、またはサムをカスタマイズするためのものです。前に述べたように、コーディングに慣れていない場合は、スライダーの組み込みオプションを使用することをお勧めします。

スライダー回転スライドオプション

そして最後に、スライドのオプションです。

背景: スライドの背景を選択します。透明、色付き (グラデーションを追加できます)、画像、外部画像、またはビデオ (YouTube、ビデオ、または HTML5) から選択します。
サムネイル: 管理者に表示されるサムネイルとナビゲーションに使用されるサムネイルを定義します。
アニメーション: スライドの切り替えアニメーションを選択します。
フィルタ: スライダーにフィルタを追加できます。私の意見では、画像の背景を持つスライドではこれらの方が理にかなっていますが、それはあなた次第です。現在 22 のプリセットから選択できます。
進行状況: スライドの長さ (ミリ秒単位の時間)、一時停止、スライドの表示/非表示をスライドごとにカスタマイズできます。
公開ルール: スライドを公開するか非公開にするかを定義します。これは、季節限定のスライドや期間限定のスライドをゆっくりと作成、公開し、後で削除したい場合に最適です。
タグとリンク: このセクションでは、スライドにカスタムクラス、ID、HTML データを追加したり、リンクを有効にしたりできます (スライド全体にリンクを追加する場合)。
パラメータ: スライドやナビゲーション内で使用するカスタムパラメータを最大 10 個追加します。
ループレイヤー: スライダーにスライドが 1 つしかない場合は、スライドループ設定を作成してカスタマイズします (スライダーをウェルカムマットまたはページセクションとして使用している場合に特に役立ちます)。
スクロール時: スライドごとに視差やスクロール効果 (フェード、ぼかし、グレースケール) をカスタマイズすることもできます。

Slider Revolutionでスライダーを作る方法

機能をご覧いただいたところで (すごいたくさんあるのですね!)、最も重要だと思われるオプションの簡単な概要を説明します。具体的には、単純なスライダーを作成する方法を示します。

一般的なオプション

まず、いくつかの一般オプションを選択しました。

[タイトル] セクションにカスタムタイトルとエイリアスを追加します。
[レイアウト] でデスクトップレイヤー領域の高さと幅をカスタマイズします (サイトの幅と高さ 500 ピクセルに合わせて幅 1000 ピクセルに設定しています)。
[デフォルト] でデフォルトのスライドの長さを選択します (ここでは 5000 ミリ秒、つまり 5 秒を使用しました)。
プリローダーに使用するスピナーを選択します (オプション 7 を選択します)

スライダーナビゲーション

次に、ナビゲーションオプションを選択します。この例では、単純な矢印である「天王星」スタイルを選択しました。

スライドの追加

スライダーに設定したかったのはこれだけなので、次のステップでは、いくつかのスライドを追加します。新しいスライダーを作成するときは、デフォルトですでにスライド #1 が表示されているため、すぐに設定とレイヤーの追加を開始できます。

背景色、画像、ビデオを追加できます。色を追加することを選択した場合は、グラデーションを追加することもできます。

ビデオの場合は、ソースを追加していくつか選択するだけです。上のスクリーンショットでは、スライドを強制的にカバーモードにし (ビデオがスライダー全体に表示されるように)、開始時に巻き戻すように設定しています (スライドが開始されるたびに最初から再生されます)。

この例では、メディアライブラリから画像を追加しました。画像はデフォルトの Cover 設定のままにしました (スライダーの制約内に収まるように画像を縮小する Contain とは対照的に、画像を引き伸ばしてスライダー全体をカバーします)。

レイヤーの追加

次にレイヤーを追加します。画面の上部に「+ レイヤーを追加」のオプションがあることがわかります。ここには、スライドに追加するオプションがたくさんあります。 8 つの異なるレイヤーの追加オプションから選択できます。

テキストレイヤーは、見出し、説明、または単純なリンクを追加するのに最適です。言いたいことを何でもスライドに追加します。
画像は、ロゴの挿入、視差スライドの奥行きの追加、前後セットの挿入などに最適です。
ボタン レイヤーオプションには、色、背景、境界線の色、フォント、ホバー状態、テキストを編集できるサイズと境界線の半径のコンボが多数含まれています。さらに、ソーシャルリンク、アニメーション化されたマウススクロールアイコン、ハンバーガーメニュー、さらには再生/一時停止など、便利なプリセットが多数あります。
シェイプは、エフェクトを追加したり（ボタンの後ろで色のパルスや放射など）、テキストレイヤーの一部を定義したり（シェイプを使用して 1 つの単語やフレーズだけを強調表示したり）、視覚的な要素を追加したりするために使用できます。興味。背景、境界線の色/サイズ、図形境界線の半径 (正方形の場合は 0、円の場合は 100)、図形のサイズ (ピクセル単位)、およびパディングを選択します。
オーディオ &ビデオ レイヤーは非常に簡単です。挿入するメディアを選択し、メディアライブラリからファイルを選択するか、リンク (YouTube、Vimeo、SoundCloud など) を挿入します。次に、ループ、自動再生、最後にある次のスライド、基本ボリューム、セグメントの開始/終了、プリロードを有効にする設定を追加します。これは、実際の体験談をスライダー、紹介ビデオ、またはチュートリアルに追加する簡単な方法です。
アイコン/SVG はその名の通り、アイコンを含めたり、デバイス間でスライダーを使って美しく拡大縮小するカスタム SVG 画像を追加したりできます。
行は挿入でき、他のページビルダーと同様に列設定が完了します。これは、レイヤー要素を整理したり、単一のスライドモジュールを構築したりするのに最適な方法です。
グループ はレイヤーのグループを作成するために使用され、関連するレイヤーの配置と移動が簡単になります。
レイヤーライブラリ は、Slider Revolution の独自のライセンスを持っている場合にのみ使用でき、ThemePunch の既成リソースのコレクションです。
インポートして、ライブラリ内の別のスライダーからレイヤーまたはスライドをコピーします。素早くて簡単！

まず、単純なテキストレイヤーを追加しましょう。クイックスタイルの見出しまたはコンテンツを追加するかどうかを選択できます。どちらもテキストレイヤーですが、唯一の違いは、右側に表示される事前にスタイルが設定されたオプションです。これらのスタイルのいずれかを選択するか、右上隅の [X] をクリックしてレイヤー設定に移動できます。

この例では、スライドの見出しと小見出しに選択したオプションを以下に示します。

コンテンツセクションにテキストを追加し、テキストを中央揃えにしました。
フォントサイズ、太さ、行の高さ、Google フォントのスタイルを選択しました
サイズと位置をカスタマイズして、スライダーコンテナ内のレイヤーの位置を変更しました (コンテナは 1000 x 500 ピクセルであることを思い出してください)。
最後に、テキストが 800 ミリ秒でフェードインするアニメーション効果と速度 (IN : Anim To) と、テキストが終了する際の同じアニメーション (OUT : Anim To) を追加しました。

ボタンも追加しました。これを行うには、「+ レイヤーの追加」リンクにカーソルを置き、ボタンオプションをクリックします。

テキストと同様に、開始するために使用できるクイックスタイルがいくつかあります。

ボタンには次のものを使用しました。繰り返しますが、テキストオプションと非常によく似ています (ただし、いくつかの重要な違いがあります)。

コンテンツとして、ボタンのテキストを追加しました。
[スタイル] セクションから、テキストとボタンの色、フォントオプションを追加したり、パディング (内側) またはマージン (外側) を使用してボタンにスペースを追加したりできます。ボタンは左右のパディングを使用して幅を広げています。
再びサイズと位置オプションを使用して、ボタンレイヤーをスライドの中央に配置しました。
そして、スライドに出入りするボタンのアニメーションを追加しました。
これはボタンレイヤーなので、訪問者がリンクがあることを直感的にわかるようにホバー効果も追加しました。そこでアニメーションを選択し、ボタンをホバーすると少し透明になるようにしました。

リンクを追加するボタンまたはレイヤーには、アクションを追加する必要があります。例として、シンプルリンクを追加し、設定 (クリック時に URL と新しいウィンドウで開くターゲット) を定義しました。ただし、シンプルリンク以外にも、ID へのスクロール (ローカルスクロール)、スライドへのジャンプ (スライドをスキップするため)、スライドの再生 (たとえば、インタラクティブ機能を追加した場合)、開くなどのオプションがたくさんあります。スライダーモーダル、メディアの再生 (ビデオに最適) など。

これで最初のスライドが完成しました。ここで 2 番目の時間を追加して、さらにいくつかの機能を紹介しましょう。

「スライド」オプションにカーソルを合わせると、次のドロップダウンが表示されます。

スライドの追加: クリックして新しい空のスライドを追加するか、一括スライドで同じ背景を持つ複数のスライドを追加するか、スライドをインポートします。
グローバルレイヤー: これらは、作成したスライドの上にオーバーレイとして表示されます。これは、ロゴや透かしを追加したり、製品の「今すぐ購入」ボタンを追加したり、ニュースレターを購読するためのリンクを追加したりするのに最適な方法です。
現在のすべてのスライド (完成したスライドは #1 の新しいスライドです)。

あとは、スライド作成プロセスを好きなだけ繰り返してください。

Slider Revolution には、レイヤーをさらにカスタマイズするために使用できるオプションがさらにたくさんあります。たとえば、レイヤーにループを追加したり (これを使用して、点滅する「セール」テキストを作成できます)、スクロール効果を追加したり、小型デバイスで非表示にするために表示設定を編集したりできます。利用可能な機能の詳細については、公式 Slider Revolution ナレッジベースを確認することをお勧めします。

最後に、スライダービルダーの上部と下部にある役立つリンクをいくつか指摘しておきます。上部から順に、次のクイックリンクがあります。

戻る: WordPress ダッシュボードのメインの Slider Revolution ページに戻ります。
スライド: スライダー内にスライドを追加および管理します。
レイヤーの追加: 現在のスライドに新しいレイヤーを追加します。
選択したレイヤーの名前
現在のレイヤーを複製またはコピーするための複製アイコン
現在選択しているレイヤーを削除するためのゴミ箱アイコン
ロック アイコンを使用してレイヤーをロックし、誤って編集しないようにします
レイヤーを表示または非表示にする目アイコン
レイヤー間を移動するための上矢印と下矢印
少しするとカーソルが表示され、レイヤーを選択できます。
最近の変更のリストを元に戻して確認するための巻き戻し アイコン
標準のデバイスサイズでのスライダーの応答性をプレビューするためのコンピュータ アイコン
疑問符 マークアイコンのヘルプリンク
最後に、レイヤーのクイックスタイルプリセットにアクセスするためのドロップレット アイコン

スライダーのプレビューの下にタイムテーブルが表示されるはずです。ここから、スライド上でレイヤーがアニメーションするときの遅延を編集できます (ここでは、終了時間は 00:05:00 または 5 秒です。スライドをクリックして編集するだけです)。スライド全体の時間長と比較したレイヤーのタイミングを示す視覚的なタイムテーブルも表示されます。ブロックされたセクションはレイヤーのアニメーション時間であり、クリックしてドラッグするだけで変更できます。

複数のレイヤーを追加したら、このセクションを使用して、レイヤーを順番にドラッグアンドドロップすることでレイヤーを再編成することもできます。さらに、左上にはスライドを再生して編集時のタイミングをプレビューするための便利なリンクがあります。

スライダーをプレビューして保存する

作業中に、右下隅にある青いプレビュー ボタンをクリックすると、スライダーをプレビューできます。

作業中にスライドを保存することを忘れないでください。変更を加えた後は、必ずスライドを保存してください。スライドから離れると (たとえ別のスライドに移動したとしても)、これまでの努力がすべて無駄になってしまう可能性があります。必ず保存、保存、保存してください。

Slider Revolution には、保存時にファイルサイズを最適化するオプションもあり、サーバー側の圧縮と最適化に関する推奨事項が提供されます。

保存後、次に進んで他のスライドやスライダーで作業したり、完成した作品をページで使用したりできます。

スライダーの使用

素晴らしいスライダーを投稿やページに追加するには、前に作成した Slider Revolution ショートコードを使用します。このショートコードは、ダッシュボードの Slider Revolution メニュー項目をクリックすると見つかります。

ショートコードは [rev_slider alias=”title”][/rev_slider] のようになり、「タイトル」は最初にスライダーを作成したときに指定したエイリアスに基づいています。

ショートコードを投稿またはページのコンテンツに貼り付けるだけです。または、テーマが追加のスライダーの場所をサポートしている場合は、そこにショートコードを追加することもできます。

テーマで WPBakery ページビルダー (たとえば、Total MultiPurpose WordPress テーマなど) を使用している場合は、含まれている Slider Revolution ページビルダー要素を使用できます。

モジュールを追加し、グリッドからスライダーを選択し (すでに作成したすべてのスライダーのリストが表示されます)、スライダーを挿入して所定の位置にドラッグアンドドロップするだけです。簡単ですよね？

スライダー革命についての最終的な考え

Slider Revolution は、最も使いやすいプレミアムスライダープラグインの 1 つであると考えています。特に、使いやすいビジュアルエディターと多数の組み込み機能を提供するため、スライド (ボタン、フォント、色などはすでに存在します!)。これは堅実な 5 つ星を獲得しており、これより優れたスライダープラグインを見つけるのは難しいだろうと私たちは考えています。

私たちのガイドが開始のプロセスを説明するのに役立つことを願っていますが、さらに詳しく知るには (または独自のコピーを入手するには)、ThemePunch のメインの Slider Revolution ページにアクセスしてください。これらは、スライダーの優れた例を示しているだけでなく、Slider Revolution で何ができるかを確認できるライブデモへのリンクも示しています。

スライダー革命の詳細

ぜひご意見をお待ちしております。以下のコメント欄で Slider Revolution についてのご意見をお聞かせください。また、ご質問がございましたらお気軽にお問い合わせください。喜んでお手伝いさせていただきます！