诗语，作者 Elementor 文档 - 第 25 页共 57 页

Call to Action Widget (Pro)

The Call to Action Widget is a tool for creating beautiful boxes that combine an image, some text, and a button. The widget uses animations and CSS effects to create user interactions, that appear when the user hovers over the box.

Content

Image

Skin: Choose either the Classic skin or the Cover skinLayout: (Only shown for Classic skin) Align the image to the left, right or on top of the image

If Classic Skin is chosen the following options are available:

Content

Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action titleIf Image is selected as the Graphic Element:Choose Image: Select or upload an image Image Size: Set the size of the image, from thumbnail to full, or set a custom size.If Icon is selected as the Graphic Element:Icon: Select an icon from the FontAwesome library View: Choose the default icon view, or select Stacked or Framed.Title & Description: Choose the title and description that appears in the front of the flip boxTitle HTML Tag: Set the title』s HTML tag to H1- H6, Div, or SpanButton Text: Enter the text to be displayed on the buttonLink: Enter the URL for the button』s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

Ribbon

Title: Enter the text to be displayed on the ribbon.

Style

Box

Min. Height – Set the minimum height of the whole boxAlignment – Align the content to the left, center or right of the boxVertical Position – Align the content to the top, center or bottom of the boxPadding – Set the padding for the content

Image

Min. Width: Set the minimum width for the imageMin. Height: Set the minimum height for the image

Content

Title

Typography: Set the typography options for the titleSpacing: Set the amount of space between the title and description

Description

Typography: Set the typography options for the titleSpacing: Set the amount of space between the description and the button

Colors

Background Color: Choose the background colorTitle Color: Choose the title colorDescription Color: Choose the description colorButton Color: Choose the button color

Button

Size: Select the button size, from Extra Small to Extra LargeText Color: Choose the color for the button』s textBackground Color: Choose the color for the button』s backgroundBorder Color: Choose the color for the button』s borderBorder Width: Set the border widthBorder Radius: Set the border radius to control corner roundness

Ribbon

Background Color: Choose the color for the ribbon』s backgroundText Color: Choose the color for the ribbon』s textDistance: Move the slider between 0-50 to set the distance for the ribbon.Typography: Set the typography options for the ribbon』s titleBox Shadow: Set the box shadow settings for the ribbon

Hover effects

Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at onceHover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down

The following items can be set independently for both the Normal and Hover states

Overlay Color: Choose the overlay color for the imageCSS Filters: Set blur, brightness, contrast and saturation for the imageBlend Mode: (For Normal state) Set a blend modeTransition Duration (ms): (For Hover state) Set the duration for the hover effect

If Cover Skin is chosen, the following options are available:

Content

Ribbon

Title: Enter the text to be displayed on the ribbon.

Style

Box

Min. Height: Set the minimum height of the whole boxAlignment: Align the content to the left, center or right of the boxVertical Position: Align the content to the top, center or bottom of the boxPadding: Set the padding for the content

Content

Title

Typography: Set the typography options for the titleSpacing: Set the amount of space between the title and description

Colors

Title Color: Choose the title colorButton Color: Choose the button color

Button

Size: Select the button size, from Extra Small to Extra LargeTypography: Set the typography options for the button textText Color: Choose the color for the button』s textBackground Color: Choose the color for the button』s backgroundBorder Color: Choose the color for the button』s borderBorder Width: Set the border widthBorder Radius: Set the border radius to control corner roundness

Ribbon

Hover Effects

Content

Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or downAnimation Duration: Set the amount of time the animation takes to completeSequenced Animation: Choose if the animation for the text elements appears sequenced or all at once

Background

Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or downOverlay Color: Choose the overlay color for normal and hoverCSS Filters: Set blur, brightness, contrast and saturation for the imageBlend Mode: (For Normal state) Set a blend mode for the imageTransition Duration (ms): (For Hover state) Set the duration for the hover effect

Advanced

Set the Advanced options that are applicable to this widget

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.

Motion Effects

Motion Effects are a powerful set of controls for adding beautiful transitions and animations to your design.

Until now, web designers who wanted to incorporate animations and motion effects needed to use either external libraries and or custom code.

Elementor Pro 2.5 offers an all-in-one solution for creating parallax, animations and other motion effects – all seamlessly integrated into the Elementor editor.

Scrolling Effects

Use Scrolling Effects to create amazing animations and interactions when the user scrolls through the page. Here』s a list of the scrolling effects:

Vertical Scroll

This is the classic parallax effect you』ve been waiting for. Vertical scroll makes the element move at a different speed than the page while scrolling, in the direction and speed of your choosing.

Horizontal Scroll

Horizontal scroll means when the visitor scrolls up and down, the element moves right and left accordingly. An example of use – a section with clouds that moves to the right when the visitor scrolls down.

Transparency

Transparency lets you gradually make elements more transparent or more visible in correlation to the visitor』s scroll. An example is having a title appear and then dissolve in accordance with the scroll.

There are 4 possible effect directions:

Fade in – Meaning the element starts as transparent and gradually becomes visible.

Fade out – The element starts as visible and gradually becomes transparent.

Fade out in – The element starts as visible, then fades out, then becomes visible again.

Fade in out – The element starts as transparent, then becomes visible, then transparent again.

Blur

This setting is similar to Transparency, only instead of transparency, the element gets blurred. A good example is background images, that get proper focus only when the user scrolls down.

Rotate

Here, the element rotates as you scroll. A nice example is seen in the rotation of stars in the image below:

Note: The two settings, X & Y Anchor Points, determine the axis around which the element scales or rotates. If you set orientation left-top, the rotation will happen around the left-top point of the element. If you set orientation center-center, the rotation will rotate around its center, like a wheel. This setting is relevant only to the above 『Rotate』 effect as well as the 『Scale』 effect listed below.

Scale

Scale lets you grow and shrink elements according to scroll. Example: A background that grows while scrolling.

Note: Use the 『 Apply effects on 』 to determine if motion effects are applied on mobile, desktop or tablet. Mouse effects will only affect desktop devices.

Mouse Effects

Mouse Track

Create a sense of depth by making elements move in relation to the visitor』s mouse movement.

3D Tilt

Similarly to how Mouse Track moves the element in relation to the mouse movement, the 3D Tilt effect tilts the element according to the same movement of the cursor.

Motion Effects Browser Compatibility

ChromeFirefoxSafariOperaEdgeInternet ExplorerSupportedSupportedSupportedSupportedSupported *Not Supported

* Slightly laggy behavior

Note: Elementor respects the 「reduced motion property」 preference that a user may set. If a user has set any of the following, then motion effects will be disabled for that user:

Mac: 「System Preferences > Accessibility > Display」 and check/un-check the box for 「Reduce motion」iOS: 「Settings > General > Accessibility」 and turn on/off 「Reduce Motion」Windows 10: 「Settings > Ease of Access > Display > Simplify and personalise Windows」

Note: In Safari, if you are not seeing mouse effects, or you are experiencing the problem of elements disappearing in Safari, this is due to an old jQuery version being used by WordPress. In some cases, viewing Mouse Track effects via Safari might cause a jQuery error which will cause elements to disappear, such as missing carousel arrows, for example. If this happens, you may also see an error which references 「maximum call stack size exceeded」. To resolve the issue, either remove entrance animations from widgets with motion effects and/or remove mouse effects from areas that have both scrolling and mouse effects simultaneously activated.

Custom Attributes (Pro)

With Elementor Pro, you can add custom attributes to the wrapper of every Section, Column or Widget. This enables the addition of data-* attributes, ARIA attributes (accessibility) and values, header, footer, sidebar, rel=*, and other attributes that can be found here: https://www.tutorialspoint.com/html5/html5_attributes.htm

Add Custom Attributes to Sections, Columns, or Widgets

Right-click on the edit button of the element and click Edit section to open the section』s settings panel. Likewise, if editing a Widget, right-clicking will show the option to Edit Widget, and editing a Column will show Edit Column.Go to Advanced > AttributesAdd your code for the element to the editor, using the format key|value. For example, to add role=」presentation」 to the element』s HTML, enter role|presentation here.

Tip: Set custom attributes for the wrapper element, with each attribute in a separate line. Separate attribute key from the value using the | character. If you need to add multiple properties for one attribute, use a space between them.

Example of one property for one attribute:

data-spots|round

Example of two properties for one attribute:

data-spots|round long

In this example, data-spots is our custom attribute, and round and long are the properties of the attribute. When you view the source code that is output, it will look like this:

