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.

Debugging Safe Mode

Debugging Safe Mode

After successful debugging with Safe Mode, you need to follow these steps to solve your issue:

Deactivate plugins. Try to deactivate all your plugins besides Elementor and Elementor Pro. If it solves the issue reactivate them one by one to find the culprit.Switch theme. Switch to a default theme of WordPress such as Twenty Sixteen or Twenty Seventeen. This helps rule out an issue with the code of the theme.Check the structure of your permalinks. Try to save your permalinks one more time. Also, try to change the permalink structure to 「Plain」. Some servers do not allow to write to the .htaccess file and as a matter of fact, you cannot always modify your permalink structure and edit with Elementor.Edit in incognito mode with your browser. This rules out an issue with an add-on or with the browser cache. In Chrome, at the top right, click 『More』 and then 『New Incognito Window』. A new window appears. In the top corner, check for the Incognito icon indicating you are in fact in incognito mode. Now, navigate back to Elementor and see if the error persists. You should also make sure no add-ons are working in incognito mode and possibly try a different browser altogether.Check conflicts with membership plugins. Check your permission on pages built with Elementor and membership plugins.Solve possible theme conflict. Contact the support of your theme to make sure that the WordPress Default Loop is used in your layout.Solve Rocket Loader issue. Elementor and Cloudflare integrate smoothly with each other. Though there is an issue with Rocket Loader. Click for the solutionVerify that you do not have a redirect on the page.Solve hosting issues. Verify with your host provider if your WordPress install includes the .htaccess file. Also, check with your hosting company if your server erases the PHP $_GET variable.Remove any custom JS code you added via an HTML widget with the help of the navigator.

If you are not able to solve the issue following any of these steps, we suggest you raise the issue in the Elementor Community. If you have our Pro version, you can send us your website login details and our support team will try to pinpoint the cause and fix it.

Note: Safe Mode can be activated only by site admins (i.e. users with administrator privileges), because only they can deactivate plugins. If you are not receiving the Enable Safe Mode option, please ask your site administrator to activate safe mode and troubleshoot the problem for you. In the case of a multisite setup, only Super Admins can activate Safe Mode.

How to Fix the 『Preview Could Not Be Loaded』 Error

How to Fix the 『Preview Could Not Be Loaded』 Error

Are you seeing an error when you try to use Elementor that states: 『Preview could not be loaded』? This is one of the most common errors on Elementor, and usually, it is quite easy to fix.

This happens when the preview of the page is not available.

The error will try to give more information if possible. For example in the image below, it says 「Preview Debug」. The 「preview debug」 option enables the user to verify that there is no redirect on the page.

Elementor can detect in some cases the exact issue:

No Theme: Some of your theme files are missing.Corrupted .htaccess: 『Your site』s .htaccess file appears to be missing.』HTTP Errors: format is content depends on the code.

When it is not possible to give any other information, use the steps below in this article, to see how you can quickly fix this issue and get back to designing your website with Elementor. 

Note: If this message is received on a WooCommerce template or an archive page, such as the Blog page, this is normal and in this case, please use the WooCommerce Builder or the Theme Builder instead of trying to directly edit these pages.

If you receive the error message 「the preview could not be loaded」, try the following:

Enable Safe Mode. Follow the procedures outlined in What is Safe Mode?Make sure the theme files exist. If no theme is available, go ahead and install or re-install a theme. Check the structure of your permalinks. Try to save your permalinks one more time. Also, try to change the permalink structure to 「Plain」. Some servers do not allow to write to the .htaccess file and as a matter of fact, you cannot always modify your permalink structure and edit with Elementor.Edit in incognito mode with your browser. This rules out an issue with an add-on or with the browser cache. In Chrome, at the top right, click 『More』 and then 『New Incognito Window』. A new window appears. In the top corner, check for the Incognito icon indicating you are in fact in incognito mode. Now, navigate back to Elementor and see if the error persists. You should also make sure no add-ons are working in incognito mode and possibly try a different browser altogether.Solve Rocket Loader issue. Elementor and Cloudflare integrate smoothly with each other. Though there is an issue with Rocket Loader. Click for the solutionVerify that you do not have a redirect on the page. You can see if it is the case by hitting the 「debug preview」 button.If the index.php file has been renamed or if its contents includes anything else other than the WordPress requirement, this will also result in this error.Solve hosting issues. Although this situation is very rare, please verify with your host provider if your WordPress install includes the .htaccess file. If your .htaccess file is missing, check out this link to regenerate. Also, check with your hosting company if your server erases the PHP $_GET variable.HTTP Errors. Possible solutions for each type of HTTP Error listed below:

If you are receiving 403 errors, check the following:

You may have a corrupt .htaccess file. Download your current .htaccess file to save as a backup. Then delete it from your server. Visit your site and a new default .htaccess file will automatically be generated. If this solves your problem, look at the .htaccess file you downloaded to determine if there is any code within it that needs to be corrected.Your file permissions may not be correct. Ask your host to check that your WordPress directories and files have the correct permissions.,This can be due to a security plugin. To sort this out, activate the learning mode of the plugin or contact their support.This issue can also be due to the firewall of your server, such as mod_security, so this has to be checked with your hosting company.Another plugin may be causing a conflict. Deactivate all plugins except Elementor. If the problem clears up, you know that another plugin is the problem. Reactivate each plugin, one at a time, testing your site with each reactivation. Keep testing until you find the plugin that is causing the failure. Get in touch with that plugin』s developers to request assistance or use another plugin with similar functionality.

