Lavilla theme documentation

If you have any questions that are beyond the scope of this documentation, please feel free to email us via the contact page here.

Getting started

Here are the steps you should follow before you begin to edit the content of your site:

1. Install the theme
2. Unlock Lavilla menus by validating your Lavilla licence
3. Install HBook plugin which is bundled to Lavilla (standalone plugin).
4. Unlock HBook menus by validating your HBook licence
5. Load the demo content if you wish to start editing from there

If you wish to do some customization on Lavilla, we recommend to create a child theme so your customization won't be erase when you'll update the theme.

Theme installation

• using the WordPress installer
• uploading the theme via FTP

Using the WordPress installer

1. Go to Appearance > Themes
2. Click Add new

3. Click Upload the zip of the theme that you will have downloaded from the link provided in the email.

4. Click Choose file and select the lavilla.zip file
5. Click Install now

6. Once the theme has been installed click Activate Theme

Uploading the theme via FTP

1. Upload the lavilla.zip folder into the wp-content/themes/ folder on your server
2. Extract the lavilla.zip file
3. Once the theme is uploaded log into WordPress and go to Appearance > Themes. Find the Lavilla theme and click Activate

Child theme

• Use of child theme

  If you don't plan to make any CSS/HTML/PHP customizations, you don't need to create a child theme.
  If you want to customize Lavilla theme, you should create a child theme, o you can modify the child theme without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved. For this reason, child themes are the recommended way of making modifications to a theme.

  See Wordpress codex for more information regarding child theme.

• Creating a child

  Lavilla theme comes with a pre-made child theme. You can download it here. You will just have to install the lavilla-child.zip file or lavilla-child/ folder as if it was a theme (use the WordPress auto-installer or a FTP software).

  Now, to customize the theme, just edit the child theme and when you upgrade the theme, just overwrite the parent theme and there's no messy "recreating my customizations" process.

Theme updates

In order to add new functionalities, to stay up to date with the WordPress software evolution, to correct bugs, Lavilla theme is regularly updated.

Notifications of an update release

• At the time of the purchase, you were offered the option to be notified per email of any new release. If you opted in, you will receive an email each time an update is released
• If you wish to change your notification preferences (opt-in or opt-out), feel free to email us via the contact page here.

Update your theme

If you want to update your theme, follow these instructions:

1. Download the theme again from our Downloads page.
2. Backup your website!
   This is not compulsory but periodically backing up your entire installation (entire directory structure + database) is a good idea, especially before making any type of update to themes, plugins, core files, etc. Learn more about backups here.
3. Upload the updated theme
   
   • Rename the existing Lavilla/ folder which is in the wp-content/themes/ folder in something like Lavilla_before_update_to_version_2 (so the previous version is saved in case something goes wrong).
   • Simply follow the standard FTP Installation instructions to upload the new theme to the wp-content/themes/ folder.

Theme licence validation

You received a Purchase code in the purchase confirmation email sent from sales@maestrel.com. If you can't find it, feel free to email us via the contact page here.

In Lavilla > Licence, you will enter your Purchase code to validate your licence.

When your licence is validated, you will see that all Lavilla menus are unlocked:

HBook plugin installation

Lavilla theme comes with HBook as as standalone plugin. You can access HBook documentation here.

Installation and activation are easy and quick. Follow the steps below:

1. Go to Lavilla > Install HBook Plugin
2. Click on Install under "HBook plugin" label


3. Wait until the plugin is installed and activated.

HBook licence validation

You will use your Purchase code to unlock as well HBook menus. You can find this purchase code in the purchase confirmation email sent from sales@maestrel.com. If you can't find it, feel free to email us via the contact page here.

In HBook > Licence, you will enter your Purchase code to validate your licence.

When your licence is validated, you will see that all HBook menus are unlocked:

If you have any troubles validating your HBook licence, please refer to this article of our knowledgebase..

Demo Content Installation

You might find it handy to use the Demo site as a starting point to create your site. We have made it easy!

Note that loading the demo content will delete any previous posts or pages with their meta, sidebar settings, menus.

In Lavilla > Demo install, you will find our demo installer tool.
To load the content and options of the Demo, follow the instructions below:

1. Click on Install demo

2. A pop-up window will open, asking you to confirm. Click OK to confirm.

3. The installation can take several minutes. When it is done, a message will appear.

Booking system

The booking system that is included in Lavilla theme is our own booking system plugin, HBook.

You can find the documentation for HBook plugin here.

Page templates - Lavilla sections

This section of the documentation presents the different page templates and gives details about Lavilla sections

Lavilla offers 2 page templates:

• Default template: this is a full width one centered column template. With this template, you can use Lavilla sections and you can as well include a booking form within the hero.
• Page with sidebar: this is a page with a sidebar on the right

