Text Stroke Feature

Text Stroke Feature

Easily add a stroke to your headings and other typography with thickness and color picker options by using the Text Stoke feature.

Usage

From any supported widget, navigate to the Style tab. Click on the pencil icon beside Title > Text Stroke. You may reset this option at any time by clicking the reverse icon. Text stroke is currently supported in the following widgets: Headings, Icon Box, Tabs, Accordion, and Text Path.

Note: Text Stroke will be available for the following Pro widgets in upcoming Elementor Pro releases: Posts, Animated Headline, Price List, Price Table, Flip Box, Call to Action, Testimonial Carousel, and Countdown.

Controls

Text Stroke: Use the slider or manually enter a value for the thickness of the stroke in PX, EM, or REMStroke Color: Use the global color options or color picker tool to assign a color to your stroke.

Deleting Your Website to Start Again

Deleting Your Website to Start Again

Sometimes you make a mistake designing and building your website and rather than try and fix it, it』s better just to start from scratch. That answer depends on when you created your website.

For sites created on or after December 22, 2021

For sites created after this date, Elementor automatically creates a backup of your site as a clean installation, so you just need to restore the original site backup.  

From your My Elementor dashboard, select Manage this website.Scroll down to the Backups section.Locate the first backup.Select Restore.

For sites created after January 1, 2022

For sites created before December 22, 2021

Contact support with a request to delete your website.Support will contact the Accounting and Billing department (A&B). A&B will delete the old site.Elementor will email you to inform you that your site has been deleted.Visit your My Elementor dashboard.A new form will popup to create a new site, fill out this form.You』ll see your old site on the My Elementor dashboard.Delete your old site by clicking on the ellipsis (three vertical dots), next to the site name and select delete.Click Create Website to create your new site.

What is Safe Mode?

What is Safe Mode?

If you are unable to edit because you encounter a never-ending Elementor Loading page, you can troubleshoot the problem by enabling Elementor』s Safe Mode.

「Safe Mode」 is a safe environment that isolates Elementor and WordPress from the themes and plugins that might be causing the error.

What Does Safe Mode Do?

Safe Mode helps identify any issue that interferes with Elementor loading. In most cases, loading issues are caused by conflicts between plugins or themes. Safe Mode lets you verify if the problem persists even after deactivating plugins and themes, and pinpoint the possible cause of the issue.

The only thing that changes when Safe Mode is enabled is that the Elementor editor loading is done without any activated Plugins or Themes. Enabling Safe Mode also temporarily deactivates all Elementor Experiments.

Using 『Safe Mode』 opens the Elementor editor on a clean version of WordPress, without loading a theme or any plugins. All plugins are deactivated and an empty theme file is loaded.

Note: Safe Mode removes third-party scripts from the Editor, however, it does not remove 3rd-party scripts from the Widget Panel.

How To Activate Safe Mode

You can activate Safe Mode in either of two ways:

Go to Elementor > Tools and select Enable from the Safe Mode dropdown and then click the Save Changes button orClick the Enable Safe Mode button that pops up when the Editor is unable to load.

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 the safe mode and troubleshoot the problem for you. In the case of a multisite setup, only Super Admins can activate Safe Mode.

Note: Safe Mode only affects logged in users while they are using the Elementor editor, and has NO effect on site visitors or other logged-in users. For them, the site will operate as usual, with the regular theme and plugins activated.

Note: Safe Mode only helps solve problems with the Elementor editor itself. It does not help solve issues that prevent the widget panel from loading or issues occurring on the front end of the site, such as changes that do not appear online. 

Important: Safe Mode must be disabled for Elementor Experiments to work. If missing functionalities (example: Landing Pages), please disable safe mode.

Once you』ve verified that Safe Mode helped, now it』s time to Debug Safe Mode to find and fix the plugin or theme issue.

Import Files From Desktop

Import Files From Desktop

You may insert a file or group of files directly from your computer to the editor window by dragging and dropping into a section or column. This feature supports the allowed file types .jpeg, .png, .gif, and mp4. In addition to media files, you are able to easily drag any saved template files (.json) into the editor window.

Dragging a media file onto the page will automatically add the media files to the media library, and create the correlating widget on the page (a dragged image will automatically place an image widget in the section, and a video will automatically place a video widget in the section).

Other Information

In order to edit the title, alt-tags, and descriptions of your files, you will need to use the WP Media library functionality.

Hosted Elementor Website: Adding Your Custom Domain Name To Your Hosted Elementor Website

Hosted Elementor Website: Adding Your Custom Domain Name To Your Hosted Elementor Website

