Diviプラグインのハイライト– Owl Carousel Pro

公開: 2017-09-03

Divi Builderを使用して、カルーセル内に投稿、プロジェクト、カスタム投稿タイプ、および画像を表示したいと思ったことはありませんか？投稿と画像は通常、一度に1つの投稿または画像を表示するスライダー内に表示されますが、複数の投稿を一度に表示する実際のカルーセルが必要な場合はどうでしょうか。これは、Owl CarouselProというプラグインを使用して簡単に行うことができます。

Owl Carousel Proは、DiviBuilderに2つの新しいモジュールを追加するサードパーティのプラグインです。 1つ目は、プロジェクト、投稿、カスタム投稿タイプなどの投稿タイプを表示します。 2つ目は、画像カルーセルがビジュアルエディタと競合して、必要なタイプのコンテンツを追加することです。

利用可能なプラグインの無料バージョンがあります。私はプロバージョンを見ています。これには次のようないくつかの新機能が追加されています。

カスタム投稿タイプ
カスタムフィールドを表示する
カスタムクエリ
サムネイルサイズを変更する
表示される画像の数を変更する
ライトボックスで画像を開く

例の画像はUnsplash.comから取得されています。

フクロウカルーセルプロのインストール

通常どおりプラグインをアップロードしてアクティブ化します。次に、DiviBuilderに2つの新しいモジュールDPOwlCarouselとDPOwl ImageCarouselが表示されます。モジュールは、標準のDiviモジュールとは異なる色で表示され、目立つようになっています。これは、サードパーティのモジュールを見つけやすくするため、私の好みです。

DPフクロウカルーセル

DP Owl Carouselは、カルーセル内の投稿、プロジェクト、およびカスタム投稿タイプを表示します。過去10件の投稿、または選択したカテゴリやタグからの投稿が表示されます。そのコンテンツタブには、コンテンツと要素の設定が含まれています。 [デザイン]タブには、テキスト、投稿タイトルテキスト、投稿メタテキスト、投稿抜粋テキスト、カスタムファイルテキスト、間隔、矢印、コントロール、サムネイルが含まれます。

[詳細設定]タブには、予想されるCSS設定が含まれていますが、クリックアクション、アニメーション（スクロールのタイミングを決定）、背景、および可視性も追加されています。両方のモジュールの背景色は単色のみであるため、利用可能なグラデーションや画像はありません。通常、CSSを使用しない限り、[詳細設定]タブは表示されないため、[コンテンツ]タブにあると思っていたので、これらの設定を見逃してしまいました。

カスタムクエリ（Webサイトにある例）を作成することも、モジュール内の設定を使用して表示内容を制御することもできます。投稿数、オフセット番号、カスタム投稿タイプ名、カテゴリ、含めるタグ、除外するタグなど、表示を制御するためのいくつかの設定が含まれています。カスタム投稿タイプが自動的に追加されました。

カスタムクエリは、PHPコード内の子テーマに追加されます（テーマの更新時に変更が失われないように、親テーマではなく子テーマで常にPHPの変更を行います）。開発者のWebサイトには、いくつかの例が含まれています。

注–ライブサイトに追加する前に、必ずテストサイトでコードを試してください。

DPフクロウカルーセルの例

これは標準的なデザインです（目立つように背景を追加しました）。すべてのカテゴリで私の最後の10件の投稿が表示されます。ページ内でどのように表示されるかを示すために、Diviヘッダーと投稿メタを含めました。いずれかの画像をクリックすると、投稿に移動します。

これは、タイトル、カテゴリ、および日付を追加します。カスタムフィールドを設定している場合は、それらを表示することもできます。

これは、デフォルトの270文字を使用してタイトルと投稿の抜粋を示しています。

これでは、投稿の抜粋を70文字に設定しました。

これでは、矢印とコントロールを無効にしました。アニメーションは引き続き機能しますが、ユーザーはスライドをシャッフルできません。

これでは、フォントのサイズと色を変更し、矢印を赤にし、コントロールのサイズを大きくして紫にし、サムネイルのサイズを大きくし、余白を0に減らし、3つの画像を表示するように設定しました。コントロールの2番目の色は、私が選択した色の暗いバージョンです。 2番目の色はプラグインによって提供されます。

これでは、モジュール自体に背景を追加し、アイテムのマージンを変更して、投稿の間に背景が表示されるようにしました。フォントの色も変更し、今回は行の高さと間隔を調整しました。画面ごとに4つの投稿が表示され、サムネイルのサイズを小さくしました。矢印を大きく、コントロールを小さく設定しました。

