2. PERSONALISE YOUR CONTENT
IMPORTANT: Before you start adding your actual accommodations (covered in the next section), you need to prepare the base for your listings to display fully; so we recommend working through the following sections in order.
Of course you can jump straight in to adding accommodations (see ADDING ACCOMMODATIONS section) first if you wish, but please bear in mind that none of them will appear properly in the frontend until you've set up your layout and seasons as explained in this section.
- Choose your layout styles
- Customise colours, fonts etc site-wide
- Build your own layouts with Elementor
- Choose your Elementor page types
1.CHOOSE YOUR LAYOUT STYLES
Bellevue offers you some beautiful layout options for your accommodations pages, so before you start adding your rooms, you need to decide on your layouts. In the menubar of your end, under the PAGES tab, the first 2 links are:
| • LISTING STYLES – which is where you'll see options for how all of your rooms will be shown at once in some kind of a grid, on your main accommodations page | |
• ROOM STYLES – how each individual room layout will look, on its own single page. |
Have a browse through all of them in your front end, and make a note of the layouts you want to use.
TIP: Decided which layouts you're going to use? For simplicity's sake, for the time being you can simply HIDE the ones you don't want in the menubar so that it's not cluttered with things you're not going to want (you can delete or reinstall them later once you're absolutely sure you've made the right choice).
Here's how to hide the ones you don't want, from the menubar: (see following image)
Go to APPEARANCE in the left column and slide down to MENUS
You'll see all of your menu items; go to the PAGES section, and under LISTING STYLES, find the listing style(s) you want to remove from the menubar. Click on the tiny down arrow to expand it.
Simply click on the red REMOVE. And SAVE the menu. That's it!
2.CUSTOMISE THEME COLOURS, FONTS ETC
There are 3 ways to customise in Elementor: Design System, Theme Style, and Settings. The beauty of these is that they apply site-wide; so just one change that you make, will apply to all instances across your site.
The first two, Design System and Theme Style, are related, but they do serve different functions. The third setting is where you'll find specific BELLEVUE settings.
To access these settings, in any page or post, at the top of the widget panel, click on the icon 3rd from the left (it looks like 3 lines with little circles on them) which is for SITE SETTINGS.
a) DESIGN SYSTEM. Here you have the options for Global Colours, and Global Fonts; they are named according to titles like PRIMARY, SECONDARY, etc.and they are cross-referenced. So if in Global Fonts you choose the Primary font style, then when you go to Global Colours the colour you choose for Primary will apply to all of the Primary fonts.
b) SETTINGS. This is where you'll find all of the BELLEVUE settings, as well as the usual site identity, background, and layout. There you can configure all the usual WP and Elementor settings - set the theme fonts (sizes, styles and colours etc) plus settings for buttons, images and form fields across your site. You can fine-tune settings like H1 through to H6, body settings etc.
On any page
3.BUILD YOUR OWN LAYOUTS, COLOURS etc with ELEMENTOR
If you're familiar with Elementor, in the main admin panel simply go to ACCOMMODATION and open the one you want to customise by clicking on "Edit with Elementor" instead of EDIT. One of the advantages of the Bellevue theme is your access to the Visual Library - blocks, sections and even whole pages that you can simply add straight to your page just by clicking. Magic! The icon appears whenever you start a new template or new page. (You'll see the little royal blue icon with a down arrow, beside the usual Elementor icon for adding sections and widgets.)
Apart from the Visual Library, you can also move items, change backgrounds etc. as usual in Elementor. However, we do recommend using the Visual Library to add sections and even whole pages - which you can then customise afterwards to your taste using the various widgets shown in the left column in admin . You'll find the special Bellevue widgets by scrolling down in the widgets panel to the THEMOVATION sections underneath the GENERAL section of widgets.
You can see below, just some of the many Bellevue widgets available to you in Elementor under the Themovation sections and the Motopress section (Motopress is the name of the booking extension used in Bellevue); simply drag and drop them in to your layout:
And here are some of the Motopress widgets that you can drag and drop into your Elementor page:
Don't know how to customise with Elementor yet? Check out Elementor's documentation HERE.
4.CHOOSE YOUR ELEMENTOR PAGE TYPES
Go to --> Elementor --> Settings --> General, and tick the types of page you'll be using. Make sure you UNTICK the 'Disable default colours' boxes if you want your website to use the colours from your Bellevue theme.
Our recommendations are:
- Posts (checked)
- Pages (checked)
- Landing Pages
- Rooms (checked)
- Accommodation Types (checked)
- Services
- Global Templates (checked)
NEXT: ADDING ACCOMMODATIONS