template – Page 3 – ThemeGoods Documentations

Design single accommodation page using Elementor

First please check below checklist in order to use this features.

Required Hoteller version 3.0 or higher
Install and activate Elementor and Hoteller Theme Elements for Elementor plugins before you proceed.

Activate Elementor for accommodation type post.

Please navigate to Elementor > Settings > General > Post Types and make sure you check “Accommodation Types”

Editing single accommodation page content Elementor Page Builder

From Accommodation > Accommodation Types and select accommodation type you want to edit using Elementor.

Then edit the accommodation type with Elementor page builder.

Select “template” option in “Post Attributes” meta box on the right sidebar to “Elementor Cavas” so it’s using blank template to design all contents.

It will open Elementor page builder editor page which you can use its drag&drop interface to create footer content. You can view detailed documentation about how to use Elementor page builder here.

Import Demo Single Accommodation Templates

Click “Add Template” button and select “Pages” section. Then search for “Single Accommodation” for select box option.

You will see list of predefined templates there. Select one you want to import and click “Insert”.

Setting up header & navigation menu using Elementor

First please install and activate Elementor and Hoteller Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

Setting up header & navigation menu using “Header Content” which build using Elementor page builder. It provides more flexibilities to fully customize main header content & layout.

First please navigate to Appearance > Customize > Navigation > General > Display Header Content From and select “Header Content”

Then look at “Default Header Content Settings” section.

Default Header Content – Select default header content for general pages & posts
Default Sticky Header Content – Select default sticky header content for general pages & posts
Default Transparent Header Content – Select default transparent header content for general pages & posts

You can select each header content options from your current header posts. However if you don’t create anything yet. Please follow below instructions.

Create header content posts

We are using Elementor Page Builder plugin so you can use its drag&drop user interface to create your header contents.

Please navigate to WordPress Dashboard > Headers > Add New Header. Then enter its title and click “Edit with Elementor” option.

Now you will open Elementor page builder editor. You can import demo header by clicking on template button.

It will open a popup box. Click on “Blocks” tab and filter only “Theme Navigation” option. Then select header you want to import by clicking “Insert” button.

Elementor will ask to connect Elementor to your website. You have to create Elementor account and connect it to your website within this process (If you have already connected to Elementor. You can skip this step).

Once it’s imported successfully. You can customize menu columns, contents including social icons, buttons, logo image etc.

Adding Navigation Menu Widget

If you want to display your custom menu which you have already created it in Appearance > Menus. Simply select “elements” tab and search for “navigation”.

You will find “Theme Navigation Menu” widget there , drag it to where you want to display on the right side.

Then you can customize its options including typography, margin etc.

Adding Side/Mobile Menu Link

You can use widget such as b

utton to add link to mobile menu. By adding CSS ID “elementor_mobile_nav”. Please see below example of using button widget.

Setting up Header content to pages

Once you save all changes for header content. There are 2 options to set it up to pages.

First you can select it as default header content for all pages via Appearance > Customize > Menu > General > Default Header Content.

Second you can overwrite default footer content on selected page using Page option > Page Header.

What’s the different on each header state (sticky, transparent headers)

Our theme offers 3 header & navigation states. You can setup 3 different header posts for each states using above method. Please see details below about explanation of each states.

Page Header – Select this page header content for default page header state
Page Sticky Header –Select this page header content for sticky page header state which displays when users scroll down through page contents.
Page Transparent Header –Select this page header content for transparent menu page header state when you check “Make Menu Transparent” option.

Setting up header & navigation menu using Elementor

First please install and activate Elementor and DotLife Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

Setting up header & navigation menu using “Header Content” which build using Elementor page builder. It provides more flexibilities to fully customize main header content & layout.

First please navigate to Appearance > Customize > Navigation > General > Display Header Content From and select “Header Content”

Then look at “Default Header Content Settings” section.

Default Header Content – Select default header content for general pages & posts
Default Sticky Header Content – Select default sticky header content for general pages & posts
Default Transparent Header Content – Select default transparent header content for general pages & posts

You can select each header content options from your current header posts. However if you don’t create anything yet. Please follow below instructions.

Create header content posts

We are using Elementor Page Builder plugin so you can use its drag&drop user interface to create your header contents.

Please navigate to WordPress Dashboard > Headers > Add New Header. Then enter its title and click “Edit with Elementor” option.

Now you will open Elementor page builder editor. You can customize menu columns, contents including social icons, buttons, logo image etc.

It will open a popup box. Click on “Blocks” tab and filter only “Theme Navigation” option. Then select header you want to import by clicking “Insert” button.

Once it’s imported successfully. You can customize menu columns, contents including social icons, buttons, logo image etc.

Adding Navigation Menu Widget

If you want to display your custom menu which you have already created it in Appearance > Menus. Simply select “elements” tab and search for “navigation”.

You will find “Theme Navigation Menu” widget there , drag it to where you want to display on the right side.

Then you can customize its options including typography, margin etc.

Adding Side/Mobile Menu Link

You can use widget such as b

utton to add link to mobile menu. By adding CSS ID “elementor_mobile_nav”. Please see below example of using button widget.

Setting up Header content to pages

