HotelM4 - HTML5 Hotel Template Review Part 1

When traveling around (as I recently do a lot) one of the essential parts of planning gets to be picking up the place you’ll be using as home away from home taking a few hours to rest during the day, having a breakfast maybe and most certainly – spending the night. No matter if it comes to a business trip or just a quick weekend getaway the thin line between a pleasant and successful journey and a small disaster is often the pick of the appropriate hotel.

But how could we possibly know if a place is clean, pleasant and affordable in advance and furthermore – about its very existence when we travel? There probably were times when the tired traveler just asked in the local bar where people go spending the night but these are gone long ago – now we use the Net – we are so used to looking up pretty much everything there that it would not surprise me if someone types “Where are my socks?” in the search field expecting a meaningful answer. I actually did that for the sole experimental purpose and had a few moments of a pure laugh since there was quite a lot discussion on the topic found.

Anyway – the best way picking up the place to stay when on a business trip or a vacation is nowadays the Internet – we look up hotels there as well as all kinds of other stuff. That’s the way we can make our impression of it without actually being there, get familiar with the conditions, rooms availability and even contact the management to make a reservation. The good-looking informative and appealing hotel website is now as important as the clean lobby and high ratings in the traveler’s portals are in the modern hotel business. Once the visitors see a good rating in a portal they often go check out the place’s website to learn some more and this is often when the crucial moment of decision to contact the place for further information/reservation or not.

The good hotel website always matters.

However, in case you are in the hotel business who else knows your place and services best than you do and is it easy to trust someone else building a site for you dedicating your efforts and time getting them familiar with the details first, monitoring and revising the details later on wasting time and money as the process goes along? The business is hard and time and efforts consuming the way it is without his extra obligation. The pick of the right agency is always a gamble and I’m sure at least some of you reading this already had their first hotel websites have thought it would be much easier of they took the time learning how to and doing it themselves – especially when it comes to updating something a few months after the launch.

So here comes the good news and you better believe it – there is now a tool that allows pretty much anyone with a normal computer literacy spreading to writing a document and sending an email with an image attached to briefly and conveniently create an up to date looking website for them or their business. Furthermore, this tool is free of charge and with the various themes following different consistent design lines serving a specific purpose the web design process comes to be not only straightforward and easy but even fun!

The application I’m talking about is called the Mobirise Mobile Web Builder and if you look it up (just like a traveler would look up for your hotel) you will find quite a lot written about it around the Net already, and the main program web and Community forum are quite informative as well so I won’t bother you with repeating what’s already been said here. Instead over here we are going to take a bit more detailed look at the Mobirise Builder theme especially developed for meeting a modern hotel’s needs, presenting the place and its services the best way possible and giving the regular owner or manager the chance to cut down time end efforts creating amazing hotel website on their own.

This amazing new theme is called HotelM4 HTML5 hotel template (M4 suffix comes to show this is the fourth generation of Mobirise Builder theme, powered by the latest Bootstrap v4 technology and fully compatible with elements of all the rest great additions to the m4 family – we’ll cover this a bit more in detail later on)

HotelM4 hotel HTML template provides a subtle and sophisticated looks and powerful features for presenting not only a place’s grace and comfort but also showcasing all its features also giving the potential clients all the information they will ever need in advance in order to make the best decision and even more – the HotelM4 HTML5 hotel template does it in a gentle and interesting way grabbing the attention from pretty much the first look at it with its grace and well thought balanced appearance. Just like most of the great hotels I have been happy to visit in time a website created with it provides the feeling of comforting lux as a background for a humble hospitality and care. What maybe impressed me most about this is exactly this - the balance. It is a work of art achieving a balanced shiny appearance without too much sparkle spoiling it.

It’s pretty easy even for the total beginner in web design to create an impressive hotel page with the HotelM4 hotel HTML template since the order of the blocks in the Blocks Palette itself kindly gives you a tip about which elements should come first and which – a bit later without restricting your creativity in any way in case you decide going outside the box and attempt a bolder approach.

And for the Experienced Mobirise Builder users the hotel html template comes a precious addition to the blocks armory already in their possession with the new approaches and blocks which could not be found in any rest of the M4 family – there are forms with date picker elements, features blocks with adjustable image height, image and text switching sides card layouts and many more which can be easily used for not only serving the particular purpose the html5 hotel template is up to but in any other project for creating a really rich and powerful looks.

Regarding

Fonts and headings

The predefined font set in the HotelM4 HTML5 hotel template is legible and gracious without being too pretentious. The slab serif Gilda Display font by Google for the headings nicely works along with the clean and sharp Roboto for the text and menu items. When it comes to reliability and service it kind of fits in place aiding to the whole theme impression. Can be changed through the Styles panel though with any other font in the Google fonts database with just a single click, no matter at the beginning or in the middle of the project development phase and the change gets reflected all along automatically. It is as the blocks order in the palette a good hint on what to aim for thought.

Pretty much following the lead of the CommerceM4 theme released just a day earlier the HotelM4 hotel HTML template has this cute Subheading/Heading place reversal with the smaller caption preceding the main one. Inline CommerceM4 though over here this approach has been used for building a strong bond with the hotel’s brand since the hint is given is the hotel name should be subtle taking place as subheading – pretty much like it does all around once you actually visit a bit high-level places where the place name comes branded on all kinds of tiny stuff. This feature as all rest is highly customizable so you can easily go on without it turning it off from the Block’s Properties panel, change the text and separator line’s color or override the subtle appearance making the element called subtitle be the actual heading by just altering the text style.

And when it comes to

Customization

There isn’t pretty much anything that can’t be customized with this hotel HTML template – starting from the trivial for the regular Mobirise Builder user block solid color, image or video backgrounds optionally overlaid with an adjustable in opacity semitransparent color, going through the presence and appearance of the tiniest items like the like the separator dashes which are indeed tiny but in my humble opinion a significant part of the HTML5 hotel template’s overall apparel and finishing with some innovative features like setting up the feature image’s heights, choosing either an image should have an overlaying color and caption and a zoom effect on hover or not – if you could think something could be looking differently or should be switchable on/off in the block – rest assured this has been already thought of the theme’s development team and the appropriate control takes place in the Properties panel waiting for your decision.

The layouts

Used in the HTML5 hotel template’s blocks are both boxed up to 1140px as the Bootstrap 4’s xl tier limits the container max width and full width taking advantage on all the space available on the screen so multiple different appearances could be achieved. Frankly as I moved on to a bit wider screen recently (after all Bootstrap framework has been built having mobile first in mind but let’s not forget still at least half of the page views are done though the good old desktop and laptop computers) I was initially thinking the 1140px container width limitation might be a little too narrow to display but after spending some time exploring different sites, including what could be done with HotelM4 HTML5 hotel template I got to the conclusion this limitation is actually a plus since placing a particular piece of content surrounded by a large free space or a strong background image aside makes it rather pop up and drag attention and it most definitely does not look too small. Amazing as it is – we often seem to forget how powerful the negative or empty space can be for focusing viewer’s attention. Of course – everything should be used timely and with the proper measure.

The HotelM4 hotel HTML template provides a wide variety of full-width layouts as well which are also well thought to display best on screens big and small automatically rearranging its content making it fit best accordingly.

And of course – in case you are pretty certain or just want to experiment on all possible variants switching boxed for full-width layout – just look up the container class inside the block’s code and replace it with container-fluid for easy switching the layout. This functionality actually comes built in some of the blocks and where it isn’t for a reason – not making the block’s Properties panel unnecessarily complicated for example – due to the beauty of the way Mobirise v4 blocks are being constructed you can easily add it yourself by just looking up the proper example in the Community forums. But let’s not dig too deep with the code in this one and rather pay attention to what comes with the theme out of the box.

The truth is

HotelM4 HTML5 hotel template isn’t just beautiful but full of functionality presented in a beautiful way

This comes to be seen from the theme’s very first block holding the innovative one-click adjustable date picker form which can be easily used by potential visitors for sending an inquiry about free rooms and goes on further pretty much until the final block in the theme’s palette.

Along with the site’s navigation structure, the navbar or top menu element also holds live links to all the place’s contact details making it possible to dial a number or start typing an email with a single click automatically launching the appropriate application. The space of the element you could set up to be appearing on top of your page can also be used for placing the useful preset call to action buttons the potential guests could easily use to book a room at any step of browsing your page as well if you wish it to.

A clever block thoughtfully utilizes the screen space providing you with adjustable in height (including the option for taking the entire viewing device’s screen) appealing image with some texts on it also hiding a video which gets triggered full screen once the visitor clicks on a button – saving both screen space and unneeded server load.

Another cool way setting the focal point on what you feel fit is the ingeniously thought type/delete/retype intro block where the texts you define are constantly being changing as if someone types them as the visitor looks at the page. Considering the vast integration of the messaging services in our everyday life this little pinch of interactivity immediately grabs the attention making the site using it look up to date and fancy. And since as we talked everything is customizable here – you can even pick up the color of the element underlining the animated text end even to either have it underlined or not

When it comes to checking out places people prefer rather

seeing than reading

I guess that’s why many of the features blocks in the HotelM4 hotel HTML template are rather visually oriented. After all – an image is worth a thousand words (no matter how worn out it sound that’s the truth itself! )

So, when it comes to presenting features expect plenty of image placeholders heavily spiced up with appealing visual effects and a space to place a few appealing words helping the image better tell its story – that’s exactly what it takes for an appealing presentation easy to get even if the visitor briefly scrolls the site down. Additionally – in Mobirise Builder each image can be easily assigned a hyperlink functionality leading the visitor in another direction if needed. What has always bothered me with this is Will they actually get this isn’t just an image but also a link and will they figure clicking on it will actually do something? This doubt has been cleverly overcome with a simple but clever effect – once hovered the feature images here quite often have an extra effect making them slightly zoom in once the users hover them with their mouse. This way it’s not only more interesting but also easy to get if you click on the image it will zoom you even further to whatever takes place there, or in other words – lead you to some page with more detailed information about the particular feature.

Browsing through the blocks palette we easily come to also spot

Hotel business specific blocks

Combining inside not only a general feature description as text but for example, rooms showcase with the particular parameters and prices – both in the mentioned above image-oriented layout