WordPress用MotoPress Sliderを使用してWebサイトに美しいスライドを追加する

MotoPressは、ページ作成コンテンツエディターのWordPressプラグインでWordPressコミュニティでよく知られています。昨年の発売以来、MotoPressはプラグインアドオンやWordPressテーマなどの製品をポートフォリオに追加しています。.


今年2月にMotoPress Sliderをリリースしました。 2番目の主要なWordPressプラグイン。プラグインは応答性が高いため、どのデバイスでも見栄えの良いスライドを作成できます。 MotoPress Sliderの機能を詳しく見てみましょう.

新しいMotoPressスライダーの構成

MotoPress Sliderの設定は非常に簡単です。新しいスライダーの作成を選択すると、3つの短い設定ページが表示されます。スライダーの設定、コントロール、および外観のタブがあります.

スライダー設定タブで、スライダーに名前を付け、スライダーのショートコードに使用するエイリアスを指定できます。スライダーを全幅にするか、グリッドのデフォルトサイズを定義できます。スライドショーの遅延は、この領域でも設定できます。必要に応じて、スライドショーを無効にすることができます.

新しいスライダー設定

9つのスライダーコントロールは、次のタブで有効または無効にできます。矢印、再生ボタン、カウンターなどのコントロールを構成できます.

新しいスライダーコントロール

外観タブでは、電話、タブレット、およびデスクトップディスプレイのデフォルトのピクセルサイズを定義できます。元の設定は、最大767ピクセルは電話のレイアウトを使用して表示され、768から991ピクセルの間はタブレットレイアウトを使用し、992ピクセルを超えるものはデスクトップディスプレイを使用します。.

カスタムCSSクラスをスライダーに適用できます。カスタムCSSコードを追加できるボックスもあります.

新しいスライダーの外観

別の設定ページがMotoPressスライダー管理メニューにあり、特定のユーザーグループのスライダーを無効にできます.

MotoPressスライダーのユーザーグループ設定

スライダーの設定についてあまり気にしないでください。ほとんどの場合、デフォルト値で十分です。スライダー作成領域の下部にボタンがあり、いつでも設定を変更できます。.

新しいMotoPressスライダーへのスライドの追加

次の領域では、スライダーにスライドを追加できます。この領域のスクリーンショットを以下に示します。一見、少し気の遠くなるかもしれませんが、すべてがどこにあるかを知っていれば、非常に簡単に理解できます。.

MotoPressスライド作成ページ

上部には7つのタブがあります。全般、色、画像、ビデオ、リンク、可視性、その他です。スライダーのプレビューがページの中心を占め、その下にテキスト、画像、ボタン、ビデオを追加するためのオプションがあります。各タイプのコンテンツはレイヤーと呼ばれ、これらのレイヤーはページの右側に表示されます.

ドラッグアンドドロップを使用して、レイヤーの順序を並べ替えることができます。レイヤーの配置は、Photoshopなどのグラフィカルアプリケーションと同じように機能し、最上位のレイヤーが優先されます。上記の例では、画像とテキストの2つのレイヤーがあります。画像の後にHTMLレイヤーを配置する必要がある場合、テキストは表示されません.

インターフェイスは本当にうまく機能します。メインのキャンバス領域でレイヤーを選択すると、そのレイヤーの設定が下に表示されます。キーボードの[削除]をクリックすると、スライドからレイヤーが削除されます。 2つの削除ボタンも使用できます。1つは選択したレイヤーを削除し、もう1つはすべてのレイヤーを削除します.

レイヤーはキャンバス領域でドラッグできます。そうすると、X座標とY座標が変化します。これは、複数のスライドのレイヤーをまったく同じ位置に配置できることを意味するので便利です(テキストなどのコンテンツの配置に非常に役立ちます)。 9ボックスグリッドを使用して、レイヤーを配置することもできます。左上、中央、右下など.

レイヤーのフェードインとフェードアウトには、数十のアニメーションを使用できます。これには、フェード、ズーム、フリップ、バウンスが含まれます。レイヤーは、特定の時点(ミリ秒単位)で表示または非表示にできます。これは、私の意見では、プラグインの最高の機能の1つです。レイヤーを表示したいときに正確にレイヤーを表示できるからです。.

事前定義されたスタイルも利用できますが、必要に応じて、特定のレイヤーのカスタムCSSクラスを定義できます.

アニメーションオプション

全般タブでは、スライドに名前を付け、スライドを公開するか下書きとして保存するかを選択できます。このようにして、スライドをライブにする前に、クリエイティブにしてスライドを保存できます。.

色タブでは、スライドの背景の色またはグラデーションを選択できます。私を悩ませたのは、色を選択するためのカラーホイールがなかったことです。 16進コードを手動で入力する必要があります。うまくいけば、これは彼らがプラグインの将来のバージョンで対処するものです。グラデーションオプションでは、2つの色とグラデーションを適用する角度を定義できます。.

MotoPressスライダーの色設定

