(↑Pinterestでシェアお願いします!)

Elementor ProのMedia Carouselウィジェットの使い方

執筆者 | 更新日 2020年02月10日 | Elementor Proの使い方 | コメント0件

Elementor Pro Media Carousel

Elementor ProのMedia Carouselは、画像もしくは動画をスライダー形式で表示できるウィジェットです。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

Media Carouselは、以下の3つのタイプがあります。

  1. Carousel
  2. Slideshow
  3. Coverflow

それぞれのタイプ毎に使い方をご紹介していきます。

この記事で学べる内容

コンテンツのスライド設定(Carouselタイプ)

Elementor Pro Media Carousel コンテンツ スライド

スキンの項目で「Carousel」タイプを選んだ場合は、次の項目を設定していきます。

ここで画像もしくは、動画を追加していきます。スライドを追加したい場合は「+ 項目を追加」ボタンをクリックします。スライドを削除する場合は「×」をクリックし、複製したい場合は書類アイコンをクリックします。スライドをクリックすると次の項目が表示されます。

タイプ

「Image-画像」か「Video-動画」を選択します。

画像

ここでは画像を選択します。「タイプ」で「動画」を選択した場合は、動画のサムネイル画像になります。

リンク

  • なし
  • メディアファイル
  • カスタムURL

(「タイプ」で「画像」を選択した場合)リンクを設定できます。「なし」、「メディアファイルのリンク」、「カスタムURL」の3つから選択します。「カスタムURL」を選択したら、下にリンクを追加します。リンク設定(歯車のアイコン)をクリックすると次の項目が表示されます。

新しいウィンドウを開く

チェックを入れると、リンクをクリックしたら、新しいウィンドウが開き、ページを表示してくれます。

Nofollowを追加

チェックを入れると、クローラーはリンクを追跡しなくなります。

Video Link

「タイプ」で「動画」を選択した場合は、ここにYouTubeまたはVimeoにアップロードされている動画のリンクを挿入します。

効果

カルーセルのトランジションを「Slide」、「Fade」、「Cube」から選択します。

Slides Per View

1つのウィジェットにいくつの画像/動画を表示するか設定します。最大、10個まで表示することができます。

スクロールするスライド

画像/動画を何個飛ばしでスクロールするかを設定します。例えば、「2」と設定したら、2つ飛ばしで画像/動画がスクロールされます。

高さ

カルーセルの高さを調節します。

カルーセルの幅を調節します。

コンテンツの追加オプション設定

Elementor Pro Media Carousel コンテンツ 追加オプション

ここからは、「コンテンツ」の「追加オプション」設定を確認していきます。

矢印

「SHOW」にするとカルーセルの両端に矢印が表示されます。

Pagination

  • なし
  • ドット
  • Fraction
  • Progress

ページの表示を設定します。「なし」、「ドット」、「Fraction」、「Progress」の4タイプあります。

トランジション所要時間

トランジションの長さを設定します。ミリ秒なので、1000で1秒になります。

自動再生

「はい」にすると、自動でスライドがスクロールされます。「いいえ」にすると、読者が手動でスクロールする必要が出てきます。

自動再生速度

「自動再生」で「はい」に設定したら、スクロールする時間をここで調節します。

無限ループ

「はい」にすると無限にカルーセルがスクロールされます。

Pause on Interaction

「はい」にすると、読者がカルーセル上にカーソルを置いている場合は、スクロールがストップします。

Overlay

  • なし
  • テキスト
  • アイコン

カーソルを置いた時に、画像または動画上に表示するテキストやアイコンを表示することができます。「なし」、「テキスト」、「アイコン」の3つあります。

キャプション

  • タイトル
  • キャプション
  • 説明

「Overlay」で「テキスト」を選択した場合は、ここでキャプションの種類を選択します。

アニメーション

テキストを表示する際のアニメーションをここで設定できます。

アイコン

「Overlay」で「アイコン」を選択した場合は、4種類の中から表示するアイコンの種類を選択します。

