スライダーレボリューション：究極のガイド

Slider Revolutionは、文字通り今日最も人気のあるWordPressプラグインの1つです。 40万件以上の売り上げと4.75の平均評価で、プラグインはその有効性と素晴らしさを証明しています。

Revolution Slider：プラグインの優れた点

SliderRevolutionはThemepunchによって開発されました。 このプラグインは、Webページ用のリッチで動的なコンテンツを作成するためのビルダーです。 ページに動きを加えるスリリングなスライドを作成できるため、「動的」に重点が置かれています。

プラグインには、使いやすいビルダーと多数のオプションが付属しています。 うまく機能した設定パックにより、ユーザーはスライダーの細部をすべて調整でき、まったく異なるタイプのコンテンツを操作できます。 スライダーは、ページ全体とその小さな部分について、個別の投稿用に作成できます。 プラグインをより正確に作成するには、次のようにします。

• 画像スライダーとカルーセル
• 注目の投稿スライダー
• ソーシャルメディアフィード
• メディアギャラリー
• ヒーローブロックとフロントページ

あなたがあなたのウェブサイトでスライダー革命を使うべき理由

SliderRevolutionで間違いはありません。 ユーザーフレンドリーなツールを備えた包括的なプラグインは、美しいスライダーを作成するための完璧なソリューションです。その理由は次のとおりです。

バンドルされたプラグイン

現在、ほぼすべてのWordPressテーマにSliderRevolutionプラグインが付属しています。 通常、テーマパッケージには無料バージョンのプラグインが含まれています。 バンドルされているプラ​​グインは非常に基本的な機能に制限されていますが、それでも、スライダービルダーと一緒にテーマを取得すると非常に便利です。

ただし、プラグインの多くの機能にアクセスしたい場合は、独立したプラグインを購入するオプションがあります。 通常のライセンスは29ドルで、Codecanyonマーケットプレイスで入手できます。

延長ライセンスの場合、約150ドルを支払う必要があり、9ドルで1年間の技術サポートを受けることができます。

はい、プラグインにはいくらかの費用がかかる可能性がありますが、プラグインの通常のライセンスを使用しても、優れたスライダーを作成できます。

テンプレート

素晴らしいプラグインは、ツールと機能に感銘を与えるだけでなく、見栄えの良い既成のレイアウトのコレクションも備えています。 事前に作成されたテンプレートのすばらしいコレクションと、スライドで使用できる無料のメディアオブジェクトのライブラリにより、スライドの作成が簡素化および高速化されます。 自分のプロジェクトのテンプレートを選択できます。スライダーを最初から作成する代わりに、時間を節約して、事前に作成されたレイアウトを進めることができます。

選択したテンプレートをインポートして、すぐに作成を開始するだけです。

これに加えて、フォントアイコン、背景画像、透明なPNGオブジェクト、SVGなどのさまざまなオブジェクトの大きな無料ライブラリにアクセスできます。 それらを使用して、スライドに簡単に挿入できます。

ビジュアルエディター

Slider Revolutionには、スライダーテンプレートの作成と変更を非常に簡単にする素晴らしいWYSIWYGエディターが付属しています。 多くのウェブサイトの所有者は、複雑なコードを記述したり、そのタスクのために別のチームを雇ったりするのは難しいと感じています。 スライダーエディタのおかげで、時間を節約し、ドラッグアンドドロップ機能を楽しんで優れたスライドを作成できます。

スライダープラグインを使用すると、作成したスライダーをよりクリエイティブにして、Webサイトに簡単に表示できます。 カスタムスライダーの位置の作成、スライダー遅延の選択、トランジションの追加、メディアレイヤーの追加など、多数のカスタムオプションがあります。 これは、ドロップダウンリストを使用してすぐに実行できます。 さらに、プラグインには、ナビゲーションのスタイルを変更したり、矢印、箇条書き、タブ、サムネイルを追加したりできる多くのナビゲーション機能があります。

高速性能

Slider Revolutionは、高速にロードできるように適切にコーディングされています。 スライダーのすべての側面が最適化されており、高度なデバッグオプションを使用して問題に対処し、コアファイルを自動的にロードし、使用する機能に合わせてスケーリングします。 また、インテリジェントな遅延読み込みを採用し、SEOに最適化されています。

レスポンシブレイアウト

多くのWeb開発者が経験する最大の問題の1つは、スライダーの応答性が不足していることです。 その結果、これらのスライダーは小さなデバイスではうまく機能しないか、まったく表示されません。 応答性は、ユーザーエクスペリエンスの重要な要素です。 携帯電話からのトラフィックが非常に多いため、スライダーが他のデバイスでうまく機能しないのは残念です。

スライダーレボリューションは単なるスライダーではありません。 プラグインはレスポンシブ対応であるため、作成するスライドが何であれ、使用するデバイスに合わせて最適化されることを確認できます。

Slider Revolutionは、各スライダーにレスポンシブブレークポイントを設定し、さまざまなデバイスや小さな画面でデザインを美しく見せるようにしました。 シングル、カルーセル、標準スライダーなど、どのオプションを選択しても、どのデバイスでも完璧に見えることを確認できます。

