PageFlyでお問い合わせページを作成する方法
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
PageFlyを使用すると、コーディングスキルがなくても、視覚的に魅力的な問い合わせページを簡単に作成できます。このガイドでは、PageFlyを使用してを構築する手順をご説明します。
PageFlyダッシュボードで、「ページ」タブに移動します。
「新規白紙ページ作成」ボタンをクリックします。
ドロップダウンメニューから「通常」を選択します。
エディターの種類を選択します。
Gen 2 Editor: ネストされたコンテナを備えたFlexシステムを利用した高度なエディターです。
重要: Gen 2レイアウトは、従量課金制 () モデルでのみ利用可能になります。
Legacy Editor: 従来のレイアウトオプションに焦点を当てた分かりやすいエディターです。
ページキャンバスにセクションを追加する
エディターで、「エレメント」アイコンをクリックします。
PageFlyタブの下で、「レイアウト」エレメントを選択します。
1/1オプション (Legacyエディターの場合) またはBlank block (Gen 2エディターの場合) のいずれかをページエディターにドラッグアンドドロップします。
Legacyエディターでは、ブレッドクラムのSectionをクリック > Generalタブに移動 > Set fixed widthオプションを無効にすることで、Rowの表示スペースを拡大できます。
Gen 2エディターでは、Flexセクションを選択 > Stylingタブに移動 > Content widthパラメーターの下にある「Fill container」オプションを選択することで、これを行うことができます。
バナーの背景画像を追加する
ステップ1：Stylingタブで、Backgroundパラメーターまでスクロール > Select imageをクリックして画像を選択します。
ステップ3：Backgroundパラメーターまでスクロールし、More Settingsボタンをクリック > Background PositionにはCenter、Background SizeにはCoverを選択します。
「Contact Us」見出しを追加する
見出しエレメントのテキストを変更し、スタイルを設定するには、以下の手順に従います。
ステップ1：Generalタブで、サンプルテキストを「CONTACT US」に変更します。
ステップ2：Stylingタブをクリック > Content color > お好みの色を選択します。
ステップ3：Spacingで、必要に応じてmargin topとbottomを調整します。
ステップ4：Typographyパラメーターまでスクロール > お好みのフォントファミリーを選択し、必要に応じてフォントサイズを調整します。
Elementsアイコンをクリック > 次に、PageFlyタブでGoogle Mapエレメントを選択 > 最初のバリアントをページエディターにドラッグアンドドロップします。
マップの場所を設定するには、Generalタブを選択 > ContentパラメーターでMap location、Map zoom、Map typeを変更します。
Google Mapと同じセクションに、1/2 – 1/2のレイアウトを追加します。左側の列には店舗の情報が含まれます。右側の列には、顧客が店舗に情報を送信できるように問い合わせフォームエレメントが配置されます。
連絡先情報フィールドを追加する
Generalタブでの設定
左側の列に、次のコンテンツを持つ4つの見出しエレメントを追加します：Contact information、Address、Email、Phone number。1つの見出しエレメントを作成し、その見出しをクリックして複製し、4つの見出しエレメントにすることができます。
次に、各見出しにコンテンツを追加します。各見出しをクリックし、GeneralタブのContentパラメーターに店舗情報を入力します。
各情報行にはアイコンを追加します。
見出しをクリックし、Generalタブを確認します。
Show iconオプションを有効にします。星アイコンが表示されます。別のアイコンに変更したい場合は、アイコンをクリックするだけです。この場合は、「location-dot」アイコンに置き換えます。
残りの見出しについても同様に行うことができます。
Stylingタブでのスタイルのカスタマイズ
Stylingタブに移動して、フォントスタイルを設定します。
見出しとテキストエレメントのお好みのフォントファミリーとウェイトを選択します。
デザインのニーズに合わせて、各見出しとテキストエレメントのフォントサイズを調整します。
Copy Styles機能を使用して、1つの見出しから他の見出しに同じスタイルをすばやく適用し、一貫性を確保します。
問い合わせフォームを追加する
フォームのスタイルは、左側の列で見出しにスタイルを設定したのと同様に行うことができます。
PageFlyが提供するこの役立つビデオガイドで、顧客データを収集するためのShopifyフォームを簡単に作成する方法を学びましょう。
見出し「Follow Us On Instagram」を追加する
Headingエレメントを使用して見出しを作成します。Generalタブで、Heading textに「Follow us on Instagram」というテキストを追加します。次に、Stylingタブに切り替えてテキストをカスタマイズします。
Instagram Feedエレメントを追加する
「エレメント」アイコンをクリック > 上記の見出しと同じセクションにInstagram Feedエレメントをドラッグアンドドロップします。
Instagramに接続する必要があることに注意してください。
Saveボタンをクリックし、次にPublishボタンをクリックしてページを公開します。Live viewボタンをクリックすると、ライブでページを確認できます。
1. 問い合わせページが重要なのはなぜですか？
問い合わせページは、訪問者がブラウザから離れることなく、電話、メッセージ、またはフォームへの入力によってブランドに簡単に連絡できるため重要です。
2. PageFlyの問い合わせページにはどのような要素を含めることができますか？
問い合わせページには、以下の要素を追加して強化できます。
問い合わせフォーム
情報のためのテキストコンテンツ
訪問者を引き付けるビジュアル
場所のためのマップ統合 (オプション)
追加の連絡チャネルのためのソーシャルメディアボタン (オプション)
または、「テンプレートから作成」ボタンをクリックして、を問い合わせページに使用することもできます。
Image Managerから画像を使用するか、インターネットからアップロードできます。詳細については、をお読みください。
ステップ2：Stylingタブで、Spacingセクションに移動 > top-paddingとbottom-paddingの値を設定して、セクションの高さを画像に合わせて変更します。中央の小さなボックスは、の4辺すべてに同じ値を設定します。この場合、上下のパディングを200pxに設定します。
Elementsアイコンをクリック > 次に、PageFlyタブでを選択 > 最初のバリアントをセクションにドラッグアンドドロップします。
注: サイト全体で一貫性を持たせるには、見出しのスタイリングにを使用することをお勧めします。
Google Mapエレメントの詳細については、。
「エレメント」アイコンをクリック > Shopifyタブに移動 > を右側の列にドラッグアンドドロップします。
を使用すると、顧客はあなたのブランドの個性を垣間見ることができ、ブランドへの信頼を高め、顧客エンゲージメントを促進し、最終的に売上を向上させることができます。
Instagramエレメントの詳細については、をご確認ください。
と、PageFlyでについて詳しく知るには、これらのブログをご確認ください。
