を設定したい WordPressのプラグイン スライダーレボリューション?

このシリーズのチュートリアルの開始以来、 WordPressのプラグイン  スライダー 革命、私たちは学んだ プラグインをダウンロードしてインストールする。 私たちはその後、 そのインターフェースと異なる機能を発見しました。 それでは、次の構成を表示して先に進みましょう。 "スライダー".

あなたが初心者で、始めるためのリソースを探している場合; あなたはここであなたが始めるために必要なすべてを見つけるでしょう。 ブログの作成を発見したら WordPressブログを簡単に作成する方法:Guide&Tuto

そうは言っても、スライダーとは何かを調べてみましょう。

実際のスライダーとは何ですか?

スライダーはHTMLコンポーネントです。 はい、私は知っています、このように言った、それはあなたをあまり前進させません。 したがって、スライダーは、さまざまな情報をループで表示する(または表示しない)ことができる機能です。 この情報は「 スライド 「、これは「スライダー」のエンティティであり、画像、ビデオテキスト、リンクなどで構成できます。スライダー革命-WordPressスライダー革命プラグイン

スライダー 「したがって含む」 スライド (少なくとも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サイトを備えたスライドショーとイメージギャラリーを作成するオプションを提供します。Layersliderワードプレスプラグイン作成スライダー1

これは、スライダーレボリューションと緊密に競合できる選択肢のXNUMXつです。 その視覚的なドラッグアンドドロップエディタにより、誰でも簡単に使い始めることができます。 技術的なスキルやコーディングスキルは必要ありません。 インポート可能なモデルの選択肢が増え続けていることは、新しいプロジェクトの理想的な出発点であり、すべての一般的な使用例をカバーしています。 それらは注意して作られており、すべてのニーズに合わせて簡単にカスタマイズできます。

優れたサポートと頻繁な更新により、購入を最大限に活用できます。

この記事を読んで、この強力なWordPressプラグインをさらに活用してください レイヤスライダ:スライダを作成するためのWordPressプラグイン

ダウンロード | デモ | ウェブホスティング

2。 WP1スライダ

WP1 Sliderは、汎用性の高いWordPressプラグインです。 使いやすく、美しいスライドショーを作成するために必要な便利な機能がすべて備わっています。 ほとんどのスライダープラグインは技術的すぎるため、設定に時間がかかりますが、WP1スライダーは非プログラマ向けに設計されており、素晴らしいオプションを提供します。Wp1 Slide Pro WordPressプラグインは、スライドショーのWebサイトスライドを作成します

これらの中であなたは見つけるでしょう:Kenburn効果のサポート スライダー遷移の6の異なるモデル、ショートコードのサポート、Cドラッグアンドドロップによるスライドの開始、c速い嫌がらせと優秀なSEO、いくつかのソーシャルネットワークでの共有のサポート、iYouTubeとVimeoビデオの統合、eレイアウト完全な応答性、のサポート WooCommerce などがあります。

ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

まとめ

出来上がり! WordPressプラグインの設定に関するこのプレゼンテーションは以上です スライダー革命. 今後のチュートリアルでは、スライドのデザインについて説明します。

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

ただし、ご意見やご提案がございましたら、コメント欄にご記入ください。 特にあなたの異なる上でこの記事を共有する 社会的ネットワーク.