オプションのカスタマイズ

Slider Revolutionプラグインのもう1つの利点は、その多様なカスタマイズオプションです。 スライドの遅延を設定したり、ナビゲーション矢印、視差の背景を選択したり、メディアレイヤーを追加したり、ボタンを挿入したり、カスタムフォントを設定したり、余白を追加したりできます。

Slider Revolutionプラグインを使用すると、何でもカスタマイズできます。 時間を節約するために、プリセットを保存して、後でスライドトランジション、フォントスタイル、レイヤーアニメーションで使用することができます。

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

トランジションエフェクトやアニメーションを使用して、スライダーをより複雑で多様なものにしたいですか？

準備できた！ Sliderは、ブログ投稿や現在の投稿など、さまざまなコンテンツタイプをサポートしており、Twitter、Facebook、Vimeo、YouTube、Instagramなどのソーシャルプラットフォームからのフィードを使用できます。 リンク、ビデオ、画像、テキストをすぐに追加できます。 バリエーション機能を使用すると、訪問者が使用できる、機能が豊富で情報がちりばめられたスライドを作成できます。

安全

Webサイトに関しては、セキュリティは最も重要な側面の1つです。 数年前にスライダーレボリューションの影響を受けた戦争の脆弱性があると聞くかもしれません。 その時から、Themepunchはソフトウェアの保護を強化し、現在はサードパーティの組織を使用してプラグインの問題を定期的に監査しています。 したがって、プラグインは非常に安全であると確信できます。

技術サポート

プラグインには、プラグインに関する最も一般的な質問を含む詳細なドキュメントと大きなFAQセクションが付属しています。 そのため、スライダーの回転を使用した経験がなくても、スライダーの回転を簡単に開始できます。 詳細なチュートリアルが利用できるため、誰もがWebサイトのスライドを簡単に作成できます。

コンテンツソース

プラグインは、さまざまなコンテンツソースのスライダーの作成を正常に処理します。 WooCommerce製品であろうと一般的な投稿であろうと、SliderRevolutionにはツールがあります。

強力な機能により、このプラグインは誰にとってもナンバーワンの選択肢となっています。 その主な利点は、オールインワンソリューションのカテゴリを提示することです。 追加のプラグインは必要ありません。すべてがプラグイン内にあります。

また、手頃な価格であることにも言及する必要があります。 通常のライセンスは26ドルかかります。 価格で手に入る機能の数を考えると、SliderRevolutionは業界で最も手頃なスライダープラグインです。

この究極のガイドでは、プラグインのインストールから新しいスライドの追加とWebサイトへの配置まですべてをカバーします。

プラグインのインストールとプライマリセットアップ

テーマ開発者の多くは、テーマのパッケージにSliderRevolutionを含めています。

StylemixThemesからプレミアムWordPressテーマのいずれかを購入した場合は、プラグインを手動でインストールする必要はありません。 Slider Revolutionは、デモのインポート時に自動的にインストールされます。

使用しているテーマのパッケージにプラグインが含まれていない場合は、手動でダウンロードしてインストールする必要があります。 Slider Revolutionのコピーを入手するには、このリンクをたどってください。

プラグインを購入する必要があります。 Envatoアカウントにログインして、購入します。 その後、ファイルをダウンロードします— 「インストール可能なWordPressファイルのみ」のダウンロードオプションを選択します。

次に、サイトに新しいプラグインを追加する必要があります。 ダッシュボードに移動します—プラグイン>新規追加。 インストールが完了したら、プラグインをアクティブ化します。

おめでとうございます。これですべての設定が完了し、最初のスライダーの作成を開始できます。

スライダーレボリューションを更新する方法

Themepunchは、スライダープラグインの定期的な更新をリリースします。 更新するには、ダッシュボードからSlider Revolutionを開き、[更新]タブに従います。 このページには、「プラグインの更新」というタイトルの小さなセクションがあります。 ここでは、現在Webサイトにインストールされているプラ​​グインのバージョンと、更新可能なバージョンを指定します。

また、標準的な方法を使用して、[ダッシュボード]> [更新]に移動し、そこからプラグインの新しいバージョンをインストールすることもできます。

スライダー革命：はじめに

スライダーを初めて使用する場合は、そこで使用されているすべての用語では十分に明確ではない可能性があります。 混乱する可能性のある3つの主要な要素があります。 それらはモジュール、スライド、レイヤーです。 それらのそれぞれは、個別に機能するだけでなく、別の一部になることもできます。

たとえば、スライダーとして機能するように設計されたモジュールを作成でき、そのモジュールにはスライドが含まれます。 これに加えて、ナビゲーションメニューやヘッダーなどのモジュールを作成できます。これらはスライダーではありませんが、スライドは含まれます。 その理由は、Slider Revolutionは当初スライダービルダーとして作成されましたが、現在は完全なWebサイトエディターとしても使用されています。 したがって、それを使用すると、単純なスライドよりもはるかに多くのものを作成できます。

モジュール、スライド、レイヤー間の関係

モジュールは、レイヤーのコンテナーであるスライドのコンテナーです。

