The Publish / Update Button Does Not Work

If you receive an error 500 or a Server Error, you need to check your PHP server logs to troubleshoot the issue. Very often, this happens due to lack of memory, however, there are other circumstances that could cause this, and only the server logs can point to the exact reason. You can ask your hosting company to send you the PHP error logs of your server. When you experience this issue, one of these solutions might help:

Erase some sections in the page that you are trying to save and see if it enables you to perform the action (you can retrieve them by using the revision history of Elementor). Increase the WP memory limit. You can fit the memory limit to our requirements and activate the debug mode of WordPress to check how many MB you need exactly. Although you can do it by yourself, it is preferable to contact your hosting provider for further assistance. Decrease or clear the number of post revisions that are stored in the database. If the host does not provide enough memory to handle the save function when there are many revisions stored, the error may occur. Numerous plugins are available to help with this, such as WP Sweep.If the issue still occurs after increasing the memory, divide your work into a few templates and paste them into another page. Sometimes, saving issues can happen when the admin-ajax.php script timeouts. You can know if it is the issue by checking the error messages appearing in your browser console. The error message, in this case, is Failed to load resource: the server responded with a status of 413. When you experience this problem, add the following directives to your .htaccess file to increase the dynamic timeout:  

SetEnvIf Request_URI "admin-ajax.php" DynamicTimeout=150

This can also be due to parameters set on your server. For instance, HTTP/HTTPS conflicts. Adding an SSL certification to your site can solve the issue. Then you will have to change the URL of the site from your WP Dashboard in Elementor > Tools > Replace URL.403 error when attempting to update a page: This can be due to a security plugin such as WordFence and others. To sort this out, activate the learning mode of this plugin or contact their support. This issue can also be due to the firewall of your server so this has to be checked with your hosting company.

If the aforementioned troubleshooting procedure doesn』t help you, please send us your system info so we can try to help you solve the problem.

I Changed the URL of My Website and Elementor Does Not Work Anymore

After you』ve migrated your website, most likely you changed the URL of your website as well, these are the steps you need to take:

Go to Elementor > Tools > Replace URL Tab Enter your old-url and your new-url and click Replace URLUnder the General Tab > Regenerate CSS, click Regenerate FilesIn Settings > General on your WordPress Dashboard, make sure that the URLs are similar.

Note: Make sure you assign the license to the new URL via your account on my.elementor.com

Important!: Adding an SSL Certificate to your website (HTTP to HTTPS) also requires you to replace the URL.

How To Add A Back To Top Button Using Elementor

Click the section handle of the first section on your page to enter its settingsOn the section』s Advanced tab, enter a name into the CSS ID field, such as 『top』Drag the Button widget onto your page, wherever you』d like to place itType Top in the button』s text fieldType #top in the Link field, or whichever CSS ID you chose in step number 2. (Make sure to place a # sign before the CSS ID with no spaces between, in this step. However, do not place a # sign in step 2).

Clicking your Top button will now bring the user to the top section.

Tip: You can stick the button to the bottom of the page with Elementor Pro』s Sticky Scrolling Effect

How to Change a Background Image

How To Change A Section』s Background Image

Click on the Section Settings handle to enter the Section SettingsGo to Style > Background > Background Type > ClassicUnder Image click the + sign and choose your image.

How To Change An Entire Page』s Background Image

Click the cog icon in the lower left of the editor Panel.Click the Style tab.Click the pencil icon next to Background Type.Under Image, click the + sign and choose your image.

Adding Templates

Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.

From the editing screen, Click the  icon as shown in the screenshot above. When the library of templates pops up, click the magnifying glass icon  to preview a template.Click INSERT to select the template of your choice.You can even give your favorite templates a heart and save them to My Favorites.Have a template you downloaded elsewhere that you want to use? Just click the arrow in the top right corner to upload its .json or .zip file.

Next step – Preview & Publish your page

Will Elementor Work if I Change the Domain of My Website?

Yes. If you replaced the domain of your website, you can go to:

Elementor > Tools > Replace URL in your WordPress dashboard to replace all references to your old domain with the new domain, allowing you to continue working with Elementor from your new domain.

How To Hide Page Titles In WordPress

If you』re using Elementor, you can hide titles with one click, no need to use any code or any other plugin.

Follow these steps:

1. Go to your page and click 『 Edit with Elementor. Here we』ve prepared a page that has a title we are going to hide.

2. Click the gear icon for  Document settings at the bottom left of the widget panel.

3. Switch on 『 Hide Title『

4. Done! No coding and you successfully hid the title.

What to Do If Title Cannot Be Hidden

