Menu Anchor Widget

Menu Anchor Widget

The Menu Anchor widget allows you to create a page with internal smooth scrolling navigation.

Content

Anchor

Drag the Menu Anchor widget to the top of the area you want the link to scroll toGive the anchor a name. (ie: contact-us)Edit the menu or widget element that will be linking to your anchorType 『#』 + the anchor name (ie: #contact-us) in the URL link field of the menu item or widget element. Please note The ID link ONLY accepts these chars: `A-Z, a-z, 0-9, _ , -`

Note: The widget takes up no actual space and is invisible to the visitor.

Advanced

Set the Advanced options that are applicable to this widget

Menu Anchors are only supported when used on the same page. Link anchors on different pages may not work properly and are not supported.

Adjust Sticky Header Offset for Anchor Links

If you are using a Sticky Header and anchor links, the sticky header may overlap the top portion of the anchor linked content. If that happens, add the following code to your CSS (Appearance > Editor > Additional CSS). Be sure to change the 「80px」 below to match the height of your fixed header.

body:not(.elementor-editor-active) .elementor-menu-anchor:before {
content: "";
display:block;
height: 80px; /* fixed header height*/
margin: -80px 0 0; /* negative fixed header height */
visibility: hidden;
pointer-events: none;
}

How to Edit HTML in Elementor

How to Edit HTML in Elementor

If you need to add HTML, CSS, or Javascript to your website pages or posts, you may use the Elementor HTML widget. This widget allows you to use code from CodePen, Dreamweaver, or other snippet resources.

How To Use The HTML Widget

From the Editor Panel drag and drop an Elementor HTML widget onto your page.Place your code in the text area.Wrap all CSS with style tags. This is to be placed in the beginning of your code.Wrap all Javascript code with script tags. This is placed at the bottom of your code.Save and preview your code in a new browser tab.

How To Fix Custom CSS Not Working

How To Fix Custom CSS Not Working

Occasionally some CSS changes may not appear immediately after adding them to our websites. Below are a few common solutions to help with this:

How to fix it?

Regenerating CSS: This can easily be fixed by going to WP admin > Elementor > Tools > Regenerate CSS. Then, you can clear the cache (WP cache and browser cache) and refresh the page.Clearing Site Cache: Check if you have any caching plugins on your site or any server level caching enabled. Clear those caches.Clearing Browser Cache: Clear Browser cache or check the site in a private/incognito window.Theme Compatibility: This issue can be because of the theme. You can try changing to the default theme of WordPress such as Twenty Twenty-One and if it solves the problem, contact the developers of your theme.Multiple Builders: If you are using another page builder alongside Elementor, it can override the content you have made with the builder and hence it stops from displaying the changes. To solve this issue, save the template and then add it on to a new page and it will resolve the problem.

Hotkeys

Hotkeys

Hotkeys are keyboard shortcuts that can be used to do some common actions in Elementor. It saves you a lot of time because you don』t have to click anything.

You can easily access the Hotkeys by clicking Cmd/Ctrl + ? on your keyboard.

Here is a list of the currently available hotkeys:

Actions

Undo Ctrl / Cmd + Z Undo any change made on the pageRedo Ctrl / Cmd + Shift + Z Redo any change made on the pageCopy Ctrl / Cmd + C Copy a Section, Column or Widget   Paste Ctrl / Cmd + V Paste a Section, Column or Widget   Paste Style Ctrl / Cmd + Shift + V Paste a Section, Column or Widget』s StyleDeleteDeleteDelete section / column / widget that is editedDuplicate Ctrl / Cmd + D Duplicate section / column / widget that is editedSave Ctrl / Cmd + S Save your page to the revision history

Go To

FinderCtrl / Cmd + EGo to the FinderPanel / Preview Ctrl / Cmd + P Switch between the panel and preview viewMobile Editing Ctrl / Cmd + Shift + M Switch between desktop, tablet and mobile viewsHistory Ctrl / Cmd + Shift + H Go to the History panelNavigator Ctrl / Cmd + I Opens the NavigatorTemplate Library Ctrl / Cmd + Shift + L Opens Template Library modalKeyboard Shortcuts Ctrl / Cmd + ? Opens Keyboard Shortcuts Help WindowTheme Builder Ctrl / Cmd + Shift + E Opens Theme BuilderQuit ESC Opens Settings and jumps to Exit to Dashboard