スライドを含むモジュールが存在します。 すべてのモジュールには、少なくとも1つのスライドが必要です。 空のモジュールを作成すると、空のスライドが自動的に追加されます。 追加のスライドを作成することも、すべてを1つのスライドに追加することもできます。 作成するコンテンツの種類によって異なります。

スライドはレイヤーのコンテナーです。 すべてのスライドには、少なくとも1つのレイヤーが必要です。 新しいスライドが作成されると、背景レイヤーが自動的に追加されます。 このレイヤーは常に存在し、名前を変更して非表示にすることはできますが、削除することはできません。 この背景領域はレイヤーで埋めることができます。

レイヤーには、ビジュアル、オーディオ、またはレイアウトアイテムが含まれ、スライドに追加されます。 テキスト、ボタン、画像、音声、動画、グループ、行はすべて種類のレイヤーです。 各レイヤーは単一のメディアを表します。 レイヤーは、アイデアを最もよく実行する方法でアニメーション化できます。

Slider Revolutionの使用方法：グローバル設定

すでに述べたように、スライダーレボリューションにはたくさんのオプションがあり、これは誇張ではありません。 そのため、スライダーの作成を開始する前に、まずグローバル設定を確認し、プラグインの操作の主な原則を学ぶことをお勧めします。

ダッシュボードからSliderRevolutionをクリックすると、プラグインのセットアップ画面を開くことができます。

セットアップ画面

画面の上部に、次のオプションが表示されたタブがあります。

モジュール、アップデート、アクティベーション、ニュース、グローバル、FAQ、サポート。

この段階では、新しいモジュールを作成するためのモジュールと、グローバルプラグインの設定を確認するためのグローバルの2つのみを使用します。

全体設定

グローバルから始めましょう。 グローバル設定は、主に次のいくつかのセクションに分かれています。

• 全般的
• デフォルトのレイアウトグリッドブレークポイント
• フォント
• その他

これらの設定は、新しいスライダーの作成、カスタムフォントの読み込み、データベースの作成などに適用されるデフォルトのレスポンシブグリッドオプションを担当します。

焦点を当てる必要があるオプションはいくつかあります。 まず、応答性です。これにより、将来のスライダーがどのデバイスでも見栄えがするようになります。 これは、デバイスとそのサイズに関するクイックガイドです。

[デフォルトのレイアウトグリッドブレークポイント]セクションでは、デスクトップ、ノートブック、タブレット、モバイルなど、さまざまなタイプのデバイスの幅をピクセル単位で設定できます。

すべてのデバイスに独自のサイズがある限り、スライダーが正しく表示されるように、各タイプの正確な幅を入力してください。

• 標準のデスクトップモニターの幅は1920pxです。
• すべてのラップトップ、MacBook、および水平方向のタブレットを含むノートブックデバイスの幅は約1600ピクセルです。
• 縦向きのタブレットの幅は778px以下です（iPadに基づく）。
• そしてモバイルデバイス。 これは重要な部分です。現在、すべてのインターネットトラフィックの半分以上がモバイルデバイスを介して生成されており、ユーザーがWebサイトのスライダーを正しく表示できない場合は満足のいくものではありません。 ただし、これは混乱を招く可能性があり、その理由は、最近のスマートフォンのサイズがまったく異なるためです。 500pxを超えない数値を使用することをお勧めします。

次に制御したいのは、スライダーへのアクセスです。 権限オプションを使用すると、管理者と編集者を除く他のユーザーのプラグインへのアクセスを拒否できます。

これで、スライダーの作成を開始できます。 使用できるオプションは3つあります。 ゼロから始めて新しいスライダーを作成したり、Slider Revolutionテンプレートからファイルをエクスポートしたり、テーマに含まれているサンプルスライダーをインポートしたりできます。

この記事では、最初のオプションを確認し、新しいスライダーを最初から作成します。 これにより、プラグインの可能性をさらに探ることができます。

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

これで、いくつかの主要なセットアップが完了したら、新しいスライドの作成に進むことができます。 Slider Revolution設定を開き、NewBlankModuleをクリックします。

クイックガイドを通過するように提案されます。 短いレッスンをご希望の場合は、スタートガイドをクリックしてください。 または、ガイドを終了してこの手順をスキップしてください。

画面はいくつかの領域に分割されます。左からすべてのコンテンツが表示されるフレームが右からあります。これは、セクションと設定を備えた作業スペースです。

一般的なオプション

一般オプションから始めましょう。 歯車アイコンをクリックして設定を開きます。 まず、モジュールに名前を付ける必要があります。 [タイトル]セクションに名前を入力し、エイリアスの名前を小文字で、スペースではなく単語の間にダッシュを付けて複製します。

スライダーをページに追加するには、エイリアスが必要です。 提供されているショートコードをコピーして、スライダーを表示するページまたは投稿に配置することで使用することもできます。

その後、タイプとデスクトップレイヤー領域の高さと幅をカスタマイズできます。 これらの設定は、[レイアウト]タブにあります。

タイプについては、次の3つのオプションから選択できます。

• スライダー—回転して1つずつ表示する複数のアニメーションスライド。
• シーン—コンテンツモジュールとして使用できる単一のスライド。
• カルーセル—複数のスライドが同時に表示されます。

