Diviプラグインのハイライト– Anything Slider

公開: 2017-06-18

標準のDiviスライダーモジュールは強力なスライダーです。機能には、見出し、ボタン、テキスト、メディア、リンク、背景、オーバーレイなどが含まれます。 Divi Builderでレイアウトを作成し、スライド内に配置したい場合はどうなりますか？それはまさにAnythingSliderが行うことです。

Anything Sliderは、CakeWPのサードパーティプラグインであり、スライド内でDiviレイアウトを使用できます。スライダーだけでなく、もっとたくさんのことができます。また、スライダーモジュールと組み合わせて使用して以下を作成できるASメニューモジュールも含まれています。

タブ
カルーセル
インタラクティブセクション
価格設定の切り替え
フィルター可能なギャラリー
インタラクティブCTA
フィルター可能な製品
ウェブページ

すべてのスライダーは、Divi、Extra、およびDiviBuilderプラグインで動作します。このプラグインのハイライトでは、AnythingSliderで何ができるかを見ていきます。画像はUnsplash.comからのものです。

購入情報については、CakeWP.comを参照してください。

AnythingSliderのインストール

他のプレミアムプラグインと同じように、プラグインをアップロードしてアクティブ化します。有効になったら、ダッシュボードの[プラグイン]メニューにカーソルを合わせ、[任意のスライダーライセンス]を選択します。ライセンスキーを入力し、[ライセンスのアクティブ化]を選択します。次に、[変更を保存]を選択します。

2つの新しいモジュールがDiviBuilderに追加されました：AnythingSliderとASMenu。一緒に彼らはいくつかの興味深いデザインを作成することができます。

スライダーモジュールの設定

設定には、新しいスライド、次/前のコントロール、ドットコントロール、ホバーの表示コントロール、ループスライダー、アニメーション、高さ、マウスドラッグなどが含まれます。[デザイン]タブには、次と前のコントロールのカスタムスタイル、画面あたりのスライド数、間のマージンが含まれます。スライド、ドットの色など。

何でもスライダースライド設定

[新しいスライドを追加]をクリックします。ここに、スライドのレイアウトを選択するスライドレイアウトと呼ばれるドロップダウンが表示されます。これらは、事前に作成されたレイアウト、作成してライブラリに保存したレイアウト、またはアップロードしたレイアウトにすることができます。

ASメニュースライダーモジュール設定

設定には、メニューの向き、配置などが含まれます。[デザイン]タブには、フォント、間隔、背景、色などが含まれます。 [新しいメニュー項目の追加]をクリックして、メニュー項目を作成します。 URLを貼り付けたり、アイコンを選択したり、画像を選択したりします。

何でもスライダースターターキット

Sliderは、レイアウトを使用してスライドを作成します。あなたが始めるのを助けるために、あなたが開発者のウェブサイトからダウンロードすることができるたくさんの無料のスターターキットとレイアウトパックがあります。それらをDiviライブラリにインポートして使用します。

カスタムスライダーの作成

独自のレイアウトをいくつか作成し、それぞれをスライドとして選択しました。スライドはいくつでも追加できます。変更を加える場合は、どのスライドがどれであるかがわかるように、ラベルを付けるのが最適だと思います。

このスライドには、画像とバーカウンターが含まれています。左隅にドットナビゲーションがあり、両側にスライダーコントロールがあります。この例では、マウスが左のナビゲーションボタンにカーソルを合わせています。すべてのスタイルはカスタマイズ可能です。

アニメーション

スライドはアニメーション化でき、自動的にスライドするかどうかを設定できます。インとアウトのアニメーションが含まれています。バウンス、ラバーバンド、ゼリー、パルス、シェイク、タダ、ウォブル、スイング、フェード、フリップ、回転、ズームなど、すべての基本を含む80近くのアニメーションがあります。アニメーションをホバーで停止させることができます。

ナビゲーションボタン

ナビゲーションボタンは、個別にスタイルを設定できます。アイコン、境界線、色などの通常のスタイルとホバーの両方のスタイルを設定します。

この例では、ナビゲーションボタンのスタイルを個別に設定し、ドットのサイズを大きくしました（ドットに必要なピクセル単位で任意のサイズを指定できます）。ホバーアニメーションは、色と境界線の半径を変更します。ほとんどのDiviモジュールと同じスタイリング機能が含まれています。

ボタンとドットが右に移動し、ボタンが上部に、ドットが下部に配置されています。それらは両側に配置することも、上または下の場合は左、中央、または右に配置することもできます。必要に応じて、それぞれをオフにすることもできます。ボタンとドットの間には、レイアウトオプションの組み合わせがたくさんあります。

ASメニューモジュール

ASメニューモジュールは、ナビゲーションオプションを追加するのに最適で、アイコンや画像を使用できます。水平方向と垂直方向のオプションが含まれており、他のモジュールと同じようにスタイルを設定できます。

ASメニューモジュールは、訪問者がスライドをナビゲートできるようにメニューを作成します。スライド自体には、URLの最後（ブラウザのアドレスバー）にナビゲーションタグが含まれています。各メニュー項目にこのタグを使用します。この例では、スライド1のURLタグは＃s_1です。

メニューを一番下に配置し、フォントサイズを大きくし、目立つように背景を追加しました。単語はクリック可能ですが、この例ではボタンのようには見えません。それは簡単に変更できます。

カスタムパディングを追加し、ホバーと背景色を調整しました。

また、スライダーからナビゲーションボタンを削除し、ASメニューモジュールを上部に配置しました。メニューは横向きで表示されています。背景色のパディングにより、テキストの周囲にボックスが作成されます。パディングを使用すると、ボタンを必要なだけ大きくすることができます。

レイアウトを2列（3/4 + 1/4）に調整し、メニューの向きを垂直に配置しました。

側面のメニューは、特にモジュールの画像とアイコンの機能を検討するときに、いくつかの興味深い可能性を生み出します。これで何ができるか見てみましょう。

ユニークなページの作成

スライダーを使用してページ全体を作成し、ボタンとドットのナビゲーション、またはメニューモジュールを使用して、ページ間を自動的にスライドさせることができます。この例では、左側の1/4にASメニューモジュール、右側の3/4にAnythingSliderを備えた新しい全幅ページを作成しました。ウェブサイトを一目で視覚的に説明できるように、オーバーレイ付きのセクションに背景画像を追加しました。

この例では、ASメニューモジュールの画像機能を使用したいと思いました。このメニューでは、メニュー項目ごとに画像を追加しています。また、画像と一緒に、または単独で使用できるアイコンも含まれています。

スライドでは、単一のカテゴリが選択された単一のブログモジュールを使用してレイアウトを作成しました。

AS Sliderモジュールは、すべてのブログレイアウトを個別のスライドとして表示します。次/前のコントロールとドットコントロールをオフにしました。

スライダーは各カテゴリのブログモジュールを表示し、左側のメニューは垂直方向に設定されており、カテゴリの画像を表示し、スライド間のナビゲーションとして機能します。スライダーは、各カテゴリの最新の投稿を表示するためにスライドを回転するように設定されています。これは、ナビゲーションを除くホームページ全体がスライダーであることを意味します。もちろん、メニューは上、下、または右に配置することもできます。

何でもスライダーのドキュメント

ドキュメントはCakeWPのWebサイトで提供されており、入門ガイドやチュートリアルなど、画像やいくつかのビデオを含む概要が含まれています。また、モジュールの使用方法のアイデアを提供するのに役立つデモも含まれています。

ライセンス、サポート、および更新

プラグインは、選択したライセンスに基づいて、あなたとあなたのクライアントのWebサイトで使用できます。選択できるライセンスは3つあります。

1サイト– $ 30.00
5サイト– $ 50.00
無制限のサイト– $ 120.00

すべてのライセンスには、1年間のサポートとアップデートが含まれています。

購入情報については、CakeWP.comを参照してください。

最終的な考え

何でもスライダーは面白いモジュールです。スライドとしてDiviレイアウトを使用する機能は、多くの設計の可能性を開きます。メニューモジュールで画像を使用するのが特に好きです。モジュールは使いやすく、ドキュメントには、開始するためのステップバイステップの手順が記載されています。

標準のDiviスライダーを超えてスライダーを拡張することに興味がある場合は、AnythingSliderが必要なプラグインになる可能性があります。

ご意見をお聞かせください。 Anything Sliderを使用したことがありますか？ コメントであなたの経験について教えてください。

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