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.
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. You can see an example of fullscreen menu on our demo page here.
Creating Fullscreen menu using Elementor
First please install and activate Elementor and Photography 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 import demo mega menu by clicking on template button.
It will open a popup box. Click on “Blocks” tab and filter only “Theme Fullscreen Menu” option. Then select mega menu 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.
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 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.
Mega Menu is extensive sub menu which allow you to display various of menu links or other rich information.
Creating Mega menu using Elementor
First please install and activate Elementor and Photography Theme Elements for Elementor plugins before you proceed.
Once you get required plugins installed. Please follow below steps.
Create mega 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 > Mega Menus > Add New Mega Menu. Then enter its title and click “Edit with Elementor” option.
Now you will open Elementor page builder editor. You can import demo mega menu by clicking on template button.
It will open a popup box. Click on “Blocks” tab and filter only “Theme Mega Menu” option. Then select mega menu 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.
Assign Mega Menu Post content to parent menu item
One you have mega menu posts with content. The next step is to assign it to parent menu item. So when user move mouse over menu item. It will open selected mega menu.
Go to Appearance > Menus and selected parent menu item you want to assign mega menu post to.
Expand selected parent menu item, you will find “Elementor Mega Menu” option. Then select mega menu you want to assign to this menu item.
Once you selected then click “Save Menu” button to save all changes.
First please install and activate Elementor and Photography 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 button to add link to mobile menu. By open widget options. Click on “Advanced” tab and open “Link Options” then check “Link to side menu” option.
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.
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 Restaurant 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 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.
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 DotLife 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 > Mega Menus > Add New Mega 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 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.
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 Hoteller 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 > Mega Menus > Add New Mega 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 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.
Theme provided 2 ways to create and edit footer content. You can select one you want to use.
First please navigate to Appearance > Customize > Footer > General > Display Footer Content From and select “Footer Content”
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.
First you can select it as default footer content for all pages via Appearance > Customize > Footer > General > Default Footer Content.
Second you can overwrite default footer content on selected page using Page option > Page Footer.
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.
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).
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).
