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.
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
Archive
Archive Title – Control the style and layout of your Archive Title
Archive Products – Set the style and layout of the Archive Products
General
Products – Set your Products content and style
Woocommerce Breadcrumbs – Control the colors and layout for WooCommerce Breadcrumbs
Custom Add to Cart – Add an Add To Cart button anywhere on your site
WooCommerce Pages – Display a WooCommerce page (e.g. Cart page, Checkout page, etc.) anywhere on your site
Menu Cart – This special custom widget opens the cart in a window. It is best practice to use it in your Header. You can display your cart from any page of your website without leaving it
Important! In order for the Woocommerce Builder to work, you need Elementor pro 2.1 + WooCommerce 3.4 or higher.
If you receive a 403 error when you try to activate your license that means that your server is blocking the connection with our server.
In this case, you have to contact your hosting company and ask them to allow the connection with my.elementor.com
Yes!
Elementor enables you to seamlessly build RTL pages as well as other translated pages in any language.
If you are having specific layout issues that are not able to be solved by the tips mentioned in Troubleshooting Layout Issues, one of the following articles may offer a solution.
Padding at the Top and Bottom of SiteHorizontal Scrollbar on Mobile DevicesCaching Prevents Live Site From Showing Changes In EditorElements DisappearedMy Widget Is Being Covered Up By Something ElseFlickering issues
The Dynamic Contact URL feature provides a form to quickly create 「smart」 links from any widget that has a Link field, such as the Button widget.
The following smart links are currently supported:
Create an email with prefilled subject and bodyCreate phone call direct linkCreate SMS MessageCreate Whatsapp conversation direct linkCreate Skype call direct linkCreate Facebook Messenger conversation direct link chat buttonCreate Viber call direct linkNavigate with WazeLet visitors add your event to their Google CalendarLet visitors add your event to their Yahoo CalendarLet visitors add your event to their Outlook Calendar
Link
In the widget』s Link field, click on the Dynamic icon Select Contact URL from the Actions selections. This will add Contact URL in the Link field.Select the type of Contact URL you wish to use from Contact Via. You may select from Email, Tel, SMS, WhatsApp, Skype, Messenger, Viber, Waze, Google Calendar, Yahoo Calendar, or Outlook Calendar.Fill out the additional fields, as shown below, for the specific type you』ve chosen.
Email: Enter the recipient』s email address to be automatically sent toSubject: Enter the default subject the emailMessage: Enter the default body of the email
Tel
Number: Enter the phone number to call. This will usually work on mobile phones.
SMS
Number: Enter the phone number to text via SMS. This will usually work on mobile phones.
Number: Enter the phone number to message directly via WhatsApp message
Note: You need to enter the full phone number in international format. Omit any zeroes, brackets or dashes when adding the phone number in international format. For a detailed explanation on international numbers, read this article. Please keep in mind that this phone number must have an active account on WhatsApp.
Skype
Username: Enter the username to contactAction: Select from Chat, Call, Show Profile, Add to contacts, Send voice mail
Messenger
Username: Enter the username to message. Read instructions for finding your Messenger username and Messenger username link.
Viber
Number: Enter the phone number to messageAction: Select from Contact or Add
Waze
Location: Enter a physical address to get navigation directions
Google Calendar
Title: Enter a title for the eventDescription: Enter the event』s descriptionLocation: Enter the address of the eventStart: Set the event』s start date and timeEnd: Set the event』s end date and time
Outlook Calendar
Title: Enter a title for the eventDescription: Enter the event』s descriptionLocation: Enter the address of the eventStart: Set the event』s start date and timeEnd: Set the event』s end date and time
Yahoo Calendar
Title: Enter a title for the eventDescription: Enter the event』s descriptionLocation: Enter the address of the eventStart: Set the event』s start date and timeEnd: Set the event』s end date and time
Shape dividers are graphic shapes that separate the sections of a page.
How to Add Shape Dividers
Add a new SectionGo to Section > Style > Shape DividerChoose to display at the Top or Bottom of your sectionType: Click the dropdown to choose your Shape Divider styleColor: Pick a colorWidth: Set the width of your Shape DividerHeight: Set the height of your Shape DividerFlip: Flip the direction of your Shape DividerBring to front: Force your Shape Divider to be in front of other objects
The Login Widget makes it easy to create a custom login page, instead of the default WordPress login page.
How to add a login page to WordPress
Create a New Page, and add the Login Widget
Form fields
Label: Show or Hide the form LabelInput size: Choose the Form Fields input size.
Button
Text: Type the button』s textSize: Choose the size of the buttonAlignment: Set the button』s alignment
Additional options
Redirect After Login: Set to ON or OFF.Lost Your Password: Choose whether or not to display the 「Lost Your Password」 linkRemember me: Choose whether or not to display the 「Remember Me」 checkboxLogged in message: Choose whether or not to display the a Logged In user a messageCustom label: Change the default form label and placeholder text
Style
Form
Rows Gap: Set the exact gap between each rowLinks Color: Choose the color of the linksLinks Hover Color: Choose the color of the links when hovered over
Label
Spacing: Set the exact gap between the label and its corresponding fieldText Color: Choose the color of the label textTypography: Set the typography options for the label text
Fields
Text Color: Choose the color of the text within the fieldsTypography: Set the typography options for the text within the fieldsBackground Color: Choose the background color of the fieldsBorder Color: Choose the border color of the fieldsBorder Width: Set the thickness of the border around the fieldsBorder Radius: Set the border radius to control corner roundness of the fields
Button
Normal | Hover
The following options can be set independently for both the normal and hover states.
Text Color: Choose the color of the button』s textTypography: Set the typography options for the button』s textBackground Color: Choose the background color of the button
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedBorder Radius: Set the border radius to control corner roundness of the buttonText Padding: Set the amount of padding around each side of the text in the button
Advanced
Set the Advanced options that are applicable to this widget
Note: Use your regular WordPress login credentials with the Login Widget
Dynamic Content draws content from the website, or from the current page/post, changing dynamically according to the Page or Post it』s on. Not all dynamic tags are available for all dynamic content fields. Only the applicable tags will be listed as options in a field』s dropdown selection list.
POST
Post Custom Field – Choose from any custom fields that are associated with the current post Post Excerpt – The short summary of the current post Post ID – The WordPress ID of the current post Post Terms – The chosen taxonomy for the current post (category, tags, etc.) Post Time – The time the current post was published (based on your WordPress time/date settings) * Post Title – The title of the current post Post URL – The URL of the current post
Note: The Post Time may be affected by cache, and in some circumstances, you may need to exclude your page within your cache plugin』s settings to avoid this.
ARCHIVE
Archive Description – The description of the current archive Archive Meta – Display any archive info based on meta key Archive Title – The title of the current archive Archive URL – The URL of the current archive
SITE
Page Title – The title of the current page Site Tagline – The tagline of the site Site Title – The title of the site Current Date Time – The current date and time Request Parameter – Uses data that was transferred via GET, POST, or Query Vars Requests Shortcode – Use a dynamic shortcode for anything that Elementor doesn』t provide a dynamic tag for User Info – Display any of the current user』s information, including ID, Display Name, Username, First Name, Last Name, Bio, Email, Website, or User Meta Site URL – The URL of the site Internal URL – Display an internal URL for the link, choosing from Content, Taxonomy, Media, or Author
ACTIONS
Lightbox – Set a lightbox to open when element is clicked Contact URL – Create a smart link when element is clicked. Popup – Trigger a popup to open or close when element is clicked
MEDIA
Featured Image Data – Display the featured image meta data of the current post, choosing from Title, Alt, Caption, Description, File URL, or Attachment URL
AUTHOR
Author Info – Display information about the current post』s author, choosing from Bio, Email, or Website Author Meta – Display any author info based on meta key, such as the author』s country or date of birth Author Name – The name of the current post』s author Author URL – The URL of the current post』s author page
COMMENTS
Comments Number – The number of comments for the current post Comments URL – The URL for the comments form on the current post
WOOCOMMERCE
Product Price – The price of the current product Product Rating – The rating of the current product Product Sale – The sale status of the current product Product Short Description – The short description of the current product Product SKU – The SKU of the current product Product Stock – The stock number of the current product Product Terms – The chosen taxonomy (category, tags, etc.) for the current product Product Title – The title of the current product
Create a cookie consent bottom bar.
You』ll learn how to:
Edit a pre-designed popup templateClose a popup on button clickSet multiple conditions for controlling where a popup is displayed
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, choose one of the Cookie Consent bottom bars.
Button > Content
Text: Enter 「Accept & Close」.
Link > Popup
Don』t Show Again: YesSize: Medium
Button > Style
Color: Choose a colorPadding: Remove all padding
Right-click the Button widget』s handle, and select Duplicate. Now style this Button.
Button > Content
Text: Enter 「Decline」Link: Enter a link to a Terms of Use page that explains why cookies are needed.Size: Medium
Button > Style
Background Color: ClearBorder Type: SolidBorder Width: 1 for Bottom onlyBorder Radius: 0 for all cornersPadding: 5 for Bottom only
Edit the text
Heading > Content
Alignment: Left.
Edit the Accept & Close button
Button > Content
Alignment: Justified.
Drag the text column so it is taking up a wider portion of the bar, and drag the Accept button column so it takes up less space. Adjust as desired.
Click the cog / gear icon located at the bottom left of the panel to return to the Popup Settings.
Popup Settings > Settings
Overlay: Hide.
Popup Settings > Style
Color: Adjust the color as needed.
Popup Settings > Advanced
Prevent Closing on Overlay: YesPrevent Closing on ESC: Yes
Publish The Popup
Click the Publish button to set the Conditions, Triggers, and Advanced Rules.
Conditions
Click on Add Condition
Include: Entire SiteExclude: Singlular > All Pages > Terms of Use page
Triggers
On Page Load: Yes at 0 seconds.
Click Save and Close button
All done. Go to your site and see it in action.
Note: This method is not GDPR compliant, as it does not store acceptance or block cookie scripts before consent. If you need to be GDPR compliant, please use a cookie consent plugin that is GDPR compliant instead.