Hello Theme FAQs, Tips and Tricks

Hello Theme FAQs, Tips and Tricks

Where can I download the Elementor Hello theme?

You can download the theme from either:

WordPress repoDirectly from Elementor

How do I install the Hello theme if I downloaded the zip file?

From your WordPress dashboard, go to Appearance > Themes and click Add New.Click Upload Theme.Click Browse and choose the file you just downloaded, then click Install Now.Once it is installed, click Activate.

Will I be notified of theme updates regardless of where I downloaded the theme?

Yes.  Just like any theme or plugin under Dashboard > Updates.

Do you have a child theme I can download?

Yes. You can download a child theme here: https://github.com/elementor/hello-theme-child

How do I install the child theme?

Download the Hello child theme from https://github.com/elementor/hello-theme-childFrom your WordPress dashboard, go to Appearance > Themes and click Add New.Click Upload Theme.Click Browse and choose the file you just downloaded, then click Install Now.Once it is installed, click Activate.

How do I customize the child theme?

Edit the style.css file via FTP if you would like to change the Theme URI, Author, and Author URI. Editing this is optional. You can choose to leave it as is, if you prefer.

Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready

Add any custom styles after:

/*
Add your custom styles here
*/

So for example, if you wanted to add some Link and Heading styles, you could add something like this:

/* Link Styling */
a, a:active, a:visited {
color: #000080;
}
a:hover {
color: #ffd700;
}

/* Heading H1-H6 Styling */
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, serif;
color: #3a3a3a;
line-height: 35px;
font-weight:500;
letter-spacing: 1px;
}
h1 {
font-size: 30px;
line-height: 1.2;
}
h2 {
font-size: 28px;
line-height: 1.3;
}
h3 {
font-size: 26px;
line-height: 1.4;
}
h4 {
font-size: 24px;
line-height: 1.5;
}
h5 {
font-size: 22px;
line-height: 1.6;
}
h6 {
font-size: 20px;
line-height: 1.2;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
margin-bottom: 20px;
}

If you need to change any HTML of any of Hello』s files, make a duplicate of the original Hello file, and place the copy into your child theme』s folder. Edit the child theme』s copied file to make any HTML changes you wish. Read more about this here.

How do I globally prevent all page titles from appearing on any page?

Elementor provides a filter called:

hello_elementor_page_title

You can add code that makes use of this filter to your child theme』s functions.php file. Alternatively you can use a 3rd-party plugin such as Code Snippets to add functions to your theme without needing to use a child theme, and without needing to edit your theme』s functions.php file. The code to add to either your child theme』s functions.php file or to your snippets plugin is:

function ele_disable_page_title( $return ) {
return false;
}
add_filter( 'hello_elementor_page_title', 'ele_disable_page_title' );

I want page titles on most of my pages, but I want to remove them from select pages. How do I do that?

You can choose to hide a page』s title while editing the page with Elementor. Click the Page Settings gear icon in the lower left of the widget panel to access the Hide Page Title option. Read more about this feature

How do I change the 「Search Results for:」 archive title for the Search Results page?

You can add code to your child theme』s  functions.php file. Alternatively you can use a 3rd-party plugin such as Code Snippets to add functions to your theme without needing to use a child theme, and without needing to edit your theme』s functions.php file. The code to add to either your child theme』s functions.php file or to your snippets plugin is:

add_filter( 'elementor/utils/get_the_archive_title','archive_callback' );
function archive_callback( $title ) {
if ( is_search() ) {
return 'Your Custom Message Here: ' . get_search_query() ;
}
return $title;
}

Make sure you change Your Custom Message Here: to whatever you prefer.

How do I add the Widgets menu option?

To enable the Widgets menu item in the WordPress admin menu, use the following code:

if (function_exists("register_sidebar")) {
register_sidebar();
}

You can add this code to your child theme』s functions.php file. Alternatively you can use a 3rd-party plugin such as Code Snippets to add functions to your theme without needing to use a child theme, and without needing to edit the functions.php file. 

