Diviスライダーを作成するための究極のガイド

公開: 2020-09-04

エレガントなテーマによるDiviは、今日利用できる最も人気のあるWordPressテーマおよびページビルダーの1つです。 このページビルダーは、 Webサイト全体を作成できるドラッグアンドドロップエディターです。 選択できるモジュールがたくさんあり、Webサイトの作成が簡単になります。 この記事では、Diviで利用可能なスライダーモジュールを紹介します。 また、あなたのウェブサイトをよりユニークにすることができるスライダープラグインの代替案を紹介します。

Diviスライダーモジュール

あなたのウェブサイトでスライダーやブロックを使用することは、最近では新しいことではありません。 Diviのようなページビルダーには、ページ用のスライダーモジュールを作成するオプションがすでにあります。これは、スライダーを作成するための最も簡単で最速のソリューションです。 Diviは、シンプルスライダー、ビデオスライダー、ポストスライダーモジュールの3種類のスライダーモジュールを提供しています。

Diviスライダーモジュール
利用可能なDiviスライダーモジュール

これらのモジュールを見てみましょう!

スライダーモジュール

ページに基本的なスライダーを配置する場合は、Diviスライダーモジュールが最適なソリューションになります。 すべての設定はDiviBuilder内にあり、デザインが適合しているかどうかを即座に確認できます。

Diviスライダーモジュール

このスライダーは、画像やビデオを紹介したり、テキストを表示したり、CTAを配置したりするために使用できる優れたスライダーモジュールです。 このため、ヒーロースライダーをすばやく作成することができます。 タイポグラフィ、色、弾丸のスタイルの設定など、カスタマイズオプションもあります。 スライダーには、画像のサイズを調整できるスライダーの背景画像を設定するオプションがあります。 さらに、その上にオーバーレイを置くことができます。 また、視差効果を追加して、サイトをよりプロフェッショナルにすることもできます。

👍良い
  • 使いやすい
  • 視差の背景
  • ビデオの背景
  • デバイスのスライダーを非表示にする
👎悪い
  • スライドコンテンツの順序を変更することはできません
  • 限られた構造

ビデオスライダー

Diviは、ページにビデオスライダーを作成するための別のスライダーモジュールを提供しています。 このモジュールを使用すると、ビデオを整理できます任意のソースを使用できます。たとえば、任意のYouTubeまたはVimeoリンクを配置したり、独自のmp4ビデオをアップロードしたりできます。 したがってどちらを使用するかはあなた次第です。 他のスライダーモジュールと同様のカスタマイズオプションがあります。 さらに、サムネイル画像と再生ボタンもカスタマイズできます。

ビデオスライダーモジュール

👍良い
  • あらゆるタイプのビデオを使用できます
  • ビデオギャラリーを作成する簡単な方法
👎悪い
  • 自動再生オプションなし
  • ビデオが最初から始まるたびに

ポストスライダー

Diviの投稿スライダー
動的に変化する投稿スライダーを作成すると、最新の投稿や注目の投稿を紹介できます。 Diviは、最新の投稿を表示したり、紹介したい記事の数と順序を定義したりできる投稿スライダーモジュールを提供しています。 注目の画像をスライドの背景として設定したり、投稿のタイトルとメタを表示したり、投稿自体にリンクする続きを読むボタンを配置したりできます。

👍良い
  • 動的に変化するコンテンツ
  • カテゴリから選択できます
  • カスタマイズ可能な投稿数と順序
👎悪い
  • 限られたデザインと構造

より良いDiviスライダーを作成するにはどうすればよいですか?

Diviのスライダーモジュールは素晴らしいですが、少し制限されていると思います。 よりカスタマイズ可能なスライダーを作成したい場合は、Diviと互換性のあるスライダープラグインを見つける価値があります。 Smart Sliderは、WordPressで最高のスライダープラグインの1つです。 無料版でさえ、あなたが始めることができる素晴らしい機能を持っています。 Smart Sliderは、カスタムデザインの作成に役立ち、すべてのレイヤーをカスタマイズできます。 このプラグインにはDiviモジュールがあるため、通常どおり公開できます。

うまくいけば、SmartSlider3プラグインがDiviスライダー機能をアップグレードする方法を知りたいと思うでしょう。 最も重要な改善点の1つは、カスタムの順序と配置で4つ以上のレイヤーを持つスライドショーを作成できることです。

フルページポートフォリオスライダーの例

Smart Sliderには、より多くの種類のレイヤーから選択できるレイヤーリストがあります。 行と列は、それらを構造化するのに役立ちます。 レイヤーを垂直方向と水平方向に配置したり、最大幅を設定したり、色やタイポグラフィを変更したりできるため、独自のデザインを作成できます。 十分でない場合は、レイヤーの絶対配置を使用してスライダーを設計できます。 さまざまなレイヤーと位置を組み合わせることで、SmartSlider3とDiviを使用して真にユニークなWebサイトを作成できます。

Smart Slider 3の使用方法は?

