ページ作成例

以下のようなトップページを作成する手順です。

大きく分けて、以下のような構成になっています。
上から

物件の地図検索
新着物件一覧 + 新着記事一覧
記事一覧×2

となっています。

トップページ作成の注意点
1. 新ページを作成する
2. ページ作成の準備
3. 地図検索を追加する
4. 物件一覧を追加する
5. 記事一覧を追加する
6. 記事一覧×2を追加する
7. ページ完成
動画で確認

トップページは常に公開状態となっています。
そのため、トップページの編集を行うと、編集途中のページがお客様に見られてしまう可能性があります。
トップページにアクセスするたびに表示が変わると、お客様を混乱させてしまう可能性があるので、少しの編集なら問題ありませんが、完全にレイアウトを変更する場合などは、新しくページを作成して非公開状態で編集し、完成したらそのページをトップページに切り替えるようにします。
トップページへの切り替えは管理ページでは行えないので、ドリームワンにご連絡ください。

新しいトップページになる、新ページを作成します。

手順

左メニューの「メニュー編集」をクリックします
左上の「新規追加」をクリックします
作成したページにわかりやすいようにタイトルを設定します

以降はデザイン編集ページで作業を行います。
右上の「デザイン編集」をクリックします。

デザイン編集ページに移動すると、作成したページがプレビュー表示されています。

初期状態ではカラムブロックが1つ設置されており、その中にブログ表示に適したブロックが複数追加されています。
これらは不要なので、カラムブロックを削除することで一括で削除します。

手順

左上の「ブロック削除」をクリックします
カラムブロックのチェックボックスにチェックを入れます
「選択したブロックを削除」をクリックします

ページに何もない状態になるので、ここからページの作成を進めていきます。

まず地図検索のブロックを追加します。
地図検索ブロックは、カラムブロック内のものを使用します。
管理ページでGoogleマップのAPIキーを設定していないと地図検索機能は利用できません。
詳しくはこちらをご確認ください。

手順

左上の「ブロック追加」をクリックします
表示されたブロック一覧の「カラム」をドラッグ&ドロップで追加します
追加したカラムブロックの「編集」をクリックします

地図を横いっぱいに表示させるために、1カラムにします。
デフォルトで「3カラム」と表示されている箇所をクリックすると、レイアウトの候補が表示されるので、1カラムを選択します。

カラムにマップブロックを追加します。
「カラム内ブロック追加」をクリックするとブロックの一覧が表示されるので、マップブロックを選択します。

追加したマップブロックをクリックすると設定項目が表示されるので、必要に応じてマップブロックの設定を変更します。

設定項目

初期位置: 「地図を開く」をクリックすると地図が表示されます。
マーカーをドラッグ&ドロップで移動すると、地図の中心地点を設定できます。
また、地図を拡大・縮小すると、その縮尺も保存されます。
地図の上にある検索フォームで住所や施設名などで検索すると、その場所にマーカーを移動させることができます。
賃貸・売買: 地図が表示された時の、初期状態として地図上に表示する物件のカテゴリを指定します。
契約しているカテゴリのみ選択肢に表示されます。
開始価格: 検索フォームの価格範囲指定の最低価格です。
指定しないと、賃貸の場合は50,000円、売買の場合は1,000万円となります。
終了価格: 検索フォームの価格範囲指定の最高価格です。
指定しないと、賃貸の場合は200,000円、売買の場合は10,000万円となります。
価格幅: 最低価格と最高価格を、指定した価格幅で区切ります。
指定しないと、賃貸の場合は10,000円、売買の場合は1,000万円区切りになります。

最低価格30,000円、
最高価格160,000円、
価格幅10,000円の場合

最低価格30,000円、
最高価格160,000円、
価格幅5,000円の場合
タイトル: 地図上部にタイトルが表示されます。
初期間取り: 地図が表示された時の、初期状態として地図上に表示する物件を間取りで絞り込むことができます。
初期特徴: 地図が表示された時の、初期状態として地図上に表示する物件を特徴で絞り込むことができます。

次に、地図の下に表示される「新着物件一覧 + 新着記事一覧」を作成していきます。
先ほど追加したカラムブロックは1カラムで設定しましたが、今度は物件一覧と記事一覧が横に並ぶ2カラムのレイアウトになるので、新しく2カラムのカラムブロックを追加することになります。
先ほどと同じ手順でカラムブロックを追加して、2カラムに設定します。