ヒーローバナーのパララックス要素

パララックスセクションとGemPagesのヒーローバナーパララックス要素について

パララックス セクションは、背景が前景のコンテンツとは異なる速度または方向で移動し、スクロール時に奥行きと微妙な動きの錯覚を生み出すデザイン手法です。 

この効果は、視覚的な魅力を高めるだけでなく、ユーザー エクスペリエンスをより没入感と魅力にすることで、コンバージョン率最適化 (CRO) にもメリットをもたらします。

GemPages Editor v7では、利用可能な機能を使用して、パララックスセクションを簡単にデザインできます。 ヒーローバナーパララックス 要素。 

ページにヒーローバナーパララックスを追加するにはどうすればいいですか?

GemPages を使用してページに Hero Banner Parallax を追加し、独自の方法でカスタマイズする方法を見てみましょう。

• Shopify管理画面から、 GemPagesダッシュボード > ページ.
• 目的のページを探すか、 ゼロから始めます エディターを開きます。
• 左側のサイドバーで「ヒーローバナーパララックス」を検索し、要素をページ上の任意の位置にドラッグアンドドロップします。

設定タブを構成する

要素をクリックすると設定が開きます。 設定 タブでは、次の設定を行うことができます。

レイアウト

GemPagesでは、ヒーローバナーのパララックス用に12種類のレイアウトをご用意しています。パネルからご希望のレイアウトを選択するか、比率を手動で入力してください。

経歴

次のような要素の背景を設定します。

• 色： カラー見本から選択するか、カラーコードを入力するか、カラーピッカーを使用して背景色を設定します。

• イメージ： 新しい画像をアップロードしたり、ギャラリーを閲覧したりできます。

• 動画： YouTube動画を使用するか、 ビデオホスティング 要素にビデオ背景を設定します。

サイズ

要素のサイズをカスタマイズするか、 バナーソースとして ヒーローバナーの視差の幅と高さを自動的に調整します。

コンテンツ

このセクションでは、要素のコンテンツの幅、パディング、配置を調整します。

形状

下 形状 セクションでは、ヒーロー セクションに境界線を追加したり、角の半径を調整したり、影の効果を追加したりできます。

効果

ホバー効果を追加するには、 効果 ボタンをクリックしてパネルを展開します。そこからオーバーレイの不透明度を調整したり、色を変更して見やすくしたりできます。

リンク

このセクションをオンにして、ドロップダウンからユーザーがヒーローバナーをクリックした後のアクションを選択します。

• ページを開く
• にスクロールします
• ポップアップを開く
• メールを送ります
• 電話をかける

例えば、を選択した場合 ページを開く アクションでは、ページリンクを挿入するか、ページリストから選択することができます。次に、設定します。 新しいタブを開く の三脚と 次のリンク = お好みに応じて Yes/No。

SEO

ページのSEOを強化するには、画像の代替テキストとタイトルを追加する必要があります。 SEO のセクションから無料でダウンロードできます。

整列

要素に選択できる配置: 左揃え、中央揃え、右揃え。

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.