Note that if your theme is using a different class for the title, this option won』t automatically work and you will have to manually set it.

The default class for most themes is:

Title

If your theme is using a different class, you』ll need to change the Page Title Selector.

Simply 「Edit with Elementor」 any page or postClick the hamburger menu icon in the upper left corner of the Elementor Widget Panel, and click on Site Settings. Under Settings, click Layout.

Here you will see the Page Title Selector field with the description:

Elementor lets you hide the page title. This works for themes that have 「h1.entry-title」 selector. If your theme』s selector is different, please enter it above.

Now, add your theme』s selector for the title, and the hide title functionality should now work.

How Do I Know What Class Name My Theme Is Using For the H1 Title?

Visit your page in a Chrome browser, and thenright-click on the title to be hidden, chooseInspect, and make a note of the H1 class name, which is shown in quotes, as demonstrated below.

If the class name is 「abc-page-title」 for example, then you would type h1.abc-page-title into the Page Title Selector in the Elementor > Settings > Style area mentioned above.

How to Use Z-Index in Elementor

The Z-Index property specifies the stack order of elements. An element with greater stack order will always be in front of an element with a lower stack order (i.e. an element with a Z-index of 10 will be on top of (in front of) an element with a Z-index of 5.

You can set the stack number on any Widget under the Advanced Tab > Z-Index

reCAPTCHA & Elementor Integration

reCAPTCHA is one of the most popular ways to prevent spam and abuse by preventing bots from being able to submit forms.

To add a reCAPTCHA, you first need to get the reCAPTCHA keys from the Google website. You can choose from either reCAPTCHA v3 or reCAPTCHA v2. We recommend v3 as it is the new more secure, less intrusive method to use.

reCAPTCHA v3:

Go to the Google reCAPTCHA site and choose v3.Add a Label to identify this instance. Add a domain, e.g. example.comChoose the owner email address or add a new oneAccept the Terms of Service and Submit.On the next page, copy both the Site Key and the Secret Key.Enter these keys in the Elementor > Settings > Integrations > reCAPTCHA options and click Save Changes. (You can change the Score Threshold if desired. If bots manage to get around the reCAPTCHA, increase the score).Add a New Page and Edit With ElementorDrag in a Form WidgetEdit your form』s Form Fields and click on Add ItemUnder Type choose reCAPTCHA3Choose whether to place the badge to the right (bottom of the page), left (bottom of the page), or inline.Click Save

You will now see the badge on the page.

reCAPTCHA v2:

Go to the Google reCAPTCHA site.Under Label fill in your website』s name, choose reCAPTCHA V2 「I』m not a robot」, enter the domains you wish to secure, and accept the Terms & Conditions.You will receive two API KeysReturn to the WordPress Dashboard > Elementor > Settings > IntegrationsUnder reCAPTCHA, enter the two API Keys and click Save ChangesAdd a New Page and Edit With ElementorDrag in a Form WidgetEdit your form』s Form Fields and click on Under Type choose reCAPTCHAYou now see the 『I am not a robot『 text in the formClick Save

Site Logo Widget (Pro)

The Site Logo widget is a dynamic widget that displays the Site Logo. Although the logo can only be replaced or deleted in either the Elementor Site Settings or in the WordPress Customizer, the Site Logo widget gives you the ability to change some design aspects of the logo.

Content

Choose Image: The image is dynamically retrieved for you from the Elementor Site Settings or the WordPress Customizer. You can edit or change your logo in either of those places.Image Size: Set the size of the image, from thumbnail to full, or enter a custom sizeAlignment: Align the site logo to the left, right, or centerCaption: Add a caption to the bottom of the image. Select from None, Attachment Caption, or Custom CaptionLink to: Set the logo』s link, selecting from None, Media File or Custom Link. If Media File is chosen, set the Lightbox to Default, Yes, or No. If Custom Link is chosen, the URL will be automatically, dynamically retrieved for you.

Style

Width: Set the width of the image in either percentage (%), pixels (px), or viewport width (vw).Max Width: Set the maximum width of the image as a percentage.Opacity: Set the opacity levelCSS Filters: Set CSS Filters: Blur, Brightness, Contrast and SaturationBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundnessTransition Duration (only on Hover): Set the hover animation durationHover Animation (only on Hover): Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.

Advanced

Set the Advanced options that are applicable to this widget

Note: The display of the logo depends on your theme. Elementor follows the coding standards of WordPress set by its official Codex. If your theme does not use the default function of WordPress which calls the custom-logo, it won』t be displayed: https://codex.wordpress.org/Theme_Logo. If it isn』t displayed, instead of using the site logo widget, you can simply use the Image widget to obtain the same result.