PageBuilderでパララックス効果

検索したけど出てこなかったので、備忘録。

PageBuilderでパララックス(視差効果)を使いたい場合の説明。

2ステップで簡単!

準備

まずレイアウト。レイアウトは全幅が無難。01

パララックス効果を付けるROWは縦を長めに取ったほうが視覚効果的にわかりやすいので、最低限400PXはいるかなー
スマホのこと考えると60vhとか使えるといいです。

PageBuilderで作る場合、ROWにパララックスを付けるので、その中身に高さを書いてやります。

例えばこのROWは2カラムでSiteOrijinEditerなので、SiteOrijinEditerのLayOutにPadding設定。
上下5remとかにします。

Rowにパララックス設定

このページの1.準備にパララックスの設定をします。

準備で上下パディングは付けているので、rowをeditしてやります。
02

右側メニューのDesignでBackground Image(背景)を指定、Background Image Display を Parallax に。
03

完了

以上で完了

やってみると簡単です。

書いてて思ったけどrowのLayoutで縦幅決めてもいいんちゃうと。

まぁまぁ。

この投稿へのコメント

コメントはありません。

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL