を設定したい WordPressのプラグイン スライダーレボリューション?
このシリーズのチュートリアルの開始以来、 WordPressのプラグイン スライダー 革命、私たちは学んだ プラグインをダウンロードしてインストールする。 私たちはその後、 そのインターフェースと異なる機能を発見しました。 それでは、次の構成を表示して先に進みましょう。 "スライダー".
あなたが初心者で、始めるためのリソースを探している場合; あなたはここであなたが始めるために必要なすべてを見つけるでしょう。 ブログの作成を発見したら WordPressブログを簡単に作成する方法:Guide&Tuto
そうは言っても、スライダーとは何かを調べてみましょう。
実際のスライダーとは何ですか?
スライダーはHTMLコンポーネントです。 はい、私は知っています、このように言った、それはあなたをあまり前進させません。 したがって、スライダーは、さまざまな情報をループで表示する(または表示しない)ことができる機能です。 この情報は「 スライド 「、これは「スライダー」のエンティティであり、画像、ビデオテキスト、リンクなどで構成できます。
" スライダー 「したがって含む」 スライド (少なくとも1)、これらのスライドにはマルチメディア要素が含まれています(画像、ビデオ、音楽、テキスト)アニメーションまたはインタラクティブ(ユーザーのアクションに反応する).
レマルク :翻訳できます " スライダー で インタラクティブでダイナミックなスライド '。
Slider Revolutionはそれを可能にし、それ以上遅滞なく開始します。
まだウェブサイトを作成しておらず、探している場合 ワードプレスのテーマ この強力な機能をネイティブに統合します WordPressのプラグイン, プレミアムWordPressテーマのこのリストは完璧です.
スライダーの作成:最初の構成
開始するには、メニューをクリックする必要があります " スライダー 革命 WordPressダッシュボード上。
アイテムをクリックします 新しいスライダー そして、スライダーの構成インターフェースが表示されます。
スライダー構成インターフェースは恐ろしいかもしれませんが、一歩下がるとその機能をよりよく理解できます。 このインターフェイスは5つのセクションで構成されていることに気付くかもしれません。 左側の最初の領域は6つの異なる領域で構成され、右側のXNUMX番目の領域はXNUMXつの小さな領域で構成されています。 すぐ上にツールバーがあり、次のことができます。
- スライダーのリストに戻る« すべてのスライダー »
- スライダー設定へのアクセス(これはあなたがいるウィンドウです)
- スライドの編集インターフェース
- バックアップボタン
- スライド編集ボタン
- スライダープレビューボタン
- スライダ取り外しボタン
- 戻るにはボタン(アンコール)スライダーの一覧へ
私は今、左の列の各セクションについて説明します。
このWordPressプラグインは多くの画像を操作するため、Webサイトの読み込みが遅くなる可能性があります。 発見する WordPressブログを画像で最適化する必要がある理由
「コンテンツソース」セクション
このセクションでは、スライダーのソースを構成できます。 確かに、ここで作成することを決定できます:
- すべてのアニメーションを自分で構成する必要があるクラシックスライダー
- 操縦の余地が非常に限られている記事のスライダー
- 選択可能な特定の記事のスライダー
- Flickrニュースフィードのスライダー
- Instagramフィードのスライダー
- 商品スライダー WooCommerce
- Twitterのフィード上のスライダー
- Facebookの投稿のスライダー
- YouTubeの出版物のスライダー
- そしてVimeoの出版物のスライダー
それに留意する必要があります:Slider Revolutionは、オンラインストアで製品を強調表示できる強力なプラグインです。 発見する 10 WordPressテーマでオンラインストアを作成し、服を展示
とはいえ、クラシックスライダーは最も使用されており、マスターするのが最も難しく、その効果が非常に優れているため、クラシックスライダーを作成する方法を説明します。 練習すれば、他のスライダーで独自の設定を行うことができます。 問題が発生した場合は、戻ってここにコメントを残してください。 そのため、オプションは「 デフォルトのスライダー "アクティブ。
スライダーのタイトルとショートコードセクション
あなたはおそらくそれを推測しました。 このセクションでは、スライダーのタイトルとそれに付随するショートコードを定義できます(ロケット科学ではありません)。
「スライダーの種類を選択してください」セクション
このセクションでは、スライダーの基本構造を定義できます。 実際、次の3つのオプションから選択できます。
- 最初のオプションでは、使用可能なスペースに合わせて幅が調整され、ナビゲーションボタンなどの基本的な要素を持つデフォルトのスライダーを定義します。
- XNUMX番目のオプションでは、ナビゲーションボタンを使用せずに、前のオプションよりもはるかに印象的な、動的でインタラクティブなスタイルを適用することを決定できます。 このオプションは、アニメーションとインタラクションに重点を置くため、「ヒーローシーン」と呼ばれます。
- 最後のオプションは、非常に多様なアニメーションで画像を左から右に単純にスクロールする、はるかにクラシックなスタイルを提供します。
レマルク :オプションを選択するたびに、セクション「このスライダタイプからプリセットをロードする選択したスライダーの種類の高度なバリエーションを提供します。
すべてのバリエーションを説明することはできませんが、利用可能な画像から結論を引き出すことができます。 たとえば、スライダーの場合は「 スタンダード 4番目のバリエーションとして「 親指ボトム自己 」。これにより、下部にサムネイルが表示され、自動スクロールアニメーションを持つスライダーを作成できます。
「スライドレイアウト」セクション
このセクションでは、スライダーのレイアウトを設定できます。 だからあなたは残すことができます 革命スライダー »スライダーに適用する幅を自動的に選択するか、スライダーに全幅を適用するか、スライダーを全画面モードで使用するかを選択します。
選択したオプションに応じて、一部のデバイスではスライダーが異なります。 デバイスに応じたグリッドの構成セクションの下にあります(モバイル、デスクトップ、など。)。 グリッドを構成すると、各スライダーの内部マージンを変更できることに注意してください。
また読む ブログのモバイルデザインを最適化するための6のヒント
このセクションの一番下で、オーバーフローの可視性を有効にし、無線外観の保持を有効にし、最小の高さを設定することを選択できます。
「カスタマイズ、構築、実装」セクション
このセクションには、実際にはプラグインのオプションがありません。 重要なセクションへのクイックリンクを提供します。
次に、右側の2列目から続けます。
一般設定セクション
このセクションでは、スライダーに適用されるいくつかの設定を提供します。 これがあなたができる方法です:
[スライドショー]タブ
- 高架道路のスライダーを無効にする
- 設定された数のスクロール後にスライダーを停止する
- スライドをランダムに表示する
- スライドをループする
- 特定のデバイスサイズでスライダーを無効または停止する
- 最後のオプション「revapi.revstart()を待つ」は役に立ちません。
[障害]タブ
次を定義できます。
- レイヤーの選択可能なキャラクター
- スライダーの識別子を定義します(自動的に行われます)
- スライド間の最小期間
- 初期化前のタイムアウト
- スライド間の遷移
- マイクロ秒で表される遷移の期間
- 画像サイズ
- 背景画像のCSS位置
- この画像が十分に大きくない場合、背景画像を繰り返します
- オプションの有効化 " 動画ドゥラミュエット これにより、アニメーションのタイプ、XYの位置(はい、数学関数を描く必要があるときに学ぶこと)、およびその他の要素。
進行状況バーのタブ
このセクションのすべてのオプションは、プログレスバーのためのもので、有効にしてカスタマイズすることができます。
1タブer スライド
このセクションでは、最初の代替スライドをアクティブ化できます。 これにより、「 スライダー 「 スライド あなたの選択の最初。 覚えておいてください」 スライド 識別できる要素です。
「レイアウトとビジュアル」セクション
「外観」タブ
このセクションでは、スライダーの外観を構成できます。 特に、スライダーの下に影を表示するように定義できます(デフォルトのスライダーを選択する場合、非常に低いマージンで非常に便利です).
透明なドットで覆われたオーバーレイヤーを表示することもできます(これにより、スライダーは非常に独創的になりますが、完全に読む必要がある情報を表示したい場合は、).
次に、スライダーの背景、内部マージン、背景の画像があります(ここで知っておく必要があるのは、このレベルの背景画像がすべての画像に表示されることですスライド)。
「スピナー」タブ
このタブでは、スライダーのロード中にアニメーションを定義できます。
[モバイル]タブ
このタブを使用すると、モバイルのスライダーの表示を管理できます。 モバイルトラフィックは重要であるため、無視しないでください。 モバイルのサイズ(幅)が決定した数値(ピクセル単位)より小さい場合、スライダーを非表示にすることができます。
[位置]タブ
これにより、ページに対するスライダーの位置を決定できます。 それが置かれている場所に関連して、私は言う傾向があります。 このオプションを変更する必要はありません。スライダーを中央に配置したいと思うからです。
「ナビゲーション」セクション
このセクションでは、「スライダー」のスライド間のナビゲーションボタンをアクティブにすることができます。 6つのナビゲーションオプションがあります。
- 矢印
- ノミ
- タブ
- サムネイル
- モバイルデバイスでのタッチダウンの影響
- そして、矢印キーでナビゲート
各オプションを有効にすると、ナビゲーション要素の位置またはその動作原理を構成できます(通常はデフォルト設定で十分です).
「カルーセル設定」セクション
このセクションは、タイプ「 カルーセルスライダー »、およびそのオプションを構成できます。 あなたはできるでしょう:
- 無限スクロールを有効にする
- スライドに触れたくない場合は、スライド間にスペースを定義します
- ピクセルで丸い境界線を設定します
- 高い上部マージンを設定します(パディングトップ)
- 上マージンを低く設定します(パディング下)
- 「スライド」で見える要素の数
- « ストレッチ要素"、要素を引き伸ばして、"の幅全体を占めるようにすることができます。 スライダー »
セキュリティはウェブサイトの稼働時間における重要な要素であり、深刻な攻撃やバグからユーザーを保護する手法のXNUMXつは、ブログを定期的にバックアップすることです。 私たちの発見 5 WordPressブログバックアッププラグイン
「Parallax&3D」セクション
ここで、オプション「 3D スライダーで。
「問題と処理」セクション
このセクションでは、古いデバイスとの互換性を管理できます。 スライダーは「 IOS4およびInternet Explorer 8 '。
それ以外の場合は、ブラウザがスライダーをサポートしていないときに、代替画像を表示することを選択できます。
「Googleフォント」セクション
この機能を使用すると、ダウンロードするGoogle Fontsフォントを管理し、スライダーに適用できます。
スライダーのパラメーターを定義したら。 あなたがしなければならないのは、記録ボタンをクリックすることだけです。
WordPress Webサイトでスライダーを作成する際に、WordPress Slider Revolutionプラグインがお気に入りではない場合は、同様の機能を提供できるXNUMXつの選択肢をここで提供します。
1。 LayerSlider
LayerSliderは、プレミアムWordPress多目的アニメーションプラグインです。 見事な効果、美しくアニメーション化されたランディングページとページブロック、さらには完全なWebサイトを備えたスライドショーとイメージギャラリーを作成するオプションを提供します。
これは、スライダーレボリューションと緊密に競合できる選択肢のXNUMXつです。 その視覚的なドラッグアンドドロップエディタにより、誰でも簡単に使い始めることができます。 技術的なスキルやコーディングスキルは必要ありません。 インポート可能なモデルの選択肢が増え続けていることは、新しいプロジェクトの理想的な出発点であり、すべての一般的な使用例をカバーしています。 それらは注意して作られており、すべてのニーズに合わせて簡単にカスタマイズできます。
優れたサポートと頻繁な更新により、購入を最大限に活用できます。
この記事を読んで、この強力なWordPressプラグインをさらに活用してください レイヤスライダ:スライダを作成するためのWordPressプラグイン
2。 WP1スライダ
WP1 Sliderは、汎用性の高いWordPressプラグインです。 使いやすく、美しいスライドショーを作成するために必要な便利な機能がすべて備わっています。 ほとんどのスライダープラグインは技術的すぎるため、設定に時間がかかりますが、WP1スライダーは非プログラマ向けに設計されており、素晴らしいオプションを提供します。
これらの中であなたは見つけるでしょう:Kenburn効果のサポート スライダー遷移の6の異なるモデル、ショートコードのサポート、Cドラッグアンドドロップによるスライドの開始、c速い嫌がらせと優秀なSEO、いくつかのソーシャルネットワークでの共有のサポート、iYouTubeとVimeoビデオの統合、eレイアウト完全な応答性、のサポート WooCommerce などがあります。
その他の推奨リソース
また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。
- ブログに図を作成する8 WordPressプラグイン
- 記事を共有する5つのWordPressプラグイン
- ブログのRGPD準拠を保証する6 WordPressプラグイン
- ブログに翻訳システムを追加する8つのWordPressプラグイン
まとめ
出来上がり! WordPressプラグインの設定に関するこのプレゼンテーションは以上です スライダー革命. 今後のチュートリアルでは、スライドのデザインについて説明します。
しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.
ただし、ご意見やご提案がございましたら、コメント欄にご記入ください。 特にあなたの異なる上でこの記事を共有する 社会的ネットワーク.
ボンジュール、
スライダーに配置したフォントが表示時にうまく表示される理由を知りたいのですが、サイトにフォントを含めると同じではなくなりましたか?
こんにちはステフィー、
ブラウザのキャッシュをクリアするか、プライベートモードでウェブサイトを閲覧してください。 これはあなたの問題を解決するはずです
こんにちは、私は2つの異なるモデルを作成しました。 現在のオンラインカーソルから切り替えたいと思います。 私は本当にこれを行うことはできません。 誰かが魔法のアドバイスを与えることができますか? 前もって感謝します!
私はslider4を作成し、このスライダーに3つのdiaspositiveを配置しました。 しかし、私のホームページでは、スライダーの回転はXNUMXつのスライドのみを表示し、残りは表示しません。 最初のスライドのみが表示されます。 たとえば最後のスライドを最初に持ってくると、スライダーの回転はこれを最後に表示し、他のスライドを残します
今晩は、
設定のスクリーンショットを共有できますか? または、スライドをエクスポートしてから、回転スライダーの設定を復元します。
お疲れ様です
ダイナミックスライダーを作りたいのですが、マウスオーバー効果のあるスライダーの作成に関するファイルはありますか?
ありがとう
お疲れ様です
残念ながら、ありません。
こんにちは、スライダーのテンプレートをダウンロードしました。テキストと画像を変更できました。スライダーレボリューションプレミアムを使用しています。ただし、「スライダーレボリューション…」というテキストとソーシャルネットワークへのリンクをスライドpff。 そして、私はこのテキストを見つけたり削除したりすることができません。 前もって感謝します
こんばんはアリシア、
テンプレートを使用する代わりに、新しいスライダーを作成してみましたか?
こんにちはスライダーを作成するときに少し問題があり、モバイルでそれを変更したいのですが、スライダーにすでに追加したテキストがモバイルスライダーに表示されないのはなぜですか(変更するとき)???
お疲れ様です
あなたはあなたの要求を修正してくださいことはできますか?
お疲れ様です
RevolutionSliderに問題があります。 写真が縦に切り取られないようにするための解決策が見つからないようです。
彼はチェックボックスを持っている必要がありますか?
ご返事ありがとうございます
ノルベルト
こんばんは、
画像の寸法を最適化する必要があります。
こんにちは、私のスライダー革命は、私のワードプレスのテーマのために端を切っている。
Queの放任?
ありがとう
お疲れ様です
すべてのプラグインを無効にしてください。テーマが原因で問題が解決しない場合は、変更してください。
お疲れ様です
スライダの回転時にマウスやスクロールでトリガされたときにのみスライドを開始したいと思います。 それは可能ですか?
スライダのどのパラメータが有効になりますか?
ありがとうbeaucoup。
両方を行うことができますか?つまり、マウス/スクロールでスライダーを開始し、すべての可能なケースを同時に処理し、確実にするために、一般的なパラメーターで見た初期化遅延を設定しますサイト訪問者にはこのスライダーが表示されます
たmerci beaucoup
こんにちは可能ですが、現在、紹介するチュートリアルはありません。
ありがとう。
そして、私はスライダーレボリューションに精通しているので、少し言い訳してください。
それは私を助けるだろう
ボンジュール、
スライダの回転時にマウスやスクロールでトリガされたときにのみスライドを開始したいと思います。 それは可能ですか?
スライダのどのパラメータが有効になりますか?
ありがとうbeaucoup。
両方を行うことはできますか?つまり、マウス/スクロールでスライダーを開始し、一般的なパラメーターで見た初期化遅延を設定して、考えられるすべてのケースを同時に処理し、確実にすることはできますか?サイト訪問者にこのスライダーが表示されること
こんにちは、こんばんは、疑問があります。
スライダー革命でいくつかの画像があり、最初の画像を除いたモバイル版でそれらを非表示にしたい。 同じプラグインに異なるデバイスで必要な画像を非表示にする機能があることを確認しましたが、問題は、バーが原因で複数の要素があることを検出し続けるため、画像のみを非表示にすることです。時間はロードを続け、最初の画面がジャンプすると画面が空白のままになります。 どうすれば本当に画像を隠すことができますか?
どうもありがとうございました
お疲れ様です
Revolutionスライダープラグインのサポートに連絡しましたか? すぐに解決策を見つけることができます。
こんにちは、上のメニューとカーソルのすぐ下にあるApple.comサイトで、カーソルを水平ナビゲーションバーのメニューバーの下に置く方法を尋ねました(メニューは透明に見えます)
ありがとう
アンドリア
こんにちは、例としてスクリーンショットを共有できますか? 私はあなたの問題をよく理解していません。
お疲れ様です
引用符が書かれた2つまたは3つの画像を含むスライダーを作りたいです。 私の問題は、私が書くとき、引用が長すぎて写真からはみ出しているので、完全に表示されないことです。 しかし、画像全体に余地があります。 実行する方法?
各スライドのタイトルが必要です。 デフォルトでは、「quote1」などを入力します。 ただし、タイトルはスライドに表示されます…たとえば、最初のスライドの右下に「Quote1」が表示されます。 タイトルが表示されないようにするにはどうすればよいですか?
事前にご回答ありがとうございます。指導を受けたプロジェクトで生徒を支援します。
お疲れ様です
フォントサイズを小さくしてみてください。 また、各テキストのモバイルオプションが有効になっていることを確認してください。
お疲れ様です
このスライダーで小さな問題が発生しました。多くの調査を行ったにもかかわらず、解決策が見つかりませんでした。 多分あなたは私を救うことができますか? 😉
ホームページでスライダーを設定しましたが、マウスをその上に置いたときにスクロールできないことを除けば、非常に優れています。 下にスクロールできるようにするには、スライドからマウスを外す必要があります(上にスクロールすると明らかに機能します)。 スライドからマウスを外さなければならないことを理解していない人がいるので、これは少し気になります..(www.sarah-scaniglia.com)。 すべての設定を検索しましたが、見つかりませんでした…そして私はWebの専門家ではありません。
あなたが素晴らしいソリューションを見つけたら
お疲れ様です
あなたはこれを試しましたか?
1。 Revolution Slider以外の他のプラグインを無効にして、再度テストしてください。
2。 デフォルトのWordPressテーマを有効にしてからテストしてください
これにより、問題がテーマにあるのか、別のプラグインとの競合にあるのかがわかります。
また、プラグインの最新バージョンを持っていることを確認してください。
ありがとう、私は次週これを試してみて、それがうまくいくかどうか教えてくれます。
完璧にOK
お疲れ様です
スライドがXNUMXつしかない「スライダー」の作り方を教えてください。試してみると、アニメーションの最後ですべてが消えてしまいます。 「スライドアニメーション」に「送信なし」を入れましたが、何の役にも立ちません...
あなたの助けのために事前にありがとうございます。
今晩は、
コメント欄で説明するのは難しいです。 Youtubeで動画をご覧ください。