Author 诗语

Elementor 2.4 – Overview

Elementor v2.4 introduces features that focus on improving your user experience: mobile control over background images, custom background size and position, safe mode for troubleshooting and more.

New Stability & Maintenance Features

Safe Mode Feature

Safe Mode helps identify any issue that interferes with Elementor loading. In most cases, loading issues are caused by conflicts between plugins or themes.

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

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

Async Database Upgrade System

In the past, certain upgrades required database changes to occur behind the scenes. For larger sites, this posed a problem which sometimes caused timeouts.

With the new Async Database upgrade system, we split the DB updates into chunks that run in the background in order to avoid these timeouts.

PHP Logger for System Info

Many support issues can be identified by following the PHP log file. By adding this log to the System info, we can empower our users and support staff to better understand the issue at hand, its root cause and relevant solution.

Respect the WP  Tag

Until now, Elementor did not support the WordPress   tag, which helps determine the preview text that is shown for blog posts in archive pages (not built using Elementor』s archive template). While this is not commonly used on modern themes, it provides backward compatibility for this functionality.

Read More Widget

We』ve added a Read More Widget for Themes that Support This Feature. Following the previously mentioned feature, you can now add the 『Read More』 widget to your posts, to set the text cut-off point in archive pages.

Note: This widget only affects themes that use the_content in archive pages.

Background & Border Customization

More Responsive Controls of Background & Borders

We』ve added the maximum flexibility for responsive design. The new version of Elementor lets users have complete control over the background and border design on desktop, tablet and mobile devices.

This control includes device-specific settings over background controls (image, position, attachment, repeat, and size) and border controls (border-radius and width).

Add custom options for Background Size & Background Position

You now have much more control over the background design. We are now adding two new custom controls for the background size and position options.

With custom position, you can manually set your desired background position on an X & Y axis. Instead of setting a general position like 『Top Left』, you now have the option to set the exact point that the background will align to.

Besides position, you can also set custom background image size. Choose 『Custom』 and set an exact width for your background image.

Revamped Admin Menu

Re-Organize the Templates Library Screens

To make it easier to handle the different Elementor dashboard screens, we』ve separated the previously named 『My Templates』 menu and renamed it as 『Templates』.

We』ve also positioned the Elementor & Library side menus higher up on the dashboard, to make it more accessible.

Add Categories Taxonomy for Templates Library

Now you can add different categories to your templates, making the workflow more efficient and better organized. Simply group templates by relating them to the desired category.

Restored Quick Edit for Templates

In the new version of Elementor, you can Quick Edit saved templates in order to instantly edit the template name, slug, status and categories without hassle.

How To Create A Hello Bar Countdown Popup

Create a popup that displays a 24-Hour Sale countdown timer

You』ll learn how to create a popup that:

Adds urgencyIncreases sales

Design The Popup And Its Content

Go to Templates > Popups > Add New and give your new Popup a nameChoose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we』ll design our own.

Popup > Layout Tab

Width: 100vw, so it will display across 100% of the viewport widthHeight: CustomCustom Height: 300pxPosition > Vertical: TopOverlay: Slide to OffEntrance Animation: Fade InAnimation Duration: 2.2 seconds

Popup > Style Tab

Popup > Color: Slide to transparentPopup > Box Shadow: Click the reset arrow to turn off box shadow.Close Button > Vertical Position: 20Close Button > Horizontal Position: 4Size: 30

Popup > Advanced Tab

Padding: 30px for all.

Content

Click + to add a new section with 4 columns.Section > Layout > Content Position: MiddleSection > Style > Color: #e8e8e8Add a Heading widget, and type your title, and adjust font size and weight as desiredAdd a Button widget, and adjust text, color, and design elements as desiredAdd a Countdown widget, and stretch it out by dragging the columnCountdown > Content > Type: Evergreen TimerCountdown > Content > Hours: 23Countdown > Content > Minutes: 59Countdown > Content > Actions After Expire: Choose both Hide and New MessageCountdown > Content > Message: The the message you wish to display with the timer expiresCountdown > Style > Boxes > Background Color: Select a colorCountdown > Style > Content > Digits: Change color and typography  as desiredCountdown > Style > Content > Label: Change color and typography as desiredAdd an Image widget, and choose a photo from your library.Image > Advanced > Margin: Set a minus margin on the bottom so the image will float slightly below the popup.Image > Advanced > Entrance Animation: Rotate In Down LeftImage > Advanced > Animation Duration: SlowImage > Advanced > Animation Delay (ms): 500

