11_コンタクトページのブロックを見てみる

コンタクトページに使われているブロックをひとつづつ見ていきます。(概出のものは省いてます。)

PC表示とスマホ表示のキャプチャ画像を用意したので、表示のされ方の違いを確かめることができます。

PC表示のほうに、オレンジで「ブロック」、黄色で「ブロックテンプレート」「カスタムクラス」を入れてあります(設定されている場合のみ)。

PC表示

ブロックをひとつづつ解説

  • グーグルマップブロック」は、グーグルマップを表示してくれるブロックです。APIキーをGoogleデベロッパーコンソールから取得する必要があります。ここでマップが読み込まれていないのは、編集画面に「API キーは Google Places には有効でありません。」と表示が出ているからだと思います。が、このへん私は詳しいことがわかりません。
  • 画像ブロック」(概出)のカスタムクラスには「image-circle」が設定されています。画像が丸く表示されます。
  • フォームブロック」は、フォームを作成できるブロックです。質問はいくつでも設定できます。メールアドレスに送信するか、管理画面から見れるようにするか、等々さまざまな設定ができます。

※下段の3列め、一番上のタイトル文字だけ「記事ブロック」です。残りがフォームブロックです。

スマホ表示