次に指定する必要がある設定はサイズ設定です。 利用可能な3つのオプションもあります。

Auto —これは、WordPressテーマで定義されているメインコンテナの幅にスライダーを拡大するデフォルトのパラメーターです。

全幅—全幅スライダーオプションは左から右に伸びます（高さを定義する必要があります）

フルスクリーン—ブラウザやデバイスのサイズに関係なく、画面全体に表示される大きなスライダー用。

Slider Revolutionプラグインを使用すると、Webサイトのページのすべての部分をアニメーション化できます。 そうすると、ページの重みが大きくなり、ページの読み込みに時間がかかることを考慮してください。 その結果、SEOランキングに悪影響を与える可能性があります。

設定のサイズ変更

クラシックまたは線形のサイズ変更により、メイン画面サイズ設定を構成した後、スライダーがそれに応じて圧縮されるようになります（たとえば、1000x400pxのスライダーは、フォント、画像、その他のスライダー要素とともに500x200pxのスライダーに圧縮されます）。

インテリジェントな継承により、選択したデスクトップ設定に基づいてデバイスサイズを自動作成でき、オプションで調整できます。

カスタムまたは手動のセットアップでは、正確なピクセルを使用してスライダーサイズを設定でき、デスクトップ、ラップトップ、タブレット、電話など、さまざまな画面幅でスライダーサイズを設定できます。

スライドの応答性

次に進みます。 応答性はまだ終わっていません。 ブラウザの幅を指定できるレイヤー領域のサイズがあります。

通常、オプションはデフォルトで自動サイズに設定されており、デスクトップパラメータのみが指定されています。 他のオプションをオンにすることで、同じことができます。

また、特定のデバイスをオンにすると、作業領域（スライドコンテナ）が選択したデバイスのパラメータに合わせて調整されます。つまり、具体的なデバイスのスライダーの表示を制御できます。

デバイスごとに、グローバル設定から指定されたグリッドサイズがあります。 グリッドは、スライダーレイヤーが配置されている領域です。 入力する必要のある厳密な数字はありません。 いくつかのオプションを試してみた後、何が最も効果的かがわかります。  

これはほんの始まりに過ぎず、スライダーでのさらなる作業を容易にするいくつかの一般的なオプションです。 そして、この部分が終わったら、次のステップに切り替えることができます。

オプションの詳細

一般オプションの他に、多くの操作を行う3つのタブがあります。 操作する主な設定について説明します。 基本的に、スライドの作成では、プロセスに関係するいくつかのコンポーネントが考慮されます。 これらは、一般的なオプション、ナビゲーション設定、スライドオプション、およびレイヤーです。

Slider Revolutionにはたくさんのオプションがあると言ったとき、私たちは冗談を言っていませんでした。 カバーするには要素が多すぎるので、それらすべてを少し説明してから、最も重要な要素をより詳細に確認しましょう。

1.一般的なオプション

タイトルやレイアウトなどの一般オプションのいくつかの要素については、すでに触れました。 ただし、これら以外にも、調整が必要なことがあります。

全体として、 [一般]オプションを使用すると、次の設定を行うことができます。

タイトル—スライダーの名前を提供します。
レイアウト—スライダーのタイプ（スライダー、シーン、またはカルーセル）とサイズ（自動、全幅、または全画面）を選択します。 これは、レイヤー領域の幅と高さ、モジュールの位置、デフォルトの背景色または画像などを編集するのに役立ちます。
コンテンツ—スライダーにコンテンツを追加する方法を識別します。 9つのコンテンツソースから選択できます。

• デフォルト—ここでは、1つの重要なパラメーターであるスライド期間（各スライドの持続時間）に集中することをお勧めします。
• 一般—このセクションには、自動回転、ホバーで停止、スライドのループ、および指定された最初のスライドの選択に関するスライドショー設定が含まれています。 ここでは、モバイルまたは指定したピクセル幅でスライダーを非表示または無効にすることもできます。
• スクロール時—これにより、ユーザーは視差、3D深度、タイムライン、フェード、ブラー、グレースケールなどのスクロール効果を選択できます。 すべての効果はカスタマイズ可能な設定になります。
• スピナー—またはプリローダー。プラグインには15のスピナーオプションから選択できます。
• 詳細オプションを使用すると、遅延読み込みを有効にしたり、フォールバックイメージを選択したり、古いブラウザでスライダーを簡略化したりできます。
• CSS / jQuery —ここで独自のカスタムコードをスライダーに追加できます。 これは、プログラミングとコーディングの概念に精通している専門家またはユーザーが使用するのに適していることに注意してください。
• モーダルとして—この特定のオプションは、ポップアップまたはライトボックスとして表示されるスライダーを作成する場合に必要であり、スライダーの位置、カバーの色、およびモーダルスライダーをページに挿入するときに使用するショートコードのオプションを提供します。
• スキン—スキンは、作成してテキストレイヤーに割り当てることができるプリセットを表示します（ハイライト、見出し、コンテンツテキストの色を指定します）。

アドオン—ここにアドオンがあります（注–アドオンは、独自のスライダーライセンスを購入した場合にのみ使用できます）。