Once you have purchased your domain, you may add it to your Hosted Elementor Website as a Custom Domain. In order to do this, you will first need to make some changes to your domain』s DNS (Domain Name System) records.  This document will walk you through the steps.

Let』s Get Started

From your Elementor dashboard, go to Websites and click the Manage This Website button located in your website』s card to open the site details screen. From the Manage Domains section, click the Add Custom Domain link. 

A popup screen will then appear that looks like the following:

Keep this popup screen open as you will need to copy the information to your registar. To do this, you will need to log into your domain』s registrar account where you purchased your domain in a new tab.

Log in to your Registrar Website Account

Once you』ve logged in to your registrar』s website in a new browser tab, you will need to edit your DNS records by adding or editing the A record to point at your Hosted Elementor Website』s IP address. Please refer to your registrar』s documentation for locating their DNS tools.

Adding An A Record

An A Record is the most common method for directing a domain to point to your Hosted Elementor Website. An A record assigns an address for your domain to a specific IP address (eg. point example.com to IP address 162.159.137.9).The correct IP addresses are currently 162.159.137.9 and 162.159.138.9. You will see the correct IP from your Hosted Elementor Website Dashboard.

Important: If your domain is hosted at CloudFlare, you cannot turn on Proxy as this will not allow the domain to be properly connected. It has to be set to 『DNS Only』.

Adding A CNAME

The alternative method of pointing your domain to your cloud account is to add a CNAME record that points your domain to your Hosted Elementor Website Domain. For example, if your domain name is example.com and your Hosted Elementor Website, e.g. example.elementor.cloud, create a CNAME record on example.com that points to example.elementor.cloud.

Using CNAME For WWW

In order to direct the www to your Hosted Elementor Website, you must create a CNAME record with the name set to www, the value set to @, and the TTL set appropriately (example: 1 Hour). See example below (GoDaddy):

Wait for the DNS changes to propagate

DNS servers across the world periodically check for any changes to the DNS records. A DNS change requires up to 72 hours to propagate worldwide, although this often happens within a few hours, and in some cases, within a few minutes.

Return to the Hosted Elementor Website Dashboard

On the Elementor Dashboard browser tab, you may now click the green acceptance button. If the popup has gotten closed, you may return to this step by clicking Add Custom Domain Button at any time.

Adding Your Domain Name To The Dashboard

In the next popup, you will enter your domain name in the input area provided. 

Add your domain name into the text area, without 「www」. So in this example, shown above, we』re adding a custom domain name of 「justanothercoolwebsite.com」. At this time, you may also set your domain as the Primary Domain and also create the www. You may add or edit these later if you wish.

Wait for Elementor to connect to your domain.

Sit back and relax. Once you have completed the steps above, Elementor will attempt to connect to your registrar. This process could take a few minutes, but up to 72 hours. 

Setting the Custom Name as Primary

To set your domain as the primary destination for visitors, you will need to click on the Set Primary Domain link beside your custom domain name. The following popup will appear. Click the green Set Primary button. The popup window will close. It will take 30 seconds to several minutes for the changes to appear. You will also receive email notifications once ready.

So, what』s next?

We』ll check that your DNS is available (this might take up to 72 hours).We』ll issue an SSL certificate for your website.When your domain is ready, we』ll notify you by email.

System Info

System Info

System Information

The system info includes information about your Server and your WordPress environment. The system info can be copied and pasted into an email or downloaded as a .txt file that can be attached to the email. This option is important, given that we sometimes need this information to assist you when you experience a bug. You can find your System Info from your WordPress Dashboard』s menu by going to Elementor > System Info 

What Information is Included in the System Information

Server Environment

Operating System: This is the operating system of your server. Common systems are Windows, Linux, Ubuntu, macOS Server, and Darwin (Local by Flywheel)Software: The software used by your server. This is generally nginx or apache for more detailed information about nginx configuration click hereMySQL Version: The current version of MySQL that is used by your systemPHP Version: This indicates the version of php used by the website. Certain versions of php can affect your website, see this article (system requirements)PHP Max Input Vars: This is the maximum number of variables your server can use for a single function to avoid overloads (example: 4000)PHP Max Post Size: Defines the maximum space allowed for post. This may be increased to avoid timeouts (example: 1000M)GD Installed: GD is used for image processing and should be enabled.ZIP Installed: This allows the server to extract and process zip files. It should be enabledWrite Permissions: In order for WordPress and Elementor to work properly, proper write permissions for folders must be enabledElementor Library: This verifies a connection to the library is active to use the Template and Kit libraries.

