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

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.

Scrolling Effects – Blur

Blur lets you gradually cause elements to go from clear to blurry in correlation to the visitor』s scroll. An example is having a background image appear and then dissolve in accordance with the scroll.

Advanced or Style > Background

Motion Effects

Scrolling Effects: Slide to ONBlur: Click pencil edit iconDirection: Choose one of 4 possible effect directions:Fade In – The element starts as blurry and gradually becomes clear, based on the level and viewport settings.Fade Out – The element starts as clear and gradually becomes blurry, based on the level and viewport settings.Fade Out In – The element starts as clear, then fades out to blurry, then becomes clear again, based on the level and viewport settings.Fade In Out – The element starts as blurry, then becomes clear, then blurry again, based on the level and viewport settingsLevel: Set the desired peak blur level from 0 to 10Viewport: Determine when to begin the effect, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the effect starts only after you scroll half the viewport height.Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devicesEffects Relative To: Choose from Default, Viewport, or Entire Page

Tip: Try the following scenario. Set the Direction as Fade In Out. Set the viewport between 30-60, and notice what happens: the heading starts off in focus, reaches peak Blur level at 30%, stays the same until 60%, and fades out until the end of the screen.

Elementor Blocks for Gutenberg

Elementor Blocks for Gutenberg is a standalone plugin, made by the Elementor team, that allows users to add Elementor templates as Gutenberg blocks.

What is Gutenberg?

Gutenberg was the original code name for WordPress』 new post editor. It is now simply called the WordPress editor, or the WordPress block editor.

How to use

Elementor Blocks requires WordPress 5.0 or later with the new block editor enabled & Elementor to both be active on your site

Install & Activate Elementor Blocks for GutenbergIn Gutenberg search for 『Elementor Library』Choose an existing template or create a new one from scratchPreview your template inside the WordPress block editor.

Tip: You can edit your chosen template from within the page, by clicking the Edit Template with Elementor button.

Read the official Elementor Blocks for Gutenberg release post: https://elementor.com/blog/blocks-for-gutenberg

Drip & Elementor Integration

In this guide, we will explain how to integrate Drip with Elementor forms.

First set your Drip API Key in the Integrations Settings under Elementor > Settings > Integrations TabCreate a form using Elementor Form WidgetClick Actions After SubmissionUnder Add Action choose Drip

Tip: Click to learn how to get your API Key from Drip

Selecting Drip Options

API Key: Use the default API Key or a custom oneAccount: Choose your accountEmail: Choose the Email fieldForm Fields: Send all Form Fields to Drip as custom fieldsTags: Add Tags to the form

How To Create A Content Lock Popup

Create a popup that prevents visitors from seeing the page』s content unless they click a specific button within the Popup.

You』ll learn how to create a popup that:

Ask the visitor a Yes or No question, and allow the visitor to click either a Yes button or a No buttonShow the content of the page if the visitor clicks the Yes button, and redirect the visitor to another URL if she clicks the No button or clicks anywhere other than the Yes button.

Design The Popup And Its Content

Popup > Layout Tab

Width: Set to 600pxHeight: Select CustomCustom Height: Set to 800pxVertical Position: CenterClose Button: Set to HideEntrance Animation: Choose Fade In

Content

Add a Heading that asks a Yes or No question, and style it as needed.Add two buttons, one for Yes and one for No, and style each as needed.Click the cog / gear icon located at the bottom left of the panel to return to the Popup Settings

Popup > Style Tab

Background Type: TransparentImage: Add a background image and adjust its settings as needed

Popup > Advanced Tab

Padding: Set at 80px for right and left, leaving
top and bottom blank
Prevent Closing on Overlay: Set to YesPrevent on Closing on ESC Key: Set to Yes

Edit the Section

Section > Style > Border

Border Type: SolidBorder Width: 15pxColor: Choose a color for your borderBorder Radius: 40 for Bottom only

Section > Advanced

Padding: 30px for Bottom only.

Edit the Column

Column > Style

Background Type: GradientColor: Choose the first gradient colorSecond Color: Choose the second gradient colorType: Radial

Border

Border Radius: 20px for Bottom onlyBox Shadow: Set as needed

