Elementor 文档

WooCommerce Widgets (Pro)

With Elementor WooCommerce Builder you can now design your Single and Archive product templates.

Single

Product Title – Control the style and layout of your Product Title

Product Images – Set the image or gallery you wish to display

Product Price – Set the Product Price position and style

Add to Cart – Control the layout and style of the Add To Cart button

Product Related – Set your own style to the Related Products

Product Stock – Add a Product Stock Widget to display the product』s stock number

Product Meta – Set the distance between the text, display it stacked or inline, and control the style of your Metadata

Short Description – Control the Short Description layout and style

Product Content – Set your own style to the Product Content

Product Data Tabs – Control the Data Tabs style

Additional Information – Add Additional Information to your product display

Upsell – Set your own style to the Upsell Products

Note: To learn more about WooCommerce Single Product Builder click here

Why Did the Elementor Form Widget Change My Uploaded File Name?

When you upload files using Elementor forms, the name of the uploaded file changes.

This is done as a security measure, to protect your site from external threats. It is a commonly used method for increasing form security, and is used by many form plugins.

Learn more about the Form Widget and its options here.

WooCommerce Single: Product Stock (Pro)

Display and style Product Stock info on WooCommerce Single template

Style

Text Color: Choose the color of the Product Stock textTypography: Set the typography options for the Product Stock text

Note: The style of this widget is often affected by your theme and plugins. If you experience any such issue, try to switch to a basic theme and deactivate related plugins, or adjust the styling within your theme』s settings.

Dynamic Colors

Elementor Pro』s Dynamic Content allows you to use content from custom fields and other sources, and dynamically display it on the page. This feature not only allows you to dynamically display data using text and numeric inputs, but also with any widget that has a color field, enabling you to dynamically style a widget』s color. The Dynamic Color control supports ACF (Advanced Custom Fields) color fields as well as custom field keys.

Dynamic Color Example Use Case:

Here is an example of using an author』s favorite color for the post』s Title color. We will assume that a field called 」 fave_color」 has been previously set up using Advanced Custom Fields, and the post』s author has assigned her favorite color, purple, to the post. To display each post』s title in that post』s assigned favorite color, simply edit the Single Post template that you have created and do the following:

Edit the Post Title widgetClick the Style tabClick the dynamic icon next to the Title』s Text Color field.Choose the custom field to be used. In this example, Post > Post Custom Field was chosen.From the Dynamic Tag Settings, select the custom field key to be used. In this example, the fave_color key was chosen.

Global Custom CSS

With Elementor Pro, you can set custom CSS globally. This allows you to add custom CSS rules which will apply to your entire site.

From the Elementor Editor, click the hamburger menu in the upper left of the widget panel. Click Site SettingsClick Custom CSS tab under the Settings headingEnter the CSS code that you wish to apply globally across your site

Scrolling Effects – Horizontal Scroll

The Horizontal Scroll effect moves elements right and left when the visitor scrolls the page up and down accordingly. For example, a section with a heading title that moves to the right when the visitor scrolls down, and back to the left when the visitor scrolls back up. Multiple elements can be moved independently, at different rates of speed.

Advanced or Style > Background

Motion Effects

Scrolling Effects: Slide to ONHorizontal Scroll: Click pencil edit iconDirection: Choose To Left or To RightSpeed: Set motion speed of horizontal scroll from 0 to 10Viewport: Determine when to begin the movement, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the movement 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

Note: The viewport value is calculated according to the height of the viewport (meaning the visible size of the screen), and not to the height of the full page. This is true in all situations, except for elements with a fixed position. See image below:

How To Contact An Elementor Expert

You must be logged in to your account to contact an Expert.

If you are not logged into your Elementor account, either log in or create a new account if you would like to contact an expert.

Once you are logged into your Elementor account, you can contact an Expert by clicking the Hire Me button on their profile. Fill out the contact form. Your correspondence with the Expert will then continue via email.

How To Use The Elementor Experts Network

Browse, contact, and hire an Elementor Expert or agency based on your project needs.

Our global community of professional designers, marketers and developers are here to help.

The steps to hire an expert are simple:

Take a look around – Explore our pool of talent to see which of our experts could be the best fit for your project.Narrow it down – Filter the Experts based on your project criteria, such as expertise, location, and price.Connect with good matches – Decide which Expert you』d like to work with, and contact them by submitting your request.

Note: You can browse our Experts』 profiles without creating an account. In order to contact an Expert, however, you』ll need to create a free Elementor account.

How To Hire And Pay An Elementor Expert

The payment process between Elementor Experts and customers takes place outside of the Elementor platform, directly between the two parties. The process of discussion, proposal, contract, and payment remains outside of the Elementor platform. Each Expert may handle this process in their own unique way.

If you have any issues with the Expert, please discuss those issues with the Expert. The terms of service for your collaboration with the Expert is between you and the Expert. Although these arrangements are handled directly between the two of you, we』d still love to hear your feedback, so please contact us to do so.

What is the Elementor Experts Network?

The Elementor Experts Network is a community platform and marketplace for experienced Elementor web creators, designers, developers, and marketers, where you can promote yourself by showcasing your Elementor projects. The Network enables web creators to grow their businesses by finding new clients, and also makes it easy to find collaboration partners to help on projects.

The platform allows visitors to search portfolios, and then interact with, collaborate and hire Elementor web creators from the Elementor Experts Network.

The platform is also a community where hundreds of thousands of talented Elementor Experts come together to connect and share their talent and expertise, helping them work better together.