マウスホイールの移動に応じて画面がスナップするElementor Scroll Snap機能（β版）

WordPressでランディングページを作成する際に、セクションをブラウザにスナップさせるためのElementorウィジェットです。現在Elementorからはベータ機能として提供されています。

Scroll Snap機能をオンにする

この機能を使用するためにはElementor>Settings>ExperimentsからScroll Snapをオンにします。

ページ内でScroll Snapを使用する

ページ内でScroll Snapを使用するには、Post Setting >Advanced>Scroll SnapからScroll SnapをONに変更します。Snap Position はスナップする位置をTop、Center、Bottomのいずれかを選択できます。またPadding設定ができるので、常にヘッダが表示されているようなページレイアウトの場合、ヘッダ分の高さだけPadddingを行うことが可能です。

まとめ

ランディングページなどを制作する場合によく使いたい機能ですが、これまではJavascriptを追加したり、プラグインを導入したりする必要がありました。しかしElementor上に実装されたことで、Elementorの柔軟性を活かしたままScroll Snapが使えるようになったことは大きいと思います。

現時点ではまだベータ版ですがおそらくこの機能は今後多用すると思います。