Set The Publish Options

Condition: Include > Entire SiteTriggers > On Page Load: Yes, Within 3 secondsAdvanced Rules > Hide For Logged In Users: Yes, All UsersAdvanced Rules > Show Up To X Times: Yes, 1 time

All done. Visit your page, and after 3 seconds, your Countdown popup will appear, creating a sense of urgency and an incentive to purchase a product.

My changes do not appear online, what can I do?

https://youtu.be/O6aPEQGEaVA

Note: The first thing you should try is to open your website in Incognito Mode and see if your changes appear. If they appear – it』s probably a local caching issue. If they still don』t appear – it』s probably a server caching issue.

If your styles are not applied after saving them, it might be due to a caching issue. When your styles are not applied online, please regenerate the CSS via Elementor > Tools > Regenerate CSS on your WordPress Dashboard, then make sure that you clear all forms of cache including your browser cache, your WP cache (your WP caching plugin if you have one), and your server cache, if you have one. (In this case, you can contact your hosting provider for help to clear the server cache). Once all cache is cleared, save your changes:  https://codex.wordpress.org/I_Make_Changes_and_Nothing_HappensThis problem can also be due to a theme-related issue if it affects the typography only (font size, font height etc…). For instance, the CSS of a theme which overrides the one of Elementor. To be sure that it is a theme issue, switch to a default theme of WordPress such as Twenty Nineteen and if it solves the problem, contact the developers of your theme. In some cases, it will be possible to solve the issue by switching the CSS print method in 「Elementor > Settings > Advanced」 on your WordPress Dashboard.If you use another page builder, it can override the content built with Elementor and you will see online the content written via the conflicting page builder and not the one written with Elementor. To fix this issue, save the page as a template and used the template on a new page. Check the following article to see how it is possible to save pages as templatesIt is also not recommended to edit back and forth between Elementor and the Classic Editor of WordPress as this can lead to content issues. Elementor is a website builder and the Classic Editor of WordPress is an editor. The way that they handle content is different. SVG images are not displayed if they do not have a width set in pixels.HTML tags that are not closed can also lead to layout issues so if you added some HTML code in the HTML widget or in another widget, make sure that all your tags are properly opened and closed.Mixed Content issues can also cause problems. Go to WordPress Dashboard > Settings > General and ensure that both the WordPress Address (URL) and Site Address (URL) are the same, and that both are either http:// or https://. If you have http/https mixed content problems, then you will often see missing images or missing icons on your live site.

Which Elements Are Impacted By The Default Color Palette

There are four Default Colors: Primary, Secondary, Text, and Accent. The following examples show where they are typically used.

Primary Colors are used for Headings and Icons.Secondary Colors are used for List Items, Subheadings, Animated Headings, and Price Table backgrounds.Text Colors are used for Paragraphs and Menu itemsAccent Colors are used for Links, Button backgrounds, Tab and Accordion headings, and Badges

Each of the colors will be used in various widgets in ways similar to the examples above. Below are some color examples to help visualize the areas in which each color is used.

Primary Color Examples

Secondary Color Examples

Text Color Examples

Accent Color Examples

How Default Colors Are Used In Posts Widget

Should I Update Elementor?

Should I update Elementor, and if I do, will updating affect my current settings?

It is always a good idea to keep any WordPress plugin, including Elementor, updated to the latest version. New versions not only introduce new features, but they also fix bugs that may exist in previous versions. In addition, all WordPress plugins that aren』t regularly updated may become security problems in the future. 

Current settings should not be affected in any way by an Elementor update.

The majority of the time, updates just work, and are beneficial. However, we highly recommend that you test the updates on a staging website before updating your live sites!

You should also back up your websites on a regular basis to avoid pitfalls. Updates are always tested on our end and by BETA testers but we cannot guarantee that there won』t be issues with some specific environments.

Most of the issues following updates are indeed not linked to the code added but rather to issues with specific environments, such as installs with conflicting plugins and themes or with server settings which prevent Elementor from working properly.

When I Try to Edit with Elementor I Get an 『Internal Server』 Error

If you get this error: 「Internal Server Error. The server encountered an internal error or misconfiguration and was unable to complete your request.「, when you try to edit with Elementor, most of the time it is due to a memory issue. When you receive this error message, you can increase the memory limit by following these instructions, but you should preferably contact your hosting company to solve the problem.

