Setting up Footer Content using Elementor

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.

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

How to Do A/B Testing With Elementor

If you’re building sales funnels and landing pages in WordPress, for yourself or your clients, Elementor is a bit of a dream come true.

Super easy to create conversion-focused landing pages, drag-n-drop, directly there in WordPress.

What are the Benefits of A/B Testing

A/B testing has many purposes with many benefits. It’s an all-encompassing type of analytical testing, where you can create unique tests or run something simple like how many users visit your webpage.

There is official article from Elementor website here “How to Do A/B Testing With Elementor” which has detailed steps and explanations about how to create A/B testing along with Google Analytic.

If you are looking for easier and simple solution for adding A/B testing for Elementor. You can also use this plugin “Split Test For Elementor” to create this options within Elementor without requiring Google Analytic.

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.

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 Ashton 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. 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 Ashton 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 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.

 

 

Creating Mega menu using Elementor

What is Mega menu?

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 Ashton 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.

Then you should be able to customize mega menu elements using all Elementor widgets available.

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.

Import Single Demo Page

First please install and activate Elementor and Ashton 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 Ashton templates and select demo page you want to import.

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

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.

Creating Mega menu using Elementor

What is Mega menu?

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 Hoteller 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.