Difference between revisions of "Design"

From SimplyBook.me
Line 6: Line 6:
 
<br/><br/>
 
<br/><br/>
 
:'''Design related video tutorial available [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=m-W4E80BTeU]]
 
:'''Design related video tutorial available [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=m-W4E80BTeU]]
<br/><br/>
+
<br/>
 
:'''How you can give your booking page a fresh look''' (Creative theme) [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=OhScXrrvKJU]]
 
:'''How you can give your booking page a fresh look''' (Creative theme) [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=OhScXrrvKJU]]
<br/><br/>
 
<div class="mw-collapsible mw-collapsed" data-expandtext="Show" data-collapsetext="Hide" style="width:800px;">
 
<span class="qa">[[Where to change theme?]]</span>
 
<div class="mw-collapsible-content">
 
In Settings // Design settings // Choose template.<br/>
 
[[File:Theme settings path new navigation.png|1200px | center ]]
 
[[File:Choose website template new navigation.png|1200px | center ]]
 
<br/><br/>
 
;Recommended themes:
 
* All the new ones as those themes support all new functionality, are mobile responsive and have the option to adjust the colors of your booking page.</div>
 
</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 calendar layout?]]</span>
 
<div class="mw-collapsible-content">
 
You can change calendar layout in Settings // Design settings // Calendar layout settings // Calendar Layout drop-down<br/>
 
[[File:Calendar layout path new navigation2.png|1200px | center ]]<br/>
 
There are 8 types of calendar layouts:<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.
 
:'''Daily classes'''- shows available times for classes in the intervals equal to class duration. Starts counting from the first available time. Available with Classes feature.<br>
 
:'''Weekly classes'''- shows available times for classes in the intervals equal to class duration with weekly options. Starts counting from the first available time
 
<br>
 
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 settings //Additional theme settings. <br/>
 
[[File:Theme settings path new navigation.png|1200px | center ]]<br/><br/>
 
[[File:Add logo and banner v3.png | center]]
 
Video tutorial on creating your logo with [https://www.fiverr.com/logo-maker Fiverr logo maker] [[File:Youtube-Logo.png|link=https://youtu.be/41CrRQdvWgA]]
 
</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, Categories, Memberships and Classes description fields. </div>
 
</div>
 
 
<br/>
 
<br/>
 +
*<div class="article">[[Where to change theme?]]</div>
 +
*<div class="article">[[How_to_change_the_way_time_slots_are_shown%3F| Where to change calendar layout?]]</div>
 +
*<div class="article">[[Where to change logo and background?]]</div>
 +
*<div class="article">[[Custom_Features#Custom_CSS| Advanced design options with Custom CSS]]</div>
 +
*<div class="article">[[Custom_Features#HTML_Description_Field_for_Events| HTML description field for events]]</div><br/><br/>

Revision as of 14:10, 20 August 2021