Design: Difference between revisions

From SimplyBook.me
No edit summary
No edit summary
 
(34 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<languages/>
<span class="qa">[[Where to change theme?]]</span>
<translate>
<div class="mw-collapsible-content">
In Settings // Design // Themes & Colors.<br/>
[[File:DesightThemeLayout750.png | center ]] <br/><br/>
;Recommended themes:
*Bootstrap Square Rainbow
*Joy Bootstrap


Those themes support flexible timeline and have color wheel to adjust the colors of your booking page.</div>
<!--T:1-->
</div>
{{#seo:
<br/>
|title=Set up Layout and Theme of Booking Page in Online Scheduling System SimplyBook.me
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
|description=Learn how to customize your booking page design. Match it to your brand for a cohesive look. Start designing here!
<span class="qa">[[How_to_change_the_way_time_slots_are_shown%3F| Where to change timeline?]]</span>
|titlemode=append
<div class="mw-collapsible-content">
|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
You can change timeline in Settings // Design // Logo, background and timeline // Timeline type drop-down<br/>
}}
[[File:TimelinePath750.png | center ]]<br/>
</translate>
There are 4 types of timeline:<br/>
<translate>
[[File:TimelineType750.png | center ]]<br/>
<!--T:2-->
:'''Slots weekly''' - shows available time in the intervals equal to your service duration for a week. Starts counting from the first available time.
<br/><br/>
:'''Modern''' - shows available time in the intervals equal to your service duration for a day. Starts counting from the first available time.
:'''Design related video tutorial <p><youtube>m-W4E80BTeU</youtube></p>
:'''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.
<!--T:3-->
If you have services that have fixed start times, you can try using [[Plugins#Appointment_at_fixed_time| Appointment at fixed time]] plugin.</div>
:'''How you can give your booking page a fresh look''' (Creative theme) <p><youtube>OhScXrrvKJU</youtube></p>
</div>
 
<br/>
<!--T:4-->
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
*<div class="article">[[Special:MyLanguage/Where to change theme?]]</div>
<span class="qa">[[Where to change logo and background?]]</span>
*<div class="article">[[Special:MyLanguage/How_to_change_the_way_time_slots_are_shown%3F| Where to change calendar layout?]]</div>
<div class="mw-collapsible-content">
*<div class="article">[[Special:MyLanguage/Where to change logo and background?]]</div>
In Settings // Design // Logo, background and timeline. <br/>
*<div class="article">[[Special:MyLanguage/Where_to_change_my_info#Favicon| Can I change favicon(logo in the browser tab)?]]</div>
[[File:TimelinePath750.png | center ]]<br/><br/>
*<div class="article">[[Special:MyLanguage/What image sizes are recommended for my booking website| What image sizes are recommended for my booking website?]]</div>
[[File:LogoBackgroundBlock750.png | center]]
*<div class="article">[[Special:MyLanguage/Custom_CSS_custom_feature| Advanced design options with Custom CSS]]</div>
</div>
*<div class="article">[[Special:MyLanguage/HTML_Description_Field_for_Events_custom_feature| HTML description field for events]]</div>
</div>
<br/><br/>
<br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
</translate>
<span class="qa">[[Where to change on success button option after the client makes a booking (Go to company page..)]]</span>
<div class="mw-collapsible-content">
In Settings // Company Information // Home page // On success button options. <br/>
For example, if you insert https://simplybook.me, the system will redirect you to SimplyBook.me website when you click on that button. <br/>
[[File:OnSuccessButtonLink750.png | center ]]
</div>
</div>
<br/>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
<span class="qa">[[Plugins#Custom_CSS| Advanced design options with Custom CSS]]</span>
<div class="mw-collapsible-content">
Advanced design options with [[Plugins#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">[[Plugins#HTML_description_field_for_events| HTML description field for events]]</span>
<div class="mw-collapsible-content">
[[Plugins#HTML_description_field_for_events| HTML description field for events]] </div>
</div>
<br/>

Latest revision as of 09:27, 26 June 2025