WordPress Avada(Avada)でImage Carousel使用する

最も人気のある WordPress テーマの一つである Avada(Avada)は長い間販売1位の座を守っているベストセラー WordPress テーマです。 Avadaが安定した人気を集めている理由の一つは、初心者でも簡単に使用できるように、さまざまなオプションと機能を提供するポイントでいます。

Avadaは、独自のページビルダーであるFusion Builder(フュージョンビルダー)を使用します。 (参考までに、多くの有料テーマで Visual Composer(Visual Composer)を基本搭載しています。)

Avada テーマでImage Carousel(画像回転スライド)を使用する

次の図は、Fusion Builderで追加できる要素(Element)を示しています。

Avada フュージョンビルダー要素

フュージョンビルダーでは、次のような要素を追加することができます:ブログ記事リスト、ボタン、チェックリスト、コードブロック、コンテンツボックス、カウントダウン、カウンターボックス、カウンターサークル、エベント、フリップボックス、Font Awesome、フュージョンスライダーは、Googleマップ、イメージキャラ設定、画像フレーム、 LayerSlider、メニューアンカー、モーダル(Modal)、Person、ポストスライダー、価格表(価格表)、進行状況バー、最近の記事、最近Works、 Slider Revolution、Section Separator(セクション区切り)、Separator、Sharing Box(共有ボックス)、スライダー、ソーシャルリンク、Soundcloud、表、タブ、タグラインボックス、Testimonial(使用期限)、テキストブロック、タイトル、トグル、ユーザのログイン、非メオ動画、ウィジェットエリア、 WooCommerce キャラ設定(Woo Carousel)、Woo Featured、 WooCommerce ショートコード(Woo Shortcodes)、YouTubeの動画。

画像回転スライド(Image Carousel)を追加するには、上の図の「イメージカルーセル「」をクリックしてドラッグし、目的の場所にドロップします。

たとえば、Fusion Builderの Column Options(カラムオプション)から Full Width Container(全体の幅コンテナ)を配置した後、その中に イメージカルーセルを置くことができます。

Avada - 画像の回転スライド

上記のようにImage Carouselを挿入した場合、編集アイコンをクリックして、各種オプションを設定して、画像を追加することができます。 編集アイコン(鉛筆のアイコン)をクリックすると、Image Carouselを設定できる画面が表示されます。

Avada 画像の回転、スライド編集

(1)画像のサイズを固定(Fixed)にするか、自動(Auto)に調整されるようにするかどうかを設定します。

(2)Hover Type:マウスを画像の上に置くときに適用する効果を指定します。

(3)Autoplay:画像の回転、スライドを自動的にプレイされるようにするかを設定します。

(4)列の最大数:表示する最大列数

(5)カラムの間隔

Avada 画像の回転、スライド編集

(6)スクロールするアイテム数

(7)ナビゲーション表示するかどうか

(8)マウスのスクロール

(9)枠

(10)画像ライトボックス設定するかどうか

Avada 画像の回転、スライド編集

(11)CSS classを追加することができます。

(12)CSS IDを追加することができます。

Add New Imageをクリックして画像を追加できます。 上記のようにImage Carousel Item 5+式で表示されます。 」Image Carousel Item 1「」をクリックすると、下図のように画像をアップロードできる画面が表示されます。

Avada Image Carouselアップロード

画像ウェブサイトのリンクを追加したり、 アップロードをクリックして、メディアライブラリの画像を指定するか、アップロードすることができます。 Image Alt Text(イディッシュか代替テキスト)にaltテキストを追加することができます。

テストのために、同じ画像を複数追加しました。 画像のサイズが同じになるよう同一の画像を続けて追加してPicture SizeをAutoに指定しました。 Autoに設定すると、画像のサイズが異なる場合、他のサイズで表示されます。 Fixedに指定すると、元の画像サイズに関係なく、すべての画像が同じサイズで表示されます。

in-action

その他の方法 - Carouselプラグイン

基本的に提供する画像の回転、スライドが気に入らない場合、外部のプラグインを使用することができます。 このような機能をプラグインとして Super Carousel, Responsive Posts Carousel WordPress Plugin (反応型ポストカルーセル WordPress プラグイン)があります。

3D効果をしたい場合はUltimate 3D Carousel WordPress Pluginというプラグインを考えてみることができそうです。 (※このプラグインは Codecanyonマーケットで除去され、提供されていません。)

3d-carousel
究極の3Dカルーセル WordPress Plugin銀の様々な3D効果の回転スライドを提供する WordPress プラグインです。

そして多目的コンテンツスライダー/回転スライドを提供する オール・アラウンドというプラグインも大丈夫なようです。 コンテンツスライダーとCarousel機能を同時に提供することです。 (※このプラグインは、長い間更新されていない。)

All Around  -  WordPress Content Slider / Carousel  - コンテンツスライダーと回転スライドを提供する WordPress プラグイン
All Around - WordPress Content Slider / Carousel - コンテンツスライダーと回転スライドを提供する WordPress プラグイン

最後に、

Avadaを使用している場合、Fusion BuilderでImage Carousel要素を使用して、基本的な画像の回転、スライドを作成することができます。 より洗練されたCarouselをしたい場合は上に紹介したCarouselプラグインを使用することができます。

メモ:


2のコメント

  1. image carousel はカテゴリやポストの recent イメージを carousel してくれませんね… あまりにも残念… だからといって recent post 機能に carousel やアライメント機能もあまりにも虚接… WooCommerceでのみサポートされているcategory image carousel ...

    1. Avadaは多目的テーマに多くの機能が含まれています。
      ただし、洗練された機能が必要な場合には、別の専用のプラグインを使用するか、カスタムして使用することを検討してください。

      Elementorを使用している場合は、エレメントが提供する画像カルーセル機能を使用できます。

      https://brunch.co.kr/@wordcreater/72

      WooCommerce用carouselプラグインが必要な場合には、YITHプラグイン(無料/有料)をインストールしてテストすることができます。

      https://www.thewordcracker.com/basic/%EC%9A%B0%EC%BB%A4%EB%A8%B8%EC%8A%A4-%EC%83%81%ED%92%88-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%EC%BA%90%EB%9F%AC%EC%85%80-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-yith-woocommerce-product-slider-carousel/

コメントを残す

*メールアドレスは公開されません。