data-spots=」round long」

Do I need a license for my subdomain?

Yes, a license is required for each subdomain, unless that subdomain is one of a few Elementor-recognized staging subdomains.

Subdomains that are not considered as a license use:

dev.* (dev.example.com)local.* (local.example.com)test.* (test.example.com)staging.* (staging.example.com)

See more information about using local and staging sites here.

Popup FAQs

Design

Can I display the Popup in any corner on the screen?

Yes, you can control the horizontal (left, center, right) and vertical (top, middle, and bottom) positions of the Popup window.

Are there pre-designed Popup templates to choose from?

Yes! We currently have over 100 beautifully designed Popup templates to choose from.

Can I place a form in a Popup?

Yes, placing an Elementor form into a Popup is one of the most common uses of Popups. However, third-party form scripts may not work in the Popup Builder by default. If you are using a third party form, such as Contact Form 7, for example, please contact your plugin』s development team and let them know that they can resolve this by implementing the code mentioned in this developer』s guide. Also note this code example.

Can I place any Elementor widget in a Popup?

Absolutely! Design your Popup in the same way you would design any page using Elementor. Include forms, widgets, templates, and other elements as you wish.

Occasionally, Popup margins don』t work the way I set them? Why?

There are some edge cases where the margins you set for popup windows will be overridden. This is because the flexbox grid system』s flex alignment is stronger than the margin, so it takes precedence. If you are attempting to add a positive right margin, for example, and it isn』t taking effect, try adding a negative left margin instead.

Can I design the Popup window itself?

Yes. Elementor Popups feature the most advanced Popup design capabilities ever. Set color, image or gradient backgrounds for Popups, or design transparent Popups. You can also set borders and box shadows for the frame of the Popup window. The overlay options for the external area outside the Popup includes color, image and gradient background options. Even the close button can be fully customized. This includes position (inside or outside), vertical and horizontal positioning, color, background color and size. Almost all these styling features also include mobile editing, making it easy to customize Popups for different devices.

I』ve designed my Popup』s content, so I see the content settings in the Elementor Panel. How do I view and edit the Popup settings again?

Click the Settings gear icon in the Panel toolbar to view and edit the Popup settings again.

Control

Can I trigger the Popup from anywhere on my page?

Yes, we have various triggers, rules, and conditions that determine when a Popup occurs. You may 「manually trigger」 Popups via Dynamic Actions or Form Actions After Submit or 「automatically trigger」 Popups via Conditions, Triggers, and Advanced Rules.

I don』t want a Popup to appear on all devices? Can I control that?

Yes, you can choose to only display Popups on Desktop, Tablet, and/or Mobile devices via Publish Settings > Advanced Rules > Show on Devices

Can I display a few pop-ups on the same page?

Of course. Troll your visitors as much as you want.

If I create several Popups for different scenarios, can I prevent more than one being shown to a user?

Yes, use Popup Settings > Advanced > Avoid Multiple Popups

Can I prevent users from scrolling the screen behind the Popup?

Yes, use Popup Settings > Advanced > Disable Page Scrolling

Can I control how and when the Popup closes?

Yes, there are several ways to control this.You can either show or hide the Close button, or set it to only be shown after a set of amount of time after the Popup loads.You can allow the user to close the Popup by clicking outside the window, on the background overlay.You can allow the user to close the Popup by clicking the Close button.You can set the Popup to automatically close after a set amount of time.You can use a form』s Action After Submit option to close a PopupYou can use an element』s Dynamic Action to close a Popup

Can I only show a Popup if the user is leaving the page?

Yes, the On Page Exit Intent is a very popular Trigger. Setting this will display the Popup when the user』s mouse activity indicates intent to exit the page. Exit intent does not work on Mobile devices, however, as mobile devices do not have mouse hover ability.

Can I show a Popup if the user arrives to the page from a search engine?

Yes, several Advanced Rules allow you to control the display of Popups based on where the user arrives from, including arriving from a URL that you specify, or from search engines, external links, and internal links.

Do I have to set Conditions, Triggers, and Advanced Rules?

No, you don』t have to set any Publish Options. However, if you don』t set a Trigger, you will need to assign a Dynamic Action to Open Popup on an element』s link, such as a button』s link. Without a Trigger or an Open Popup Action assigned, the Popup will never be shown. See How Do I Create My First Popup to learn how to trigger a Popup when a button is clicked.