Column > Advanced

Margin: Set -30 (minus 30) for both Top and LeftPadding: Set 100px for both Top and Bottom

Edit the Content

Heading > Style

Title: Set the color to white.

Button > Style

Text Color: Set the color to white for each button.

Edit the Yes Button

Content:

Link: Click the Dynamic icon and choose Actions > PopupClick on Popup againChoose Close Popup and slide Don』t Show Again to Yes

Edit The No Button

Content:

Link: Enter any age-appropriate site link

Set the Publish Options

Click Publish button. There are no Conditions, Triggers, or Advanced Rules for this popup, so click the Save and Close button.

Edit the page that contains the Buy button (or whichever button you create to launch the popup).

Edit the Buy Button

If you haven』t already created a button to launch the Popup, you can do so now. Edit its text and typography as neededLink: Click the Dynamic icon and choose Actions > PopupClick Popup again, and under Action, choose Open Popup.In the Popup field, enter a few letters to search/find the Popup you just created.Click the Update button to update the page.

All done. Now go to the page with the Buy button, click it, and see the popup in action.

Scrolling Effects – Scale

Set any element to scale (grow or shrink) as the user scrolls up or down the page.

Advanced or Style > Background

Motion Effects

Scrolling Effects: Slide to ONScale: Click pencil edit icon
Direction: Choose from Scale Up, Scale Down, Scale Down Up, or Scale Up Down
Speed: Set the scaling speed from 0 to 10
Viewport: Determine when to begin the effect, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the effect starts only after you scroll half the viewport height.X Anchor Point: Choose the horizontal axis from which the element will scale, selecting from Left, Center, or RightY Anchor Point: Choose the vertical axis from which the element will scale, selecting from Top, Center, or BottomApply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.Effects Relative To: Choose from Default, Viewport, or Entire Page

Note: The two settings, X & Y Anchor Points, determine the axis around which the element scales. If you set orientation left-top, the scaling will happen from the left-top point of the element. If you set orientation center-center, the scaling will happen from its center.

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.

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 Create A Popup For Your Shop Archive Page

Create a popup that seamlessly blends into your product archive pages, making the popup feel like a natural design element.

You』ll learn how to create a popup that:

Blends in naturally with your websiteDisplays on its corresponding category / product archive page

Design Product Archive Templates

Go to WooCommerce > Categories and create product categories if you haven』t already done so.Go to Templates > Theme Builder and create an archive template for each product category. Make sure your category image is positioned in an area that will coordinate with the popup you design, as it will be an integral part of the entire animated effect.

Set The Product Archive Templates』 Publish Options

For each template, set the Display Conditions to Include: Product Categories > search and select the relevant category for each

Design the Popup and Its Content

Set The Publish Options

Go to Publish Settings > Conditions, and set Include > WooCommerce > Product Categories > search and select the relevant category.Go to Triggers and set On Scroll Direction to Down and Within 8% of scrolling. Of course, adjust the percentage to accommodate your design so that the popup coordinates with where you have your category image displaying on the product archive page.Go to Advanced Rules and set Show On Devices only to Desktop, since this design concept won』t work as well on laptop or mobile. You can always create different popups and design schemes for those devices if you choose.

Adjust The Product Archive Template

Go to Templates > Theme Builder to edit your product archive template that will be using this popup.Edit the category image widget and go to its Advanced tab, and set the Z-Index to 10,000. This will allow the category image to appear on top of the overlay and popup.

Repeat the steps for each product category, creating a relevant popup for each. Ensure that every popup focuses on a product in the category that pairs well with the category』s image. Use Conditions to assign each popup you design to its product category.

All done. Now visit the live product category pages, and see how seamlessly your popups blend with your archives.

Responsive Borders

Control border options for each device.

Border Width: Set an element』s border width, or none, for each device separately as needed.Border Radius: Set the border radius of an element separately for each device.

Tip: A common use of device-specific borders is when you have an inline row of links, separated by a column border. This border becomes redundant on mobile since the row stops being inline and the links are separated into individual rows. In this scenario, the obvious choice is to remove the border from the mobile layout. Luckily with the new responsive borders feature, this can easily be achieved.