Design Escapes – A Vacation Rental Theme Package for YOOtheme Pro

Franziska and Pawel
March 17, 2021
Themes

The spring is here, and since we are all eager to go on a vacation, we created a vacation rental website. Say hello to Design Escapes – our new theme package for WordPress and Joomla. It's perfect for apartments, houses, hotels or other vacation rentals. Design Escapes showcases all the latest YOOtheme Pro 2.4 features like the panel slider and custom map markers and clusters. There are layouts for tags, search, author and error pages. Design Escapes comes with 15 content-rich page layouts, great looking styles and a well-thought-out content structure. Excited? Let's take a look.

Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.

Page Layouts

Design Escapes breaks our layout record with its 15 (!!) new layouts. They can easily be loaded from the layout library with just a click. Here is a walk-through of all the highlights.

Home

Accommodation Index

Accommodation Category

Accommodation Post

Landing Page

Discover

Discover Country

Map

About

Post Index

Post Category

Post

Author

Error 404

Page	Type	Description
Home	Page	The Home page starts with a slideshow of featured accommodations followed by latest homes shown in a panel slider and an about section. Latest accommodations from a handpicked topic are presented below followed by a teaser section for all the different topics. The page ends with a call to action section and latest blog posts.
Accommodations	Template	The Accommodations page shows a list of all accommodations in a three-column layout. The sidebar on the right shows a navigation to filter accommodations by country, different topics and accommodation types. Btw, Design Escapes is the first theme package for YOOtheme Pro that uses tags to filter posts. Besides the country categories, there are two tag taxonomies, the Discover tags and the Accommodation Type tags.
Accommodation Category	Template	The Accommodation Category looks the same like the Accommodations page, but it has a subnav with subcategories to filter accommodations by region.
Discover	Page	The Discover page teases all countries and topics visually and therefore provides an alternative starting point to browse accommodations. It shows all countries in an overlay slider with links to dedicated pages to discover the country. Next comes a full list of discover tags and a contact section.
Discover Country	Page	Following the same principle, the Discover Country page is not simply showing all accommodations, but rather highlights specific regions and topics which fit the country. It shows latest accommodations from two popular regions in a panel slider, followed by three sections of handpicked topics with their latest accommodations. The page ends with related activities as well as the list of all country regions.
Accommodation Post	Template	The Accommodation Post page starts with an overlay slider showing accommodation photos. There is a floorplan button positioned on top of the slider that opens a PDF file in a modal. The post itself has a two-column layout with the content on the left and details, contact, location and host information on the right. There is a full width map of the house location at the bottom as well as related activities and nearby restaurants. The post ends with related accommodations from the category.
Accommodation Landing Page	Custom Post	Accommodation Landing Page is an example of how an external landing page could look like. Unlike the page before, it's an image-rich case study describing the accommodation and its rooms in detail.
Map	Template	The Map page is yet another starting point to browse accommodations. It shows an interactive map filling the whole viewport with markers for all accommodations.
About	Page	The About page shows the information about the company and its values. There are sections for media references, the founder story, contact information and FAQs.
Blog	Template	The Blog page shows the latest news and inspirations in a three-column layout. The first post is prominently shown at the top, and there is a subnav to filter posts by category.
Post Category	Template	The Post Category page looks the same as the page before, but without the prominent post at the top.
Post	Template	The Post page starts with the title, meta information and the image followed by the post content. Author information as well as related accommodations are shown in the sidebar on the right while the latest posts are at the bottom.
Author	Template	The Author page starts with the name, image, description and links to social media profiles. It is followed by all author posts displayed in a three-column layout.
Search	Template	There is also a Search page with the search form at the top. The search results are also shown in a three-column layout. The sidebar on the right shows a navigation to filter accommodations by country, different topics and accommodation types.
Error 404	Template	Finally, Design Escapes has a fun 404 Error page with a link back to the home page.

Map

The main highlight of Design Escapes is the Map page. It shows an interactive map filling the whole viewport with markers for all accommodations. We've created a custom icon for the map markers which matches the style of the website. The map also uses marker clustering to simplify the display of all accommodations on the map. Again, the cluster marker has its own custom icon. Clicking the marker will show a popup with the title and image of the accommodation as well as the link to category and a number of guests.

Map Cluster

Each accommodation has its own map showing nearby restaurants and activities which also have their custom markers. And thanks to the new location field in Joomla, picking them was no problem at all.

Custom Map Marker Icon

Style

Design Escapes has a versatile flat style with nature-like colors that accentuate the vacation topic. Thanks to filled and outlined cards and buttons, you can decide how much color you want your website to have. The combination of fully rounded UI elements together with sharp edges on the cards and restrained Sans-Serif font gives the website a playful but still elegant look.

In addition to the default style Design Escapes comes with 5 other style variations, each with a different beautiful color scheme. There are green, blue and red styles, mostly with a white background. You can switch the whole look and feel of your website with just a click. Simply choose what fits your website best!

Light Blue

White Darkblue

White Darkgreen

White Green

White Red

