Troubleshooting Layout Issues

Troubleshooting Layout Issues

Table Of Contents

General Layout IssuesCache IssuesPlugin ConflictsTheme IssuesVersion ProblemsiOS IssuesSpecific Layout Issues

Are you having layout issues? These are the most common issues, causes, and solutions available.

General Layout Issues

Cache Issues

Quite often, cache is causing the layout issue you see.

You can first try to simply clear your browser』s cache, use a different browser, or view in an incognito browser. If this doesn』t help, then follow these steps:

Go to Elementor > Tools > Regenerate CSS and click the Regenerate Files button. Update your page. You may need to make a small change to enable the Update button. Clear all cache including server cache if it exists, any WordPress caching plugins you are using, and your own browser cache. You can also try checking in another browser, or in an incognito browser.

Plugin Conflicts

To find a plugin that is causing the layout issue, deactivate all of your plugins except Elementor and Elementor Pro, if applicable. If this solves the problem, reactivate each plugin one by one, until you spot the problematic plugin. If found, contact that plugin』s support for help, or use a different plugin.

Theme Issues

Switch your theme (temporarily) to a default WP theme such as Twenty Nineteen to see if your theme is causing an issue. If so, contact the theme』s developers for help, or use a different theme.

Version Problems

 Layout issues can also be due to the use of an older version of Elementor. Sometimes it isn』t obvious that there is a plugin update available. Go to Dashboard > Updates and click the Check Again button to be sure.

iOS Issues

Column layout issues can happen in old versions of iOS due to the use of CSS grid by Elementor. iOS supports CSS grid starting from iOS 9.3. iOS versions before that may have issues with column layouts.

Specific Layout Issues

Please see the Specific Layout Issues: FAQ Index for articles that help troubleshoot more specific issues you may be having with the layout of your site.

Learn: What Are Inherited Responsive Values

Learn: What Are Inherited Responsive Values

When using the responsive editor in Elementor, inherited responsive values reflect on controls such as: padding, margins, image sizes, and every other numeric control.  With each additional custom breakpoint, it is helpful to understand what exactly is being inherited from one breakpoint to another. With Elementor』s visible responsive values, you will see exactly what values were inherited.  

Using Inherited Responsive Values

Select an object on your page that has responsive propertiesEnter a value to a control for desktop viewSelect another breakpoint (example: tablet). The previous value will be reflected as a greyed placeholderRepeat for additional breakpoints.

Cascading Responsive Values

Elementor uses a cascading concept across breakpoints, which means that changes cascade down. Changes you make on a larger breakpoint cascade down to the smaller breakpoint, but this will not work vise versa; Changes to a smaller breakpoint won』t affect the higher breakpoint unless you』re designing for widescreens. In this case, Elementor is cascading up, inheriting the Desktop value.

How To Create Sidebar Templates With Hello Theme

How To Create Sidebar Templates With Hello Theme

By default, the Hello Theme does not call the WP sidebar functionality. You can create a child theme and add a snippet of code as shown here to the functions.php file of a child theme.

If you would like to use the WP sidebar widgets along with Elementor widgets, without using code, you can do so by creating a sidebar in your Single Page, Single Post, and Archive templates in the Theme Builder. These templates will allow you to feature a custom sidebar on your site for each new page or post.

Let』s Get Started

Create A New Single Page Template

From the Elementor Theme Builder, choose the Single Page,  Single Post, or Archive Template and create a new one. For this document, we will be using the Single Page option. This will create a template for all pages on the website that use the Default Layout.

Add A Two Column Section

From the + icon in the editor, choose the two column 70 / 30 layout. This will be the foundation of our template.

Add The Content Widget

In order for Elementor to call 「the Content,」 we must add a Post Content Widget to our template. This region will dynamically display the Page content, or the region we can add Elementor Widgets to in later steps. If creating an Archive Template, select the Archive Posts Widget rather than the Post Content Widget.

Note: This is also often the cause of getting the Content Not Found Error in Elementor. The Single Page Template needs to have a Post Content Widget to work.

Preview Settings

When working with templates it is helpful to use the Preview Settings located in the settings for the page located by clicking the gear icon in the lower corner. Select a page already published on your website such as the Sample Page. Click the Apply and Preview button. 

Adding WordPress Widgets To The Template

You may now add the traditional WordPress Widgets to your sidebar. They are all located at the very bottom of the Editor Widget Panel. If you have installed additional plugins that use widgets, they will be found here as well.

Tip: If using WooCommerce, you will find all the search and filtering option widgets in this region. Use these to create your Product Archive and Product Single Templates. 

