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

コンテンツのスライドの使い方

この項目がメインの設定項目になります。スライドを追加したり、スライドのコンテンツを編集していきます。

スライドの設定

「スライド」には、スライドがリストアップされます。ドラッグ&ドロップでスライドの順番を入れ替えることができます。「+ 項目を追加」ボタンをクリックすると、新規のスライドを追加することができます。スライドを複製したい場合は、書類が2つ重なっているアイコンをクリックします。スライドを削除したい場合は、シンプルにばつボタンクリックするだけです。それぞれのスライドをクリックすると「背景」、「コンテンツ」、「スタイル」の3つの設定項目が表示されます。

背景の使い方

まずは、背景を設定していきましょう。背景は、単に色を変えることはもちろん、画像にすることもできます。

色

スライドの背景色を設定することができます。16進数のブランドカラーを持っているのであれば、それを入力して色を変更することもできます。

画像

色ではなく、画像を背景に設定する場合は、こちらでライブラリーから画像を選択します。画像を追加すると、「Size」と「Ken Burns Effect」、「Background Overlay」のオプションが表示されます。

サイズ

選択肢が「カバー」、「含める」、「自動」の3つあります。スライド全体をカバーするように表示させたい場合は、「カバー」を使います。「含む」は、画像をスライドの中に含めるという設定です。画像の大きさによっては、背景色が見えてしまう場合があります。「自動」は、画像の中心がズームされた状態で表示されます。

Ken Burns Effect

「はい」にすると、画像にエフェクトが追加されます。エフェクトの種類は、次の「Zoom Direction」で選択します。

Zoom Direction

画像が小さい状態から大きい状態へエフェクトをかけたい場合は「In」を、その逆のエフェクトをかけたい場合は「Out」を選択します。

背景オーバーレイ

「はい」を選ぶと、「色」と「ブレンドモード」が表示され、背景オーバーレイの詳細を設定します。

色

オーバーレイの色を設定できます。白文字を使いたくて、画像が明るい場合は、オーバーレイの色を黒系にすれば、文字が見えやすくなります。

ブレンドモード

オーバーレイのモードを設定できます。「普通」、「Multiply」、「Screen」、「Overlay」、「Darken」、「Lighten」「Color Dodge」、「Color Burn」、「Hue」、「Saturation」、「Color」、「Exclusion」、「Luminosity」の13種類から選べます。

コンテンツの設定

「コンテンツ」では、スライドのタイトルや本文の設定をしていきます。

タイトル・説明

スライドのタイトルとコンテンツ文章を入力できます。

Button Text

ボタンテキストの文言を設定できます。

リンク

ボタンにリンクを追加する場合は、ここに入力します。

新しいウィンドウで開く

「新しいウィンドウで開く」と「Nofollow を追加」はリンクの右隣にある歯車のアイコンをクリックすると表示されるようになります。「新しいウィンドウで開く」にチェックを入れると、ボタンがクリックされたら、新しいウィンドウが開かれ、設定したURL先のページが開きます。

Nofollowを追加

チェックを入れるとNofollowになり、クローラーに追跡されなくなります。

Apply Link On

リンクを追加したら表示される項目です。「Button Only」だとボタンにのみにリンクが追加され、「Whole Slide」にするとスライド全体にリンクが追加されます。

スタイルの使い方

「Style」では、タイトルや本文、ボタンの位置を設定したり、テキストの色を変更することができます。

カスタム

デフォルトだと「カスタム」が「いいえ」になっていますが、「はい」にすると、「Horizontal Position」と「Vertical Position」、「文字の配置」、「コンテンツ色」が表示され、タイトルやテキストの位置、スタイルが設定できるようになります。

Horizontal Position

コンテンツをまとめて「左」、「中央」、「右」に寄せることができます。

Vertical Position

コンテンツをまとめて「上」、「真ん中」、「下」に寄せることができます。

文字の配置

文字の位置を「左」、「中央」、「右」に寄せることができます。

コンテンツ色 Color

コンテンツの色を設定することができます。ここで色を選択すると、タイトル、ボタン、本文のテキストカラーが全てその色になります。

高さの設定

スライドの縦幅を設定できます。「PX」、「VH」、「EM」の3つのパターンがあるので、好きなもので縦幅を調節してみてください。

Slider Optionsの使い方

「Slider Options」では、スライドのトランジションやアニメーションなどを設定します。

ナビゲーション

