How to Add Custom Fonts Using Elementor

How to Add Custom Fonts Using Elementor

If you need more than the 800+ Google Fonts that come With Elementor, you can easily add Custom Fonts to your website. Watch this short video.

Upload Custom Fonts

Go to the WordPress dashboard, under Elementor > Custom FontsClick Add NewGive your font a name and click Add Font Variation

Note: Uploaded fonts are stored in the wp-content/uploads/ folder on your server.

Available Font Formats Include:

The Web Open Font Format (WOFF) – WOFF is the most recommended format to use, since it is supported by all modern browsersThe Web Open Font Format (WOFF 2.0) – TrueType/OpenType font that provides better compression than WOFF 1.0TrueType Fonts (TTF) – This font was developed in the late 1980s, by Apple and MicrosoftSVG Fonts/Shapes – SVG fonts allow SVG to be used as glyphs when displaying text. Make sure to use this format to support old versions of iPhoneEmbedded OpenType Fonts (EOT) – This font file works on IE, but not on other browsers. Make sure to use this format to support earlier versions of IE

Weights & Styles

Choose a Font Weight. Although all weights will be shown, please only select a weight that your custom font supports. Learn more.Select a StyleClick PublishRepeat for every font variation

Viewing your Custom Fonts

You will find the newly added fonts when you edit text with Elementor.

Go to the STYLE TABUnder Typography > Family you』ll see your new Custom Fonts.

If you』re using Typekit fonts, please see this article.

Troubleshooting

If you experience issues, check this guide.

Image Carousel Widget

Image Carousel Widget

The Image Carousel Widget allows you to add interesting and dynamic galleries to your pages. In the video, we explain about creating a gallery image carousel and a three column carousel.

Content

Image Carousel

Click Add Image button to select images to display. Once selected, click Create a New Gallery button and then click the Insert Gallery button.Image Size: Choose the size of the image, from thumbnail to full, or enter a custom sizeSlides to Show: Select the number of slides to show at one time, from 1 to 10, available for desktop, tablet, and mobile devicesSlides to Scroll: Set how many slides are scrolled per swipeImage Stretch: Select Yes or NoNavigation: Choose to display navigation Arrows, Dots, Both or NoneLink to: Link images to their respective Media Files, Custom URLs, or NoneCaption: Set image captions to None, Title, Caption, or Description

Additional Options

Pause on Hover: Select whether or not to pause autoplay when a user hovers over the carousel. Yes or NoPause on Interaction: Select whether or not to pause autoplay when a user interacts with the carousel. Yes or No.Autoplay: Choose Yes or No to rotate slides automaticallyAutoplay Speed: Set the time it takes for the next slide to start rotating. This time is in milliseconds, so 1000 ms is equal to 1 second.Infinite Loop: Show carousel in a continuous loop, infinitely. Yes or NoAnimation Speed: Set the speed of slide animation, in millisecondsDirection: Choose to have the slides rotate from left or right

Style

Navigation

Arrows

Position: Set the position of the arrows inside or outside the sliderSize: Set the exact size of the arrowsColor: Set the color of the arrows

Dots

Position: Set the position of the dots inside or outside the sliderSize: Set the exact size of the dotsColor: Set the color of the dots

Image

Vertical Align: Vertically align the image to the top, middle, or bottomSpacing: Set the spacing between slides. Choose Default (20px) or Custom (This option is only available if a quantity greater than 1 is chosen for Slides to Show on the Content tab)Border Type: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or GrooveBorder Radius: Set the border-radius, to control corner roundness

Note: Autoplay is affected by Google』s Autoplay policy on Chrome browsers.
Advanced
Set the Advanced options that are applicable to this widget

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 Save, Import, & Export Templates from the Elementor Template Library

How to Save, Import, & Export Templates from the Elementor Template Library

Elementor Template Library gives you access to hundreds of designer-made Page layouts and Blocks, all with premium high-end stock images, which you can use freely on your site.

How To Insert Templates

Click the Add Template From Library icon  to add a Page template, Block, or your own Saved template from the editing screen.The first time you insert a template, you will be prompted to connect your free Elementor account to access the Template Library. If you don』t yet have an account, you can register for a free account during this process. Click the magnifying glass icon  to preview a template.Click INSERT to select the required template.Give your favorite templates a heart and save them to MY FAVORITES.Click the arrow in the top right corner  to upload a .json or .zip file.

How To Save Pages as Templates

Click the green button located at the bottom of the panelChoose Save TemplateGive a name to your template and save

Saving Sections as Templates

Choose the section you want to save and right-click the Section Settings Give it a name and click Save

How to Export Templates

You can export your saved templates.

Click the Add Template From Library icon   in the Elementor editorUnder My Templates click the 3-dots  and click Export

How to Import Templates

You can import templates you』ve exported or downloaded.