Adding Elementor Widgets

In addition to the WordPress Widgets, you may also add any Elementor widgets you wish to the sidebar. This adds unlimited possibilities to your design. 

Styling Your Sidebar

When styling your WP widgets, you will find that most will use the H3 headings, lists, and link colors from your global styles. You can add background colors and styles to the WP based widgets in the Advanced Tab. Elementor widgets can use the widget controls and style tab.

Advanced CSS Tricks

If using the Hello Theme, some Custom CSS will often be needed for the desired results. You can modify the look of the list styles or fonts by adding custom CSS to the widget by selector, or adding to the Custom CSS in the Site Settings and giving your widgets the class name created.

Adding A Page Title Region

Often, you may wish to include a page title region for displaying the H1 and breadcrumbs (if used). This is good practice for SEO. You can do so by adding a section above the existing one.

Setting Display Conditions

You may now set the display conditions for your template. Typically, you will choose the Pages > All condition here. You may additionally add more conditions if needed. If you choose 「Singular,」 this template will be used for pages, and posts as well as custom post types. If creating the Post Single or Archive Template, choose Posts > All here. 

Create New Page(s)

Using The Block Editor For Content

When creating pages or posts on your website, you may wish to write your content in the WP editor. This may also be used for clients, or users with only editor privileges.

Create Block Editor Page(s) in the WP editor.Add your verbiage, media, and other block editor content.Publish your page using the WP Publish button. The page may be set to draft mode if needed.View your page. It will now show the Block Editor content with the template sidebar.

Using Elementor For Content

If you wish to still edit the content with Elementor but use the sidebar on all pages it is now possible to do so easily. All Elementor widgets will use the 70% content region of the page template.

Name your page, and publish it in the WP editor.Click the Edit With Elementor button Add your Elementor Widgets to 「The Content」 region. You will not be able to drag widgets into the sidebar region unless the template is edited.  

Notes And Information

Note: Pages and Posts will need to use the Default Layout rather than Elementor Full Width, or Elementor Canvas for the theme builder Display Conditions to show. In reverse, if you wish to not have a sidebar on a page (example: Home), you may use Elementor Full Width and Canvas.

Site Settings

Site Settings

What are Elementor Site Settings? 

Each Elementor option which can be applied across your site is a part of the Site Settings which are centrally located within the Elementor Editor. 

How do I access Elementor Site Settings?

Simply 「Edit with Elementor」 any page or post, click the hamburger menu icon in the upper left corner of the Elementor Widget Panel, and click on Site Settings. Here you have options to control the Design System which consists of Global Colors and Global Fonts, Theme Builder which consists of Typography, Buttons, Images, and Form Fields settings, Header and Footer customizations (Hello Theme), and User Preferences, which consists of Site Identity where you can manage your site logo and more, Background, Layout, Lightbox, and Custom CSS settings.

Design System: Set predefined global colors (Primary, Secondary, Text, and Accent colors), inline custom colors, or create new global colors for use across your site. See Global Colors for full details. Set and edit predefined global typography styles (Primary, Secondary, Text, and Accent) or create new global text styles for use across your site. See Global Fonts for full details. See also: How Elementor』s Theme Style and Global Colors and Typography Work Together To Create The Site』s Design System

Theme Builder: Theme Builder settings are global settings that allow you to set default styling options for various HTML elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields. They are not Elementor-specific, but are as general as possible. This is the baseline setting for the site, that comes into play only as a fallback, if no specific element definitions were set. See Elementor』s Theme Builder for full details.

Site Header And Footer Customization (Hello Theme)

From the site header and footer customization menu you may configure the look of your site header. In addition to choosing the layouts, you can customize the width, background color, menu, appearance and style of each element.

Note: This feature will be active only on a new site. Existing sites need to opt-in to this feature through the Experiments screen. Once activated, there will be two new sections under the Site Settings > Theme Style.

User Preferences: Control your site』s identity, including its Site Name, Site Description, Logo, and Favicon right from Elementor』s Global Settings. Set the site』s background and its mobile background as well. Control global layout settings, such as default generic fonts, site content width, default widget spacing, default page layout template, and more. Manage the Elementor Lightbox options, which opens images, galleries, carousels, and videos in a 100% mobile responsive lightbox popup window. Edit your site』s Custom CSS right from the Elementor settings.

UI Theme: Set UI Theme』s light or dark mode, or use Auto Detect to sync it with your OS setting,Panel Width: Set the width of the widget panel here.Editing Handles: Slide the switch to Enable or Disable Editing Handles when hovering over the element edit buttonEnable Lightbox in Editor: Select Yes or No to enable the Lightbox in the EditorHidden Elements: Toggle the Show / Hide option to enable or disable hidden elements in the editorDefault Device View: Select the default view of the editor between breakpoint widths

