Elementor Pro スライドウィジェットの使い方

Elementor Proの『スライド』ウィジェットは、サイトの画面をスライドさせて各画面に異なる情報やリンクを入れられる機能優れた機能を持っています！

しかも画像をフェードイン、フェードアウトさせたりフォトショップのようなエフェクトをつけられるのでかっこいいスライドが簡単にできてしまいます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

また、スライドウィジェットの使い方をご覧になりたい方はこちらをご覧ください。

スライドウィジェットを挿入

『スライド』ウィジェットをドラッグ＆ドロップでカラムに挿入します。

上記は『スライド』ウィジェットを挿入した後の表示画面です。

デフォルトですでに３つの画像が挿入されており、数秒置きに自動で左にスライドします。

コンテンツタブ・スライド

『スライド』で各スライドの表示内容を編集します。

スライド1つにつき、エディターの項目は1つです。

デフォルトではすでに3つのスライドが挿入されていますが、新しくスライドを追加したい場合は『＋項目の追加』をクリックするといくらでもスライドを追加することができます。

編集したい項目名をクリックすると、上記のように編集タブが開きます。

項目名の右側にあるのは『複製』ボタン、その右の×ボタンで小目『削除』することができます。

背景・色

『背景』の『色』ではスライドの背景色をカラーピッカーより自由に変更することができます。

背景・画像

『背景』の『画像』ではスライドの背景に画像を入れることができます。

メディアライブラリから画像を選択、または画像をアップロードし画像を挿入します。

画像を挿入すると、前セクションの『色』は画像の方が優先されるため、反映されなくなります。

なお、画像を追加すると画像の下に上記のエディターが新たに追加されます。

サイズ・カバー

サイズの『カバー』を選択すると、スライドのフレーム内いっぱいに画像が表示されます。

※デフォルトはカバーに設定されています。

サイズ・含める

サイズの『含める』を選択すると、元の画像のサイズが全てスライドのフレームの中に含まれます。

画像とフレームの余白部分は『背景・色』で選択した色が反映します。

サイズ・自動

サイズの『自動』を選択するとスライドのフレーム内いっぱいに画像が表示されますが、『カバー』よりも画像は拡大されて表示されます。

Ken Burns Effect

『Ken Burns Effect』を『オン』にすると、画像が徐々に拡大（ズームイン）、または後退（ズームアウト）するようなアニメーションをつけることができます。

Ken Burns Effect・Zoom Direction

ズームインさせるかズームアウトさせるかの設定は、Ken Burns Effectをオンにすると新たにエディターに表示される『Zoon Direction』で選択することが可能です。

• In：ズームイン（デフォルト）
• Out：ズームアウト

背景オーバーレイ

『背景オーバーレイ』を『オン』にすると、背景に半透明のカラーレイヤーがつきます。

また、新たに『色』と『ボタンモード』という背景オーバーレイのエディターが追加されます。

背景オーバーレイ・色

背景オーバーレイの『色』ではオーバーレイの色をカラーピッカーより自由に変更することができます。

また、色の濃淡もカラーピッカーの白黒で表示されたバーのカーソルを左右にスライドさせることにより自由に変更が可能です。

背景オーバーレイ・ボタンモード

『ボタンモード』は以下のオプションより画像にさまざまなエフェクトを付けることができます。

• 普通
• Multiply
• Screen
• Overlay
• Darken
• Lighten
• Color Dodge
• Color Burn
• Hue
• Saturation
• Color
• Exclusion
• Luminosity

このボタンモードはフォトショップの『ブレンドモード』と同じです。
※なんならElementorの翻訳が間違っています！

なお、『背景オーバーレイ・色』を未設定にしていると、ボタンモードを選択しても反映しませんのでボタンモードを使う場合は色の選択も必ずしてください。

以下はボタンモードでエフェクトをつけた時のサンプル画像です。

ボタンモード：Overlay

コンテンツ

『コンテンツ』では主にスライド内のテキストを編集することができます。

上記画像で『タイトル』『説明』『Button Text』それぞれのエディターと反映箇所を示しています。

• タイトル：上部のテキスト
• 説明：中央のテキスト
• Button Text：ボタン内のテキスト

それぞれのプレイスホルダーにテキストを記入し、変更してください。

また、表示をさせたくない項目は未記入にすれば非表示になります。

リンク

『リンク』はボタンをクリックしたときにリダイレクトさせるページのリンクURLを記入します。

スタイル・カスタム

スタイルの『カスタム』は主にテキストの配置や書体、色などの編集を行うことができます。

デフォルトではカスタムは『いいえ』に設定されていますが、『はい』にすると上記画像のような追加エディターが表示されます。

Horizontal Position

『Horizontal Position』ではテキストの横列の配置を『左 / 中央 / 右』から選択することができます。

※デフォルトは『中央』に設定されています。

Vertical Position

『Vertical Position』はではテキストの縦列の配置を『上 / 中央 / 下』から選択することができます。

※デフォルトは『中央』に設定されています。

文字の配置

『文字の配置』はすべてのテキストの配置を以下から選択することができます。

• 左：左揃え
• 中央：中央揃え（デフォルト）
• 右：右揃え

コンテンツ色

『コンテンツ色』は『タイトル / 説明 / ボタン（テキスト・ボーダー）』の色をカラーピッカーより自由に選択することができます。

ここではタイトル / 説明 / ボタン（テキスト・ボーダー）のすべてが同じ色で統一されます。

もし、それらを別々の色にしたい場合は『スタイルタブ』のそれぞれのセクションの『文字色』で編集します。

テキストシャドウ

『テキストシャドウ』は文字に影をつけることができます。

色 / ぼかし / 水平 / 垂直の各エディターで影の具合を調整できます。

高さ