Can I open a Popup after a form is submitted?

Yes. From the form』s 「Actions After Submit」 options, choose 「Open Popup」, and then select which Popup to show after the form has been submitted.

My form is in a Popup. Can the Popup be automatically closed once the form is submitted?

Yes. Add a form inside a Popup, and then from the form』s 「Actions After Submit」 options, click 「Close Popup」.

What』s the difference between a Trigger and an Advanced Rule?

Triggers function as direct user actions that initiate, or 「trigger」, the display of a Popup (i.e. clicking or scrolling), whereas Advanced Rules determine the requirements that must be met for the Popup to appear regardless of direct user actions (i.e. the user visited page at least two times).

What is a Condition?

Conditions determine where to display the Popup (i.e. the entire site, all archives, on a specific URL, etc.). Learn more about Conditions.

What is a Session?

A session starts when the user visits the website and ends when the user closes the browser.

Other

Do you have a A/B testing feature?

We do not currently support A/B testing, as this is a field that needs massive attention. We are currently not in the phase of building a stand-alone feature, so we recommend using one of the many available external dedicated services for this.

Can I export and import Popups between sites?

Yes, Popup templates can be imported and exported just like all of Elementor』s templates.

Is it possible to create a Tooltip Popup?

No, not at this time.

I have a multi-language site. Can I create different Popups for each language?

Yes. you can also create translations for each Popup.

Does your Popup feature meet the GDPR Requirements?

Our Popup feature does not store any cookies. It does leverage the browser』s local storage to track your visitor habits or patterns in order to trigger the Popup. This means the data is stored only on the visitor』s local browser. Learn more about GDPR.

Can I include a Popup on my Woocommerce product page?

Of course, you can also add upsales and offers to your users throughout all of the purchase flow.

Does it integrate with marketing platforms and if so, which one?

PICK ONE. We have tons of integrations. See the full list here.

Does it work with older iOS versions?

Popups may encounter layout issues with iOS 10 or below.

Does it work with IE browser?

No. Popups are not compatible with IE.

How to Install Elementor Website Builder

From the WordPress Dashboard, click Plugins > Add New.In the Search field, enter Elementor and choose Elementor website builder to install.After installation, click Activate.

Elementor Debugger

The Elementor Debugger is a useful tool which helps you understand how a page has been built and more exactly it shows you which template of the builder is assigned to the page you are consulting. Learn more about Elementor』s Theme Builder templates.

To activate it/deactivate it, go to the tools of Elementor on your WordPress Dashboard.

The Elementor Debugger is located next to the 「edit with Elementor button」 on the front end and looks like this:

The example above shows an author.php page. As you can see, the Elementor Debugger gives information about the Header assigned to the page (its header template is called 「header with Nav Menu widget」), the Footer (「New footer with global widget」) and the template assigned to the page (「New Archive」).

「Skipped, is not Published」: means that there is a Header template in 「my templates」 which is saved as a draft and which is not assigned to this page.

「no templates for conditions」: If you see this message that means that no template was assigned to the content of the specific page/post.

」 Template File: Location Settings (Override) > Elementor – header-footer.php: This means that the Footer and the Header of the theme have been overridden by Elementor.

If you are a developer and you want to create new locations, please refer to this guide.

Note:

When you hover over the button 「Edit with Elementor」 on the frontend, it gives you details about the current structure of the page. In the example above, you can see that there is a Header template assigned to this page called 「header with Nav Menu」, an archive template called 「New archive」 and a footer called 「New footer with global」.

This can help you when you need to remember how you built each part of the page.

How to Create, Edit, & Style Columns in Elementor

Columns can be manipulated and styled either via the options in the Elementor Panel on the left or by right-clicking the Column handle and choosing from the context menu that pops up.

Right-Click Options

If you wish to add a new column or duplicate a column, right-click a column handle and choose either Add New Column or Duplicate from the context menu. You can also copy and paste a column into another section using Copy and Paste options here, or you can copy and paste only the style (without the content) from one column to another. Clicking Navigator here will open the Navigator already set to that particular column. And of course, clicking Delete here will delete the column.