How to Make Money with Elementor

How to Make Money with Elementor

Elementor empowers hundreds of thousands of users, but it also offers freelancers, marketers and web professionals the chance to make money online in a wide variety of legitimate ways. Here are several suggestions to help you start profiting from Elementor.

1. Publish your Elementor skills on Elementor ExpertsYou can join the many experts that specialize in Elementor services at https://experts.elementor.com

2. Join our affiliate programOur  Affiliate Program offers a 50% commission on all plans of Elementor.

3. Create Elementor templates to sell

4. Create addons and themes for Elementor and sell them through ThemeForest

You sell addons for Elementor on  CodeCanyon, sell premium templates on  ThemeForest, and integrate Elementor into your theme and earn from affiliate commissions.We』ve always supported our community of developers, freelancers and other professionals helping to build the Elementor ecosystem. You can contact us if you need help, or ask other community members in the  Elementor community. Checkout our  developer API, which includes examples how to extend Elementor.

How To Create A Contact Form With Elementor

How To Create A Contact Form With Elementor

Creating a contact form with Elementor can be achieved by using the Form Widget in Elementor Pro. Simply drag a form widget to your page from the editor panel and use the controls to create a beautiful and responsive form on your website.

Editing Your Form

From the editor panel, you may create and edit all the fields you wish to capture in your forms. The form widget supports most all popular field types such as text, text area, radio buttons, selectors, and more. These fields can also be set to required if desired.

You may style the forms by setting the column width layout to use fields on the same line. 

In our documentation, you will find a complete breakdown of all the available controls and settings for forms. Here is a directory of topics to guide you through the complete process.

Content Controls

Form FieldsSubmit ButtonActions after submitAdditional Options

Style Settings

FormFieldButtonMessages

Advanced

Multi-Step Forms

Hello Header and Footer Customization

Hello Header and Footer Customization

The introduction of free Header and Footer customization for the Hello Theme allows everyone to create a basic Header and Footer design for their site by using the Elementor Site Settings. If using Elementor Pro, and already have a Header and Footer with display conditions set, the ones created here will not be displayed.

Locating The Settings

The Header and Footer customization options will be found under your Site Settings. For more information about global site settings click here.

Note: This feature will be active only on a new site. Existing sites need to opt-in to this feature through the Experiments screen. Once activated, there will be two new sections under the Site Settings > Theme Style.

Site Header Customization

From the site header customization menu you may configure the look of your site header. In addition to choosing the layouts, you can customize the width, background color, menu, appearance and style of each element.

Header

Control Options

Site Logo – Toggle this to show / hide your logo or titleTagline – Toggle this to show / hide your taglineMenu – Toggle this to show / hide your menuLayout – Choose between Default, Inverted, or CenteredWidth – Choose full width, or boxedGap – Set the margin gaps of your header here in percentage or pxBackground Type – Choose classic or gradient optionsColor – Set the background color(s) using the color pickerImage – Choose an image to display from your media library or upload. Once this is completed, you may choose from the standard image controls for position, attachment, repeat, and size options

Site Logo

Control Options

Type – From the dropdown menu, select between title and logo optionsText Color – (if Text is selected above) Choose the color from the picker, input, or dynamic optionsTypography – (if Text is selected above) Set the font size and family of the titleLogo Width (if Logo is selected above) – Use the slider to adjust size in percentage, PX, or VH.

Tagline

Control Options

Text Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the tagline

Menu

Control Options

Menu – From the dropdown, select the menu to be displayed. These can be configured from the WP menus Menu Layout – Select horizontal or dropdown layoutBreakpoint – Select the breakpoint at which to show your toggle menuColor – Choose color from the picker, input, or dynamic optionsToggle Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the menu

Site Footer Customization

Footer

Control Options

Site Logo – Toggle this to show/hide your logo or titleTagline – Toggle this to show / hide your taglineMenu – Toggle this to show / hide your menuCopyright – Toggle to show / hide the copyright text in footerLayout – Choose between Default, Inverted, or CenteredWidth – Choose full width, or boxedGap – Set the margin gaps of your header here in percentage or pxBackground Type – Choose classic or gradient optionsColor – Set the background color(s) using the color pickerImage – (if Classic is selected above) Choose an image to display from your media library or upload. Once this is completed, you may choose from the standard image controls for position, attachment, repeat, and size options

Site Logo

