スクロール時にサイトのロゴが固定されたようなサイトを見たことはありませんか。
パララックスを取り入れると一気にデザイン性が高まるのですが、これを実現できるのが「アイキャッチ」。
このプラグインを使えば、ユーザーにとって居心地の良いサイトを簡単に作成することができるのです。
スクロール時に画像を固定するパララックス効果の実現
サイトのトップページは、できるだけインパクトの残るデザインにしたいですよね。
Storefront のテーマを使用している場合、このプラグインを使用することでスクロール時に画像を固定するパララックスデザインを簡単に導入することができます。
ショートコードでどこにでも表示
アイキャッチでは、ショートコードを利用することで任意の場所でパララックスデザインを導入することができます。
プログラミングの知識がなくても、ユーザーが見ていて楽しいデザイン性の高いWebサイトに仕上げることが可能です。
ショートコード一つで簡単にパララックスデザインが実現できる「アイキャッチ」。
パララックスデザインを導入し、ぜひカッコいいWebサイトを作成してみてはいかがでしょうか。
アイキャッチの使い方
パララックスヒーローの設定
ここでは、ページトップのアイキャッチにあたるパララックスヒーローの設定を行っていきます。
- 左メニューより [外観] > [カスタマイズ] をクリック
- メニュー内の [背景] を選択
- 背景に挿入したい画像をアップロード
- プリセットの中から [カスタマイズ] を選択
[ページと一緒にスクロール] のチェックを外すと、パララックスデザインになります。またここでは、画像の位置の設定・画像サイズが小さいときに使える背景の繰り返し設定なども行うことができます。
ショートコードによる設定
次に、ショートコードによる設定を行っていきます。
[parallax_hero] というショートコードの後ろに属性を追加していくことで、どのページにでもパララックスデザインを設定することができます。ショートコードに使用できるタグは以下のとおりです。
‘heading_text’
‘heading_text_color’
‘description_text’
‘description_text_color’
‘background_img’
‘background_color’
‘background_size’
‘button_text’
‘button_url’
‘alignment’
‘layout’
‘parallax’
‘parallax_scroll’
‘overlay_color’
‘overlay_opacity’
‘full_height’
‘style’
‘overlay_style’ |
ヘッダーテキスト
ヘッダーテキストの色
サイト概要
サイト概要の色
背景画像
背景色
背景のサイズ
ボタンテキスト
ボタンのURL
右・左・中央寄せ
レイアウト
パララックス
パララックススクロール
オーバーレイカラー
オーバーレイの透明度
最大の高さ
スタイル
オーバーレイスタイル |
実際の使い方は以下のとおりです。
[parallax_hero heading_text=”サンプルヘッダーテキスト” description_text=”サンプルサイト概要” description_text_color=”white”alignment=”left”]
レビュー
レビューはまだありません。