単色やグラデーションの背景が必要ない場合は、画像を使用できます。 WordPressメディアライブラリから画像を選択するか、外部画像のURLを定義できます。サイズ、繰り返し、位置の属性はすべて定義可能.

MotoPressスライダー画像設定

MotoPress Sliderはビデオの背景もサポートしています。必要に応じて、レイヤーを使用してスライドにビデオを挿入できます。 YouTube、Vimeo、メディアライブラリ、または外部URLの動画を表示できます.

MotoPressスライダービデオ設定

スライドはリンク可能にすることができます。リンクID、クラス、rel、およびタイトルの属性を設定できます。訪問者が問題のスライドをクリックすると、定義したURLに移動します。リンクはスライドごとに構成されているため、一部のスライドを外部のWebサイトにリンクさせ、他のスライドは他のWebサイトにリンクさせないようにすることができます。.

MotoPressスライダーリンク設定

スライドはログインしているユーザーに制限することができます。これは、登録されたユーザーにのみスライドを表示するために使用できます。特定の期間にスライドをアクティブにすることもできます。これは、さまざまな用途に使用できます。たとえば、スライドを作成して、12月の第1週にコンテストを宣伝できます。.

MotoPressスライダーの表示設定

最後のタブでは、スライドのCSSクラス名とIDを定義できます。前述したように、カスタムCSSクラスを使用してスライド内の個々のレイヤーにスタイルを設定することもできます.

MotoPressスライダーのその他の設定

スライドを作成したら、ページの下部にある[保存]ボタンを使用してスライドを保存できます。閉じるボタンをクリックすると、スライドリスト、つまりその特定のスライダー用に作成したすべてのスライドが表示されます。.

既存のスライドを編集、複製、または削除できます。同様のスライドを作成する場合、スライドの複製は便利なオプションです。そうでない場合は、最初から新しいスライドを作成できます.

MotoPressスライダースライドリスト

最後に、スライダーに定義したショートコードエイリアスを使用して、完成したスライダーをWebサイトに挿入できます。.

MotoPressスライダー

見る人の目には美しさがあると言われていますが、MotoPress Sliderの機能にはとても感銘を受けました。カスタムの背景、テキスト、画像、ボタン、ビデオを挿入するのに時間がかかりません.

MotoPressスライダーの例

MotoPress Sliderのメイン情報ページにアクセスすると、プラグインを使用して実現できることの優れた例が表示されます。これは、レイヤーの読み込みとレイヤーの読み込みの遅延を使用して、数分でプロのスライダーを作成する方法を示しています。スライドの途中でレイヤーがどのように表示されるかによって、ビデオプレゼンテーションを見ているように見えます(ビデオが使用されていない場合でも)。これはスライドを本当に変えるシンプルな効果です.

MotoPressスライダーの例

価格

MotoPressは、スライダープラグインに公正な価格体系を採用しています。彼らの個人ライセンスは19ドルで販売され、1つのWebサイトに対して1年間のサポートとアップデートを提供しています。小売価格は49ドルで、ビジネスライセンスにより、Webサイトの制限が1つから5つに増えます。.

MotoPressスライダーの価格

開発者ライセンスは99ドルで販売されています。優先的な開発者サポートを提供し、無制限の数のWebサイトに1年間のサポートとアップデートを提供します。独自の製品にMotoPress Sliderをパッケージ化する場合は、ボリュームライセンスも利用できます。.

MotoPressスライダーは100% GPL. プラグインの自動更新とサポートを取得するにはライセンスが必要ですが、このライセンスキーが入力されていない場合でもプラグインは完全に使用可能です.

最終的な考え

すべてのWordPressスライダープラグインには学習曲線があり、MotoPressスライダーも例外ではありません。プラグインが何ができるかを理解し始めるまで、スライドをいじくり回す少なくとも20分または30分を費やす必要があります。.

プラグインを少し使った後、すべてがどのように機能するかを理解し始めたとき、私はいくつかの「あは」の瞬間を過ごしました。最初は、レイヤーを最大限に活用する方法を理解したときです。 2つ目は、アニメーションを使用してテキスト、ボタン、画像をフェードインおよびフェードアウトする方法を学んだときです。ただし、MotoPressスライダーの可能性を高く評価した機能は、レイヤーの表示を遅らせるオプションでした。これにより、ウェブサイトの訪問者にテキストをドリップフィードしたり、スライドの重要なポイントに画像やボタンをポップアップしたりするなど、多くのクールなプレゼンテーショントリックを使用できます。.

これらの簡単なテクニックを習得したら、MotoPress Sliderを使用してプロフェッショナルなスライドを作成できると確信しています。インスピレーションが必要な場合は、MotoPressに表示されるスライダーを確認することをお勧めします。スライダーは、単純なテキストレイヤーと画像レイヤーを使用して達成できることを強調しています。.

MotoPress Sliderのこの外観を楽しんでいただけたでしょうか。その場合は、WPExplorerニュースレターを購読して、最新の記事やWordPressのヒント、トリック、オファーの無料アップデートを受け取ることをお勧めします。.

読んでくれてありがとう.

ケビン

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map