You can style the Normal and Hover state of the form background.
Background Type – Choose between Classic and GradientColor – Set the colorImage – Upload a background imagePosition – Position options for the background imageAttachment – Choose between scroll or fixedRepeat – Set the image repeat propertySize – Set the size of the image background
Learn more about the Form Widget (Pro)
Insert and set the style for Related Products in WooCommerce Single template
Content
Related Products
Products Per Page: Set the exact amount of related products to be displayedColumns: Set how many columns will be displayed, from 1 to 12, for each device (Desktop, Tablet, Mobile)Order By: Set the order in which the products will be displayed. Options include Date, Title, Price, Popularity, Rating, Random, Menu OrderOrder: Select ASC or DESC (ascending or descending) order
Style
Columns Gap: Set the exact gap between the columnsRows Gap: Set the exact gap between the rowsAlignment: Align the related products data to the left, right, or center
Image
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the related product imagesColor: Choose the border colorBorder Radius: Set the radius to control corner roundness of the borderSpacing: Adjust the amount of space between the images and their data
Title
Color: Choose the related product Title colorTypography: Set the typography options for the Title textSpacing: Adjust the amount of space after the Title
Rating
Star Color: Choose the color of a filled starEmpty Star Color: Choose the color of an empty starStar Size: Set the size of starsSpacing: Adjust the amount of space after the Rating Stars
Price
Color: Choose the color of the related product PriceTypography: Set the typography options for the related product Price
Regular price
Color: Choose the color of the related product』s Regular PriceTypography: Set the typography options for the related product』s Regular Price
Button
Normal | Hover
The following options can be set independently for both the normal and hover states.
Text Color: Choose the color of the related product』s Button TextBackground Color: Choose the background color of the related product』s ButtonBorder Color: Choose the border color of the related product』s Button
Typography: Set the typography options for the related product』s Button TextBorder Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or groovedWidth: Control the thickness of the border around the related product』s ButtonBorder Radius: Control corner roundness of the button』s borderText Padding: Set the padding within the buttonSpacing: Adjust the amount of space above the buttons
View Cart
Color: Choose the color of the View Cart text under the buttonsTypography: Set the typography options for the View Cart text
Heading
Heading: Show or Hide the Related Products headingColor: Choose the color of the related products heading textTypography: Set the typography options for the heading textText Align: Align the related products Heading to the left, right, or centerSpacing: Adjust the amount of space after the Heading
Box
Border Width: Control the thickness of the border around the related product』s boxBorder Radius: Control corner roundness of the related products boxPadding: Change the padding within the related products box
Normal | Hover
The following options can be set independently for both the normal and hover states.
Box Shadow: Adjust box shadow optionsBackground Color: Choose the background color of the related products boxBorder Color: Choose the border color of the related products box
Sale Flash
Sale Flash: Show or HideText Color: Choose the color of the Sale Flash textBackground Color: Choose the background color of the Sale FlashTypography: Set the typography options for the Sale Flash textBorder Radius: Control the corner roundness of the Sale FlashWidth: Control the thickness of the border for the Sale FlashHeight: Set the height of the Sale FlashPosition: Set the position of the Sale Flash, Left or Right, of the related products boxDistance: Set the distance of the Sale Flash from the top of the related products box
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.
The new Elementor 2.1 includes solutions to many requests that our users have sent to us over time.
Right Click
Starting from Elementor Version 2.1, we transferred all of our editing controls to a new context menu, that appears when you Right Click a Page/Section/Column/Widget handle.
Note: To access the browser』s original right-click functionality click CTRL/CMD + Right Click.
Copy/Paste
When you Right Click you』ll find the Copy and Paste functions. There are three different types of Copy/Paste:
Copy/Paste Elements – Now you can simply Copy an element (Widget, Column or Section) and Paste it anywhere on the page. When pasting on top of a widget, the pasted element will be placed below it.
Tip: Use the shortcut CTRL/CMD + C, and then CTRL/CMD + V, to copy and paste elements.
Copy/Paste Element Style – With Paste Style, you can paste the style of any element you copy (Widget, Column or Section), then apply it on any other Widget, Column or Section.
Copy/Paste Between Pages – Copy Paste and Copy Style actually work between pages! You can Copy any Widget, Column or Section, and Paste it on a different page on your site.
Reset Style – You can easily return to the default style settings of every element by right clicking and choosing Reset Style.
To learn more about copy-paste click here
Right Click – Page Level
Right Click anywhere on the drop area, will get you these Page level options:
Copy All Content – You can copy the entire page content and paste it to a different page.Delete All Content – The 『Delete All Content』 option moved into the Page Level Right Click.
Elementor drop area
UI Improvements
New collapsible categories in the Widgets panel
You can search the Widgets by Keywords『Add New Section / Template』 buttons
Change Mobile & Tablet Breakpoints
You can set the mobile and tablet breakpoint values.
Go to Elementor > Settings > Style Tab, and set the breakpoint value for mobile and tabletSave your changesGo to Elementor > Tools > General Tab > Regenerate CSS, click Regenerate Files
New Video Features
The New Video Features includes:
Self-hosted videos with HTML5Start and End times for the Video Widget (for supported platforms)Show/Hide YouTube logoAdded Dailymotion videosSet Start and End times for Background Video
To learn more about Elementor』s video features
Image CSS Filters
You can add CSS Filters to Image / Image Box WidgetsAdded Blend Modes for background overlay in Column & Section
To learn more about CSS Filters and blend modes
Gutenberg 3.0+ Compatibility
Switch between Gutenberg and Elementor, using the 『Edit with Elementor『 button within Gutenberg.
Three big reasons (and many other smaller reasons):
It』s not just a page builder; with Elementor Pro, it is an entire website builder.It』s faster, so you don』t need to drag, drop and wait.It delivers high-end designs. Most page builders can』t reach this level of design, as seen for big brand websites.
The Blend Mode and CSS Filters allow you to apply Photoshop-like effects to your elements. CSS Filter Effects let you apply graphic effects like blur or color shifting to images.
Elementor offers 13 blend modes: Normal (this is the default and has zero blend), Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Saturation, Color, Difference, Exclusion, Hue, and Luminosity. All of them are available in the Style section.
Read the full post about Blend Mode & CSS Filters on our blog.
Set any element to rotate left or right as the user scrolls up or down the page.
Advanced or Style > Background
Motion Effects
Scrolling Effects: Slide to ONThen:Rotate: Click pencil edit icon Direction: Choose either To Left or To Right Speed: Set the rotation 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 rotate, selecting from Left, Center, or RightY Anchor Point: Choose the vertical axis from which the element will rotate, 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 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.
Add Additional Information to your product display on WooCommerce Single template
Style
General
Heading: Show or HideColor: Choose the color of the HeadingTypography: Change the typography options for the Heading
Color: Choose the color of the Additional Information textTypography: Change the typography options for the Additional Information text
With Discord integration, you can send submitted form data to predetermined text channels on Discord via a unique Webhook URL.
These actions will be performed after a visitor submits the form and is a great way to send messages to a text channel in your Discord server.
Go to the 「Actions After Submit」 dropdown and click on the Add Action field > DiscordChoose DiscordThis adds a new Discord Dropdown. Click to open it
Selecting Discord Options
Webhook URL: Enter Discord』s webhook URL
Note: Click to learn how to create a Discord webhook URL
Username: Enter the username that will be shown as the senderAvatar URL: Enter the Avatar URL for the senderTitle: Add a title for each messageDescription: Add a description for each messageForm Data: Refers to the Name, Email and Message your visitor will fill in on the form. Select YES to turn it on or NO to turn it offTimestamp: Select YES to display timestamp or NO to turn it offColor: Set a custom color for the vertical line that appears to the left of the message.
Elementor includes a built-in Revision History, as well as Undo and Redo. With these features, you get a log for every action and save made on the editor.
The history panel is accessed by clicking on the icon at the bottom of the panel.
This will open the History panel, that includes Actions and Revisions.
The Actions Tab
The Actions Tab logs every 『action』 you make in Elementor.
Browsing and clicking on the Actions list will let you trace back your steps. You can move back and forth between actions.
Each item on the Actions list includes the name of the element and the type of change, whether it is an addition or an edit.
At the bottom of the Actions list, you』ll find when 『Editing started』. If you want to go further back, switch to the Revisions Tab.
The Revisions Tab
Everytime a page updates, a new revision is created.
You can switch between revisions and revert back to any previous one saved.
Each revision item lists the date, time and creator of the revision. Click on Apply to apply the revision on the current page. Click on Discard to return to the current version of the page.
Read the complete post about History here.
Undo / Redo Keyboard Shortcuts
You can also use CTRL-Z (Windows) or CMD-Z (Mac) to undo your last action and CTRL-SHIFT-Z or CMD-SHIFT-Z to redo your last action.
Manage and limit what your users can edit with Elementor.
Under Elementor Settings > Role ManagerUnder any user type, you can click the checkbox No access to editor to block the user from editing the page.In Elementor Pro you have an added feature Access to edit content only, so the user can edit the content only, without the ability to change the layout of the page/post.
