画像の上にボタンを配置するにはどうすればいいですか?

画像の上にボタンを配置する理由

画像の上にボタンを配置することで、デザインフローを中断することなく、明確なCTA（Call-To-Action：行動喚起）を作成できます。ページの魅力を高め、訪問者をすぐに次のステップへと誘導します。

一般的な使用例は次のとおりです。

• を特徴とする 「今すぐ購入」 製品またはコレクションのバナー上のボタン。
• 注目を集める 季節ごとのプロモーションや割引.
• 直接リンクする 特定のランディングページまたはハイライトセクション.
• aを作成する よりクリーンなレイアウト 画像とボタンを分離する代わりに。

ヒント： 特にモバイル デバイスで目立つように、背景画像と対照的なボタンの色を選択します。

GemPages でこれを実現するには、以下に説明する 2 つの簡単な方法に従います。

GemPages で画像の上にボタンを配置するにはどうすればいいですか?

方法1：ヒーローバナー要素を使用する

通常、ヒーローバナー要素を使用して画像をアップロードします。その後、ヒーローバナーにボタンなどの他の要素を配置できるようになります。以下の手順に従ってください。

ステップ1： に行きます GemPages ビルダー アプリ> ページ次に、画像の上にボタンを配置するページをクリックして、エディターを開きます。

ステップ2： 左側のサイドバーで「ヒーローバナー」。希望するレイアウトをページ上の任意の位置にドラッグ アンド ドロップします。

ステップ3： テキスト要素を削除し、ボタン要素のみを残します。

ステップ4： 以下を行うには、 ヒーローバナー 要素をクリックして設定を表示します。下にスクロールして 経歴 セクションを選択し、 画像 フィールド。

ステップ5： 背景画像として使用する画像をアップロードするか、ライブラリから選択します。

ステップ6： を調整する 背景画像 あなたが好むように。

ステップ7： 以下を行うには、 ボタン 要素をクリックして設定を開きます。ここから、ボタンを以下のようにカスタマイズできます。

• 色、形、サイズを変更します。
• アイコンまたはホバー効果を追加します。
• ボタンを新しいページまたはページ上の対象セクションにリンクします。

参照する この記事 詳細な手順については。

ステップ8： 変更を保存して パブリッシュ.

方法2: ボタン位置の相対オプションを使用する

ページデザインでボタンが画像の上に正しく配置されるようにするには、 ボタンの位置 〜へ 相対的。

次の手順に従います。

• ボタン要素をクリックして設定を開き、 高機能 タブには何も表示されないことに注意してください。
• 下にスクロールして 役職 のセクションから無料でダウンロードできます。
• まず 相対 ドロップダウンメニューからのオプション。

この設定の詳細については、 この記事.