ページ作成例

トップページの作成例9

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


以下のような構成になっています。
上から
  1. 文章 + 写真
  2. 物件一覧
  3. 記事一覧
  4. リフォーム事例
となっています。

もくじ

トップページ作成の注意点
1. 新ページを作成する
2. ページ作成の準備
3. 文章 + 写真を表示する
4. 物件一覧を表示する
5. 記事一覧を表示する
6. リフォーム事例を表示する(タイトル)
7. リフォーム事例を表示する(事例画像)
8. リフォーム事例を表示する(問い合わせボタン)
9. ページ完成
動画で確認

トップページ作成の注意点

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

1. 新ページを作成する

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

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


2. ページ作成の準備

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


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

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

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

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


3. 文章 + 写真を表示する

ここはトップページでも一番目立つところです。
季節などに合わせて、定期的に変更することを想定しています。
今回は今が春だと仮定して、春のイメージで作成していきます。


手順
  1. 「ブロック追加」をクリックします
  2. 写真カテゴリを選択して、写真4ブロックをドラッグ&ドロップで追加します
    「ブロック追加」からでも追加できます
  3. 追加した写真4ブロックをクリックします
  4. 写真4ブロックの設定を行います(画像の設定方法)

設定項目
画像挿入
画像のアップロード、選択を行います。
メディアボックスの基本的な使い方はこちらをご覧ください。

ブロックタイプ選択
画像の表示場所を右か左か選択します。

ブロックタイプ選択
全体を囲む枠を表示するかどうか選択します。

ブロックタイプ選択
画像の比率を選択します。

見出し
見出しを入力します。

コメント
文章を入力します。
文字装飾の仕方についてはこちらをご覧ください。

今回は以下のように設定します。
ブロックタイプ選択
右画像
ブロックタイプ選択
線無し
ブロックタイプ選択
黄金比

色は淡背景のレッドを指定します。
手順
  1. 設定ウィンドウ上の「色」をクリックします
  2. 背景パターンは淡背景を選択します
  3. レッドを選択します
  4. 背景パターン設定箇所の右の保存ボタンをクリックします


4. 物件一覧を表示する

続いて、物件一覧を設置します。

手順
  1. 「ブロック追加」をクリックします
  2. カラムカテゴリを選択して、「カラム」をドラッグ&ドロップで追加します
  3. 追加したカラムブロックをクリックします
  4. カラムブロックの設定ウィンドウが開くので、「1カラム」を選択します
  5. 「カラム内ブロック追加」をクリックして、見出しブロックをクリックします
  6. 追加した見出しブロックをクリックします
  7. ブロックの設定を行います

設定項目
見出しタイプ
見出しの重要度を設定します。基本的にはh2やh3を使用します。

見出し
見出しの文章を設定します。

見出しの位置
左寄せ、中央寄せ、右寄せから選択します。

線の位置
見出しを装飾する線を表示することができ、その線の表示位置を選択することができます。
未選択だと線は表示されません。

線の種類
通常の線、点線、破線から選択できます。

線の太さ
線の太さを3段階で指定できます。

今回は以下のように設定します。
見出しタイプ
見出し(h2)
見出し
新着物件一覧
見出しの位置
中央寄せ
色は色背景のピンクを指定します。


次に物件一覧を追加します。
手順
  1. 「カラム内ブロック追加」をクリックして、物件リストブロックをクリックします
  2. 追加した物件リストブロックをクリックします
  3. ブロックの設定を行います

各設定項目の詳細については、「物件一覧の設定を行う」をご確認ください。

今回は以下のように設定します。
列数
3列
表示件数
6
表示順番
更新日順
ページ送り機能表示
表示

色は白背景のピンクに設定します。


5. 記事一覧を表示する

物件一覧の下には新着記事の一覧を表示します。
先ほどと同様の手順でカラムブロックを追加し、1カラムに設定します。
また、以下のような見出しブロックの追加、設定も行います。



見出しブロックの下に、コンテンツブロックの追加を行います。
手順
  1. 「カラム内ブロック追加」をクリックして、コンテンツブロックを選択します
  2. 追加したコンテンツブロックをクリックします
  3. コンテンツブロックの設定を行います

設定項目の詳細については、こちらをご確認ください。
今回は以下のように設定します。
表示タイプ
コンテンツ
列数
3列
表示件数
3
ページ送り機能
表示
日付の表示
表示

色は白背景のピンクに設定します。


6. リフォーム事例を表示する(タイトル)