Lavilla theme comes with a a choice of sections that will allow you to build your pages easily by choosing and arranging different sections. It is a great tool for you to build a variety of pages with simplicity. Each sections comes with its own settings and they are described below.

If you wish to use Lavilla sections in a page, simply set it in Page sections:

1. Set that you wish to use Lavilla sections for this page
2. You can select which sections you wish to add
3. Here you can expand or collapse the section settings

1. You can use several times a same section type.
2. You can re-order the sections to your taste by dragging and dropping.

The different sections you can pick from are as follow:

• Pages
• Accommodation
• Text + Image/Video
• Testimonials
• Posts
• Gallery
• Map / Contact
• Custom content
• Editor content

Pages

This section is a 2 or 3-columns section, which can be used to display different information contained in Pages.

1. Add a tagline for the section
2. Add a title for the section
3. Select if you wish to shift the content up which means that part of the content will be displayed with the background of the previous section.
4. Enter the ids of the pages you wish to display
5. You can choose between 3 layouts:
   • diamond: 3 columns layout on desktop, with the featured image in a diamond shape
   • basic: 3 columns layout on desktop with classic featured image design
   • alternate: 2 columns layout on desktop with alternance left/right
6. Select which pages you wish to display
7. Select if you wish to display the content of the page or the excerpt
8. Select if you wish to display a button Learn more
9. Select if you wish that the title include a link or not. The link can redirect to the page or show the image full-size.
10. Decide if you with to show this section with a colored background or not
11. If you set the above to "No", you can set a background image for that section

Accommodation section

This section allows you to display your accommodation types. The featured image, along with the title and the hero tagline of the Accommodation type post.

1. Add a tagline for the section
2. Add a title for the section
3. Select if you wish to shift the content up which means that part of the content will be displayed with the background of the previous section.
4. Select the accommodation types you wish to feature
5. Decide if you with to show this section with a colored background or not
6. If you set the above to "No", you can set a background image for that section

Text + Image/Video

This section is a two colomns layout on desktop. It is built with a text area on the left column and you can have either an image or a YouTube video on the right column.

1. Add a tagline for the section
2. Add a title for the section
3. Select if you wish to shift the content up which means that part of the content will be displayed with the background of the previous section.
4. Enter your text
5. Add an image : it will be displayed either as an image or used as the background image of the video
6. If you wish to show a video, enter the YouTube video id
7. Enter a ratio for the video (example: 16/9, 3/2, etc...)
8. Decide if you with to show this section with a colored background or not
9. If you set the above to "No", you can set a background image for that section

Testimonials

This section is aimed at displaying testimonials. It has different layout and navigation options.

The testimonials are created in Lavilla > Testimonials menu. Check this section of the documentation for detailed information.

1. Add a tagline for the section
2. Add a title for the section
3. Select if you wish to shift the content up which means that part of the content will be displayed with the background of the previous section.
4. Select the layout for the navigation between testimonials: it can be with bullets or thumbnail
5. Choose which testimonials you wish to feature
6. Decide if you with to show this section with a colored background or not
7. If you set the above to "No", you can set a background image for that section

Posts

This section is a three columns layout on desktop to dislplay a list of your last posts: it will show the featured image, the excerpt and a "Read more" button to go to the post.

1. Add a tagline for the section
2. Add a title for the section
3. Select if you wish to shift the content up which means that part of the content will be displayed with the background of the previous section.
4. Enter the number of posts to be displayed.
5. Choose which category/categories of posts you wish to be displayed
6. Decide if you with to show this section with a colored background or not
7. If you set the above to "No", you can set a background image for that section

Gallery

This section allows you to display a gallery of images with an introduction text.

1. Add a tagline for the section
2. Add a title for the section
3. Select the layout: landscape, portrait or square.
4. Select if you wish to use staggered rows here
5. Select the images for the gallery section
6. Decide if you with to show this section with a colored background or not
7. If you set the above to "No", you can set a background image for that section

Map / Contact

In order to display maps on your website, you need to :

1. get a Google API key. Please refer to this page: Get API Key
2. enter the Google API key in Appearance > Customize > Map. Please check this section of Adomus documentation.

This section is a one or two-columns section that can display a contact form, a map or/and contact information. The layout options are:

• contact form and a map
• contact information and map
• contact information and contact form
• a contact form only
• a full-width map

1. Add a tagline for the section
2. Add a title for the section
3. Select if you wish to shift the content up which means that part of the content will be displayed with the background of the previous section.
4. Select the layout
5. Select the positionof an element (Map, Contact) depending on the layout chosen
6. Enter here your contact information (if selected in the layout)
7. Select the type of map to display
8. Add the zoom for the map
9. Enter here the latitude of the first point
10. Enter here the longitude of the first point
11. Add the caption text
12. Click here to add another point and proceed the same way
13. Click here to delete a point for the map
14. Decide if you with to show this section with a colored background or not
15. If you set the above to "No", you can set a background image for that section