Once you have the Widgets menu available to you, you can assign Widgets to the Sidebar as usual in Appearance > Widgets. You can then use this Sidebar anywhere on your Elementor page. Simply add a column in a section and drag the Sidebar widget into the column. 

If you prefer to register new or custom widget areas via code, instead of using the Sidebar widget (for example, if you need a sidebar on a non-Elementor page), you can find sample code in the official WordPress Widgetizing Themes documentation. Your code may differ from the sample code based upon your particular needs. 

Hello Theme Header And Footer Customization

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.

Important: 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.

Google Maps Integration

Google Maps Integration

In order to use the Google Maps Widget, you must first create an API key. You also need a project with a billing account and the Maps Embed API enabled. Once completed, navigate to Elementor > Settings > Integrations and enter the key. To learn more, see this article in Google Set up Cloud Console.

Table Of Contents

Start A New ProjectBilling InformationBilling Step OneBilling Step TwoReturn To DashboardCreating CredentialsAdding ApplicationsAdding Maps Embed APIAdd Your API Key to Elementor

Start a new Project

From the Google Cloud Platform, create a New Project

Name your project using a unique name (note: this cannot be changed later)Fill out your Organization nameEnter the Location of your project

Billing Information

We will now need to set up billing information for your project. You may do this from the Left Panel > Billing

Billing Step One

Select a Country that applies to your projectAgree to Terms of ServiceClick Continue

Billing Step Two

Select an Account typeEnter a Business NameSelect a Payment methodEnter your Payment information as chosen above (example: credit card)Click the Start My Free Trial button

Return To Dashboard

Your billing information is now complete for this project.

Creating Credentials

From the APIs and Services > Credentials Tab, click the + Create Credentials link and select API keyYou will now get an API key. For your protection, it is best to restrict this key from being used elsewhere

Adding Applications

We can now associate applications to be used with your key. From the APIs and Services dashboard click library

Adding Maps Embed API

In the search box type in Maps. You will need the Maps Embed API for the Elementor Widget. Select this in the list belowClick the Enable Maps JavaScript API ButtonThis will now show in your list of available APIs and start collecting data

Add Your API Key to Elementor

You may now navigate to Elementor > Settings > Integrations and place the key in order to use the Maps Widget.

How to Fix 「Edit with Elementor」 Button Missing

How to Fix 「Edit with Elementor」 Button Missing

Table Of Contents

The Post Type has not been selected in Elementor』s settingsGeneral Troubleshooting TipsWorkaround

If the Edit With Elementor link has disappeared from the WordPress Admin Bar, please check for the following possible reasons.

The Post Type has not been selected in Elementor』s settings

Go to Elementor > Settings and make sure the relevant post type is checked.

General Troubleshooting Tips

If the post type is selected, but the problem persists, consider any changes that have been made recently to your site. To find the cause of the problem, follow these general troubleshooting tips:

Did this happen after upgrading WordPress to a new version? If you』ve recently upgraded WordPress, a change in the core code may be having an impact on the items shown in the admin bar. If this is the case, check with the WordPress support forum for possible solutions. There may be a plugin which is causing this issue. Try to deactivate all of your plugins (besides Elementor) and see if the Edit with Elementor link returns. If this solves the issue, reactivate each plugin, one by one, until the problem returns. This will help you discover which plugin is causing the problem. Your theme may also be causing this issue. To test, temporarily switch your theme to a default WordPress theme such as Twenty Twenty. (Your current theme settings will not be lost, and your site will return to normal as soon as you switch back to your normal theme). If the problem disappears with the use of the default WordPress theme, but reappears with the use of your theme, contact your theme』s developers for help to resolve the issue.Have you added any custom code? Temporarily remove the code to see if the problem is solved. If so, you』ll need to troubleshoot your custom code to resolve the issue.

Workaround

If the Edit with Elementor link is not visible in the Admin Bar, go to the page or post listings instead (e.g. Pages > All Pages). Hover over the page or post you wish to edit, and click the Edit with Elementor link that appears on hover. This will allow you to edit the page even when the Admin Bar link is not available.

