デザイナーのオモトです。
多くのサイトは、予約サービスとホームページの作成サービスが別々な事が多いため、ボタンを押すと予約サービスのURLに飛んでしまいますよね。
そのため、予約ページとデザインがサイトのデザインと全く違うこともしばしば…ですが、BiNDupなら、予約サービスとホームページの作成サービスを同時に管理できますので、予約ページも自社のホームページと同じデザインにすることができます！
ということで今回は、SmoothBookingを使った予約フォームの基本的な編集方法とアレンジ方法をご紹介します！
サンプルデータも配布していますので、参考にしてみてくださいね。
→ノーコードCMS「BiNDup」で予約フォームを最大30日間無料トライアル
今回アレンジするテンプレート
HENLY. Salon
美容院を想定したテンプレート。ミニマルなイメージで飽きのこないニュートラルなデザインになっています。
アレンジ例
今回はDressの編集なしで、和モダン風のサイトが完成。
予約パーツを複数ページ内に入れることで、このように自由な予約ページのレイアウトが可能です！
ページの上部は、ロゴと写真をを入れ替え、ページタイトルのWebフォントを「ライラ Std DB」に変更しました。
カレンダー部分
①ブロックエディタを開き、このようにパーツを配置します。予約機能パーツを選択し、「パーツを編集」をクリックします。
②予約パーツを開き、予約カレンダーを選択。
③背景を透過するかを選んで、適用をクリック。
部屋の選択部分
①ブロックエディタを開き、このようにパーツを配置します。予約機能パーツを選択し、「パーツを編集」をクリックします。
②予約パーツを開き、リソース（詳細）を選択。
③表示する項目を選んで、適用をクリック。
→ノーコードCMS「BiNDup」で予約フォームを最大30日間無料トライアル
予約フォームの色やフォントの編集方法
予約フォームはiframeになっているので、Dressで編集することができません。
そのため、文字サイズなどの変更は行えませんが、ボタンの色など一部の要素は、SmoothBookingの管理画面から、デザインを編集することができます。
SmoothBookingでの編集方法
①予約パーツを選択し、「予約管理画面を開く」をクリック。
②店舗を選択。
③歯車マークを選択し、デザインのタブをクリック。以下の項目が編集可能です！
- メインイメージ・ヘッダーカラー：予約ページに使われます。
- アクセントカラー：ボタンの背景色などに使われます
- フォント：ゴシックか明朝体かを選べます。
まとめ
いかがでしたでしょうか？ぜひ使ってみてくださいね！
→ノーコードCMS「BiNDup」で予約フォームを最大30日間無料トライアル
サンプルのサイトデータの配布
今回作成したサイトデータを以下より配布しますので、参考にしてください。
ダウンロードする
※ ファイルは解凍せずに最新のBiNDupにインポートしてお使いください。インポート方法はこちらをご覧ください。
（「2.取り込み先の環境でサイトデータをインポートする」を参照）