The contact form display the fields as set in Contact menu.

Editor content section

If you wish to display the content of the default editor of the current page or of any other page/post, use this section.

1. Add a tagline for the section
2. Add a title for the section
3. Select if you wish to shift the content up which means that part of the content will be displayed with the background of the previous section.
4. Set if you wish to use the content of another post/page that you wish to include here. In that case, you will add the id of the post/page.
5. Set if you wish a centered or full-width layout
6. Decide if you with to show this section with a colored background or not
7. If you set the above to "No", you can set a background image for that section

Custom content section

If you wish to display custom content, use the editor of this custom content section.

1. Add a tagline for the section
2. Add a title for the section
3. Select if you wish to shift the content up which means that part of the content will be displayed with the background of the previous section.
4. Add your custom content here
5. Set if you wish a centered or full-width layout
6. Decide if you with to show this section with a colored background or not
7. If you set the above to "No", you can set a background image for that section

Hero options

This section of the documentation presents the different options Lavilla offers for the hero.
It deals as well with hero booking form options.

• You can choose from the following hero types:
  • an image
  • a slider
  • a title only
  • a custom hero


• Post and pages have a section where you can set your hero options.
  1. Select the type of hero: image, slider, title or custom
  2. Choose if you wish to display the hero full screen or not
  3. Choose if you wish to display the title of the post/page
  4. You can add a tagline
  5. You can add an alternative title to be displayed instead of the post/page title
  
  
  For hero type as image and slider, you will have as well the following options:
  6. Enter a ratio (example: 16/9, 3/2, etc...)
  7. Enter a minimum height for the hero
  8. Enter a maximum height for the hero

An image as a hero

If you wish to have an image as hero, you can either use the featured image or another image.

• If you wish to use the featured image, you do not have to change anything
• If you wish to use another image, click on Add image to open the media library

A slider as a hero

If you choose to have a slider as a hero, just select which slider you wish to have.

For more detailed information regarding the Sliders, see here.

A custom hero

You can choose to have a custom slider ; you will enter a shortcode to be executed.

Hero booking foom

• With the default template you can have a booking form in the hero.
  1. Indicate if you wish to display a booking form
  2. Enter the id of the main booking page.

The main booking page will need to have a [hb_booking_form] shortcode either in the editor content or in a custom content section if using Lavilla page sections.

Sliders

You can manage Sliders in the menu Lavilla > Sliders

• The Sliders page is straightforward:
  1. Click Add a Slider to create a new slider
  2. Click Edit Slider to edit a slider
  3. Click Delete Slider to delete a slider
  4. Do not forget to Save all your changes


• Each slider has the following settings:
  1. Enter the name of the slider
  2. Set if you wish the slider to autoplay
  3. Set the duration of the display of each slide (in miliseconds)
  4. Set the duration of the transition between slides (in miliseconds)
  5. Choose the transition style
  6. Click this button to add a slide before the first slide
  7. Add a caption to the slide
  8. Click this button to delete the slide
  9. Click this button to add a slide after the last slide

You can re-order slides by dragging and dropping.

Testimonials

You can add testimonials in the menu Lavilla > Testimonials

• If you want to add a testimonial, follow the instructions below:
  • Click Add New.
    
    
  • Fill in the new testimonial post:
    
  2. Enter a title for your testimonial
  3. Use the editor to enter the content
  4. Enter the author's name
  5. Enter the author's location
  6. You can add a featured image and it will be used as a thumbnail
  7. Don't forget to Publish!

Contact

In this section of the documentation, you will find information regarding the display of:

• your contact details
• a contact form

Contact details

In the menu Lavilla > Contact details, you will be able to set your contact details information (phone, email, etc...).
In Appearance > Widgets, you can add the widget "Contact Details". It means that you can add contact information in the header, footer or sidebars.

Please refer to Widgets areas section of the documentation.

Contact form

In the menu Lavilla > Contact Form, you will be able to build your contact form and to define the email settings.
This information will be used:

• when you display a contact form with the section Contact / Map section
• when you use the [hb_contact_form] shortcode which allows you to display a contact form anywhere on your site.

Form builder

• Add any type of field: Text, Email, Number, Text area, Select, Radio Buttons, Check Boxes, Title, Explanation.
• Items can be reordered by dragging and dropping them

Privacy policy, Terms and conditions

• You can set if you wish to display a Terms and conditions checkbox.
• You can set if you wish to display a Privacy policy checkbox.

If you wish to modify the text to include a link to your Privacy policy page or to your Terms and conditions page, you can do so in Lavilla > Theme strings. Please refer to this article of our knowledgebase for further details.

Email settings