2.ナビゲーションオプション

複数のスライドを含めることを計画している場合、ナビゲーションオプションは、箇条書き、矢印、ボタンなどのナビゲーションツールをスライダーに追加するのに役立ちます。

すべてのオプションには、位置/配置、サイズ設定、可視性、グローバルスタイル/プリセットの設定を簡単にカスタマイズできます。

ナビゲーション要素は次のとおりです。

• 進行状況—現在のスライドの進行状況を視覚化する進行状況バーまたは円。
• 矢印—訪問者がスライドをクリックしやすくします。
• 箇条書き—スライドに追加する14種類のナビゲーションドット。
• タブ—タブナビゲーションが必要なコンテンツスライダーに非常に便利です。
• サムネイル—ナビゲーションオプションとしてサムネイル画像を表示するために必要です。 利用可能な5つのオプションがあります。
• 前のサイズ—プレビュー画像のサイズを指定します。
• タッチ—ブロックスクロール、速度、方向のオプションが含まれています。
• キーボード—キーボードナビゲーションを有効にできます（アクセシビリティのために推奨）。
• マウス—カルーセル機能や逆スクロールなどのマウスコントロールを有効にします。
• Nav Editor —このセクションは、独自のカスタムコードを使用して矢印、箇条書き、タブ、またはつまみをカスタマイズするためのものです。

3.スライドオプション

設定の次の部分は、スライドオプションに関連しています。

• 背景：スライドの背景を選択します。 透明、色付き（グラデーションを追加できます）、画像、外部画像、またはビデオ（YouTube、ビデオ、またはHTML5）から選択します。
• サムネイル：管理者が表示するサムネイルとナビゲーションに使用するサムネイルを定義します。
• アニメーション：スライドのトランジションアニメーションを選択します。
• フィルタ—スライドに追加する22種類のフィルタ。
• 進行状況—スライドの長さ、一時停止、およびスライドの表示をカスタマイズできます。
• 公開ルール—スライドを公開するか非公開にするかを制御します。
• タグとリンク—スライドとリンクのカスタムクラス、ID、HTMLデータを追加するのに役立ちます。
• パラメータ—スライドとナビゲーション内で使用する最大10個のカスタムパラメータを追加します。
• ループレイヤー—スライダーにスライドが1つしかない場合は、ループ設定を管理します。
• スクロール時—スライドごとに視差とスクロール効果をカスタマイズします。

新しいスライドを追加する

スライダーの設定とすべてのオプションの調整が完了したら、プロジェクトに新しいスライドを追加します。 追加するとスライドの内容が表示されるフレームが表示されます。 今では透明です。 背景オプションを変更して画像を追加したり、色を設定したりできます。

コンピューターから画像をアップロードするか、外部ソースを使用することができます（リンクを追加することにより）。 また、画像の代わりに背景として色を設定することができます。 それはかなり簡単に行うことができます。

[ソース]パネルの[タイプ]ドロップダウンから[色]オプションを選択し、[BGカラー]ボタンをクリックして色を選択するだけです。 ビデオを使用したい場合は、ソースを追加するだけです。

スライドに新しいレイヤーを追加する

画面の上部に、 [ +レイヤーの追加]オプションがあります。 スライドに新しいレイヤーを追加するために使用します。 8つの異なるオプションがあります。

ただし、最も一般的なオプションは、スライダーにナビゲーションツールを追加する必要がある場合に、ボタンをサポートする画像とテキストです。

レイヤーオプション：使用方法

Slider Revolutionの柔軟性は、複数のオプションの可用性と、スライダープロジェクト全体を調整するだけでなく、すべての詳細を個別に設定する機能に基づいています。 レイヤーも例外ではありません。 スライドに新しいレイヤーを追加するたびに、そのすべてのオプションを制御できます。 スライドに新しい画像を追加する例では、レイヤーオプションで変更できるすべてのパラメーターを確認します。

スライドに画像レイヤーを追加する場合は、[レイヤーの追加]ドロップダウンで[画像]をクリックするだけです。 次に、目的の画像をアップロードします。

フレームの横には、さまざまなレイヤーオプション（コンテンツ、スタイル、サイズと位置など）があります。

レイヤーコンテンツには、レイヤーに関するいくつかの基本情報が表示されます。 遅延読み込みを設定し、そのソースタイプを変更できます。

レイヤーのスタイルオプションを使用すると、色の背景を追加できます。

次のオプションはSpacingです。 間隔は、レイヤーを上から下、左から右、下から上、左から右に移動するのに役立ちます。 それらは文字「M」でマークされています。

位置とサイズ。 画像レイヤーの位置とサイズだけでなく、位置合わせも設定します。 配置アイコンの1つをクリックするだけで、垂直方向と水平方向の両方の配置を簡単に変更できます。

その後、[位置合わせ位置からの垂直オフセット]オプションを使用して位置を設定できます。 XおよびYパラメータを試して、スライド上のレイヤーを移動します。

レイヤーの詳細オプション

高度なスタイルオプションを使用すると、レイヤーを水平、垂直、中央に回転させたり、レイヤーにシャドウを追加したりできます。

レイヤーアニメーションオプション