トップページの下の方には、リフォーム事例を表示して、相談受け付けのボタンも表示します。
まずタイトル部分を作成します。


手順
  1. 「ブロック追加」をクリックします
  2. 文章カテゴリを選択して、「文章1」をドラッグ&ドロップで追加します
  3. 追加した文章1ブロックをクリックします
  4. 文章1ブロックの設定を行います

設定項目
文字位置
文字の位置を左寄せ、中央寄せ、右寄せから選択します。

線表示
見出しの下に線を表示するかどうか選択します。

見出し
見出しを設定します。

記事
見出しの下に表示される文章を設定します。
文字装飾の仕方についてはこちらをご覧ください。

今回は以下のように設定します。
文字位置
中央寄せ
線表示
線表示

色は色背景のブラウンに設定します。


7. リフォーム事例を表示する(事例画像)

リフォーム事例の画像を表示します。

手順
  1. 「ブロック追加」をクリックします
  2. ギャラリーカテゴリを選択して、「ギャラリー2」をドラッグ&ドロップで追加します
  3. 追加したギャラリー2ブロックをクリックします
  4. 「メディアボックスを開く」をクリックして、画像を登録します(画像の設定方法)
  5. 必要に応じて設定を行います

設定項目
画像挿入
表示する画像をアップロード、選択します。
画像ごとのタイトルやキャプションの設定もここで行います。

画像カテゴリ
ギャラリーブロックに表示する画像のカテゴリを指定します。
物件ページにギャラリーブロックを設置した場合は外観や内観などのカテゴリが選択項目としてありますが、トップページなどの場合はコンテンツカテゴリ以外は選択できません。

ブロックタイプ1選択
画像の表示される形状を選択します。

ブロックタイプ2選択
画像を横何列で表示するか選択します。

ブロックタイプ3選択
画像とタイトル、キャプションで1つのセットとなりますが、その一括りに背景色をつけることができます。

タイトル位置
画像ごとに設定したタイトルをどの位置に寄せるか選択します。

見出し(日本語)
ギャラリーブロックに設定する日本語の見出しを設定します。

見出し(英語)
日本語の見出しの右に表示される、英語の見出しを設定します。
見出しより小さい文字で表示されるので、日本語で簡単な説明文を書くこともできます。

キャプション表示
画像の下には画像のtitleとaltが表示されます。titleは常に表示されますが、その下に表示されるalt表示の有無を設定できます。
titleとaltの設定方法についてはこちらをご覧ください。

今回は以下のように設定します。
ブロックタイプ1選択
正方形
ブロックタイプ2選択
4列
ブロックタイプ3選択
背景色非表示
見出し(日本語)
リフォーム事例
見出し(英語)
Renovate
キャプション表示
非表示

色は淡背景のブラウンに設定します。


8. リフォーム事例を表示する(問い合わせボタン)

最後に、問い合わせボタンを設置します。


ドリームXでは、通常の問い合わせフォームの他にも自分でフォームを作成する機能があるので、事前にリフォーム用の問い合わせフォームを作成しておくと便利です。
独自フォームの作成方法については、上文中のリンク先をご覧ください。

手順
  1. 「ブロック追加」をクリックします
  2. お問い合わせカテゴリを選択して、「お問い合わせボタン(1つのみ)」をドラッグ&ドロップで追加します
  3. 追加したブロックをクリックします
  4. ブロックの設定を行います

設定項目
ボタンテキスト1
問い合わせボタンの上段に表示される文言です。
空欄の場合「お気軽にご連絡ください」と表示されます。
何も表示したくない場合は半角スペースを入力してください。

ボタンテキスト2
問い合わせボタンの下段に表示される文言です。
空欄の場合「この物件をお問い合わせする」と表示されます。
何も表示したくない場合は半角スペースを入力してください。

ボタンリンク先
リンク先のページURLを設定します。
自作の問い合わせフォームを設置しているページのURLなどを設定します。
空欄の場合、デフォルトの問い合わせページへのURLが設定されます。


今回は以下のように設定します。
ボタンテキスト2
リフォームお問い合わせ

色は淡背景のブラウンに設定します。


9. ページ完成

以上で新トップページの作成が完了しました。

あとはこのページを現在のトップページと切り替えるだけですが、管理ページでは切り替え作業を行うことはできません。
ドリームワン側で切り替え作業を行いますのでご連絡ください。


動画で確認

全体を通しての操作を動画で確認できます。



トップページの作成例8
トップページの作成例10