Once you save all changes for header content. There are 2 options to set it up to pages.

First you can select it as default header content for all pages via Appearance > Customize > Navigation > General > Default Header Content.

Second you can overwrite default footer content on selected page using Page option > Page Header.

What’s the different on each header state (sticky, transparent headers)

Our theme offers 3 header & navigation states. You can setup 3 different header posts for each states using above method. Please see details below about explanation of each states.

Page Header – Select this page header content for default page header state
Page Sticky Header –Select this page header content for sticky page header state which displays when users scroll down through page contents.
Page Transparent Header –Select this page header content for transparent menu page header state when you check “Make Menu Transparent” option.

Import Single Demo Page

First please install and activate Elementor and DotLife Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

Create a page or edit an existing one.

Click “Edit with Elementor” button to open Elementor Page Builder.

Click “Add Template” button and scroll through “Pages” section.

You can filter only Dotlife templates and select demo page you want to import and click “Insert”.

Known Issue

If you have experience Hoteller template issue with Elementor library. Please make sure you update the plugin “DotLife Theme Elements for Elementor” to v3.7

Setting up header & navigation menu using “Header Content”

First please install and activate Elementor and Kingo Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

Setting up header & navigation menu using “Header Content” which build using Elementor page builder. It provides more flexibilities to fully customize main header content & layout.

First please navigate to Appearance > Customize > Navigation > General > Display Header Content From and select “Header Content”

Then look at “Default Header Content Settings” section.

Default Header Content – Select default header content for general pages & posts
Default Sticky Header Content – Select default sticky header content for general pages & posts
Default Transparent Header Content – Select default transparent header content for general pages & posts

You can select each header content options from your current header posts. However if you don’t create anything yet. Please follow below instructions.

Create header content posts

We are using Elementor Page Builder plugin so you can use its drag&drop user interface to create your header contents.

Please navigate to WordPress Dashboard > Headers > Add New Header. Then enter its title and click “Edit with Elementor” option.

Now you will open Elementor page builder editor. You can customize menu columns, contents including social icons, buttons, logo image etc.

Adding Navigation Menu Widget

If you want to display your custom menu which you have already created it in Appearance > Menus. Simply select “elements” tab and search for “navigation”.

You will find “Theme Navigation Menu” widget there , drag it to where you want to display on the right side.

Then you can customize its options including typography, margin etc.

Adding Side/Mobile Menu Link

You can use widget such as b

utton to add link to mobile menu. By adding CSS ID “elementor_mobile_nav”. Please see below example of using button widget.

Import Demo Navigation Menu Templates

Click “Add Template” button and select “Blocks” section. Then select “Theme Navigation Menu” for select box option.

You will see list of predefined templates there. Select one you want to import and click “Insert”.

Import Single Demo Page

First please install and activate Elementor and Kingo Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

First you have to create a page or edit an existing one from WordPress Dashboard > Pages > Add New.

Click “Edit with Elementor” button to open Elementor Page Builder.

Click “Add Template” button and scroll through “Pages” section.

You can filter only Kingo templates and select demo page you want to import. Then click “Insert” button to beginning importing selected page contents.

Known Issue

If you have experience Kingo template issue with Elementor library. Please make sure you update the plugin “Kingo Theme Elements for Elementor” to v1.9

Import Single Demo Page

First please install and activate Elementor and Musico Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

Create a page or edit an existing one.

Click “Edit with Elementor” button to open Elementor Page Builder.

Click “Add Template” button and scroll through “Pages” section.

You can filter only Musico templates and select demo page you want to import and click “Insert”.

Known Issue

If you have experience Musico template issue with Elementor library. Please make sure you update the plugin “Musico Theme Elements for Elementor” to v2.6

Import Single Demo Page

First please install and activate Elementor and Architecturer Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

Create a page or edit an existing one.

Click “Edit with Elementor” button to open Elementor Page Builder.

Click “Add Template” button and scroll through “Pages” section.

You can filter only Architecturer templates and select demo page you want to import and click “Insert”.

Known Issue

If you have experience Architecturer template issue with Elementor library. Please make sure you update the plugin “Architecturer Theme Elements for Elementor” to v3.4

Import Single Demo Page

First please install and activate Elementor and Hoteller Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

Create a page or edit an existing one.

Click “Edit with Elementor” button to open Elementor Page Builder.

Click “Add Template” button and scroll through “Pages” section.

You can filter only Hoteller templates and select demo page you want to import and click “Insert”.

Known Issue

If you have experience Hoteller template issue with Elementor library. Please make sure you update the plugin “Hoteller Theme Elements for Elementor” to v3.8

Import Single Demo Page

First please install and activate Elementor and Framed Theme Elements for Elementor plugins before you proceed.

Once you get required plugins installed. Please follow below steps.

First you have to create a page or edit an existing one from WordPress Dashboard > Pages > Add New.

Click “Edit with Elementor” button to open Elementor Page Builder.

Click “Add Template” button and scroll through “Pages” section.

You can filter only Framed templates and select demo page you want to import.

Then click “Insert” button to beginning importing selected page contents.

Known Issue

If you have experience Framed template issue with Elementor library. Please make sure you update the plugin “Framed Theme Elements for Elementor” to v2.6