Troubleshooting A Slow Loading Elementor Editor

Troubleshooting A Slow Loading Elementor Editor

Table Of Contents

Close Browser Tabs To Free Up ResourcesActivate Safe ModeAre you using the latest versions of Elementor and Elementor Pro, if applicable?Are you using security software on your computer, such as Kapersky, Norton, or McAfee, along with any other similar programs?Are you using optimization software that is often used by CDNs or servers?Try using another browser or incognito modeEnable the switch front end editor loaderExport to Localhost

When the editor takes time to load, something is utilizing too many resources. The steps below will help you determine where the resource bottleneck is stemming from.

Close Browser Tabs To Free Up Resources

Having too many tabs open can quickly consume browser resources. The quickest way to eliminate this as a problem is to close other browser tabs that aren』t needed while you edit your page. Load the editor to see if the problem is now resolved.

Activate Safe Mode

If the problem persists, activating Safe Mode is the quickest way to determine if a slow-loading editor is the result of plugin(s) or theme utilizing too many resources. The only thing that changes when Safe Mode is enabled is that the Elementor editor loading is done without any activated Plugins or Themes, for your logged-in user only. Safe Mode has no effect on site visitors or other logged in users. If the editor loads quickly when Safe Mode is activated, that is an indication that either a plugin or the theme is causing the slowdown. Now, you must determine which is the problem by following the steps below.

Deactivate Safe Mode.Switch theme temporarily. Change your theme to a default WordPress theme, such as Twenty Sixteen. (Your Elementor-built pages will not be destroyed by doing so). If the problem disappears, then the problem lies in your theme. Contact the theme developer for assistance or change themes permanently.If the theme is not the problem, find the plugin that is causing the issue. Deactivate all your plugins (besides Elementor), then reactivate each of them one by one to find the one that causes the problem to happen again. Once the problem plugin is found, contact the plugin developer for assistance, or use an alternative plugin.

In most cases, the above will solve your problem, but if not, one of the methods below may work for you.

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.

Are you using the latest versions of Elementor and Elementor Pro, if applicable?

The plugin update admin page doesn』t always show available updates right away. You can double-check that you have the latest version by going to Dashboard > Updates and clicking the Check Again button.

Are you using security software on your computer, such as Kapersky, Norton, or McAfee, along with any other similar programs?

These types of programs will sometimes interfere with the Elementor editor. Disable your security software temporarily to see if that solves the problem.

Are you using optimization software that is often used by CDNs or servers?

These will sometimes interfere with the Elementor editor. Disable the optimization features temporarily, or ask your host to do so, to see if that solves the problem.

Try using another browser or incognito mode

Editing requires use of either Firefox, Chrome, Safari or Opera. Try also to edit in your browser』s incognito mode to rule out an issue with an add-on or with the browser cache.

Enable the switch front end editor loader

Go to Elementor > Settings > Advanced, and under 『Editor Loader』, enable 『Switch front-end editor loader method『.

Export to Localhost

If nothing else has solved the problem, you may need to export your site to localhost (your own computer) to verify that the problem is server-related. Details on how to run your site on localhost are outside the scope of this document, but we suggest installing the free Local by Flywheel and copying your site to it for testing purposes. You can use our guide, 「How to Migrate Your Site with Elementor」 (in reverse, from live to local) to accomplish this. In short, use Duplicator to create a full backup of your live site. Once you have the full backup, drag and drop the resulting .zip file onto Local』s window to import it. If your editor runs more quickly on localhost, then you should suspect an issue with your server. At that point,contact your host to help solve your server issues.

500 Error While Using Elementor

500 Error While Using Elementor

Table Of Contents

Common Reason: Not Enough Memory AllocatedFatal ErrorsHow To Troubleshoot a 500 ErrorDoes This Only Happen When Saving Changes?

500 errors are server issues and can occur for many different reasons. If you receive a 500 error while using Elementor you must check the PHP error logs of your server to determine the cause of the problem. If you do not know how to produce PHP error logs please send this guide to your hosting company: https://wordpress.org/support/article/debugging-in-wordpress/ . If your hosting company is not able to solve the issue, you can open a ticket with support and send us the error logs.

