|
|
| (26 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> |
|
| |
|
| <div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;"> | | <!--T:3--> |
| <span class="qa">[[Where to change theme?]]</span>
| | :'''How you can give your booking page a fresh look''' (Creative theme) <p><youtube>OhScXrrvKJU</youtube></p> |
| <div class="mw-collapsible-content">
| |
| In Settings // Design // Themes & Colors.<br/>
| |
| [[File:Theme select new.png | center ]] <br/><br/>
| |
| ;Recommended themes:
| |
| *Default
| |
| *Tender
| |
| *SimpleBeauty
| |
| *Hugo
| |
| | |
|
| |
|
| Those themes support all new functionality and have the option to adjust the colors of your booking page.</div>
| | <!--T:4--> |
| </div>
| | *<div class=" article" >[[Special: MyLanguage/Where to change theme?]]</div> |
| <br/>
| | *<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 mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;"> | | *<div class=" article"> [[Special:MyLanguage/Where to change logo and background ?]]</ div> |
| <span class="qa">[[How_to_change_the_way_time_slots_are_shown%3F| Where to change timeline?]]</span> | | *<div class="article">[[Special:MyLanguage/Where_to_change_my_info#Favicon| Can I change favicon(logo in the browser tab)?]]</div> |
| <div class="mw-collapsible-content"> | | *<div class="article">[[Special:MyLanguage/What image sizes are recommended for my booking website| What image sizes are recommended for my booking website?]]</div> |
| You can change timeline in Settings // Design // Logo, background and timeline // Timeline type drop-down<br/>
| | *<div class="article">[[Special:MyLanguage/Custom_CSS_custom_feature| Advanced design options with Custom CSS]]</div> |
| [[File:Logo settings new.png | center ]]<br/> | | *<div class="article">[[Special:MyLanguage/HTML_Description_Field_for_Events_custom_feature| HTML description field for events]]</div> |
| There are 7 types of timeline:<br/>
| | <br/><br/> |
| [[File:Timeline settings new.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 day. Starts counting from the first available time.
| |
| :'''Modern provider''' - shows available time for providers for chosen date. Starts counting from the first available time of all providers.
| |
| :'''Flexible provider'''- shows available times for providers in the intervals equal to your [[Need_to_change_interval_(timeframe)| timeframe]] duration. Starts counting from the first available time on selected date.
| |
| :'''Classes'''- shows available times for classes in the intervals equal to class duration. Starts counting from the first available time.
| |
|
| |
|
| <br>
| | </translate> |
| 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:Logo settings new.png | center ]]<br/><br/>
| |
| [[File:Logo and banner.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">
| |
| [[Custom_Features#Custom_CSS| Custom CSS]] allows to change the styles of different elements, hide them, change fonts, colors, font-sizes, etc. If you know CSS coding, please use tools of browser to find identifiers of elements and write rules in the settings of [[Custom_Features#Custom_CSS| Custom Feature]]. <br>
| |
| If you have no deep knowledge of CSS, please check [[Remove_Elements_from_booking_page#Removing_with_Custom_CSS| this link]] with common CSS requests or contact support and they will try to find the best solution for you. </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 fields]] feature allows inserting HTML formatting (background and font color, bold, italic, underline, alignment and other HTML elements) for Service, Service Providers, Locations and Categories description fields. </div>
| |
| </div>
| |
| <br/>
| |