『高さ』ではスライドのフレームの高さを最小値100〜最大値1000の間で変更することができます。

上記は高さの値を『1000』（最大値）にしたときの表示画面です。

※デフォルトの値は『400』に設定されています。

コンテンツタブ・Slider Options

ナビゲーション

『ナビゲーション』は、背景上に表示されている左右の矢印と、下部のドットの表示を以下のリストから選択することができます。

• 矢印とドット：矢印とドット両方表示されます。（デフォルト）
• 矢印：矢印のみ表示されます。
• ドット：ドットのみ表示されます。
• なし：どちらも表示されません。

自動再生

『自動再生』はスライドを自動で再生するかどうかの選択です。

デフォルトですでに自動再生は『はい』に選択されています。

ナビゲーションをクリックしてスライドさせる使用にしたい場合は自動再生を『オフ』にしてください。

なお、自動再生をオンにすると以下のエディターが追加されます。

• ホバーで一時停止
• Pause on Interaction
• 自動再生速度

これらの説明につきましては【Elementor Pro 『Media Caroucel』ウィジェットの使い方】の『コンテンツタブ・追加オプション』のセクション内の各同セクションにて説明をしていますのでそちらを参考にしてください。

無限ループ

『無限ループ』はスライドをずと再生を繰り返すかどうかの設定です。

• はい：スライドがの再生が永遠に繰り返されます。（デフォルト）
• いいえ：スライドが一巡すると、最後のスライドの項目でストップします。

Trandition

『Trandition』（トランジション）は画像の切り替わる際のエフェクトを以下から選択します。

• スライド（デフォルト）
• フェード

上記はTranditionで『フェード』を選択したときの様子を映した動画です。

表示中の画像と次の画像が混ざり合わさるように画面が切り替わります。

Trandition Speed(ms)

『Trandition Speed』はトランジションにかかるスピードを自由に変更できます。

デフォルトは『500ms』(0.5秒) で設定されています。

Content Animation

『Content Animation』はテキストやボタンが表示される際につくアニメーションを以下から選択することができます。

• なし
• Down
• Up（デフォルト）
• 右
• 左
• ズーム

上記はcontent Animationで『右』を選択したときのサンプル動画です。

スタイルタブ・スライド

コンテンツの幅

『コンテンツ幅』はコンテンツ（タイトル / 説明 / ボタン）の幅をカーソルを左右にスライドし拡張・縮小することができます。

上記はコンテンツ幅の値を100%(最大値)にし、最大値がどこまでかを示したサンプル画像です。
※デフォルトは66％に設定されています。

設定したコンテンツ幅を文字数が超える場合は自動的に改行されます。

また、値は『％』または『px』より選択が可能です。

操作しても反映しないエディター

• パディング
• Horizontal Position
• Vertical Position
• 文字の配列
• テキストシャドウ

上記のスライドのエディターを操作したときに、『あれ？まったく反映されないけどなぜ？』と思った方もいると思います。

それは『コンテンツタブ』のスタイル内にある『カスタム』での設定が優先されているためです。

これらのエディターをスタイルタブで操作したいときはコンテンツタブのスタイル内のカスタムを『いいえ』にすればOKです。

パディングはさらに微妙な位置調整をしたいときに活用する

Horizontal PositionやVertical Position でコンテンツの配置はできますが、上下、左右、中央とシンプルな配置しかできません。

さらに細かい配置の指定をしたい場合は『パディング』を活用します。

しかし、次のセクションで説明していることに注意してください。

コンテンツを中央に配置している場合、パディングはいまいち反映しない

『Horizontal Position』と『Vertical Position』を『中央』に配置している場合、値をリンクさせた状態で『パディング』を操作しても特に変化しません。

また、値を解除して上下左右それぞれを操作しても、動くことは動きますがある一定の狭い範囲を超えると操作は反映しなくなりますのでおすすめはしません。

スタイルタブ・タイトル / 説明

• タイトルのスペースは『タイトルと説明間』のスペースの幅を縮小・拡大することができます。
• 説明のスペースは『説明とボタン間』のスペースの幅を縮小・拡大することができます。

こちらのセクションのくわしい編集の仕方につきましては、【Elementor Pro『フリップボックス』ウィジェットの使い方】の『スタイルタブ・Front』のセクション内にある『タイトル』および『説明』の説明を参考にしてください。

スタイルタブ・ボタン

『ボタン』の編集の仕方につきましては【Elementorのボタンウィジェットの使い方】の記事の『スタイルの編集』のセクションをご覧ください。

スタイルタブ・ナビゲーション

スタイルタブの『ナビゲーション』の編集の仕方につきましては、【Elementor Pro 『Media Caroucel』ウィジェットの使い方】の同セクション『スタイルタブ・ナビゲーション』の説明を参考にしてください。

なお、Media Caroucelの記事で『ドット』に当たる部分が『Pagination』（ページネーション）と表記されていますがどちらも同じものを指します。

---

『スライド』ウィジェットは背景にタイトル、説明、ボタンのみのシンプルな画像をスライドさせて表示できる大変シンプルなウィジェットです。

しかし画像にボタンモード（ブレンドモード）でかっこいいエフェクトが簡単につけられるのでサイトが一瞬で洗練された見た目になり、使いやすいです。

スライドウィジェットを使用すると閲覧者の目を惹きますし、少ないスペースでたくさんの情報を入れることができます。

スライダーウィジェットに少し似た機能をもつウィジェットもあります。

• 【Elementor Pro『フリップボックス』ウィジェットの使い方】
• 【Elementor Pro 『Media Caroucel』ウィジェットの使い方】
• 【Elementor Pro『Testimonial Carousel』ウィジェットの使い方】

ぜひ、サイト制作に活用してみてくださいね！

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。