[V6] アンカーリンクを作成する

アンカーリンクについて

ウェブサイト上のハイパーリンクされた項目をクリックすると、ページが特定の場所まで自動的にスクロールダウンするのを見たことがありますか? これはアンカー リンクと呼ばれます。アンカー リンクを使用すると、クリックするだけで訪問者をサイト上の特定の場所に移動できるため、面倒な手動スクロールが不要になり、確実にコンバージョンにつながる、はるかにユーザー フレンドリーなオンライン ストアを構築できます。

In GemPagesボタン、画像ベース、テキストベースの要素を使用してアンカーダウンすることができます。この記事では、まさにそれを実現する方法を説明します。

リンクする前に: 要素/セクションIDを見つける

エディター各要素/セクションは独自の セクション IDこれを使用して、スタイルシート内のスタイルを指定することができます。または、この場合は、他の要素を指定して、閲覧者を誘導する目的のセクションまでスクロールします。

要素/セクション ID を見つける方法は次のとおりです。使用している GemPages エディターのバージョンに応じて、手順が異なる場合があります。バージョン固有の手順に従って、次の手順に進んでください。

ステップ 1: スクロールしたい場所を探します。そのセクション内の要素を見つけます > 右クリック > コードの編集

この例では、 ヒーローバナー 要素。

ステップ 2: 新しいポップアップ コード エディター ウィンドウの上部に表示される Hero Banner 要素の ID をコピーします。

これで、要素のアンカー リンクの作成に進むためのセクション ID が取得できました。

ボタンと画像ベースの要素の場合

以下の手順は、 ボタン 要素だけでなく、 ヒーローバナー の三脚と 画像 要素。

ステップ 1： の中に GemPagesダッシュボードページテンプレートを開いて、 エディター.

ステップ 2: ドラッグアウト ボタン ページに要素を追加します。

ステップ 3： を選択 "リンクを選択「」の下にある「」ボタンリンクを編集」セクションでは、リンク ピッカー ウィンドウがポップアップ表示されます。

ステップ 4: 新しいウィンドウで、 セクション ID 目的地の「カスタムURL"ボックス。

または、「スクロールする「」タブをクリックし、下のリストから保存先を選択します。

ステップ 5: 青い「Save”ボタンを押します。次に、 Save の三脚と パブリッシュ ライブページで結果を確認します。

テキストベースの要素の場合

ステップ 1： の中に ダッシュボードテンプレートを開いて、 エディター.

ステップ 2： の中に エディターテキストベースの要素をドラッグします。例: 見出し.

ステップ 3: テキストをハイライトし、アクション パネルがポップアップするまで待ちます。

ステップ 4: チェーンアイコンを選択し、「カスタムURL”フィールドが表示されます。

ステップ 5：貼り付け セクション ID 目的地をフィールドに入力し、「Enter"

ステップ 6: Save の三脚と パブリッシュ ライブ ページで結果を確認するページ。

ライブ ページ上の最終結果は次のようになります。

これで完了です。アンカー リンクを作成するには、以前は複雑なコーディングが必要でしたが、GemPages では数回クリックするだけで済みます。