スライドには、矢印やドットを表示できます。矢印はスライドの横側に、ドットはスライドの下側に表示されます。「矢印とドット」、「矢印」、「ドット」、「なし」という設定があります。

ホバーで一時停止

「はい」にすると、ホバー時（マウスがスライド上にある時）には、スライドの再生が止まります。

自動再生

「はい」にすると、設定したスピードで自動でスライドが再生されます。「いいえ」にすると、読者が手動でスライドを切り替える必要が出てきます。

自動再生速度

スライドの切り替え時間を設定します。単位がミリ秒になっているので、1000で1秒となります。

無限ループ

「はい」にすると、無限にスライドが再生され続けます。「いいえ」にすると、スライドが1周したら再生が止まります。

Direction

スライドの切り替え方向を「Left-左」もしくは「Right-右」に切り替えることができます。

トランジション

スライドのトランジションエフェクトを「スライド」か「フェード」に設定できます。

Transition Speed

スライドが切り替わる時間を設定します。「自動再生速度」と同じく、ミリ秒になっているので、1000で1秒となります。

Content Animation

コンテンツのアニメーション（エフェクト）を設定できます。「なし」と「Down-下に」、「Up-上に」、「右」、「左」、「ズーム」の6つから選べます。

スタイルのスライド設定

この項目では、コンテンツの幅や位置の設定をしていきます。

コンテンツの幅

スライド内にあるコンテンツ（タイトルと文章、ボタン）の幅を設定できます。

パディング

スライドのコンテンツとスライドの縁とのスペースを設定できます。

Horizontal Position

コンテンツをまとめて「左」、「中央」、「右」に寄せることができます。

Vertical Position

コンテンツをまとめて「上」、「中央」、「下」に寄せることができます。

文字の配置

テキストの位置を「左」、「中央」、「右」に寄せることができます。

スタイルのタイトル設定

ここでは、タイトルと説明文のスペースやタイトルの色・書式が設定できます。

スペース

タイトルとディスクリプション間のスペースを設定ができます。

文字色

タイトルの色が設定できます。

書体

タイトルの書体が設定できます。

スタイルの説明設定

ここでは、ディスクリプションのスペースや色を設定していきます。

スペース

「スペース」は、タイトル同様、ディスクリプションとボタンの間のスペースを設定できます。

文字色

ディスクリプションの色が設定できます。

書体

ディスクリプションの書体が変更できます。

スタイルのボタン設定

ここでは、スライドのボタンの大きさやボタンの背景色、ボタンのボーダーの太さや色などを設定していきます。

サイズ

ここでは、ボタンの大きさを変更できます。「微小」、「小」、「中」、「大」、「特大」の5種類から好きなものを選択しましょう。

文字色

ボタンテキストの色を設定できます。ボーダーの色もセットで変わるので、注意してください。テキストだけを変更したいのであれば、「普通」の「文字色」で色を設定しましょう。

書体

ボタンテキストの書体を設定できます。

ボーダー幅

ボタンのボーダー（縁）の太さを設定できます。

ボーダー丸み

ボタンのボーダー（縁）の丸みを設定できます。

普通とホバー

「普通」は通常時のボタンの設定で、「ホバー」マウスカーソルがボタンに置かれた時のボタンの状態を設定します。例えば、マウスカーソルが置かれた時も通常時と同じ挙動だと、クリックできるボタンなのかわかりませんよね。なので、クリックできるボタンであることを理解してもらえるように、「普通」と「ホバー」でボタンの状態を変更しておくことをお勧めします。タブを切り替えて、それぞれの設定ができるようになりますが、どちらも設定項目は同じなので、以下でまとめてご紹介します。

文字色

テキストの色を設定できます。先ほどの「Text Color」でボタンテキストの色を変更すると、ボーダーの色まで変わってしまうんですけど、ここで設定すればテキストカラーだけ変更することができます。

背景色

ボタンの背景色を設定できます。

ボーダー色

ボーダー（縁）の色を設定できます。

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

この項目では、矢印やページネーションの色や位置、大きさの設定をしていきます。

矢印

矢印の位置

矢印をスライドの中に入れるか、外に出すかの設定ができます。「内側」か「外側」かを選択します。

矢印のサイズ

矢印の大きさを設定できます。

矢印の色

矢印の色を設定できます。

ドット

ドットの位置

ドットの位置をスライドの内側か外側に設定できます。「内側」か「外側」を選択します。

ドットの大きさ

ドットの大きさを設定できます。

ドットの色

ドットの色を設定できます。