Rollback To a Previous Version of Elementor

If you are experiencing an issue with your current version of Elementor, this tool enables you to roll back to a previous version before the issue appeared.

Go to > ToolsClick the Version Control tabIf you are rolling back the free version of Elementor, select the version you would like to revert to, and then click its Reinstall button. This will reinstall the specific version you chose. If you are rolling back Elementor Pro, just click its Reinstall button. This will reinstall the last version prior to the installed one.

Important! Always backup your database before making changes such as rolling back.

Icon Widget

The Icon widget is useful for displaying FontAwesome icons in numerous styles on your page.

There are 3 different views for the widget: Default, Stacked, and Framed.If Default view is chosen, the following options are available:

Content

Icon: Choose from a list of Font Awesome iconsView: Choose between default, stacked or framedLink: Enter the URL for the item』s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.Alignment: Align the icon to left, center or right.

Style

Icon

Normal

Primary: Choose the main and secondary colors for the iconSize: Increase or decrease the size of the iconRotate: Rotate the icon

Hover

Primary Color: Set colors for the hoverHover Animation: Set any animation for the hover stateSize: Set the exact size of the iconRotate: Rotate the icon up to 360 degrees

If Stacked or Framed view is chosen, the following options are available:

Content

Icon: Choose from a list of Font Awesome iconsView: Choose between default, stacked or framedShape: Choose the shape of the stack or frame, either Circle or SquareLink: Enter the URL for the item』s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.Alignment: Align the icon to left, center or right.

Style

Icon

Normal

Primary Color: Choose the primary color (the background or frame) color for the iconSecondary Color: Choose the secondary color, which is the color of the icon itselfPadding: Set the padding around the icon to control the size of the stack or frameSize: Set the size of the icon.Rotate: Rotate the icon up to 360 degreesBorder Radius: Set the border radius to control the corner roundness of the stack or frame

Hover

Primary Color: Choose the primary color (the background or frame) color for the iconSecondary Color: Choose the secondary color, which is the color of the icon itselfHover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.Padding: Set the padding around the icon to control the size of the stack or frameSize: Set the size of the icon.Rotate: Rotate the icon up to 360 degreesBorder Radius: Set the border radius to control the corner roundness of the stack or frame

How To Create A Related Articles Popup

Create a popup at the end of an article to show users related articles.

You』ll learn how to create a popup that:

Is full-widthEncourages the visitor to stick around after reading an article.Provides a better user experience for your visitors

Design The Popup and Its Content

Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we』ll design our own.In the Popup Settings, under Layout, change the Width to 100vw, so it will display across 100% of the viewport width.Next, set the Layout > Horizontal Position to Center, and the Layout > Vertical Position to Bottom.Click the Add New Section icon to add a new section with 4 columns.Edit each column, setting the first column』s width to 55%, and each of the other columns to 15%.Add a Heading widget and a Text Editor widget to the first column.Add an Image widget to each of the other columns.Enter the link URL for each of the Image widgets, with each pointing to the relevant article.Add image effects. For one image, go to the Normal tab』s Style > CSS Filters and change the Saturation to 0. Then, under the Hover tab, go to Style > CSS Filters and make sure the Saturation is still at 100.Right-click the image widget, and choose Copy.Right-click each of the other image widgets, and choose Paste Style.Click the cog icon to open the Popup Settings panel. Go to Entrance Animation and choose Slide In Up.Set the Overlay to Hide.

Set The Publish Options

Add a new Condition such as Include > Singular > All Pages > PagenameAdd a new Trigger. Set On Scroll to Element to Yes and enter a CSS class name of your choice in the Selector field.Click the cog icon to open the Popup Settings panel.Edit the page where you wish the popup to appear. Once there, edit the element that will trigger the Popup when the user scrolls to it.Go to the element』s Advanced > CSS Classes and enter the same CSS class name as you entered into the Trigger above.

All done. Now visit the live page, scroll down to the end of the article, and see your Related Articles Popup in action.

How To Fix The 『Could Not Create Directory』 Error

This can be a permission issue. In this case, you have to contact your hosting company so that they can modify the file permissions of your server: https://codex.wordpress.org/Changing_File_PermissionsIn the meantime, you can manually update the plugin or ask your hosting company to manually update the plugin, by downloading it via our website and uploading it via FTP ( wp-content』 > 『plugins』). You will have to delete the version of the plugin that you currently use before.

It is also possible that this plugin will solve your issue