fbpx

成功してるウェブ製作者さん達に、
どうやってお仕事してるのか、どうやってここまで来たのか聞いてきました!

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

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

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

スライドウィジェットサンプル動画

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

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

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

スライドウィジェットをカラムにドラッグ&ドロップ

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

スライドウィジェット挿入後の表示画面

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

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

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

コンテンツタブのエディター
スライドのエディターの説明

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

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

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

スライドの各項目のエディターの説明と使い方

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

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

背景・色

『背景』の『色』変更後の表示画面

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

背景・画像

『背景』の『画像』変更後の表示画面

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

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

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

画像挿入後に追加された画像のエディターの表示画面

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

サイズ・カバー

サイズで『カバー』を選択したときの表示サンプル

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

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

サイズ・含める

サイズで『含める』を選択したときの表示サンプル

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

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

サイズ・自動

サイズで『自動』を選択したときの表示サンプル

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

Ken Burns Effect

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

Ken Burns Effect・Zoom Direction

Zoom Directionのリスト一覧画面(ズームイン/ズームアウト)

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

  • In:ズームイン(デフォルト)
  • Out:ズームアウト

背景オーバーレイ

背景オーバーレイを『オン』にしたときの表示画面

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

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

背景オーバーレイ・色

背景オーバーレイの『色』を変更した後の表示画面

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

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

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

背景オーバーレイのボタンモード(ブレンドモード)のリスト

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

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

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

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

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

ボタンモード・Color Burnのサンプル画像
ボタンモード:Color Burn
ボタンモード・Overlaynのサンプル画像

ボタンモード:Overlay

コンテンツ

スライドの『コンテンツ』のエディターと編集箇所を記した画像

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

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

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

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

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

リンク

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

スタイル・カスタム

スライドの『スタイル』のエディター・カスタムを『はい』にしたときのエディター表示画面

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

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

Horizontal Position

Horizontal Positionを『左』に設定したときの」表示画面
Horizontal Position『左』選択時のサンプル画像

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

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

Vertical Position

Vertical Positionを『上』に設定したときの」表示画面
Vertical Position『上』選択時のサンプル画像

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

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

文字の配置

文字の配置で『左』を選択したときの表示画面
文字の配置で『左』を選択したときのサンプル画像

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

  • 左:左揃え
  • 中央:中央揃え(デフォルト)
  • 右:右揃え

コンテンツ色

コンテンツ色の説明と変更後のサンプル表示

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

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

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

テキストシャドウ

テキストシャドウをつけた後のサンプル表示

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

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

高さ

『高さ』の値を1000(最大値)にしたときの表示画面

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

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

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

コンテンツタブ・Slider Options

コンテンツタブ・Slider Optionsのエディター

ナビゲーション

ナビゲーションのリストと矢印とドットを記した画像

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

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

自動再生

『自動再生』を『はい』もしたときのエディター

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

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

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

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

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

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

無限ループ

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

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

Trandition

Tranditionのリスト(スライド・フェード)

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

  • スライド(デフォルト)
  • フェード
フェード

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

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

Trandition Speed(ms)

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

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

Content Animation

Content Animationのリスト一覧

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

  • なし
  • Down
  • Up(デフォルト)
  • ズーム

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

スタイルタブ・スライド

スタイルタブ・スライドのエディター

コンテンツの幅

コンテンツ幅の説明・100%の幅を記した画像

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

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

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

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

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

パディング/Horizontal Position/Vertical Position/ 文字の配置/テキストシャドウを操作しても反映しないときの説明
  • パディング
  • Horizontal Position
  • Vertical Position
  • 文字の配列
  • テキストシャドウ

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

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

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

コンテンツタブ・スライドの『スタイル』の『カスタム』を『いいえ』の画像

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

コンテンツをパディングを使用し微妙な位置に設定したときの表示画面

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

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

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

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

パディングが反映しない原因(Horizontal Position/Vertical Positionが中央)を記した画像

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

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

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

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

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

スタイルタブ・ボタン

スタイルタブ・ボタンのエディター

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

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

スタイルタブ・ナビゲーションのエディター

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

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


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

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

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

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

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

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

こんにちは、ナオミです!

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴18年です。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントを残す

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通