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

0

はじめ

最も人気のある 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があります。

3D効果をしたい場合 究極の3Dカルーセル WordPress プラグインというプラグインを考慮してみることができるようになります。

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プラグインを使用することができます。

コメントを残す

コメントを入力してください!
名前を入力してください