WordPress Environment

Version: This is the version of WordPress you are currently using.Site URL: The Uniform Resource Locator (URL) is the address visitors use to visit your website.Home URL: This is the address of your homepage. This should be the same as the site URL to avoid conflictsWP Multisite: This indicates whether Multisite has been activated on your installationMax Upload Size: This defines the maximum size of file uploads such as images, videos, plugins and other files.Memory Limit: This refers to the maximum memory allocated to each script in PHP (256M is recommended but 512M may be required if using numerous plugins)Permalink Structure: This displays the type of Permalinks that your website uses. Some custom configurations may cause issues. Learn more about permalink structureLanguage: The default language of your website and editor. The editor language cannot be set differently than the site.Timezone: This is the time zone the website is set at. It does not necessarily reflect the admin locationAdmin Email: This is the default email email that wordpress uses for all admin notificationsDebug Mode: Displays whether mode is set to active or inactive.

Theme

Name: The name of the WordPress theme installedVersion: Themes should be kept at the latest versions for the best site healthAuthor: This is the name of individual or company that developed this themeChild Theme: This displays whether the active theme is a child theme of a parent

User

Role: This displays the current users role (Example: Administrator, Editor)WP Profile lang: This is the preferred theme language of the userUser Agent: This displays the operating system and browser used to access the site. 

Active Plugins

This lists all the currently active plugins. It contains the version and author of the plugin. Keeping each plugin at the latest release is recommended in site health.

Elementor Compatibility Tag

This lists any plugins being used that do not have a declared compatibility with the Elementor core version you have installed. The plugin developer will need to update the plugin to be compatible with Elementor.

Elementor Pro Compatibility Tag

Lists any plugins being used that do not have a declared compatibility with the Elementor Pro version you have installed. The plugin developer will need to update the plugin to be compatible with Elementor Pro.

Elements Usage

This region lists the widgets used by each site part on your website. It does not list the exact page where each is. 

Elementor Experiments

This is a list of all available experiments and whether they are set to active. Some experiments are still in Alpha or Beta phase and may cause issues.

Log

The log will display a list of changes and errors associated with your website. From here you may find errors with plugins or updates. Our support team can evaluate the log and find potential issues.

Add Widget To Favorites

Add Widget To Favorites

The Add To Favorites option is a valuable time saving feature that allows you to add your frequently used widgets to the Favorites tab in the widget panel.

Steps

Add To Favorites

Select any widget from the widget panelRight click on the widget and select the add to favorites optionWidget will be added to the favorites tab

Remove From Favorites

Select a widget from the favorites listRight click on the widget and select the remove from favorites optionWidget will now be removed from this list but still in its proper location.

Kit Has Been Imported – What To Do Next?

Kit Has Been Imported – What To Do Next?

Change The Logo And Site IdentityCreate A Menu + Link It To The Nav Menu WidgetReplace Demo ContentLink Popups Where Needed

The Site Identity

Navigate to Site Settings > Site Identity. Here you can change the name of your site, the tagline, the logo, and the favicon.

Adding The Logo

To add a logo to your imported Kit, you may assign it by uploading your logo in the Site Identity settings. It will then be used for the header and footer of your website when the Site Logo Widget is used. You may use jpg, png, and gif file types.

Note: SVGs may be used if previously uploaded to the media library. You must also define a size in the style tab of your Site Logo Widget.

Creating The Menu

At this time, the Site Kit does not automatically create your Navigation Menu. You will need to create your own menu from the WordPress dashboard located at Appearance > Menus or from the Customizer.

Creating A Menu With The Customizer

From the top Admin Bar of your website, choose to enter the Customizer. For this example we will be using the Hello Theme. Select the Menus accordion here:

Click the Create New Menu buttonName your new menu (example: Primary) and toggle the menu location.Click the Add Items button. A panel will expand showing the available items to add to your menu. Add our newly imported Elementor Pages.You will now have these pages in your menu. You may click and drag to reorder them as desired.You can also add Categories or other content related to your Kit by expanding the items.Create Sub-Menus by dragging the items under a parent item so they are slightly indented.Publish your menu. It will now appear in the header of your kit.

Note: Learn more about the Navigation Widget here.

Replace Demo Content

When importing your kit, be advised that Kits contain third-party images, videos, media, files, audio and other visual components. While we have the right to use them in our Kits Library, we cannot ensure that you may use them in your own product. Therefore, please replace or remove all above assets from your copy of the Kits.

Editing The Popups