Common Reason: Not Enough Memory Allocated

Sometimes, this error message is received because of a memory limit issue. The memory limit has to be set to at least 128MB according to our requirements. To be sure that this is a memory issue, you can ask your hosting company to send you the PHP error logs of your server.

Fatal Errors

There are other things that can lead to this issue (for instance, a fatal error or an issue with a third-party plugin) and without the error logs it is not possible to know what is the exact issue.

How To Troubleshoot a 500 Error

As mentioned above, the first step in troubleshooting is to see what issue is shown in the PHP error logs. If the logs don』t give you precise clues, you can try this troubleshooting technique next: Deactivate your plugins (besides Elementor and Elementor Pro) and switch to a default theme of WordPress such as Twenty Nineteen to rule out a conflict with a third-party product.

Does This Only Happen When Saving Changes?

If the issue happens when you want to save changes, please follow this guide

Custom Fonts Not Displaying On Front End

Custom Fonts Not Displaying On Front End

Table Of Contents

Cache IssueHTTP / HTTPS mis-matchCORS Error in ConsoleImporting TemplatesFont Weight Selected Is Not AvailableInvalid Custom CodeNot Including All Font Variations

There are several possible reasons why your custom fonts may not be displaying on the front end.

Cache Issue

The problem may be a cache issue.

If you are using a WordPress cache plugin, clear it. If your host uses server-side caching, clear it as well. You may need to ask your host to help you clear it. Finally, clear your browser』s cache. For more info on WordPress and cache, see https://codex.wordpress.org/I_Make_Changes_and_Nothing_HappensAfter clearing all cache, check again. You may need to use another browser, or a browser in incognito mode if the browser』s cache did not fully clear.  

HTTP / HTTPS mis-match

If you』ve recently migrated from HTTP to HTTPS, your font files may need to be re-uploaded, so they are being served from HTTPS. 

Go to Elementor > Custom Fonts. If the URLs listed do not begin with https, click the DELETE button next to each, and then click UPLOAD buttons to re-upload the files.Go to Elementor > Tools and click the Regenerate CSS buttonThe URLs should now begin with https and your fonts should appear on the front end.

If this is still not working, you may have encountered other issues when you previously migrated to HTTPS.

Go to Elementor > Tools > Replace URLIn the 「Old URL field」 put the site URL with HTTP and in the New URL put the site URL with HTTPS.Click the Replace URL button.Click the Save Changes button.

Finally, go to WordPress』 settings at Settings > General

Ensure both the WordPress Address (URL) and the Site Address (URL) both begin with https

CORS Error in Console

If your custom font is not showing and you receive a CORS error in your browser』s console, you need to contact your host, as they will need to modify the server』s CORS policy. In order to resolve this, changes must be made to your server. Please contact your hosting company to report this issue. Here are useful guides from external sources that you could provide to them.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

https://htaccessbook.com/increase-security-x-security-headers/

Importing Templates

If you』ve imported a template that included custom fonts, you will need to add the custom fonts manually, because the fonts of these templates won』t be imported automatically.

Font Weight Selected Is Not Available

Custom fonts may not have all available font weights available. If you select a specific font-weight in Typography options, but your custom font does not have that specific weight available, it may not display that font at all. In this case, select a different font weight that is available for your custom font.

Invalid Custom Code

If invalid custom CSS or other code has been added to the site, this can cause many different display problems, including the inability to display custom fonts. Remove or fix the improper code to solve this issue.

Not Including All Font Variations

If custom fonts are not displaying on iOS devices for example, please ensure you have uploaded all font variations, including .ttf .svg .woff .woff2 and .eot

If any variations are missing, in some cases, a default font will be displayed, however, in other cases, the text will be completely gone and invisible on the website.

This can happen because different browsers render fonts differently, so to prevent any inconsistencies, it is important to add all font variations to maintain full browser support.

In order to fix this issue, you can use the Generator tool from Font Squirrel.

From there, you can check options as shown below:

Step 1: 

Step 2: 

Step 3:

You will get the .zip file with all font variations inside. Extract the .zip file and upload all variations to your site』s Custom Fonts section. Learn how.