Go to Templates > Saved Templates or Templates > Theme Builder or Templates > PopupsClick the Import Templates buttonChoose the file you want to import and click the Import Now buttonYour imported template will now be displayed in your Templates list

Note: Please be advised that some of the templates contain third-party images, videos, media, files, audio and other visual components. While we have the right to use them in our Template Library, we cannot ensure that you may use them in your own product. Therefore, please replace or remove all images from your copy of the templates.

Form Widget FAQ

Form Widget FAQ

If you are having issues with Elementor forms, read through these frequently asked questions to find common solutions.

How can I save Elementor Form submissions in a database?

With the Elementor Form Submissions feature you can backup your form submissions data, access it whenever you want, and manage it all from one place. Having your submissions info allows you to gather insights, analyze a campaign』s data, or simply manage your submissions from within your WordPress dashboard.

Where have all my files gone after uploading?

Uploaded files are saved in a dedicated directory under 『uploads/elementor/forms/』.

Why does my file name change after upload?

File names are set randomly, for security reasons (we don』t want users uploading 『yo_mama.jpg』 now do we?).

I』ve set the number of Max. Files, but I』m still not able to upload as many files as the number I set. Why?

This setting does not override your host』s server setting.This option limits the number of files that can be uploaded from the form itself but only if this limit value does not exceed the PHP』s 「max_file_uploads」 value. If you need more, contact your to have the 「max_file_uploads」 value raised for your site.

How do I customize the date and time design in my forms?

The Date and Time fields can be styled using Custom CSS. On mobile, the browser』s native HTML5 design is used. You can switch on Native HTML5, so the browser』s design is used on all devices. Once you choose Date or Time, you』ll see the Native HTML5 switch.

Why can』t I see the placeholder of the date/time field on some mobile browsers?

The labels for date/time inputs are not properly supported by all browsers, especially by the browsers of mobile devices. This is why the placeholder may not always be visible.

This is not an issue that is specific to Elementor. This is a well-known development issue. There are no perfect solutions for solving this, but you can add code like the follow to the Advanced Tab > Custom CSS section of your Form Widget:

input[type='time']:after {
color: #aaa;
content: attr(placeholder);
}
input[type='date']:after {
color: #aaa;
content: attr(placeholder);
}

Note: The drawback to using this code is that the placeholder will still appear, even after selecting the time and the date. 

How can I place dynamic meta data into a form field?

Click the form field』s Advanced tab as shown below. Click the dynamic icon to the right of the Default Value field. Select the desired meta data from the dropdown list.

Why is the Redirect not working?

Redirecting the user to a designated Thank You page is always a good idea. It takes your converted user to the next step, enabling you to upsell, track user funnels, and give your user a good experience.

To activate Redirect: Go to Actions After Submit, add Redirect and paste the full URL of your Thank You page.

Having Problems?

Here are some Troubleshooting ideas:

Make sure you didn』t paste-in an empty character by mistake.Be sure you pasted the full URL and not a Relative URL. (『/thank_you/』)Remove any Javascript from the page and try again. You can check for Javascript errors in the developer tools.Deactivate other Plugins and switch to theme GeneratePress and see if Redirect works.

Which Custom Messages Can I Modify in Forms?

Forms include 3 different types of messages:

Browser messages – these are sent from the browser and can not be customized. For instance, if you do not enter a correct email address, you will get a message saying 『Please include an @ in the email address』. These messages appear if the form was not filled in correctly before the form is sent.Server messages are sent from the server. You can format as you need, using custom CSS. These messages appear after the form is sent. There are a few custom options including Success, Error, Invalid, etc. Example: The form was sent successfully! You can always alter the content of the custom messages by going to Form > Additional Options, switch-on Custom Messages and locate the relevant message.Third-party servers. Error messages coming from Email Marketing service companies such as MailChimp cannot be modified. Please note that some of the error messages sent by these third-party products are shown to the admin only (you and not the subscribers) and this is not something that we can control.

How do I track form submissions and conversions using Google Analytics and Tag Manager?

Add your tracking code to a thank you page and redirect your form to that page after submission.

There is also a Javascript event that the form triggers automatically after submission, which can be used to add to your custom tracking code. These are added externally to Elementor, using functions.php for example.

Here is a base snippet you can build on:

//The event is submit_success so you can catch it for example:
jQuery( document ).ready(function( $ ){
jQuery( document ).on('submit_success', function(){
// form has been submitted do your tracking here...
});
});

Make sure you replace the comment above 「// form has been submitted do your tracking here … 」 with your custom tracking code. Otherwise, the snippet won』t do anything.

How can I integrate another service with webhook and field mapping? 

Elementor has a webhook option under Actions After Submit. By default, our webhook sends each field with the label as a name, or all fields in a single array when Advanced Data is on.

To control the field names, give your form fields a custom ID and use the following snippet. 

Be sure to update the form name and your webhook URL.