アニメーション

アイコンを表示する際のアニメーションをここで設定できます。

画像サイズ

画像の大きさを設定します。「カスタム」の場合は、下に「幅」と「高さ」の項目が表示されるので、ここに値を入力して、「適用」ボタンをクリックします。

Image Fit

それぞれの枠組みの中で、画像をどう表示されるかを設定します。「Cover」、「Contain」、「Auto」の3つあります。

コンテンツのスライド設定(Slideshowタイプ)

Elementor Pro Media Carousel コンテンツ Slideshow

「スキン」で「Slideshow」を選択した場合は、次の項目を設定していきます。「スライド」と「効果」、「高さ」の設定は、「Carousel」と同じなので、省略します。

ThumbnailsのSlides Per View

「Carousel」の設定と同じです。

ThumbnailsのRatio

サムネイル画像の比を「1:1」、「4:3」、「16:9」、「21:9」の4つから選べます。

ThumbnailsのCentered Slided

「はい」にするとサムネイルをウィジェットの中心に表示することができます。

Additional Options(Slideshowタイプ)

ここは「Carousel」と同じ設定になります。

コンテンツのスライド設定(Coverflowタイプ)

Elementor Pro Media Carousel コンテンツ Coverflow

「Coverflow」は、「Carousel」と同じ設定になります。

スタイルのスライド設定

Elementor Pro Media Carousel スタイル スライド

ここからは、「スタイル」の「スライド」設定を確認していきます。

スペースの間隔

スライド間のスペースを設定します。「Slideshow」タイプの場合は、トップに表示されている画像と下に表示されるサムネイルとの距離になります。

背景色

カルーセルの背景色を設定します。

ボーダーサイズ

各サムネイルのボーダーの太さを設定します。

ボーダー丸み

ボーダーの丸みを設定します。

ボーダー色

ボーダーの色を設定します。

パディング

サムネイルと外枠との間のスペースを調整します。

スタイルのナビゲーション設定

Elementor Pro Media Carousel スタイル ナビゲーション

ここからは、「スタイル」の「ナビゲーション」設定を確認していきましょう。

矢印のサイズ

矢印のサイズを設定します。

矢印の色

矢印の色を設定します。

Paginationの位置

これは、「Slideshow」以外の設定項目になりますが、ページ表示の位置をスライドの「内側」か「外側」のどちらかに設定します。

Paginationのサイズ

ページ表示の大きさを調整します。

Paginationの色

ページ表示の色を設定します。

再生アイコンの色

これは、動画を表示する場合のみ、設定します。再生アイコンの色を設定します。

再生アイコンのサイズ

再生アイコンの大きさを設定します。

再生アイコンの影

再生アイコンの影を設定します。

スタイルのOverlay設定(Slideshowタイプ以外)

Elementor Pro Media Carousel スタイル Overlay

「コンテンツ」>「追加オプション」>「Overlay」で「テキスト」を選択している場合に設定していきます。

背景色

背景色を設定します。

文字色

テキストカラーを設定します。

書体

書体を設定します。

Elementor Pro Media Carousel スタイル Overlay アイコンver

「コンテンツ」>「追加オプション」>「Overlay」で「アイコン」を選択している場合は、次の項目を設定していきます。

背景色

背景色を設定します。

文字色

アイコンの色を設定します。

アイコンサイズ

アイコンの大きさを設定します。

スタイルのLightbox設定

Elementor Pro Media Carousel スタイル

「Lightbox」の設定は、動画がポップアップで再生される場合の設定になります。カルーセル内で動画がクリックすると、ポップアップで表示されるようになります。

背景色を設定します。

UIの色

矢印や閉じるボタン(「×」ボタン)の通常時の色を選択します。

UIのホバー色

ホバー時(カーソルが置かれた時)の矢印や閉じるボタン(「×」ボタン)の色を設定します。

Video Width

動画の幅を調整します。

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?