Elementor ProのOff Canvasウィジェットの使い方

新しくElementor Proのバージョン3.22で追加されるウィジェット『Off Canvas』の使い方について説明します。

Off Canvasウィジェットはどのような機能かというと、デフォルトでは表示されていませんが画面の外にコンテナが存在していてクリック、タップなどの動作をきっかけにそのコンテナを表示させることができる機能です。

そしてこのウィジェットと類似している機能として、Elementor Proの『ポップアップ』という機能があります。
>>【Elemento Pro『ポップアップ』の作り方と基本設定】

『Off Canvas』と『ポップアップ』は何が違うのかと言うと、『Off Canvas』はページ上に存在していて、『ポップアップ』は呼び出されるまで存在しないという点です。

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

Off Canvasウィジェットを使うためには

『Elementor』の『設定』から『機能』を選択します。

『Nested Elements』の『有効（ON）』を選択します。

『Improved CSS Loading』が『有効（ON）』になっていると動作がうまくいかない事がありますので、ここは『停止中（OFF）』を選択してください。

Off Canvasウィジェットの挿入

今回はスマホ特化型サイト、スマポンシブなサイトを例にして、メニューを『Off Canvas』で作っていきます。
>>【Elementorでスマホ特化型サイトを作る方法 – スマポンシブ】

Elementor操作パネルの『プロ』の中に『Off-Canvas』ウィジェットが表示されています。
このウィジェットを編集画面内にドラッグします。

Off Canvasウィジェットの配置位置

『Off-Canvas』ウィジェットはなるべく外側に配置します。
メインコンテナのすぐ下などがよいでしょう。

左側に『Off-Canvas』編集パネル、その横に『Off-Canvas』ウィジェット、それ以外の部分はオーバーレイで隠れた状態になります。

Off-Canvasウィジェットが表示された状態から抜けるには

『構造』パネル内で『Off-Canvas』以外のウィジェットを選択しても、Off-Canvaウィジェットは表示されたままです。
この状態をどうやったら抜けられるのかというと、

Off-Canvas編集パネルの『Editing Mode』を『オフ』にします。

するとオーバーレイの状態から抜け出して、他のウィジェットの編集も可能になります。

Off Canvasウィジェットの編集

Editing Modeについて

『Editing Mode』は『Off-Canvas』ウィジェットを編集できる・できないのモードを切替えます。

『Off-Canvas』ウィジェットを編集するには『Editing Mode』は『オン』にしておきましょう。
逆にOff Canvas編集画面から抜けるときは、先ほどの説明のように『Editing Mode』は『オフ』にします。

Off Canvasへのウィジェット要素の追加

『Off-Canvas』ウィジェットへは、コンテナと同じようにウィジェット要素をドラッグで設置可能です。

Off Canvasのサイズ調整

幅（横幅）の調整

『幅』ではOff Canvasウィジェットの横幅を設定することができます。

幅のつまみを横にスライドしたり、数値を直接入力して設定することができます。

高さ（縦幅）の調整

『高さ』では、Off Canvasウィジェットの縦幅を設定することができます。
デフォルトでは『100vh』に設定されています。

『高さ』の『Custom Height』のつまみを横にスライドしたり、数値を直接入力して縦幅を設定します。

Off Canvasの配置位置設定

Horizontal Position

『Horizontal Position』は、Off Canvasウィジェットの水平方向の表示位置を設定することができます。

Off Canvasウィジェットはデフォルトでは画面の左端に表示されます。

『Horizontal Position』で『中央』を選択すると、Off Canvasウィジェットは画面の中央に表示されます。

『Horizontal position』の『終了』を選択するとOff Canvasウィジェットは画面右端に表示されます。

Vertical Position

『Vertical Position』は『Off Canvasウィジェット』の高さがデフォルトの100vhの場合は設定しても変化がありませんので、高さを67vhに設定した場合で解説します。

『Vertical Position』は、Off Canvasウィジェットの垂直方向の表示位置を設定することができます。

Off Canvasウィジェットはデフォルトでは画面の上寄せで表示されます。

『Vertical Position』の『中央』を選択すると、Off Canvasウィジェットは垂直報告中央に表示されます。

『Vertical Position』の『終了』を選択すると、Off Canvasウィジェットは垂直方向下寄せで表示されます。

『Horizontal Position』と『Vertical Position』の組み合わせで、POPUPと同様、Off Canvasウィジェットの表示位置を自在に設定することができます。

Off Canvasを開く

今回はスマホ特化型サイト、スマポンシブなサイトのメニューを『Off Canvas』で作っていますので、Off Canvasを開く設定をしていきましょう。

今回は『ハンバーガーメニュー』の『アイコン』を例にしますが、動的タグがあるウィジェットならOff Canvasを呼び出す設定をすることができます。

アイコンウィジェットのリンク設定の『動的タグ』をクリックし、表示されるメニューの中から『Off-Canvas』を選択します。