Control Options

Type – From the dropdown menu, select between title and logo optionsText Color – (if Text is selected above) Choose color from the picker, input, or dynamic optionsTypography – (if Text is selected above) Set the font size and family of the titleLogo Width (if Logo is selected above) – Use the slider to adjust size in percentage, PX, or VH.

Tagline

Control Options

Text Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the tagline

Menu

Control Options

Menu – From the dropdown, select the menu to be displayed. These can be configured from the WP menus Menu Layout – Select horizontal or dropdown layoutBreakpoint – Select the breakpoint at which to show your toggle menuColor – Choose color from the picker, input, or dynamic optionsToggle Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the menu

Copyright

Control Options

Textarea – Input your copyright text in this field using plain text, HTML, or dynamic optionsText Color – Choose color from the picker, input, or dynamic optionsTypography – Set the font size and family of the copyright

Note: In some cases, the page may need to be refreshed in order to see the changes you have applied.

Font-Awesome Inline Experiment

Font-Awesome Inline Experiment

In order to continue to improve the performance of Elementor built websites, you may now choose to load Font Awesome icons inline with SVG by activating the option in Elementor Experiments. SVGs are vector-based images that are rendered using the browser』s engine. The benefit of using inline SVG icons, is that they do not increase server requests, which could have had an adverse effect on your site』s performance.

Activate / Inactivate This Experiment

You may navigate to Dashboard > Elementor Settings > Experiments to toggle the settings of this experiment.

Advantages / Differences

How Icons Render – SVG renders in your page』s HTML rather than as CSS pseudo-elements in Icon FontsAuto Accessibility – SVG supports this feature by default rather than only in a kitAdvanced Features – SVG supports features such as Power Transforms, Masking, and Layering whereas Icon Fonts do notScalability – Icon fonts may use anti-aliasing techniques implemented by the browser making it less sharp. SVGs are treated as images by browsers, so no anti-aliasing rules are applied.

Note: This feature does not convert Font Awesome Pro icons. If you are a Pro FA user, navigate to your Kit settings at the Font Awesome site at Kit > Settings > Technology and set them to SVG.

Learn: What Are Site Kits

Learn: What Are Site Kits

Site kits are a bundle of Site Part templates, pages, posts, popups, and all the needed parts for a complete website. Rather than importing each template individually as we have done in the past, you may now import all the content at once. In addition, the Kits Library is useful for creating a consistent website design rather than starting from scratch or pulling together different pieces, blocks and widgets.

The Kit Library

The Kit Library allows you to discover and choose from a diverse collection of 80+ ready-made, fully designed website kits created by Elementor. You can use the kits to create websites in different fields like eCommerce, Restaurant, NGO, Blog, Portfolio and much more. You』ll be able to search, filter, and sort between the different kits and find the perfect kit for your website. This can save time, and help inspire your creations.

Note: The Kit library contains both Free, Pro, and Expert templates. In order to use Pro templates, you must have an active subscription. You may purchase one here.

Create Better Sites

The Kits Library can also help users learn about the industry standard website structure, including all must-have pages and parts that every website needs to include. The kit comes with a complete design and structure of a full website and includes content pages, Theme Builder parts, and Popups.

Ready To Use

Once you have selected the Kit you would like to use. The process will import all the content and global site styles and be ready for you to use in minutes. You may then edit it with your own content and styles. Learn more about using site kits here.

Locating The Kits

To use the template kits on an existing site, Import / Export must be activated in Elementor > Settings > Experiments. New sites will be activated by default. You will then see the Kits Library located under the Templates in your admin panel.

Important: We recommend that you backup your site before importing a kit file.

Global Layout Settings

Global Layout Settings

Control global layout settings from Elementor』s Global Settings.

From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Settings > Layout.

Content Width (px): Set a default width for your content areaWidgets Space (px): Set the space between widgetsPage Title Selector: If you want to hide your page title, enter its CSS selector hereStretched Section Fit To: Choose the parent element to which stretched elements will fitDefault Layout: Set the page layout for new pages, choosing from either Default, Elementor Canvas, or Elementor Full Width

Important: Only pages that use Default Template will have the Single Post Template applied to them, even if they otherwise meet the Display Conditions criteria. Pages that use Canvas or Full Width template (or any template other than Default) will not have the Single Post Template applied to them.

Breakpoints

Tablet: Set the breakpoint for tablet devices. Below this breakpoint, and above the mobile breakpoint, tablet layout will appear (Default: 1025px)Mobile: Set the breakpoint for mobile devices. Below this breakpoint, mobile layout will appear (Default: 768px)