BiNDupテンプレートを活用｜予約ページのアレンジ方法をご紹介！

デザイナーのオモトです。
多くのサイトは、予約サービスとホームページの作成サービスが別々な事が多いため、ボタンを押すと予約サービスのURLに飛んでしまいますよね。
そのため、予約ページとデザインがサイトのデザインと全く違うこともしばしば…ですが、BiNDupなら、予約サービスとホームページの作成サービスを同時に管理できますので、予約ページも自社のホームページと同じデザインにすることができます！

ということで今回は、SmoothBookingを使った予約フォームの基本的な編集方法とアレンジ方法をご紹介します！
サンプルデータも配布していますので、参考にしてみてくださいね。

→ノーコードCMS「BiNDup」で予約フォームを最大30日間無料トライアル

今回アレンジするテンプレート

HENLY. Salon

美容院を想定したテンプレート。ミニマルなイメージで飽きのこないニュートラルなデザインになっています。

プレビューを見る

アレンジ例

プレビューを見る

今回はDressの編集なしで、和モダン風のサイトが完成。
予約パーツを複数ページ内に入れることで、このように自由な予約ページのレイアウトが可能です！

ページの上部は、ロゴと写真をを入れ替え、ページタイトルのWebフォントを「ライラ Std DB」に変更しました。

カレンダー部分

①ブロックエディタを開き、このようにパーツを配置します。予約機能パーツを選択し、「パーツを編集」をクリックします。

②予約パーツを開き、予約カレンダーを選択。

③背景を透過するかを選んで、適用をクリック。

部屋の選択部分

①ブロックエディタを開き、このようにパーツを配置します。予約機能パーツを選択し、「パーツを編集」をクリックします。

②予約パーツを開き、リソース（詳細）を選択。

③表示する項目を選んで、適用をクリック。

→ノーコードCMS「BiNDup」で予約フォームを最大30日間無料トライアル

予約フォームの色やフォントの編集方法

予約フォームはiframeになっているので、Dressで編集することができません。
そのため、文字サイズなどの変更は行えませんが、ボタンの色など一部の要素は、SmoothBookingの管理画面から、デザインを編集することができます。

SmoothBookingでの編集方法

①予約パーツを選択し、「予約管理画面を開く」をクリック。

②店舗を選択。

③歯車マークを選択し、デザインのタブをクリック。以下の項目が編集可能です！

• メインイメージ・ヘッダーカラー：予約ページに使われます。
• アクセントカラー：ボタンの背景色などに使われます
• フォント：ゴシックか明朝体かを選べます。

まとめ

いかがでしたでしょうか？ぜひ使ってみてくださいね！
→ノーコードCMS「BiNDup」で予約フォームを最大30日間無料トライアル

サンプルのサイトデータの配布

今回作成したサイトデータを以下より配布しますので、参考にしてください。