Smart Sliderは、WordPressリポジトリで無料で利用できるスライダープラグインです。 ダウンロードしてアクティブ化するだけです。 次に、スライダーの作成を開始できます。 開始できるビルド済みのテンプレートは多数ありますが、最初から開始することもできます。

スライダーの準備ができたら、SmartSliderDiviモジュールを使用して公開します。

スマートスライダーモジュール

DiviスライダーモジュールとSmartSliderの比較

基本的なDiviスライダーと、SmartSliderの無料バージョンとプロバージョンを比較してみましょう。 Diviスライダーモジュールは、多くのカスタマイズオプションがあり、Diviの内部にあるため、Diviの優れたモジュールだと思います。 すべてが1つの場所にあり、新しいインターフェースを知る必要はありません。 ただし、必要なレイアウトを作成できないため、機能が制限されます。

レイヤーを好きな場所に配置できる、より具体的なレイアウトが必要で、よりユニークなコンテンツを作成できる場合は、 SmartSlider3の使用を検討してください。 無料版はDiviモジュールのような多くの機能を提供し、Proでは制限はありません。

関連するいくつかの違いを見てみましょう!

Diviスライダーモジュール
スマートスライダー3無料
スマートスライダー3プロ
レイヤー5 6 23
タイポグラフィオプション
ドラッグアンドドロップインターフェイス
背景画像
背景ビデオmp4、WEBM mp4
視差効果
レイヤーアニメーション
トランジション
コントロール2 5 7
動的変数
静的オーバーレイ
自動再生

インターフェース

スマートスライダーインターフェース

主な違いはインターフェースです。 Diviを使用すると、WordPressWebサイトにスライダーを簡単に追加できることは間違いありません。 設定したフィールドにテキストを入力し、画像をアップロードするだけで、スライダーを使用できるようになります。 ただし、機能性と印象的なスライダーを作成できるようにする場合、Diviスライダーにはいくつかの制限があります。 それでも、Smart Sliderでは、ドラッグアンドドロップスライドエディターを使用して、レイヤーを好きな場所に配置できます。

アニメーションと効果

背景アニメーションモードを使用すると、デザインを簡単に実現できます。 Diviには、スライダーを元気づけることができる基本的なアニメーションオプションがありますが、Smart Slider 3 Proでは、メインアニメーション、背景アニメーション、および固有のレイヤーアニメーションの3種類のアニメーションから選択できます。

カスタマイズ可能なコントロール

各スライダーモジュールには、コントロールをカスタマイズするためのオプションがありますが、スマートスライダーでは、それらを一意にするためのより多くの方法があります。 コントロールを他の位置に配置したり、色や間隔を変更したり、別のデバイスで非表示にしたりできます。 Smart Slider 3には、サムネイルを表示するオプションがあり、画像ギャラリースタイルのサムネイルスライダーを作成できます。

無料のサムネイルスライダー

スライダーの自動再生

Smart Sliderは、ほとんどのスライダープラグインで人気のある機能であるスライダーの自動再生を提供します。 このように、スライダースイッチはしばらくするとスライドを切り替えます。 これは訪問者の注意を引くことができますが、スライダーの自動再生が気に入らない場合は、この設定を無効にするだけです。

なぜDiviスライダーとしてSmartSlider3を選択する必要があるのですか?

シンプルで基本的なものが好きなら、別のプラグインをインストールして、スライダーを作成するためにどのように機能するかを学びたくないかもしれません。 Diviにはスライダーモジュールもありますが、なぜ別のプラグインを使用してスライダーを作成する必要があるのでしょうか。 スマートスライダーを選択するかどうかを決定するのに役立ついくつかの機能を見てみましょう。

スマートスライダーで利用可能なスライダータイプ
スマートスライダーのスライダータイプ。 上段:シンプル(無料)とカルーセル(プロ)。 下段:ブロック(無料)とショーケース(プロ)

SmartSlider3を無料で選択する理由

  • それは無料です。 Smart Sliderの無料バージョンはWordPressリポジトリで入手でき、料金を支払う必要はありません。
  • スライダーを作成する自由。 行、列、および配置オプションのおかげで、複雑なレイアウトを作成できます。
  • カスタマイズ可能なコントロール。 矢印、箇条書き、サムネイル、テキストバーを想像どおりに使用してください。 それらを配置するか、色を変更するか、表示したくない場合は無効にします。
  • テンプレートを使用する準備ができました。 Smart Slider 3では、完全にカスタマイズ可能なビルド済みのテンプレートから始めることができます。 コンテンツまたは画像を変更するだけで、すぐにスライダーを使用できます。
  • 無料のスマートスライダーテンプレート
    無料のスマートスライダーテンプレート
  • レスポンシブスライダー。 最小限の労力で、どのデバイスでも見栄えのするスライダーを作成できます。

Smart Slider3Proを選択する理由

うまくいけば、SmartSlider3がスライドショープレゼンテーションをDiviWebサイトに追加する機能をどのようにアップグレードできるかについての理解が深まったことを願っています。 それでもわからない場合は、Smart Slider3Proのいくつかの機能を見てみましょう。