テキストまたは画像をクリック可能にする

テキストや画像をクリック可能にする理由

テキストや画像をクリック可能にしたりインタラクティブにしたりすると、ユーザー エクスペリエンスとエンゲージメントが向上します。 

これらの要素をクリック可能にすることで、ポップアップを開いたり、ページの特定のセクションに移動したりするなど、特定のアクションを実行するようにユーザーを誘導できます。 

例：

• 製品画像をクリックしてください: 詳細な製品情報を含むポップアップを開きます。

• テキストを ボタン: ユーザーが FAQ や製品の機能などの特定のセクションまでスクロールできるようにします。

GemPages でテキストまたは画像をクリック可能にする方法は?

このガイドでは、「ご質問がありましたら、お気軽にお問い合わせください” クリックすると、ユーザーは FAQセクション ページの。

ステップ1: テキストまたは画像要素を追加する

テキストを使用する場合は、ユーザーがインタラクティブであることがわかるように、テキストにスタイルを設定し、目立つようにします。

さらなる テキストブロック要素 カスタマイズについては、 この記事.

ステップ2: インタラクションを使ってアクションをトリガーする

左側のサイドバーで、 高機能 タブをクリックして下にスクロールします 相互作用 のセクションから無料でダウンロードできます。

詳しくはこちら 創造する 設定パネルを開きます。

「1. まずは…”: アクションをトリガーする要素を定義します。 

まず テキストブロック ターゲット要素として。

日時: アクションをトリガーするインタラクションのタイプを選択します。

• 要素をクリック: ユーザーがテキストまたは画像をクリックしたときにインタラクションが発生します。
• 要素にマウスを合わせる: オプション。ユーザーが要素の上にマウスを移動したときにアクションをトリガーします。

「2. 次に、次のことを行います。「」: インタラクションによってトリガーされるアクションを指定します。

詳しくはこちら ページ上のターゲットを選択。 下にスクロールして FAQセクション とをクリックしてください 見出し このセクションの要素。

ヒット ターゲットとして設定 確認します。

前日比: ユーザーが要素を操作したときにトリガーされるアクション (クリックやホバーなど)。

• にスクロールします: ページビューを指定したセクションに移動します。
• 表示/非表示: 非表示の要素を表示するか、その逆を行います。
• 背景と形状: 要素の背景色、不透明度、または形状を動的に変更します。

"を選択スクロールして スクロール効果をトリガーするアクションとして。

次に調整します スクロールトップ距離: 対象セクションまでスクロールしたときにページが停止する位置を制御する値をピクセル (px) 単位で入力します。