1. Indicate here your email address so you receive an email with the message sent by the cutomer with your contact form.
2. Set if you wish to send as HTML (i.e your email body is written in html) or text

For each of the field used to build your contact form, you will find a corresponding variable ( ex: [contact_name] ). You can use them in all fields below.

3. Indicate the Reply-to: you can use the variables for the customer email and name. If you leave it empty, it will use the "From" as recipient when you will reply to the email.
4. Indicate the From: here you can as well use variables for the customer email and name. If you leave it empty, it will be sent from the WordPress admin email adress.
5. Indicate the Subject: here you can use any variables listed
6. Add the content of your message

Customizer

You can access to the customizer from the menu Appearance->Customize. The customizer has different sections:

• Site identity, Menus, Widgets, Homepage settings, Additional CSS are not specific to Lavilla theme
• Logo, Header, Hero, Typography, Map and Colors are explained below

Logo

In this section of the customizer, you can add your logo:

1. Select the image for your logo. Leave it empty if you wish to diplay your blog title.
2. Choose the logo height
3. Choose the small logo height that will be used in narrower devices

Header

In this section of the customizer, you can add your logo:

1. Set the header height
3. Set the small header height that will be used in narrower devices

Hero

In this section of the customizer, you can add your logo and set the default settings for the hero:

1. Choose the default hero image

The following settings are here to help you adjust the responsiveness of the hero.

2. Choose the default hero ratio: this is the ratio between width and height
3. Choose the default hero minimum height : it means that the hero image will never be smaller than this height.
4. Choose the default hero maximum height: it means that the hero image will never be bigger than this height

Note that you can override the default settings for a post or a page. Please refer to Hero options section of the documentation.

Typography

Here you can change the font for the headings and the body. It is pretty straightforward:

Map

This section allows you to enter the Google Map API key which is needed for the maps to be displayed.

To get you Google Map API key, please refer to this page: Get API Key.

Colors

Here you can select a skin: blue or green. This will load our suggested color scheme. But you can change the primary color, the seconday color, the gradient color 1 and the the gradient color 2:

Widgets areas: header, footer, call to action, sidebars

In Appearance > Widgets , you will see :

1. Lavilla widgets
2. Lavilla areas for widgets

Lavilla widgets

Lavilla adds 2 new widgets to the list of available widgets:

• Contact details :

  This widget will display some of the information set in Lavilla > Contact details. You can decide which information you wish to display and if you wish to link the text to a page.

  For example, you may wish that a click on your postal address bring your visitor to a "Location/Directions" page or that clicking on the email redirects him to your "Contact" page, etc...

  Please refer to this section of the documentation to learn more about how to set your contact details information.

• Call to action: it will display a text with tagline followed by a button.

Lavilla widgets

Lavilla add various areas where you can add widgets.

• Sidebars:
  • Blog pages sidebar
  • Accommodation pages sidebar
  • Pages sidebar
• Top header: there are 2 areas - one on the top-left and another on the top-right corners
• Footer areas
  • the footer call to action: this is a full-width display right above the footer columns
  • the footer columns: these can be either 2, 3 or 4 columns
  • the bottom footer: there are 2 areas below the footer columns - one on the bottom-left and another on the bottom-right corners

Strings customization and translations

In the menu Lavilla > Theme strings, you will be able to easily customize or translate all strings of Lavilla theme. If your website is in a different language than English or if you have a multi-language plugin, you will be able to translate each string in all languages.

You will find a list of front-end strings that can be customized or/and translated.

Multi-language

In order to create a multi-language website you will need to use a multi-language plugin. There are several multi-language plugins available. Lavilla theme is compatible with WPML and Polylang.

Translate Accommodation pages with WPML

Once you have activated and configured WPML plugin you need to make the "Accommodation Custom posts" translatable.

1. Click Translation options
2. Select Translate
3. Click Save

You can now translate the Accommodation pages. Note that you don't have to enter the Accommodation settings in the translated page again (except the Description fields).

Translate Accommodation pages with Polylang

Once you have activated Polylang plugin you need to make the "Accommodation" translatable.

1. Click Languages to access the Polylang setting page
2. Check the Accommodation box
3. Click Save Changes

You can now translate the Accommodation pages. Note that you don't have to enter the Accommodation settings in the translated page again (except the Description fields).

For the translation of the text displayed during the booking process, refer to this section of HBook documentation: Text customization and translation.

Theme translation

Lavilla theme follows the standards of WordPress internationalization. Below are instructions on how to translate Lavilla theme with Poedit.

1. Download and install Poedit
2. Open the Lavilla/languages/default.pot file in Poedit
3. Create your .po and .mo files by going to File -> Save as...: choose the wp-content/themes/Lavilla/languages/ folder and add the correct locale to name the file name (for example for a French translation: fr_FR.po)
4. Translate the strings you will use on your website
5. Save again to update the .po and .mo files