Below is an example of customizing your webhook, where field IDs are sent instead of names.

add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
//make sure its our form
$form_name = $record->get_form_settings( 'form_name' );
if ( 'MY_FORM_NAME' !== $form_name ) {
return;
}

$raw_fields = $record->get( 'fields' );
$fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[ $id ] = $field['value'];
}

wp_remote_post( 'HTTP://YOUR_WEBHOOK_URL', [
'body' => $fields,
]);
});

How can I troubleshoot issues with forms which are not sent?

This happens generally because of server errors or fields not properly mapped. For further information, please read this guide.

「There』s something wrong. The form is invalid」

If you receive an error message such as 「There』s something wrong. The form is invalid」, this could be due to several reasons.

One reason is that the form has been added as a widget inside another widget via a shortcode. This is an unofficial and unreliable method of adding a form to a page, so this should be avoided.

Some Users Only Receive a Red X After Submitting A Form. Why?

MailChimp integration with the Elementor form widget only acts as a 『sign up form』. Re-subscription via an Elementor form widget is not possible as the MailChimp API does not allow this. Re-subscription to a list is only through MailChimp hosted signup forms. This same situation may apply to other services that integrate with forms.

To handle these types of users, you can put a note somewhere below the form that mentions that if they were previously signed up to the list, then they cannot resubscribe this way. Give them a link to redirect them to the MailChimp hosted signup forms instead, so they can resubscribe there.

Learn more about the Form Widget (Pro)

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.

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;
}

Getting Server Errors or Forms Not Sending Emails? Here』s How to fix it.

Getting Server Errors or Forms Not Sending Emails? Here』s How to fix it.

Sound like a familiar trauma? Well, you』re in good company, this issue is commonly raised by our users. This article will explain how to solve WordPress not sending emails through your form and 「server error」 issues.

Well, there is a short answer and a long answer.

First, run a test on your WordPress site and see if it can even send emails.

To confirm email deliverability, you can use any SMTP plugin and select different SMTP server like SendGrid to check if it delivers correctly. If it works correctly with other and shows error with default SMTP then this needs to be reported to hosting.

Why does this Server Error occur?

Elementor uses WordPress』 wp_mail function to send emails. Your web host takes the sent email, processes it, and sends it. This is where 90% of the issues happen.

Sometimes, hosting servers disable the PHP function used for sending emails. They basically block your emails.

This is done usually to make sure you don』t send spam through your site (your host doesn』t want you to use its server as a spam server).

Technically speaking – the wp_mail function uses the PHP send_mail function by default. But if it is disabled on that server, then email sending fails. To get around this, either contact your hosting service and request them to enable it, or use an SMTP server instead.

What the heck is SMTP anyhow?

SMTP stands for 「Simple Mail Transfer Protocol」. SMTP is an email server that routes your email in forms into the inbox of your listed customers. It is an external email server (e.g. Gmail can be used as an SMTP server) that helps ensure your emails get delivered faster and helps prevent your email from ending up in users』 spam folders.

Try using any popular SMTP plugin ( https://wordpress.org/plugins/search/SMTP/).

If that doesn』t work…

More Troubleshooting Tips for Server Errors

Besides contacting your host provider, here are several steps you can try to solve this issue:

The form』s From Email address usually needs to be from the same domain as your website. So if your site is example.com, then you would need to use a From Email address of [email protected] or [email protected], etc. You can use the Reply-To field to select the visitor』s email address for replying to the user』s request.You may use the Elementor Form Submissions feature to check that the form is functioning properly. To learn more about Form Submissions click here.Use another email address (it』s possible that your email is being registered as spam). To avoid being marked as spam try changing the length (shorter or longer) of your email subject line.If you are using any third-party integrations, try disabling them. For example, MailChimp or ActiveCampaign. If that did the trick, then read more in our integrations guide. Basically, you have to check the field mapping within your autoresponder account and within the Form widget. Make sure that you do not have the required fields set to 「none」 within the Form Widget. Also make sure also that you did not add an 「address」 field or a 「birthday」 field within your field mapping settings in your MailChimp accountIf the page refreshes after submitting a form, generally this is due to a plugin or a theme code conflict. In this case, deactivate all your plugins besides Elementor and Elementor Pro, and check if the emails are sent properly. If this didn』t work, switch to a default theme of WordPress and check if it solves the issue.Make sure that the form field』s ID (in the field』s Advanced tab) is populated; without a valid field ID, the form field value will not be seen in the email message sent to the receiver of the submissions if the 「[all-fields]」 shortcode is used. Make sure you use the correct shortcode as shown in the Advanced tab for each field within your email message box.

If the issue persists:

Please send us your system info. You can find it under Elementor > System Info in your WP Dashboard.Send us also the web server and PHP error logs. You can find them in your hosting panel or you ask your hosting company to provide them for you.

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.

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.