If you click Edit Column, the column』s options will be displayed in the Elementor Panel to the left with all of the following options available to you.

Layout

Column Width (%): Set your Columns WidthVertical Align: Set your Column Content』s vertical alignment. This way, you will be able to stick the content of all the columns of a section to the bottom, the middle of the top, or 「stretch to fill」 to align columns with unequal heights. Choose from Top, Middle, Bottom, Space Between, Space Around, Space EvenlyHorizontal Align: This extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row. Choose from Start, Center, End, Space Between, Space Around, Space EvenlyHTML Tag: Set an HTML Tag for your column. Learn more about HTML Tags

Space Definitions

Space Between – Widgets start and end at the edge of the column, with equal space between themSpace Around – Widgets are spaced equally, and the edges are half the size of the space between widgetsSpace Evenly – Widgets have equal space between, before and after them

Style

Background

Background Type: Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background), or an image Slideshow background.

Background Overlay (available if a Background Type is chosen)

Background Type: Choose between Classic or GradientBlend Mode: Set a Blend ModeCSS Filters: Add Blur, Brightness, Contrast, and Saturation

Border

Border Type: Set a Border TypeBorder Radius: Set your Border RadiusBox Shadow: Add a Box Shadow

Typography

Set Typography Colors for the section

Note: The 『Set Typography』 colors won』t work if Default Colors are enabled.

Advanced

Margin: Set the section MarginPadding: Set the section PaddingZ-index: Set the Z-Index. Learn more about Z-IndexEntrance Animation: Click the dropdown to choose an animation. Learn more about Entrance AnimationCSS ID: Set a CSS ID for your columnCSS Classes: Set CSS Classes for your columnResponsive: Show or Hide column on Desktop, Tablet, or Mobile

Attributes (Pro only)

Add your own custom attributes. Learn more about Custom Attributes

Motion Effects (Pro users only)

Scrolling Effects: Set to On, several additional options become available. Set Vertical, Horizontal, Transparency, Blur, Rotate, and Scale scrolling effects. You can apply each of these effects to different devices (desktop, tablet, or mobile), and make the effects relative to the viewport or the entire page. Click the Pencil icon next to an effect to set its options.Mouse Effects: Set to On, additional options become available. Set the Mouse Track effect or the 3D Tilt effect. Click the Pencil icon next to an effect to set its options.Entrance Animation: Set the column』s entrance animation. As the visitor scrolls down the page, the column will appear with an entrance animation of your choice, such as Fading In, Zooming In, Bouncing In, etc.

Responsive

Reverse Columns: Slide to reverse your columns order (Great for Mobile)Visibility: Show or Hide your section on Desktop, Tablet, or Mobile

Custom CSS (Pro only)

Add your own custom CSS. Learn more about Custom CSS

How To Find An Elementor Expert

Click on the Find an Expert link in the header. An unfiltered list of all experts will be displayed.

Experts may specialize in multiple areas and have various skillsets. Use filters to find narrow down the results and find specific Experts that suit your needs. You can filter your search by Expertise, Service types, Skills, Pricing, Location, and Language.

You can choose experts by their level of Expertise. Expertise is automatically calculated based on the tags that Experts add to their portfolio projects. Each Expert』s area of expertise is shown in the diagram around their profile picture. Expertise is a combined calculation of: design, development, and marketing. Learn more. You can find Experts that provide several types of services. Services refer to types of website projects such as Landing Page Design, Graphic Design, Web Content Writing, WordPress Development, and more. Learn more.You can select Experts with specific skills. Skills are the knowledge areas that Experts can offer in their services. They can be specific to Elementor, WordPress, or general website building. The skills used in each project are represented by tags, which appear in the Search results and are displayed in an Expert』s profile summary. Learn more.Although you can hire experts from around the world, you may want to filter on Location. When you filter your search results by Location, you will find Experts that are located in time zones similar to yours, so that you can communicate effectively. Efficient turnaround time is a priority for our Expert services, so working with Experts in a similar time-zone makes that possible.Filter your search by Language to ensure that you and the Expert can communicate easily and effectively.

You can choose to view the filtered search results either as a list or as cards. Toggle the 「Display As」 icon in the upper right corner to view as a list or as cards

Filtered Search Results Displayed As A List

Filtered Search Results Displayed As Cards