Author 诗语

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.

Admin Top Bar

The Elementor Admin Top Bar allows you to quickly access relevant shortcuts from your Dashboard. It will change display depending on what you are currently working on.

Quickly Access The Finder

You can quickly access the finder to search and locate content on your website by clicking the Finder link in the Admin Bar. 

Quickly Access Your Account

It is now much easier to access your account by using the My Elementor link.

Add New Content

For example, If you are located in the Templates Region of Elementor, you will be able to add or import new Templates from the buttons located in the Admin Top Bar

Activating Or Inactivating This Feature

The Admin Top Bar can be Activated or made Inactive by navigating to Elementor > Settings > Experiments.

Note: The Admin Top Bar will be active on new installations.

MailChimp & Elementor Integration

This guide explains how to integrate MailChimp with Elementor Pro Form Widget.

Subscribe to our YouTube Channel 

First set your MailChimp API Key in the Integrations Settings. Under Elementor > Settings > Integrations TabCreate a form using Elementor Form WidgetClick Actions After SubmissionUnder Add Action choose MailChimp

Tip: Click to learn how to get your API Key from MailChimp

Selecting MailChimp Options

API Key: Use the default API Key or a custom oneAudience: Pick an audienceGroups (available once Audience has been chosen): Choose groupsTags (available once Audience has been chosen): Add comma-separated tagsDouble Opt-in (available once Audience has been chosen): Set Double Opt-in to send a second verification emailField Mapping (available once Audience has been chosen): Set the option to map your fields

Note: For the moment, the visitors of the websites will not be able to self-select their group.

Forms not sent with MailChimp:

If you have issues sending forms integrated with MailChimp make sure that you have not added an 「address」 field or a 「birthday」 field within your field mapping settings in your MailChimp account.If you receive specific errors on form submissions, please see this form error troubleshooting guide.

How to Set Elementor to Coming Soon

With Elementor』s Maintenance Mode Tools, you can display a custom coming soon mode page to visitors, and send the right HTTP response to search engines.

Coming Soon Response Code

Setting Elementor to Coming Soon, makes your site tell search engines everything is working as normal, and they can index the website as usual. This is done by returning a response of HTTP200.

(Read the complete Maintenance Mode post here)

Create a 『Coming Soon』 Page Template from scratch, or use one of our pre-designed templates and publish it. Note: The template hierarchy needs to be set to Page and not Section or other options.Go to Elementor > Tools > Maintenance ModeChoose Coming Soon in the mode selectorSelect the User Roles that are able to access the websiteSelect the template you created in the dropdown selectorSave your changes and view the website from another browser or incognito mode to test your page.

Note: The following 3rd party cache plugins are automatically cleared on every change in the Elementor Maintenance Mode: 

WP Rocket (premium)W3 Total Cache (free)WP Super Cache (free)WP Fastest Cache (free + premium)

Note: You will see a red button on your top WordPress bar with the text: 」Coming Soon Mode ON「.

Tip: You can use the same process described here for 『 Maintenance Mode 』

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.

Elementor and Templates Menus: Settings & Tools

This is an overview of the Elementor Menu and Templates Menu

Elementor Menu

SettingsCustom FontsCustom IconsCustom CodeRole ManagerToolsSystem InfoGetting StartedGet HelpLicense

Templates

Saved TemplatesPopupsTheme BuilderLanding PagesKit LibraryAdd NewCategories

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.

Heading Widget

The Heading Widget allows you to create stylish title headings.

Content

Title –  Type your heading text.Link – Link the heading to a URLSize – Change the heading to Small, Medium, Large, XL or XXLHTML Tag – Set the heading』s HTML tag to H1- H6, Div, Span or ParagraphAlignment – Align the heading to the left, right, center, or justified

Style

Text Color – Choose the color of the heading textTypography – Change the typography options for the heading textText Shadow – Add a shadow and blur to the heading textBlend Mode – Select from multiple layer effects including Normal, Multiply, Screen, Overlay, etc. View Blend Mode demo

Advanced

Set the Advanced options that are applicable to this widget

Conditional and Inline CSS Load Experiment

We are working constantly on improving the performance of the sites created with Elementor. We have now focused on achieving a faster page load by reducing the amount of unused CSS generated by the pages by adding the Conditional and Inline CSS Load Experiment.

Activating The Experiment

In order to use this feature, you must navigate to Elementor > Settings > Experiments and activate it in the dropdown. Save your changes at the bottom of the screen.

Conditional CSS Load

Until Core v3.3.0 , all the CSS was loaded in the same file: frontend.css (120KB in Elementro core, 225KB in Elementor Pro ). This means CSS assets that are not in use are being loaded anyway, a thing that harms page score and generates render-blocking processes.

Now, when you activate the Improved CSS Loading experiment, we load only the CSS of the widgets that are placed in your page once. This way, we save up to 37KB of render-blocking assets (CSS) in Elementor Core, and save up to 171KB, based on your usage.

Inline CSS Load

In addition to this experiment, and in order to prevent multiple requests to the server, we are now loading the CSS files as inline style tags. This will reduce even further the render-blocking processes and should improve the overall performance (only up to 8KB, otherwise – the CSS file will be loaded as an inline link tag).

If the widget is being used more than once, there will not be an additional request or print.

The mechanism of understanding the CSS file size (the 「expensive act」) will happen once for a widget.

Conditional Load of the Animations library

The animations.css library will be loaded only if you used it on your page, and will help reduce unused asset loading even further (19KB).

We also added 「under the hood」 improvements to load the sticky JS (7KB) library per use.

When using Elementor combined with Elementor Pro with the performance experiments active, you should expect a major performance boost and save up to 523KB.

Advanced Tab

These are the possible settings available in the Advanced tab of a Section, Column, or Widget. Not all settings are available for every element.

Advanced

Margin: Set the section MarginPadding: Set the section PaddingZ-index: Set the Z-Index. Learn more about Z-IndexCSS ID: Set a CSS ID for your sectionCSS Classes: Set CSS Classes for your section

Motion Effects

Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. Learn more about StickyScrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. Learn more about Scrolling EffectsEntrance Animation: Click the dropdown to choose an animation. Learn more about Entrance Animation

Background

The following options can be set independently for both the normal and hover states.

Background Type: Choose between Classic or Gradient

Border

The following options can be set independently for both the normal and hover states.

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessBox Shadow: Adjust box shadow options

Mask

The Mask option can be activated by using the toggle. Learn more about Mask Option The following options are available:

Shape: Select the shape of your mask from the dropdown list. Choose one of the preset shapes or upload a custom SVG shapeSize: Select Fit, Fill, or Custom for the size of your maskPosition: Select the position of your mask Top, Right, Bottom, Left, and Center options are availableRepeat: Select the repeat options for your mask

Positioning

Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user』s viewport. 

If either Absolute or Fixed are selected, the following options also become available.

Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.Offset: Changes the horizontal reference point by the amount of the offsetVertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.Offset: Changes the vertical reference point by the amount of the offset

Learn More: How To set Absolute Position for An Element

Responsive

Reverse Columns: Slide to reverse your columns order (Great for Mobile)Visibility: Show or Hide your section on Desktop, Tablet, or Mobile

Attributes (Pro only)

Add your own custom attributes. Learn more about Custom Attributes

Custom CSS (Pro only)

Add your own custom CSS