『Off-Canvas』と表示されている部分をクリックします。

『設定』メニューが表示されるので、その中の『Action』から『Open Off-Canvas』を選択します。
（デフォルトで『Open Off-Canvas』になっています。）

『Choose Off-Canvas widget』のメニューから先ほど作成した『Off-Canvas1』を選択します。
（ページ内にOff-Canvasを複数作成すると、Off-Canvas2、Off-Canvas3、と選択肢が増えていきます。）

これで『Off Canvas』を呼び出す設定ができました。

Off Canvasを閉じる

『Off Canvas』を閉じる設定をしていきます。
今回は表示された『Off Canvas』を閉じるボタンとして、Off Canvas内に『アイコン』を挿入します。

挿入したアイコンのリンクの『動的タグ』をクリック、表示されたメニュー内の『Off-Canvas』を選択します。

『Off-Canvas』と表示されている部分をクリックします。

設定の『Action』で『Close Off-Canvas』を選択します。

『Choose Off-Canvas widget』で『Off-Canvas1』を選択します。

『Off Canvas』を『呼び出す』・『閉じる』の設定が終わったので、『公開』をクリックします。

Off Canvasの動きを確認する

ブラウザでOff Canvasの開閉の動きを確認します。
ハンバーガーメニューをクリックすると『Off Canvas』が呼び出され、閉じるボタンをクリックすると『Off Canvas』を閉じます。

Off Canvas開閉のアニメーション

Off Canvasの開閉には様々なアニメーション効果を設定することができます。

Entrance（開く）

Entranceでは、Off Canvasを開くときのアニメーションを設定することができます。
今回は画面の右側からフェードインするアニメーションを入れたいので、『Fade in Right』を選択します。

Exit（閉じる）

Exitでは、Off Canvasを閉じるときのアニメーションを設定することができます。
今回は画面の右側にフェードアウトするアニメーションを入れたいので、『Fade Out Right』を選択します。

アニメーションの継続時間

Off Canvasの開閉アニメーションの継続時間を設定します。
デフォルトでは『1.5s』に設定されていますが、スライダーを調整して好きな時間に設定することができます。

Off Canvasの開閉アニメーションを確認する

ブラウザでOff Canvasの開閉アニメーションを確認します。
ハンバーガーメニューをクリックすると右側から『Off Canvas』がフェードインし、閉じるボタンをクリックすると右側へ『Off Canvas』がフェードアウトします。

Interactions

Interactionsでは、Off Canvasを閉じる設定やページスクロールの設定をすることができます。

Prevent Closing on Overlay

デフォルトではオーバーレイ部分をクリックするとOff Canvasは閉じるようになっています。
『Prevent Closing on Overlay』を『はい』にすると、オーバーレイ部分をクリックしても『Off Canvas』を閉じません。

Prevent Closing on ESC Overlay

デフォルトではESCキーを押すとOff Canvasは閉じるようになっています。
『Prevent Closing on ESC Overlay』を『はい』にすると、ESCキーを押しても『Off Canvas』は閉じません。

Disable Page Scrolling

デフォルトではOff Canvasを表示した時に、ページをスクロールできるようになっています。
『Disable Page Scrolling』を『はい』にすると、Off Canvasが表示されている時はページがスクロールできなくなります。

HTMLタグ

HTMLタグも選択することができます。

Off-Canvasの背景

Off Canvasの背景や枠線、Box Shadowの設定をすることができます。
Off-Canvasウィジェットの『スタイル』タブをクリックすると『背景』設定が表示されます。
背景色を変更したり、他のウィジェットと同様に枠線やBox Shadowを設定することができます。

オーバーレイの設定

Off Canvasのオーバーレイの設定をすることができます。

オーバーレイの表示・非表示

デフォルトではオーバーレイは『表示』に設定されています。

『Overlay』を『非表示』にすると、オーバーレイは表示されなくなります。

オーバーレイの背景設定

オーバーレイの背景色や透過度もお好みに設定することができます。

オーバーレイを画像に設定することもできます。
コンテナの背景設定と同様に、位置や添付、繰り返し、Display Sizeも設定することができます。

---

ポップアップとOff Canvasの違い

今回作成したメニューですが、実際にはPOPUPで作成することも可能です。

では『Off Canvas』でしかできないこととは。
Off Canvasは『そのページに存在している』ことから、画面上でリストのフィルターをする時に『Off Canvas』上にリストがあった場合はフィルターできますが、『POPUP』上にリストがあってもPOPUPを表示後でないとフィルターすることができません。

逆に『POPUP』にしかできないこととは。
Off Canvasは『動的タグ』から呼び出すしか出現させる方法がありませんが、POPUPは動的タグ以外にもPOPUP側から出現させる条件を決めることができます。

そのページ内だけで出現させたい場合は、Off Canvasで作成していればPOPUP編集画面に遷移することなく、ページ内で編集することができるので便利です。

是非新機能『Off Canvas』を使ってみてください！