Elementorを使用してWordPressで垂直画像カルーセルを作成する方法

Muneeb WordPressチュートリアル Jan 21, 2022

スライドショーで写真や情報を前後に動かすボタンを押すことで視聴者が選択できる写真や情報のスライドショーは、画像カルーセルと呼ばれます。 それはあなたのウェブサイトの一般的な外観を明るくし、重要なサービスを促進するのを助けます。

魅力的な写真は、すぐに注目を集めることで、サイトへの新規訪問者を引き付ける可能性があります。 このチュートリアルでは、 Elementorを使用してWordPressで垂直方向の画像カルーセルを作成する方法を説明します。

Elementor垂直画像カルーセルを作成する方法

まず、 Elementor Vertical SmoothCarouselに適した画像を作成します。 すでにすべての写真が含まれている画像が必要になります。 CanvaのようなプログラムであるCrelloを使用して作成できますが、任意の画像編集ソフトウェアで十分です。

もちろん、これには動的ではないという欠点があり、いくつかの写真を変更する必要がある場合は不便になる可能性があります。 ただし、いくつかの利点があります。 これは、JS要件のないCSSのみのカルーセルを生成します。 アニメーションは非常にスムーズで、CPU使用率はほとんどありません。 一言で言えば、それは少し不便ですが、信じられないほど効果的です。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

次に、列にクラスとして垂直名を付けます。
[レイアウト]設定で、その列のウィジェットスペースを0に設定します。

Add an image element to that column and choose the picture you made.そのに画像要素を追加し、作成した画像を選択します。 Assign the class carousel vertical to the picture element .クラスカルーセル画像要素に垂直に割り当てます。

すべてを必要に応じて正確に作成し、複製します。 その列には、それぞれ同じパラメーターを持つ2つが必要です。 次に、以下に示すCSSコードの使用に進むことができます。 このコードはどこでも使用して変更を加えることができます。

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

十分に理解し、必要な場所で変更を加えることができるように、コードにはかなりの解説があります。 このコードを使用すると、 Elementor垂直カルーセルを正常に作成できます。

5つの最高の画像カルーセルプラグイン

1.Elementorのポストカルーセル

iThemelandCoによるPostCarousel For Elementorは、既製のカルーセルレイアウトを使用して、驚くほどクリエイティブなメディアカルーセルを作成できるElementorアドオンプラグインです。 プラグインはElementorと完全に統合され、19のビルド済みレイアウトを提供します。 これらのレイアウトは完全にカスタマイズ可能であり、Elementorのドラッグアンドドロップメカニズムを使用して、ニーズに応じて簡単にカスタマイズできます。

Elementorの製品カルーセル

Product Carousel For Elementorは、Eコマースストアがカルーセルで製品を紹介するために明示的に設計されたもう1つのElementorアドオンプラグインです。 プラグインは、自動再生、スクロールするスライド、ホバーで一時停止などの12 \ 002Bカルーセルコントロールを提供します。プラグインはすべてのタイプのデバイスで応答性が高く、必要な数のカルーセルを作成できます。 さらに、100%多言語のプラグインであるため、Webサイトが別の言語に翻訳されている場合でも機能します。

3.Elementorの高速カルーセル

Fast Carousel For Elementorは、1分でカルーセルを構築するのに十分な速さを誇るElementorアドオンプラグインです。 印象的であると同時に、さまざまなタイプのギャラリーと10を超えるユニークなスタイルも提供しています。 プラグインには、各カルーセルでカスタムカラーオプションを提供するほかに、5つ以上のカルーセルコントロールが装備されています。 迅速な解決策として、これは画像カルーセルの最善の策かもしれません。

このチュートリアルがWebサイトの強化に役立つことを願っています。 FacebookTwitterに参加して、WordPressの旅を楽しく簡単にするチュートリアルを引き続き入手してください。

Divi WordPress Theme