Which Theme ?

A Guide to Importing Elementor Templates into WordPress Themes

You’ve installed a fantastic looking theme, and imported one of our template websites and it’s doesn’t look like the demonstration website. Well don’t despair because the solution is usually only a few clicks away…

Just about any theme will support the Elementor Page Builder to some degree. However you should always look for a theme that actively promotes support for Elementor. This way you can be confident that all features, including those of Elementor Pro will be compatible with your theme. 

Read on to get some general assistance on getting your pages working right with your theme. Then further on, we provide some specific instructions for three very popular themes with Elementor users : Astra, Generate Press and Ocean WP

Common Solutions

Just about every WordPress theme performs in a similar fashion. So there are some common troubleshooting methods you should work through regardless of which theme you have chosen to work with. 

Check Your Theme Compatibility

Although Elementor can be used to some degree with just about any WordPress theme, it is only themes that have actually added full support for Elementor to the their theme code that are going to allow you to get the most out of Elementor and our template websites. 

  • Check the Theme Developers website and see if they claim to support Elementor. 
  • If no claim can be found on the website, but you still really want to use the theme, then try to contact the theme developer and ask if their theme supports Elementor. 
  • If you can’t get a response, or the response is negative, then we recommend changing theme.

Select the Right Elementor Template

When you create a page in WordPress always remember to choose the correct Elementor Template. 

This setting can be found in the Page Attributes panel. You will want to choose between one of the following :

  • Elementor Canvas – Elementor Canvas is suitable if you wish to use Elementor to design your pages for a single page website that does not require a custom header or footer.

    When working with an Unbranded Space Template Single Page Website you should select this option.
     
  • Elementor Full Width – This option will pretty much hand over the reigns to Elementor for all aspects of your website. If you are planning to use Elementors Header, Footer, single page , or archive page overrides then you must select this option.

    When working with an Unbranded Space Template Website with multiple pages you should select this option. 

Check the Themes Customiser Settings

Most themes will have a series of options in the customiser that are unique to that theme. You should become familiar with the settings of your themes Customiser, because these can often override your Elementor pages, regardless of which Elementor Template you are using. Some common settings to look for:

  • Layout Settings – Often you may find that your theme gives your Elementor pages a fixed width instead of expanding to the full width of the screen. You will usually find an option to expand to full width in your themes layout settings. Hint : If you can’t find layout settings, try looking for Container settings instead.
  • Header / Footer Settings – Are you finding a few extra areas appearing above your header, or below your footer. The theme is placing them there and you can usually find the settings to disable them in the Header / Footer areas. Hint: You will often find Header & Footer inside the Layout settings. 
  • Fonts appearing too large or small – Your theme can also control the size of fonts and headings in your Elementor pages. Look for Typography settings in your themes Customiser. You should have the option to set the sizes of your headings and paragraph text. 

Common Pitfalls with Popular Themes for Elementor

We’ve taken three of the most popular themes that people use with Elementor and identified some of the common problems that may be encountered. 

In the examples below we have used “Architect Pro” to demonstrate some of the common issues you may encounter

Astra

Astra Theme Website

Problem 1 - Fixed Page Width

After importing the website and following the instructions in your Template Product Guide, you may see that the main page area is constrained to a fixed width. 

Generate Press Problem 1

Fixed Page Width Solution

Astra provides Layout settings in the Customiser. Follow these steps:

  1. Launch the Customiser from your WordPress dashboard
  2. Select Layout > then Container
  3. Locate the Default Container dropdown selection and choose “Full Width / Stretched”
  4. Click Publish to Save.

Astra Solution 1

Problem 2 - Fixed Width on Single & Archive Posts Elementor Templates

Some of our Templates use the Elementor Single and Archive Templates. These are treated differently to pages, where the above solution using the Customiser dos not work. 

Solution for Fixed Width on Single & Archive Posts Elementor Templates

Astra provides layout settings on individual pages as well as the customiser. We just need to edit the single and archive page templates. Follow these steps:

  1. From the Dashboard Navigate to Your Elementor Template Library.
  2. Locate the archive template – It will usually have the word “archive” in the title, but will also have  “archive” as the type of template as well. Edit the archive file (Not in Elementor). 
  3. Look for the “Astra Settings” Panel, and under the Sidebar heading choose “No Sidebar” and under Content Layout choose “Full Width / Stretched”
  4. Click UPDATE to save.
  5. Repeat the above steps for the “single” template.

Astra Settings

Generate Press

Generate Press Theme Website

Problem 1 - Fixed Page Width

After importing the website and following the instructions in your Template Product Guide, you may see that the main page area is constrained to a fixed width. 

Generate Press Problem 1

Fixed Page Width Solution

Generate Press provides additional layout settings to every page. Follow these steps:

  1. Edit your page in WordPress (Not in Elementor)
  2. Look at the towards the bottom for the Layout Panel and select “Page Builder Container” settings
  3. Change the content container type to FULL WIDTH and Update. 

Generate Press Solution 1

Repeat the above steps for each page in your website. 

Problem 2 - Fixed Page Width on Single & Archive Posts Elementor Templates

Some of our Templates use the Elementor Single and Archive Templates. This is a known issue with that theme. We recommend changing to another theme or contacting the developer of Generate Press for a solution.

Ocean WP

Ocean WP Theme Website

Problem 1 - Top Bar

Ocean WP places a top bar on every page of the website. 

Ocean WP - Top Bar Problem

The Top Bar Solution

Ocean WP provides a huge array of settings in the Customiser. Follow these steps:

  1. Launch the Customiser from your WordPress dashboard
  2. Select Top Bar > then General
  3. Uncheck the box next to “Enable Top Bar’ to disable the top bar.
  4. Click Publish to Save

Ocean WP - Top Bar Solution

Problem 2 - Page Title

Ocean WP places the title at the top of every page, just beneath the header. 

The Page Title Solution

Again we need to look to the Customiser for our solution . Follow these steps:

  1. Launch the Customiser from your WordPress dashboard
  2. Select General Options > then Page Title
  3. Click the dropdown for “Style” settings and choose HIDDEN.
  4. Click Publish to Save

Ocean WP - Title Solution

Problem 3 - Unwanted Border on bottom of header

A border appears at the bottom of the header on every page. 

The Unwanted Border Solution

The solution is found in the customiser:

  1. Launch the Customiser from your WordPress dashboard
  2. Select Header > then
  3. Untick the box next to the “Header Border Bottom” option.
  4. Click Publish to save. 

Header Bottom

Problem 4 - Fixed Page Width on Single & Archive Posts Elementor Templates

Some of our Templates use the Elementor Single and Archive Templates. We have not been able to get these Elementor Elements to expand to the Full Width of the page using the free version of the OceanWP plugin, and have seen others that have encountered similar issues.  

We recommend trying another plugin or contact OceanWP for support.