SJV Booking system and website User Guide
Once you have logged into the site with the ‘editor’ role you will see a cut down menu at the left hand side of the dashboard. We have tried to strip out all the unnecessary or little used functions to keep it as simple as possible.
Here’s a quick rundown of the most important items.
Note: while you are logged in you can always return to the dashboard by hovering over the site name at the left of the black menu bar and clicking ‘Dashboard‘.
This is where the media library lives, where all your images and other files are stored and can be uploaded to.
Seems to speak for itself, but can be a little confusing. One thing you won’t find listed here are the villas. That’s because they are not actual pages, but what are called ‘custom posts’ and are generated by the booking system – more about that below.
However, all the other pages on the site including all the destination pages you will find here. You can click on a page in the list to view or edit a page. You can also add new pages.
This is where you manage all the villas (you will sometimes find them referred to as accommodations or accommodation types – these are just the titles that are hard coded by the booking system. You’ll soon get familiar with them.)
Here is the place where you can manage all the booking details regarding the villas and maintain a calendar showing bookings and availability.
There is a lot of functionality here, and together with the accommodation section represents a very powerful management system which is the basis of most of the top commercial packages.
The Divi Page Builder
The platform used to create your system has been created using the Divi page builder. You have chosen to use a custom designed look, which means you will need to become familiar with Divi to edit Villa details and region pages. Fortunately, it is a very visual platform, and we have made the structure as simple and intuitive as possible.
We will take you through the essentials as we walk you through the steps to create Villa information and edit the region pages.
We have created dummy pages and post templates with placeholder text and images, so all you will need to do is insert your own content.
We use the terms ‘Staging Site’ and ‘Production Site’. The Production Site is the live platform. Best Practice is always to work on a staging site – then only when we are totally happy do we push it ‘live’ onto the production site.
The host takes daily backups, so in the event of some dire mistake or crash, we can always roll back to the previous day’s version.
Please note that the Divi Platform is constantly being updated with new functionality, so the details and screenshots shown here may be a little different from what you see on the site. If you need more information, check out Divi Documentation.
How to add a new villa – a step by step walk-through.
This section updated and revised – 06/01/2021
Login to the site using your username and password. Once logged in to the dashboard, from the menu on the left, select Accommodation > Add Villa
Now we need to set up some basics. On the blank page, enter the name of the Villa in the box right at the top where it says ‘Add title’.
On the right hand side scroll down the list of Accommodation Categories, and select the Destination Region (Note: Don’t tick the box by the country, just the region – e.g. ‘Corfu’ not ‘Greece’. This ensures your villa is listed on the region page.
Before we start building the Villa page, there are a few things you may want to do. Go to the box marked ‘Excerpt’ half-way down the page. here you need to cut and paste the line shown below, if it’s not shown already:
<strong>Sleeps:</strong> Your text goes here
<strong>Price Guide:</strong> Your text goes here
Then insert the details where it says ‘Your text goes here’.
This is the text that will appear under the Villa image and title on the region listing page.
Featured Image – This is the main big image that appears on the Villa page, and the smaller image that is used on the listing on the region page.Now go down to the foot of the right hand column, and click on ‘Set featured image’. This will open up the media library, and you can either choose your featured image (if you have it already uploaded) or upload one. Choose your image and click ‘Set featured image’ at the bottom right.
Note; – you can always come back and add these later or edit them.
Fill in other details. These don’t automatically appear on the Villa details, as you have chosen not to, however, they will show in your listing on the back end so they will be important when you are searching for villas. So you can fill in the capacity, size and other details to store in the database.
Note: This step only applies if you are creating a new villa from scratch. If you are adding content or editing a villa that has alreadbeen created, skip this section and go to step 6.
Now it’s time to start building your page. Click on ‘Use the Divi Builder’. You’ll see the options – ‘Build from scratch’, ‘Choose a Premade Layout’ or ‘Clone existing page’. Choose ‘Choose a Premade Layout’.
The ‘Load from Library’ page opens – click on ‘Your Saved Layouts’ and choose. ‘Villa page content 2021’
The edit page opens. You can edit and build here – it’s like a wireframe view. But we recommend you use the Visual Editor – this is a great tool where you can see just what you are building!
So, click on ‘Save Draft’ at the right hand side to save your work, then hit the ‘Build On the Front End’ button above the purple bar.
WARNING: Once you’ve started building in Divi, never click the ‘return to standard editor button’ or you will lose all the work you did in Divi.
If you are editing or adding content to a villa that’s already been created and the villa template applied. Select the villa you want to edit from the top menu – Destination>Region>Villa. When the villa page opens, (assuming you are logged in) in the black admin bar at the top of the page click on ‘Enable Visual Builder’.
Now you will see the template page.
The title is already at the top, and the big featured image you chose (you can always change this if you decide you don’t like it).
Below this are columns where you can enter text. There are green bordered rows that contains the text blocks each contained in black borders. Don’t change or move any green rows (or the blue section containers) if you do, you may damage the page layout – it’s the text boxes (called modules) we want.
If you mouse over the cog icon, it will say ‘Module Settings’ click that and a text editor opens, where you can replace the placeholder text with your own. All the setting here should be familiar.
There are a few other options here, but we are just concerned with the body text. When you have finished a module, just click the green tick to save it. Repeat for the other two boxes.
Below this is the image gallery, but we’ll skip that for a moment.
Go to the description, the big text module at the base. Again, click on cog icon on the black panel – the text editor opens, just as before and you type or paste your description in here.
When you have finished just click the green tick at the bottom right to save it.
You can repeat this for any of the text areas, except those generated by the system, such as the Villa name at the top. So you can go ahead and cut and paste text, or type into any of the main text boxes such as the specification or description boxes.
If you find you’ve made a major mistake, just don’t click the green tick at the foot of the text entry box – instead click the red cross instead, and any changes you made will not be saved.
The image gallery.
Again, mouse over the black menu in the module and click on the gear icon. A gallery settings panel opens and you can delete the placeholder images (click on the little dustbin on each pic) and replace them with new ones from the media library. Click on the grey ‘+’ to add new images.
The last thing you need to do is replace the two large placeholder images in the lower section with two appropriate images for the villa.
It’s important these images are both the same size and aspect so that they align nicely. You may want to prepare two images before you add them. The size of these images on the page (desktop) are 608 x 422 pixels. Ideally the ones you use should be a little larger to look their best on the page.
When you’re finished, click on the purple disk at the bottom of the page. A box appears at the bottom right. Choose to save the draft, or publish your page.
If you don’t remember to save, your work may be lost.
Then go to the top of the page on the black menu bar and click to ‘Exit the visual builder’.
Here’s a tip that can be a life-saver. When you get to the end of your editing, look over your page before you click on the save button. Then if you see something is terribly wrong and you don’t know how to correct it, just go to the ‘Exit the visual builder’ link at the top of the page. You will be warned that you have unsaved changes – just click the discard changes button and your original page will be returned.
Linking villas to ‘Collections’ search
This section updated and revised – 10/04/2021
When you want to add a villa to a search results page in the ‘Collections’ section, it’s a simple matter of adding a tag to the villa page.
Let’s say you have a villa with great tennis facilities. While logged in, and viewing the site on the front end, navigate to the villa by first going to the destination and then selecting the villa you want.
Next, in the black menu bar at the top of the page. Click ‘Edit accommodation type’.
Go to the ‘Accommodation Tags’ box at the right hand side. All the tags have been pre-populated. Their titles are:
- want boats
- want golf
- want off beaten
- want private islands
- want romantic
- want isolation
- want supersized
- want surfing
- want teenagers
- want tennis
- want diving
- want horse riding
But just start typing ‘want…’ and the whole list will appear. Click a tag you want, for example ‘want tennis’ – (or add more than one tag, if the villa has say, golf, tennis and surfing etc.)
That’s it. But the last thing you must do is to click ‘Update‘ towards the top of that column to make sure your selection is stored.
(NB. You can always go back and remove a tag, if you make a mistake or if a villa changes)
You can always add new tags here just type them in, begining with ‘Want’ – eg. ‘Want fishing’. But if you want to create a new child page to display results, you will have to edit the shortcode in the bottom text box of your page to show the new tag id: See example below:
mphb_rooms title=”true” featured_image=”true” gallery=”false” excerpt=”true” details=“false” price=“false” view_button=“false” book_button=”false” posts_per_page “-1” tags=”867″
The above should be enclosed in square brackets ‘ [ ]’ in the code. If necessary ask help from a Divi or Motopress developer.
General editing tips and hints.
You’ll soon gather there are a number of ways to edit pages and content.
- Via the dashboard – when you are logged in, you can use the menu on the left to open Villa details (under Accommodation) and pages, such as region pages. Just open up the list, choose an item and click on ‘edit’. This usually opens up in the back end view (or wireframe view). This can be really useful, as it also shows the right hand system menu where you can select featured images etc. Editing content in this view is really easy, just select a module by its black menu block and click on the gear icon.
IMPORTANT: To save in this view click on ‘Update’ in the right hand column.
WARNING: Once you’ve started building in Divi, never click the ‘return to standard editor’ button or you will lose all the work you did in Divi.
You can always switch to editing in the visual builder, by clicking on ‘Build On The Front End’.
- From the page view – when you are logged in, you can view the site like a normal visitor. However, as a logged-in user, you will also see the narrow black menu bar at the top. Navigate to any page and click on the ‘Edit Page’ link and it will open the back end editor for that page. Alternatively, you can click on ‘Enable Visual builder’ and edit the page in real time, on the front end. When you are finished, save your work, and click ‘Exit Visual Builder.’
Copying and pasting text – important hint.
If you’re copying and pasting text from another source, such as a website, email or even a word document, what you paste may not look as it should.
The reason for this is that the source you are copying from may have bits of hidden code that are used to format the original… but are no use to us. Worse, they may make a mess of how our content is rendered.
There is an easy and safe way to get around this.
When you open the text editor to paste your material, open up the ‘Text’ tab first. (If you are replacing some original material delete everything there) Then simply paste your copy in.
Once you have pasted your copy, swith back to the ‘Visual’ tab to do any formatting.
Save… save… save
Do get into the habit of saving your work regularly. You’ll find that Divi is very good at reminding you when you need to save. However it’s good practice to get used to saving at the end of each action.
But make sure you are happy with your action before you save!
There are a couple of ways to save, depending upon which action you are doing. With the back end editor, if you’re working on a page which has already been created, just hit the update button near the top of the right-hand column.
If you’re creating a new page remember to save a draft, or publish the page.
If you’re editing on the front and, using the visual editor, you need to click on the purple disk at the bottom of the page. This opens a box on the right where you can click to save a draft or publish.
You will, however, find that the system is helpful and will prompt if it thinks you have not saved.
Saving and publishing
It’s worth just pointing out the difference between saving and publishing. When you save anything new, it’s safely saved as a draft. That means it doesn’t show up on the page or anywhere. If you want a new page or post to appear, you need to publish it. You can check the status of any item on the backend.
Working with Images and the Media Library
The Media Library
To access the media library, simply go to the left-hand menu, and right near the top, you will see ‘Media‘ – click on that and select Library.
This is where all your images live. You will see that we have already built a folder structure to organise your images. The core of this follows the pattern ‘country > region > villa.’
As you start to create villas, it’s useful to create a villa folder inside the region folder, then upload all your images here. There is no need to do it all at once you can add them as you go.
To create a villa folder, simply click on the region to open it, then click on New Folder at the top. Give it a suitable name, and that’s all there is to do.
It may be useful to point out that the media library can contain all types of media, not just images. You may want to add videos here, or even all the documents or PDFs relating to a particular villa, all in one folder.
Adding images to the library
Simply open the folder you want, then click ‘add new‘ at the top. Then you can drag and drop images or upload from your computer.
Tip: You may want to name your images before you upload them. Also don’t worry if an image is in the wrong folder, you can just drag and drop it to move to another folder.
Adding images to pages and villa posts
In most cases the pages and posts have placeholder images. All you need to do replace the image with your chosen selection selection. Easiest way is to open the page or post, enable the visual builder, navigate to the module and change the image.
There are just one or two special cases you may need to be aware of:
Destination page – hero image.
These are the big header images which are actually backgrounds to the top section. On the front end, using the destination menu, navigate to the region you want. With the visual builder enabled, mouse over the top left hand corner of the image and a blue menu block is visible. Click on the cog icon ‘Section Settings.’ In the panel that opens select ‘Background‘ – mouse over the image, at the top right, choose the cog icon again and the media library opens.
Either choose an image or upload a new one. Then at the bottom right of the page, select ‘Upload an Image‘.
Close the section settings panel by clicking the green tick, then save your page.
Villa Post – featured image
The big image at the top is automatically pulled from the featured image you select when building the villa post. Don’t worry if you didn’t select one – its really easy to do.
Just choose the villa you want from the Accommodation > Villas menu on the left (or create a new villa). Go to the bottom of the far right column – click on set featured image – Either choose an image or upload a new one. Then scroll up to ‘Update‘ or ‘Publish‘. See ‘Step 3’ above
Note: The Featured Image is also the one that is automatically chosen for the villa thumbnail that appears on the region page listing.
Villa Post Image Gallery.
This is really easy to build. If it’s a new villa post you are creating just follow the instructions in Step 7, above. If you want to change or add gallery images to an existing page, open the page and enable visual builder. Then select the gallery (black menu and click the cog icon). Continue as in Step 7.
Quick image tip.
Before you press that ‘upload image’ button. Just quickly check the image display settings. In most cases the default is for ‘full-size’ – that’s the size of the image as uploaded.
For most of the jobs you’ll need to do, such as changing a region ‘hero’ image, that will do fine.
Featured images and gallery images are handled automatically by WordPress.
But if an image doesn’t look right when it’s on the screen – just check that it’s the right size.
Image Sizes and Quality
The quality of images that appear on your live site depend upon the quality and size of the images that you upload. The larger the image size the better for the big images (‘hero’ images and featured images), but if the images are too large they slow the site down.
The wide image size is dictated by the biggest screen, which is generally the ‘desktop‘ size screen. WordPress will generally handle the scaling of images to the smaller sizes.
For the large images, the width should be 2880 pixels wide. For simplicity’s sake, at this stage you can upload all images at 2880 pixels wide and let WordPress handle the scaling.
However, it’s far better to save images at the right size to suit their application – there is plenty of online help and advice – but it can become very complicated when we get into mobile and responsive screens with retina displays.
There is a great, simple guide from Divi, creators of the platform we are using here – https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi
(As you get more experience, you may want to make other images such as gallery pictures smaller, say 1080px wide).
.jpeg or .png?
The choice is not particularly important in this case. Jpegs are generally better for photographs. They scale well and are usually smaller in file size. Png files are good when sharpness is needed or when parts of the image are needed to be transparent, and allow backgrounds to show through.
How to scale images?
If you need to scale images for upload (always scale down, never up!) you may already have software on your computer to handle this – Macs’ ‘Preview‘ will scale, crop and rename images for you.
However, it’s usually easier and quicker to bulk resize images. A really useful online resource is Birme.net. You can upload images of varying sizes, set the download size and the format you need, and it will convert them and download them to your computer in a single zip folder. It will also rename and number them for you, saving a lot of work when you add them to your library.
How to Build or edit a region or destination page – a step-by-step walk through.
This section updated 19/02/2021.
The design of the region pages may require some actions that are new to you. If you hit problems call support, or get the help of a Divi developer.
However, here is a step by step walk-through, which should not be difficult for anyone familiar with the site
First check if the destination you need already exists, if not you will need to create it.
In the dashboard, go to ‘Destinations’. Check for the destination you want, if it’s not already created, fill in the boxes in ‘Add new accommodation category. Add the name – in this case we have called it ‘Demos’. Then select the Parent Category from the dropdown – in this case ‘Greece’. Click ‘Add New Accommodation Category’.
Next you need ID of the category. This applies if it already existed or if you have just created it. Find the destination in the list at the right, and mouse over it. You will see the properties appear at the foot of the page as a line of code. You just need to make a note of the category ID number as shown in the screenshot. In this case 885. You will need that later.
Now go to pages and ‘Add New Page’. Give it the title of the region. In the right hand column, under page attributes, you can select the ‘Parent’ – in this case ‘Greece’. Then click use the Divi Builder.
When the prompt opens up choose ‘Use a Premade Layout > Browse Layouts’.
Go to ”Your Saved Layouts’ and select ‘Region Page Master 2021/b’.
The editor opens up, the first thing we need to do is to make sure that this region page pulls in and displays all the correct villas for the region.
Go to the foot of the page and open up the very last text module: ‘Code to launch correct villa listing grid and information’.
In the shortcode that’s shown, you just need to edit one item – the last item that says ‘category’.
Replace the Category ID with the one you noted at the end of Step 1. In our example, 588. Take care not to change anything else and make sure you don’t accidentally delete the square bracket at the end.
Save the module.
Now go to the top of the page and click ‘Build on the Front End’, and the visual buider opens.
You should now be on familiar territory. Let’s work up from the bottom.
The display of properties at the foot is all taken care of by the shortcode you edited in step 2.
Above that are two body text modules where you can cut and paste content in the usual manner.
Above that is the subheading module – again edit as usual.
At the top of the page is the Hero section. There are just two items to edit here – the background image and the region title.
First you will want to replace the background image. Mouse over the top left of the header and the blue section menu appears. Click on the cog to open the section settings.
Go to ‘Background’ and select the blue image icon, third from the left.
Then click on the white cog icon to open the media library and select or upload your new image.
Next we just have to change the region title.
Click on the text module at the top and replace ‘Region Title’ with your text – in our example ‘Demos’.
As ‘Demos’ is is much shorter than ‘Region Title’, you will have too much space in the bounding box on the right hand side.
The design requires equal visual space at both sides, so we have to make the module narrower. To adjust the width, text settings open, select the ‘design’ tab from the top purple menu bar, and choose ‘sizing’. NB: If the ‘design’ tab is not visible, that means you don’t have the right privilege level to edit design functions and you will have to entist the help of somebody with Administrator level.
When the ‘sizing’ dropdown appears, select ‘width’.
You’ll see a slider. Moving that along you can adjust the width of the text module which contains the grey background.
The design requires equal space of approx 5px left and right. adjust the slider until you have that result.
In this example we needed to reduce the width of the background. However, there may often be the case where you have a much longer region title where you need to stretch the module to fit and avoid word breaks. Use the same technique.
A word about mobile.
It’s not common, but where you have an unusually long region title, it may need adjusting in the mobile phone view. There are many different use cases, and different decisions may need to be made to suit a title – perhaps deciding on line breaks or text size in individual cases.
If you hit an issue, we advise asking help from support or from a Divi developer.
Booking System and Calendar Basics
For detailed coverage of other areas and functions, check the documentation via the site dashboard under: Booking System Web Platform User Guide and Manual
You’ll also find most of the functions you’ll need for customisation under Accommodations>Settings.
The booking system
The system has the facility to make reservations and take bookings and payments online. Your brief was that you prefered to liaise with customers and work manually so that’s what we’ll focus on.
Adding bookings manually
When you go to add a new booking manually, the system searches and checks for the availability of the chosen villa (and for alternatives).
For a villa to show up as available, it needs three things:
1) available physical accommodations in Accommodation > Accommodations. You’ve already got that if you’ve set up a Villa (Accomodation type).
2) a pricing season for the searched dates (Accommodation > Seasons);
3) an assigned rate for the searched dates (Accommodation > Rates).
So, assuming you’ve done number one let’s do the remaining two.
We’ve already set up a basic season for you, called 2020 Season Standard. This is the basic season for the year and is obviously applicable to all properties.
(NB. we’ve also set up a dummy villa called Villa Demos that you can experiment with)
You can set up as many seasons as you want, and these are used to set different rates.
For example, you may want to set up a season called ‘High Season’. However, it will be important to to give these unique names so you can easily identify them – if they cover a whole region you may want to use ‘France High Season’ or for individual villas maybe add the name ‘Villa Demos High Season’
Setting up a new season is easy – just go to Accommodation>Seasons>Add new. Add a title bearing in mind the notes above. Then set the dates.
(NB: Before you set a rate you need to have set up your seasons.)
Go to Accommodation>Rates>Add New.
Add a descriptive title for the rate, then select the Villa from the dropdown. Click Create Rate.
Set a rate in GBP per night. Save or Update and that’s it.
You’ll see that using rates and seasons is extremely flexible. You can set any number of rates based upon different seasons.
One thing that’s important to know is that you set up a hierarchy of rates.
For example, if you set up a high season rate, that overrides the basic season rate. So, in the dashboard drag and drop that rate to be over the standard rate in your list.
If you had a winter rate, and a Christmas rate – stack Christmas at the top, above winter, above standard.
Now you’ve set up rates and seasons, adding bookings is quick and straightforward.
Navigate to the Bookings tab, Click All Bookings, and select New Booking.
Set the Check In and Check Out dates – the number of people (if known). And select the Villa/Accommodation Type from the dropdown – (you can leave this blank if you want to search for all availabilities on the chosen dates.)
Click Search, and the system will display the Villa, if available. If you have not chosen a particular Villa in the steps above, it will display all available Villas.
Tick the box next to the villa and click Reserve.
The next page allows you to put in customer details. The only required fields are the number of adults and children – this doesn’t matter for you, so you can enter anything.
The email address you fill in is where the booking confirmation email will be sent.
Those dates for that accommodation are now blocked in the calendar.
The next page you see is the booking editor. Here you can change any details including the price. You can come back to the booking editor at any time and update the status at the top right.
Importantly for your workflow, you can also enter your payments received manually on this page.