Create a Tour Post using Elementor

First thing to create tour content is to create a post post.  Theme has various post options for you display different content on your tour post. Here are the steps to create a tour post.

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

Now you will open Elementor page builder editor. You can customise a single tour contents using columns, image, navigation menu using Elementor widgets.

Import Demo Single Tour Template

When you edit the tour post using Elementor. You can import demo a single tour template 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 a single tour columns, contents including text, image, video etc.

Setting up Footer Content using Elementor

Create footer content posts

This option you can create multiple footer content and edit it using Elementor page builder which provides very flexible layouts for each page.

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

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

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

Import Demo Footer

When you edit the footer post using Elementor. You can import demo footer by clicking on template button.

It will open a popup box. Click on “Blocks” tab and filter only “Theme Footer” option. Then select footer 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 footer columns, contents including social icons, buttons, logo image etc.

Setting up Footer content to pages

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

First you can select it as default footer content for all pages via Appearance > Customize > Footer > General > Default Footer Content.

Then select “Display Footer Content From” option to “Footer Content”.

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

Removing the space between elements

Why is there a space between my elements when I add a new widget to my layout?

You might’ve noticed that in Elementor there are some extra spaces between widgets by default. It’s not about the paddings or margins you may have set before, this is a default space that Elementor will add automatically between widgets. By default there is a minimum 20px space between widgets in your layout. But don’t worry! You can remove this extra space or change it.

Removing/Changing the space between elements

If you are editing a page in Elementor, you can globally change the space between elements and without having to leave Elementor.

1. From the Elementor left dashboard menu, click on the Burger icon in upper-left corner of the dashboard.

2. In Site Settings section click on Layout Settings.

3. Set your preferable space value in the Container Padding and gaps option.

4. Update the page.

Create a Page using Elementor

We are using Elementor Page Builder plugin so you can use its drag&drop user interface to create your page contents. Here are detailed documention about how to use Elementor from its official page.

You can also checkout full lists of getting started documentations from here.

An Example Steps to Create a page using Elementor

Go to WordPress Dashboard > Pages > Add New and enter page title.

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

You will open a Elementor page builder. On the left sidebar. You can drag widget you want to add to the main content area on right side.

Import Single Demo Pages

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

Click to here to see full documentation about how to import single demo page.

Creating Fullscreen menu using Elementor

What is Fullscreen menu?

Fullscreen Menu is extensive sub menu which allow you to display various of menu links or other rich information including images, videos on full page content area.

Creating Fullscreen menu using Elementor

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

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

Create Fullscreen menu content posts

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

Please navigate to WordPress Dashboard > Fullscreen Menus > Add New Fullscreen Menu. 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.

Set site’s default Fullscreen Menu Post

Once you create a new fullscreen menu post. Next step is to setup the fullscreen menu as default one on your site.

Please navigate to WordPress Dashboard > Customize > Navigation > Fullscreen Menu > Default Fullscreen Menu and select the on your just created.

Add a link to Fullscreen Menu Post content using Elementor

One you have fullscreen menu post as default. The next step is to link element to open fullscreen menu content. So when user clink over assigned element. It will open selected fullscreen menu.

You can use widget such as button or icon to add link to mobile menu.

For example, I used icon widget then you have to add # to its link option so it’s clickable.

You can use widget such as button to add link to mobile menu. By open widget options. Click on “Advanced” tab and open “Link Options” then check “Link to fullscreen menu” option.

 

 

Import Single Demo Page

First please install and activate Elementor and Grand Tour 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 Grand Tour templates and select demo page you want to import and click “Insert”.

Setting up Footer Content using Elementor

First please navigate to Appearance > Customize > Footer > General > Display Footer Content From and select “Footer Content”.

Then next step is to create a footer post using Elementor.

Create footer content posts

This option you can create multiple footer content and edit it using Elementor page builder which provides very flexible layouts for each page.

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

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

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

It will open a popup box. Click on “Blocks” tab and filter only “Theme Footer” option. Then select footer 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 footer columns, contents including social icons, buttons, logo image etc.

Setting up Footer content to pages

Once you save all changes for footer content. There are 2 options to set it up to pages. The first option is to select it globally through theme customizer and it will apply to all pages.

First you can select it as default footer content option via Appearance > Customize > Footer > General > Default Footer Content and save changes.

Second way, you can overwrite default footer content on selected page using Page option > Page Footer. This option will only apply the selected footer post on individual page.

Setting up footer using “Sidebar”

  • Default way to displays footer when you activated theme.
  • Easy to setup. You can organise footer contents using WordPress classic sidebar and widgets and it should be working and ready to use.
  • Limited flexibility. You can choose from 4 different footer layouts.

Setting up footer post using Elementor

  • Provide unlimited flexibility. You can use drag&drop functionality to create columns, elements for your footer contents.
  • Customise logo images, main menu and any contents through Elementor widgets.
  • You have to footer header post for footer layout and set the one you want as default WordPress customizer (Appearance > Customize > Footer)

Removing the space between elements

Why is there a space between my elements when I add a new widget to my layout?

You might’ve noticed that in Elementor there are some extra spaces between widgets by default. It’s not about the paddings or margins you may have set before, this is a default space that Elementor will add automatically between widgets. By default there is a minimum 20px space between widgets in your layout. But don’t worry! You can remove this extra space or change it.

Removing/Changing the space between elements

If you are editing a page in Elementor, you can globally change the space between elements and without having to leave Elementor.

1. From the Elementor left dashboard menu, click on the Burger icon in upper-left corner of the dashboard.

2. In Site Settings section click on Layout Settings.

3. Set your preferable space value in the Widgets Space option.

4. Update the page.

Add animation to Elementor widget

Go to WordPress Dashboard > Pages > Add New and enter page title.

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

You will open a Elementor page builder. On the left sidebar. You can drag widget you want to add to the main content area on right side.

Now click on widget you want to add animations and select its advanced tab > custom animation. You will options below.

There are 4 animation options.

  1. Scroll Animation – Element will animate when you scroll through page contents using scroll Y axis values.
  2. Entrance Animation – Element will animate when you first open a page
  3. Mouse Parallax – Element will animate when you move your ouse positions.
  4. Infinite Animation – Element will animate infinity when page is fully loaded until you close this browser window.
  5. FadeOut Animation – Add fadeout animation to element when scrolling