If you are receiving 401 errors, you are attempting to access a page that requires authentication. If the page shouldn』t be asking for authentication, contact your host for help in removing the authentication requirement or check any security plugins you may be using for options to turn this off.

If you are receiving 500 errors, click here for the debug procedure.

If you are not able to solve the issue following any of these steps, we suggest you raise the issue in the  Elementor Community. If you have our Pro version, you can send us your website login details and our support team will try to pinpoint the cause and fix it.

How To Use The Color Sampler

How To Use The Color Sampler

By activating the Color Sampler feature located in the Elementor > Settings > Experiments, you can create a color pallet based on your page content. The Color Sampler can extract color palettes from images and other elements. Instead of finding the most representative colors, it aims to find good colors that work together in a color palette.

Using the Color Sampler

From the Style Tab, select a widget or sections color pickerClick the Color SamplerHover over another element on your page (images work best at this time)Left click to select the target areaThe Color Sampler will generate five complimentary colors based on the selected targetChoose the color best suited for your design

Tip: You may save and name each of these five colors to be reused in your website』s Site Settings.

Horizontal Scrollbar on Mobile Devices

Horizontal Scrollbar on Mobile Devices

How To Debug And Solve The Problem Of A Horizontal Scroll Bar On Mobile Devices

This is due to an element which creates overflow.

Once you』ve determined which section has overflowed, you can edit that Section』s Layout tab, and change Overflow to Hidden.

If you prefer, you can opt for a less technical way to find the section that has overflowed. Simply save the page as a template, then edit the template. Delete each section, one by one, and test on mobile after each deletion. When the problem disappears, you』ve found the problematic section.

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.

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.

Elementor Shortcodes

Elementor Shortcodes

Shortcodes are a way to display content created in the database anywhere you need on your website. A shortcode is generally included between straight brackets [ shortcode].  WordPress has a library of available shortcodes such as [ gallery], [ audio], and many more. Many native WordPress plugins use shortcodes such as WooCommerce, Event Calendars, and BBPress that can be embedded into a page or template. Elementor also generates shortcodes for templates and global widgets.

WordPress Shortcodes

Default Codex

WordPress has a library of shortcodes for use by default. For example a gallery can be embedded by using a shortcode along with the desired parameters for example: [ gallery size=」medium」 link=」file」 columns=」2″ ids=」421,422,420,417,416,415″] this could be used to create a gallery with two columns and six images. The shortcode will use the ID of those images to create your gallery.

A complete list of WordPress Shortcodes can be found here https://wordpress.com/support/shortcodes/

Important: A space was added in the examples of shortcodes above [ shortcode]. This was to prevent it from displaying output on this post. Do not use any spaces in your shortcodes in order to properly work.

Custom Shortcodes

You may also use PHP to create custom shortcodes. These are generally written into the functions.php file of your child theme. There are also third party plugins such as Code Snippets that allow you to store PHP code.

Adding A Shortcode To An Elementor Template

Drag an Elementor Shortcode Widget to your page or template.Enter your shortcode in the textbox area provided.You may style the shortcode in the Custom CSS option located in the Advanced Tab.  

Elementor Shortcodes

In addition to WordPress Shortcodes, Elementor also creates shortcodes for your templates. These pages, sections, and global widgets can be inserted in many of the widgets such as tabs, sliders, and others to create custom solutions.

Using Elementor Shortcodes in WordPress

Elementor Template Shortcodes may also be placed in the WordPress block editor content using the shortcode block. This can be useful for embedding forms, call to action widgets, and marketing into your posts and other WP content.

Using Template Shortcodes In Slides Example

In this example, three templates are created each using the call to action widget. By saving these to the template library and inserting the shortcode into the description area of the slides widget, you can create a more customized solution for your slides.

Note: In many cases, shortcodes will not display in the editor. This is expected behavior. Preview your page in a new tab or browser to see the shortcodes output.

How to Fix: Default Kit Missing Error

How to Fix: Default Kit Missing Error

After installing a brand new site with Elementor Core / Pro, you may experience a Default Kit Missing error. This will also occur if the Default Kit is deleted from your template library.

.

The Solution

The way to solve this error is navigating to Elementor > Tools > General Tab. Here you will see an option to Recreate Kit. Click the Recreate Kit button and the Save Changes button, a new Default Kit will be generated. The Recreate Kit Option will disappear.

Note: This option is only visible if the default kit is missing or corrupted.

How to Fix Elementor Full Width Not Working

How to Fix Elementor Full Width Not Working

When editing a page with Elementor, you may experience the editor not extending to the full width of your screen. This is most likely caused to the page inheriting the default settings of your theme or Single Page template.

How To Fix Your Layout

To override the theme layout and extend your content to full width, click the gear icon in the lower corner, and enter the Page Settings. From the Page Layout options, use the dropdown selector and select Elementor Full Width. This will retain the Header and Footer of your theme.

Note: If you wish to exclude the Headers and Footer you may select the Elementor Canvas option.