Design: Difference between revisions

From SimplyBook.me
No edit summary
No edit summary
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
<languages/>
<translate>
<!--T:1-->
{{#seo:
{{#seo:
|title=Set up Layout and Theme of Booking Page in Online Scheduling System SimplyBook.me
|title=Set up Layout and Theme of Booking Page in Online Scheduling System SimplyBook.me
|description=Learn how to customize your booking page design. Match it to your brand for a cohesive look. Start designing here!
|titlemode=append
|titlemode=append
|keywords=faq, frequently asked questions, scheduling app, scheduling software, calendar software, online calendar, schedule, online booking system, online scheduling, booking software, online booking calendar, booking system
|keywords=faq, frequently asked questions, scheduling app, scheduling software, calendar software, online calendar, schedule, online booking system, online scheduling, booking software, online booking calendar, booking system
}}
}}
</translate>
<translate>
<!--T:2-->
<br/><br/>
:'''Design related video tutorial <p><youtube>m-W4E80BTeU</youtube></p>
<!--T:3-->
:'''How you can give your booking page a fresh look''' (Creative theme) <p><youtube>OhScXrrvKJU</youtube></p>


<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<!--T:4-->
<span class="qa">[[Where to change theme?]]</span>
*<div class="article">[[Special:MyLanguage/Where to change theme?]]</div>
<div class="mw-collapsible-content">
*<div class="article">[[Special:MyLanguage/How_to_change_the_way_time_slots_are_shown%3F| Where to change calendar layout?]]</div>
In Settings // Design // Themes & Colors.<br/>
*<div class="article">[[Special:MyLanguage/Where to change logo and background?]]</div>
[[File:Theme select new.png | center ]] <br/><br/>
*<div class="article">[[Special:MyLanguage/Where_to_change_my_info#Favicon| Can I change favicon(logo in the browser tab)?]]</div>
;Recommended themes:
*<div class="article">[[Special:MyLanguage/What image sizes are recommended for my booking website| What image sizes are recommended for my booking website?]]</div>
*Default
*<div class="article">[[Special:MyLanguage/Custom_CSS_custom_feature| Advanced design options with Custom CSS]]</div>
*Tender
*<div class="article">[[Special:MyLanguage/HTML_Description_Field_for_Events_custom_feature| HTML description field for events]]</div>
from old ones:
<br/><br/>
*Bootstrap Square Rainbow
*Joy Bootstrap


Those themes support flexible timeline and have the option to adjust the colors of your booking page.</div>
</translate>
</div>
<br/>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<span class="qa">[[How_to_change_the_way_time_slots_are_shown%3F| Where to change timeline?]]</span>
<div class="mw-collapsible-content">
You can change timeline in Settings // Design // Logo, background and timeline // Timeline type drop-down<br/>
[[File:Logosettings.png | center ]]<br/>
There are 5 types of timeline:<br/>
[[File:Timeline choice.png | center ]]<br/>
:'''Slots weekly''' - shows available time in the intervals equal to your service duration for a week. Starts counting from the first available time.
:'''Modern''' - shows available time in the intervals equal to your service duration for a day. Starts counting from the first available time.
:'''Flexible weekly''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration for a week. Starts counting from the first available time.
:'''Flexible''' - shows available time in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration for a week. Starts counting from the first available time.
:'''Classes''' -  shows available time for providers for chosen date. Starts counting from the first available time of all providers.
If you have services that have fixed start times, you can try using [[Custom_Features#Appointment_at_Fixed_Time| Appointment at fixed time]] Custom Feature.
</div>
</div>
<br/>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<span class="qa">[[Where to change logo and background?]]</span>
<div class="mw-collapsible-content">
In Settings // Design // Logo, background and timeline. <br/>
[[File:Logosettings.png | center ]]<br/><br/>
[[File:Add logo and banner2.png | center]]
</div>
</div>
<br/>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<span class="qa">[[Custom_Features#Custom_CSS| Advanced design options with Custom CSS]]</span>
<div class="mw-collapsible-content">
Advanced design options with [[Custom_Features#Custom_CSS| Custom CSS]] </div>
</div>
<br/>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<span class="qa">[[Custom_Features#HTML_Description_Field_for_Events| HTML description field for events]]</span>
<div class="mw-collapsible-content">
[[Custom_Features#HTML_Description_Field_for_Events| HTML description field for events]] </div>
</div>
<br/>

Latest revision as of 09:27, 26 June 2025