Animated SVG Images

Another highlight of Design Escapes are animated SVG images. They are clipped by the path representing the logo, so they have a high recognition value all over the layouts. The images are slightly animated using the Parallax component from UIkit, and they rotate when scrolling which adds a nice dynamic effect.

Handcrafted Icons

We also designed illustrations specifically for Design Escapes. They are used to show different accommodation amenities which are necessary for any rental or hotel website. Of course, you can change their color and use them with any style.

Let's go over a more technical aspect of the theme package.

Content Types and Custom Fields

Design Escapes comes with a fully functional demo website with 4 content types in addition to the default post – accommodation, activity, host and restaurant.

Accommodation

Accommodations are grouped into different countries and further divided by regions. Accommodation categories have 5 custom fields used to show them on other pages as well as show related activities.

Category Field	Type (J)	Type (WP)	Description
Image	–	image	Hero image for the category page
Intro Image	media	image	Intro image used to tease the category
Intro Image Alt Text	text	text	Intro image alt text
Intro Image BG Text Color	list	select	Text color depending on the intro image color
Related Activities	articles	post object	A list of related activities

Since in WordPress tags have no image fields like in Joomla, we also added image custom fields for the Discover tags.

Tag Field	Type (WP)	Description
Featured Image	image	Hero image for the tag page
Intro Image	image	Intro image used to tease the tag

The Accommodation content type has 26 custom fields. This includes fields for amenities, number of rooms, location, directions, images to show the accommodation on other pages as well as related activities and restaurants among others.

Accommodation Field	Type (J)	Type (WP)	Description
Intro Image	-	image	Intro image used to tease the accommodation
Teaser Title	text	text	Alternative accommodation title
Teaser Image BG	media	image	Alternative image to tease the accommodation
Teaser Image BG Alt Text	text	text	Teaser image alt text
Images	repeatable	repeater	A list of accommodation images with image and image alt text fields
Content Images	repeatable	repeater	A list of accommodation images with image and image alt text fields used in the content
Guests	integer	number	Number of guests
Bedrooms	integer	number	Number of bedrooms
Bathrooms	integer	number	Number of bathrooms
Double Beds	integer	number	Number of double beds
Single Beds	integer	number	Number of single bends
Sofa Beds	integer	number	Number of sofa beds
Floorplan	media	image	A link to the floorplan
Website	url	url	A link to the accommodation website
E-Mail	text	text	Accommodation email address
Location	location	Google Map	Accommodation location
Address	textarea	text area	Accommodation address
Directions	textarea	text area	Navigation directions
Host	articles	post object	The accommodation host
Amenities	checkboxes	checkbox	Accommodation amenities
Characteristics	repeatable	repeater	A list of characteristics
Architecture	textarea	text area	Accommodation architecture
Sustainability	textarea	text area	Accommodation sustainability
Area	textarea	text area	Accommodation area
Related Activities	articles	post object	A list of related activities
Related Restaurants	articles	post object	A list of related restaurants

Activity and Restaurant

The Activity and Restaurant content types have the same 4 custom fields for the description, link and location.

Activity Field	Type (J)	Type (WP)	Description
Intro Image	-	image	Intro image used to tease the activity or restaurant
Description	textarea	text area	Activity or restaurant description
Link	url	url	A link to the activity or restaurant page
Location	location	Google Map	Activity or restaurant location

Host

The Host content type has 3 custom fields for the description and related accommodations.

Host Field	Type (J)	Type (WP)	Description
Intro Image	-	image	Intro image used to tease the host
Description	textarea	text area	Host description
Related Accommodations	articles	post object	A list of related accommodations

Post

The default Post has 2 custom fields for an intro image as well as to show related accommodations.

Post Field	Type (J)	Type (WP)	Description
Intro Image	-	image	Intro image used to tease the post
Related Accommodations	articles	post object	A list of related accommodations

Author

In Joomla the User has 4 custom fields to display the avatar, biography and social media links while in WordPress these fields are available by default.

User Field	Type (J)	Type (WP)	Description
Image	media	-	User image
Image Alt Text	text	-	User image alt text
Description	textarea	-	User biography
Socials	textarea	repeater	The links to social media profiles

Free Quality Stock Images

Design Escapes comes with more than 320 lovingly curated and free-to-use images. They can be found in the Design Escapes collection in the Unsplash library.

More than 320+ lovingly curated and free-to-use images

3rd Party Integrations

The Joomla and WordPress demo websites make use of several 3rd party plugins. We support Advanced Custom Fields, Toolset, Custom Post Type UI, WordPress Popular Posts, the Regular Labs Articles Field and more. For more information on all pre-installed and activated plugins, take a look at the installation documentation for Joomla and WordPress. Mind that with this theme package release we replaced the Powerful Posts Per Page plugin with the Advanced Posts/Page plugin. It had the same features, but additionally you can set the number of posts per page for the search, author and date archives.

So these are the features of our new Design Escapes theme package for Joomla and WordPress. Now go ahead and explore it yourself. As always, let us know what you think in the comments below.