General

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‘.

Media

This is where the media library lives, where all your images and other files are stored and can be uploaded to.

Pages

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.

Accommodation

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.)

Bookings

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 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.

Step 1.

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

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.

Step 3.

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.

Step 4.

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.

Step 5.

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’ or ‘Villa Viti’. 

Select ‘Use this Layout’ NOT  ‘Edit this layout’.

NB. changes have been made to these instructions recently (2023)

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.

Step 6.

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.

Step 7.

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.

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. 

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.

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.

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

Step 1.

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.

Step 2.

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’.

Step 3.

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.

Step 4.

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.

Save.

Step 5.

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.