アニメーションは、スライダーレボリューションの主要なオプションです。 プラグインの主なアイデアは、静的な標準のビジュアルではなく、アニメーション要素をサイトに追加することです。

アニメーションオプションは、スライドにモーションを追加します。このアクションを使用して、スライドをアニメーション化し、アニメーションの表示と終了を設定できます。

表示オプションと終了オプションには、INとOUTの2行があります。

各行には、さまざまな種類のアニメーションを含むドロップダウンメニューが用意されています。 デフォルトでは、フェードインオプションはすべてのレイヤーに設定されています。 いくつかのアニメーションを試して、スライド上でどのように見えるかを確認し、最適なものを選択してください。

以下のセクションは、アニメーションの継続時間、アニメーションの緩和、およびアニメーションの開始の定義に使用されます。 継続時間は、アニメーションが終了するまでにかかる時間を定義します。開始オプションは、スライドがロードされてからアニメーションが開始されるまでの時間を定義します。 イージングは​​、アニメーションが進行する速度を定義します。

アニメーションのタイムライン

スライドに複数のレイヤーを追加している場合は、それらすべてを同時に表示したくない場合があります。 Slider Revolution Animation Timelineは、この問題を処理するのに役立ちます。 それは私たちのワークフレームの真下にあります。

各レイヤーのデフォルトのフレーム開始は0ミリ秒に設定されています。これは、0ミリ秒がロードされた後にレイヤーが画面に表示されることを意味します。 表示時間は通常3秒に設定されています。これは、レイヤーが3秒で完全に表示されることを意味します。 オプションを変更するには、レイヤーを選択し、別の値を指定して編集します。  

レイヤーごとに異なる値を設定して、一度に表示されないようにし、乱雑に見えるようにしてください。

それでは、タイムラインのオプションを詳しく見てみましょう。

1.リストビュー

これらのアイコンは、垂直方向の配置に基づいてレイヤーを表示または非表示にしたり、行を非表示または表示したりするために使用できます。 これらのオプションにアクセスできるのは、Webサイトの管理者だけです。

2.タイムライン期間
タイムラインの合計期間は、[モジュールの一般オプション]>[デフォルト]で定義されます。 また、[スライドオプション]>[進行状況]で個別に設定できます。

タイムラインのブロックを左右にドラッグすることで、スライドの長さを簡単に調整できます。 実行できるもう1つのオプションは、時計アイコンをクリックしてパーセンテージで編集することです。

3.プレビュータイムライン

タイムラインをプレビューするには、再生アイコンをクリックするか、アイドルブロックをドラッグする必要があります。

4.レイヤーの名前を変更します

レイヤーの名前を変更するには、タイムラインでレイヤーのテキストをダブルクリックして名前を変更します。 また、エディターの上部中央でレイヤーのタイトルを編集できます。

5.レイヤーz-index/スタック順序

z-index / stackingの順序を設定するには、タイムラインでレイヤーをドラッグするだけです。

6.アニメーション

すべてのレイヤーには、インとアウトのアニメーションと追加のキーフレームアニメーションがあります。 すべてのアニメーションはタイムラインに表示されます。

アニメーションブロックをドラッグして、タイムラインのアニメーションの開始点を調整します。 ブロックの端点をドラッグして、アニメーションの長さを編集します

レイヤーループオプション

[ループ]タブでは、ループアニメーションを作成できます。 アニメーションの種類を選択し、ループの速度とイージングを定義し、ループの開始時間と終了時間を設定できます。

カスタム、振り子ループ、エフェクトループ、ウェーブ、ウィグル、回転、スライドアンドホバー、パルスの8種類から選択できます。 各ループアニメーションには、独自のオプションのセットがあります。

振り子は、レイヤーを左右に揺らします。 設定できるオプションの中には、終了度と開始度があります。これは、アニメーションが発生する度を識別し、XとYの原点は、レイヤーが回転する軸点を決定します。このパラメーターは、で指定できます。パーセンテージ。

Effect Loopsを使用すると、グレースケール、ブリンク、フラットターン、およびリシングなどのいくつかのオプションから選択できます。 すべての効果は異なって見えるので、すべてのオプションを見て、どれが自分に最適かを選択することをお勧めします。

波のアニメーションは、波に似た動きでレイヤーを回転させます。 レイヤーの外側の軸を中心に回転します。 回転XおよびYポイントを設定して、レイヤーが回転する軸の位置を決定し、開始角度を設定してアニメーションの開始位置を識別し、半径を回転の軌道に設定できます。

Wiggleループを使用すると、レイヤーが左右に、上から下に、左から右に、またはその逆にウィグルします。 ドロップダウンを使用して、必要なオプションを選択します。

回転ループにより、レイヤーは設定された軸点を中心に回転します。 [回転]ドロップダウンから最初のアイテムである[回転]アイテムを選択すると、レイヤーが回転して完全な円を描きます。

レイヤーを左から右、右から左、上から下、斜めに移動するには、スライドとホバーのアニメーションを使用できます。 アニメーションの開始位置と終了位置を設定できます。

