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

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

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

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

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

HENLY. Salon

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

アレンジ例

アレンジ例
プレビューを見る

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

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

カレンダー部分

①ブロックエディタを開き、このようにパーツを配置します。予約機能パーツを選択し、「パーツを編集」をクリックします。
レイアウト
②予約パーツを開き、予約カレンダーを選択。
パーツ選択
③背景を透過するかを選んで、適用をクリック。
プレビュー

部屋の選択部分

①ブロックエディタを開き、このようにパーツを配置します。予約機能パーツを選択し、「パーツを編集」をクリックします。
パーツ選択
②予約パーツを開き、リソース(詳細)を選択。
パーツ選択
③表示する項目を選んで、適用をクリック。
プレビュー

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

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

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

SmoothBookingでの編集方法

①予約パーツを選択し、「予約管理画面を開く」をクリック。
管理画面を選択
②店舗を選択。
店舗をクリック
③歯車マークを選択し、デザインのタブをクリック。以下の項目が編集可能です!

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

まとめ

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

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

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

この記事はBiND CAMP PASSメンバー専用記事です。続きを読むには対象商品を購入する必要があります。

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • 予約機能パーツを使えば、BiNDupで作ったサイトとの連携も簡単
  • ボタンの色などの要素は、SmoothBookingの管理画面で行う
  • メインカラーやアクセントカラー、フォントも選べる

RECOMMEND ARTICLE