サムネイルのサイズを変更すると、表示している投稿の数に合わせて調整されるだけです。したがって、画像を大きくしたい場合は、表示される投稿の数を手動で減らす必要があります。

DPフクロウ画像カルーセル

DPフクロウ画像カルーセルはカルーセル内の画像を表示します。画像を追加したり、矢印やコントロールを表示したりできます。デザイン設定には、テキスト、画像タイトルテキスト、画像コンテンツテキスト、間隔、矢印、コントロール、サムネイルが含まれます。詳細タブは、DPフクロウカルーセルモジュールと同じです。

必要な数の画像を追加し、ライトボックスで開いて、コピーしたバージョンの画像または元の画像を使用することができます。さまざまなサイズの画像を意図的に選択して、どのように機能するかを確認しました。

画像がきれいに表示されます。 URLにリンクしたり、ライトボックスで開いたりできるのが好きです。画像にオーバーレイを追加して、エクスペリエンスをさらに向上させたいと思います。

DPフクロウ画像カルーセルの例

デフォルト設定を使用して、モジュールがページ上でどのように表示されるかを次に示します。目立つようにセクションに背景を追加しました。

この例では、画像にタイトルとテキストを追加しました。また、矢印とコントロールを大きく設定し、それぞれの色を変更しました。

これは4つの画像を表示します。画像サイズを大きくし、アイテムの余白を8から4に減らしました。次に、フォント、矢印、コントロールのサイズと色を調整しました。タイトルフォントの間隔が広くなりました。

これは、フォント、コントロール、および矢印に新しい色の暗い背景を使用しています。

ライトボックスで画像を開いたときの画像は次のようになります。スクロールアニメーションは引き続きバックグラウンドで機能します。

カスタム投稿タイプ

Owl Carousel Proモジュールで、カスタムクエリが無効になっていることを確認し（これは、リストからカテゴリを選択する代わりに独自のカスタムフィルタを作成する場合にのみ使用されます）、[カスタム投稿タイプ名]で投稿タイプを選択します。 WooCommerceをインストールしたところ、オプションとして自動的にProductが追加されました。

私の各製品カテゴリは、カテゴリリストに自動的に追加されます。これで、下にスクロールして、カルーセルに表示する製品を選択できます。

商品は表示されますが、価格を表示するには、カスタムフィールドを有効にする必要があります。表示するフィールドを選択し、希望の通貨記号を表示するラベルを追加します。下にスクロールして、[カスタムフィールドの表示]を有効にします。カスタムフィールド名に_priceを追加し、カスタムフィールドラベルに$を追加します。

これで、選択したWooCommerceカテゴリを表示する製品カルーセルができました。 4つの投稿を表示するように選択し、画像サイズを大きくし、タイトル、メタ、カスタムフィールドのフォントの色を変更し、タイトルとカスタムフィールドのフォントサイズを大きくしました。この例では、メタの日付のみを表示していますが、通常の投稿と同様に、任意のメタ情報と抜粋を表示できます。

ExtraおよびDiviBuilderプラグインでのOwlCarouselProの使用

Owl Carousel Proは、Extraでもうまく機能します。これは画像カルーセルです。

Twenty SeventeenWordPressテーマにDiviBuilderプラグインがインストールされたプラグインを見てみましょう。これは私のWooCommerce製品を表示します。

ライセンス

プラグインはあなたとあなたのクライアントのために無制限のウェブサイトで使用することができます。 1年間の更新とサポートが含まれます。

最終的な考え

Owl Carousel Proは、Divi Builderに2つの優れたモジュールを追加して、カスタマイズ可能なカルーセル内に投稿、プロジェクト、カスタム投稿タイプ、および画像を表示できるようにします。予想されるDiviモジュールのカスタマイズのほとんどと、表示を制御するためのいくつかの新機能が含まれています。

ほとんどすべての機能と設定が直感的であることがわかりました。私は、カスタムフィルターが平均的なユーザーを混乱させることに気づきました。このプラグインの広大な機能を実証するため、フィルターを作成するいくつかの完全な例を見たいと思います。コードを扱いたくない場合でも、プロバージョンは検討する価値のある十分な機能を追加します。

ご意見をお聞かせください。 独自のカルーセルプロを試しましたか？ コメントであなたの経験について教えてください。

gst /shutterstock.com経由の注目の画像