Visual Composerでパララックスエフェクトを簡単に作る方法

folder_openWORDPRESSホームページ制作

美しいパララックスエフェクトがかんたんに

さて今回はビジュアルコンポーザーでパララックスエフェクトをかんたんに実装する方法です。

固定ページの編集画面で「BackendEditor」を選択します。

スクリーンショット 2016-05-12 8.29.47

Add ElementからRowを追加します。

スクリーンショット 2016-05-12 8.30.05

次からがパララックスの為の設定になります。

スクリーンショット 2016-05-12 8.36.42

Row stretch ・・・Rowの横幅を画面一杯に広げるための設定です。
Stretch row and contentを選びます。

Full Height Row・・チェックをいれるとRowの高さを画面一杯にします。

スクリーンショット 2016-05-12 8.37.09

Parallax  ・・・通常のパララックス効果ならSimpleを選択します。

image ・・・パララックスの背景に使いたい画像を選択します。
レスポンシブ対応の高解像度の画像を用意します。

 

Rowに関する設定はこれだけです。

後はRowの中にテキストや写真の要素を入れることでパララックス効果ができちゃいます。かんたんですね。

スクリーンショット 2016-05-12 8.39.50

Rowを複製して画像だけ入れ替えると簡単に以下のようなパララックスページの出来上がりです。

サンプルページ 

サンプルページでは他にもいくつか高度なテクニックを組みあわせていますのでそのうちご紹介しますね。

前の投稿
Visual Composer ROWとColumnの構造説明
次の投稿
WEBコピーライティングの基本 その1

関連記事

メニュー