パルスアニメーションにより、レイヤーは継続的にズームインおよびズームアウトされます。 ズーム開始とズーム終了を指定します。 ここでのデフォルト値は、開始と終了の両方で1です。 これは、レイヤーがそのサイズの100％のままであることを意味します。 言い換えれば、それはアニメートしません。 ズーム開始に0.5を入力すると、レイヤーはそのサイズの50％から始まり、そのサイズの100％にズームインしてから、50％に戻ります。

レイヤーホバーオプション

ホバー効果は、優れたUXの定番です。 ホバー効果は通常、アクションが必要または実行されていることを示します。特に、この方法はスライダーで積極的に使用されているためです。 Slider Revolutionを使用すると、ホバー時にレイヤー、テキスト、画像を変更できます。

スライダーレボリューションにホバー効果を追加

まず、レイヤーホバーをオンにする必要があります。 エフェクトを追加するレイヤーを選択し、[レイヤーオプション]の下の[ホバー]をクリックします。 [有効]をクリックしてオンにします。

ニースには、ホバー時にレイヤーの動作を設定するために必要なすべてのオプションがあります。 すべてをそのままにしておくと、レイヤーに変更は表示されません。

ホバー設定

ここで最初に設定できるのはカーソルです。 ドロップダウンメニューには、カーソルのさまざまなオプションがあります。 AutoとDefaultは同じ機能を実行し、違いを反映しません。 十字線とポインタは、画面上のマウスカーソルの形状を定義します。

ここにはさらに多くのカーソルスタイルがあります。 それらのいくつかはかなり珍しいものですが、それらのほとんどは、トリガーされたときにレイヤーが持つアクションを示しています。 たとえば、レイヤーをサポートセンターにリンクしている場合は、ヘルプカーソルを選択できます。

デフォルトでは、ポインタイベントは自動に設定されています。 リンクされたコンテンツがない場合は、Noneオプションが使用されます。 このセクションでは、レイヤーホバーのカーソルの外観を選択し、アニメーションを有効にして、設定することができます。

ホバーアニメーション

次に、好みに応じて設定できるホバーアニメーションがあります。 知っておくべきことがいくつかあります。 まず、ホバー時にレイヤーが変化し、遷移が瞬間的に発生すると、見栄えが悪くなります。 遷移が遅延で発生する場合は常に良好です。 。 デフォルトでは、遅延は300msに設定されていますが、必要に応じてそのままにするか、値を変更してください。

また、トランジションのイージングを設定できます。 いくつかのオプションから選択できます。

フィルター

レイヤーにフィルターを追加できます。 つまり、リラをある程度ぼかすことができます。 オプションはピクセルで表されます。 値が高いほど、ブラーが「厚く」なります。

スタイル

背景色を設定したり、境界線を調整したり、色を変更したり、境界線のスタイルを選択したりできるスタイル部分もあります。

スクロールレイヤーオプションについて

スクロールオプションを使用すると、スライドをマウススクロールで移動できます。 There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

スライダー回転で視差効果を作成する方法

視差は、ウェブサイトをより印象的でダイナミックにする最も人気のある効果の1つです。 あなたはおそらく、その特定の効果と統合された多くのウェブサイトやテーマを見てきました。 次に、SliderRevolutionプラグインを使用して独自にビルドする方法を示します。

視差とは何ですか？

視差効果は、背景の要素と前景の要素が異なる速度で移動し、奥行きのある錯覚を作り出す効果として定義できます。 通常、背景の要素の移動は遅くなります

あなたがあなたのウェブサイトでこの効果を達成することができる方法の異なる方法があります。 幸いなことに、Slider Revolutionには、視差効果を実現するのに役立つすべての機能があります。

スライダー革命で視差を作成する

まず視差をオンにします。 [モジュールの一般オプション]>[スクロール時]>[スクロールベースの機能]>[視差]に移動し、[視差有効]スイッチを[オン]に切り替えます。

プラグインが提供するさまざまな深度値がたくさんあります。 自分に最適なものを選択してください。 独自の値を入力することもできます。

背景画像への視差の追加

背景画像に視差効果を追加するには、 [スライドオプション]>[スクロール時]>[視差と3D設定]に移動し、ドロップダウンから希望の深度を選択します。

深さを選択する際には厳格なルールがあります。 さまざまな値を試して、どちらがスライダーでうまく機能するかを確認すると、より良い結果が得られます。 深さが異なると、直接影響を及ぼし、異なる効果を生み出します。 そのため、結果を確認することをお勧めします。

レイヤーへの視差の追加

スライダーレボリューションでは、背景画像だけでなく、個々のレイヤーにも視差効果を加えることができます。 この効果の優れている点は、マウスを動かすだけでページ上のスライダーの部分を制御できるという錯覚をユーザーに与えることです。 これはウェブサイトでは本当に見栄えがよく、さらに、設定は非常に簡単です。

レイヤーを選択し、[レイヤーオプション]>[スクロール時]>[視差と3D]タブに移動し、目的の深度レベルを選択します。

その結果、マウスの動きでアクティブになる視差のあるレイヤーが得られます。

背景画像であろうと個々のレイヤーであろうと、スライダーレボリューション視差効果を追加するのは非常に簡単です。 ただし、すべてのスライダーに視差が必要なわけではありません。 アニメーションがたくさんある動的なスライダーは、この効果がないとおそらくうまくいくので、主に単純なスライダーに使用します。

ボタンレイヤーの追加

Slider Revolutionを使用すると、ナビゲーション用のスライダーに追加するボタンを作成および設計できます。 そのためには、まず、スライダーのワークフレームにボタンレイヤーを追加する必要があります。

ボタンを追加すると、テキストフォームに表示されますが、カスタマイズする必要があります。 画面の右側には、事前に設計されたボタンの多くのオプションがあります。 ボタンにはそのうちの1つを選択できます。

また、再生ボタンやスイッチャーなどのバリエーションもあるので、オリジナルなもので行くことができます。 また、シャドウ効果を追加して、ボタンをより面白く見せることもできます。

スタイルを選択したら、詳細設定を変更して外観をカスタマイズできます。 すべての設定は、[レイヤーオプション]タブにあります。

ボタンの初期の外観を変更したり、テキストを変更したり、ホバー時の表示を変更したり、アニメーションを設定したりできます。

スライダーをレスポンシブにする方法

当初、スライドをレスポンシブにするためのパラメータをすでに設定しました。 それだけでは不十分です。 そのためには、各スライドの各レイヤーがすべてのデバイスと画面サイズにシームレスに適応することも確認する必要があります。

したがって、すべてのスライドとレイヤーをスライダーに追加したら、他のすべての使用可能なデバイス用にそれらを微調整します。

ワークフレームでスライドを編集するときは、主にデスクトップデバイスで見栄えがするようにスライドを設定します。 デスクトップですべてが完璧に見えると確信できたら、他のデバイスのレイアウトを試してみることができます。

これで、ドロップダウンからエミュレートするデバイスを選択できます。 スライダーの表示を確認したいデバイスの電源を入れます。 利用可能なデバイスは、デスクトップ、ノートブック、タブレット、モバイルです。

すべてのデバイスのすべてを変更できます。 たとえば、テキストレイヤーの場合、スライダーが表示されているデバイスに応じて、さまざまなフォントサイズ、行の高さ、フォントの太さ、色を設定できます。 画像レイヤーの場合、サイズを変更するには、別の幅を追加する必要があり、画像の高さは幅に応じて自動的に調整されます。

青いグリッドの境界線に注意してください。 これらは、現在作業しているデバイスのエッジを定義します。 したがって、レイヤーのいずれかが境界線の外側に伸びている場合は、それらのレイヤーの設定を必ず変更してください。

最後に、スライダーを保存して、実際にどのように見えるかを確認します。

ページへのスライダーの追加

これで良い仕事ができました。今度は、スライダーがページ上でどのように表示されるかを確認します。 これを行うには、前に作成したSliderRevolutionショートコードを使用します。 このショートコードは、[一般オプション]セクションの[タイトル]タブにあります。

または、ダッシュボードからSliderRevolutionを開いた場合。 現在のモジュールを見つけて、[埋め込み]オプションを選択します。

ポップアップウィンドウで、[ページと投稿]オプションを選択し、ショートコードをコピーします。

ショートコードは[rev_slideralias=” title”] [/ rev_slider]のようになり、スライダーに付けたエイリアスに基づいて「title」が付けられます。

Elementorでスライダーを表示する

ショートコード方式を使用してページにスライダーを表示するのは簡単です。 ただし、さらに簡単な方法があります。 Slider Revolutionプラグインで作成したすべてのスライダーは、Elementorウィジェットを使用してページに挿入できます。 スライダーを表示するページを選択し、Elementorエディターで開きます。 次に、要素を作業フレームにドラッグアンドドロップするだけです。 ウィジェットパネルで、Slider Revolution 6ウィジェットを検索し、ページに追加します。 ウィジェットをドラッグするときは、使用するスライダーを選択する必要があります。

一部のWebサイト所有者は、ページビルダーウィジェットの操作が簡単であると感じているため、ショートコードの代わりにこの方法を使用してください。

スライダーをエクスポートする方法

スライダーをエクスポートするには、ダッシュボードメニューから関連するタブをクリックしてSliderRevolutionに移動します。 インポートまたは作成したすべてのスライダーがそこに表示されます。

エクスポートするモジュールのサムネイルの上にマウスを置きます。 右下隅にある小さな矢印をクリックします。 表示されるすべてのオプションの中から、[エクスポート]を選択してクリックします。

エクスポートに時間がかかる可能性があることを通知する確認ダイアログが表示されます。 [はい、スライダーをエクスポート]をクリックすると、ダウンロードが開始されます。 ダウンロードが完了すると、スライダーの.ZIPファイルが作成されます。

結論として

StylemixThemesによって開発されたほとんどすべてのテーマには、パッケージにSliderRevolutionプラグインが含まれています。 私たちは、ウェブサイトをより魅力的で魅力的でインタラクティブなものにする機会を与えるこの強力なソフトウェアが大好きです。

私たちのガイドが、この素晴らしいプラグインを使用してスライダーを構築するプロセスをよりよく理解するのに役立つことを願っています。 詳細については、SliderRevolutionのメインページをご覧ください。