If your Kit includes popups for contact forms, navigation, or other uses, you may locate these in the dashboard located in the Templates region.

You can add the Kit Popups to the icons or links by using the dynamic options. For more about popups click here.

Known Bugs and User Experience Issues

Known Bugs and User Experience Issues

Version Elementor Core 3.5.1

Issue: When using the responsive controls to reverse columns, some breakpoints are not compliant. Columns will not display in reverse order. This primarily affects the tablet breakpoint. 

Issue: When using the multi select feature, copied elements are pasted in the reverse order. 

Issue: Inner Section can』t be drug into a column (#17249)

Resolution

These known issues are scheduled to be patched on the next release (Core 3.5.2)

Version Elementor Pro 3.4.1

Issue: Custom Breakpoints + Single templates – Custom breakpoints do not work while using a single post/page template.

Description:

When using custom breakpoints for elements on posts/pages edited with Elementor, this does not work on the frontend while a single template is being applied. The CSS for the default desktop breakpoint in the inline styling (added while using the Post Content widget) overrides the post』s stylesheet with the expected custom breakpoint CSS.

Possible Workaround:

Disabling the 「Additional Custom Breakpoints」 beta feature (in 「Elementor > Settings > Experiments」) resolves this issue at this time.

Resolution

This known issue is scheduled to be patched on the next release of the version

Version 3.0 (Elementor Core and Elementor Pro)

Please see FAQ for Elementor 3.0

Some 3rd party plugins are not yet compatible with Elementor 3.0. These include, but may not be limited to:SG Optimizer by Siteground – Siteground has released an update to patch this, so please update this plugin if you are using it.JetElements / JetEngine by Crocoblock – Crocoblock has released an update to patch this, so please update this plugin if you are using it.ElementKitEle Custom Skin – An update has been released to patch this, so please update this plugin if you are using it.Some users were seeing HTML source code which appears on the WooCommerce orders page on WP-admin. A patch has been issued to fix this. Please update to the latest version.If Yoast Premium plugin is activated, some users may be receiving a JSON error or be unable to switch between Visual and Text tabs in the WP text editor. A patch has been issued to fix this.Some users receive a 「go pro」 message although Elementor Pro is installed on their website. This happens when Elementor Pro has been updated before the core. Please go to Elementor > Tools > General and sync the library to receive the invitation to update Elementor free. Now update Elementor free before Elementor Pro.If you cannot update the typography or lose previous typography settings, please try regenerating the CSS by going to Elementor > Tools > Regenerate CSS.If you see two Theme Builder links or cannot access the new Theme Builder and its templates, you may have only updated the free version of Elementor. Elementor Pro should also be updated. Some users are seeing code on their pages that says 「Server Error, see Elementor => System Info」. A patch has been issued to fix this. Please update to the latest version.If you see a Data Migration message, please click Proceed until it is complete. A patch has been issued to fix this. Please update to the latest version.If a site part』s 「Entire Site」 condition is removed, the site part may still be displayed. To fix this, please go to the template itself, and save the condition from there.Some users are reporting that sections or other elements disappear once they are edited. This is being investigated and a patch will be issued once a fix is determined.If a form is integrated with a 3rd party integration such as ActiveCampaign or others, there may be issues with field mapping that affects button colors. The developers are aware of this and are working to find a solution. A patch has been issued to fix this.Cannot delete/duplicate columns/sections – This has been fixed in a later patch.Internal embedding bug causing changes to not update unless regenerate css button was clicked. This has been fixed in a later patch.Column widget space settings broke after updating and disabling Optimized DOM Output setting. This has been fixed in a later patch.

WordPress version 5.5 + Elementor Pro 2.10.3 or less

Posts widget + WP 5.5 – Pagination links lead to 404 page (Page Not Found)

WordPress version 5.5 causes the Elementor Pro Posts widget』s pagination links to break. Clicking these links result in a 404 Not Found page. The developers will release a patch ASAP.

Sorry for the inconvenience these issues are causing.

Add Google Analytics and Google Tag Manager to Elementor

Add Google Analytics and Google Tag Manager to Elementor

You may use the Elementor Custom code feature to easily add your Google Tracking codes. You may also use the display conditions to target certain pages for events.

Navigate To Dashboard > Elementor Custom CodeCreate A New Custom Code, and name it Google Analytics (or as desired)Paste the code that you obtain from Google into the main content region of the Custom Code editorSelect the location of the code to load at the headerSet the display conditions to Entire Site, or a selected landing page if needed.

For more info click here.

To add Google Adsense to Elementor, use the HTML widget to enter the code provided to you by Google.