Author 诗语

Blockquote Widget (Pro)

The Blockquote Widget allows you to embed fully styled quotes. You can also set these as Click To Tweet quotes, enabling users to easily share them on Twitter.

Content

Skin: Choose the Blockquote skin, selecting either Border, Quotation, Boxed, or CleanAlignment: (available for Quotation, Boxed and Clean Skins) Align the quote elements to the left, center, or rightContent: Type your Blockquote contentAuthor: Enter the Author nameTweet Button: Toggle the Tweet Button ON or OFF

Tweet Button Settings:

View: Choose between Icon & Text, Icon, or Text onlySkin: Choose between Classic, Bubble and LinkLabel: Type your LabelVia: Type your Twitter Account username i.e. @your_acountTarget URL: Choose between the Current Page, None, or a Custom Link

Style

Content 

Text Color: Choose the color of the quotation textTypography: Set the typography options for the quotation textGap: Set the amount of spacing between the quotation text and the author

Author 

Text Color: Choose the color of the author』s nameTypography: Set the typography options for the author』s name

Button 

Size: Adjust the size of the buttonBorder Radius: Set the border radius to control corner roundnessColor: Select the Official Twitter colors or set your own custom button colorsTypography: Set the typography options for the button text

If Custom Color option is chosen, the following options become available:

Background Color: Choose the background color of the buttonText Color: Choose the color of the button』s textTypography: Set the typography options for the button text

Border (available only for the Border skin)

Color: Choose the color of the borderWidth: Set the border』s widthGap: Set the space between the left border and the quote textVertical Padding: Set the top and bottom padding around the content

Quote (only available for Quotation skin)

Color: Choose the color of the quotation markSize: Set the size of the quotation markGap: Set the spacing between the quotation mark and the quote text

Box (only available for Boxed skin)

Padding: Set the padding around the quote textBackground Color: Choose the background color of the boxBorder Type: Select the border type from Solid, Double, Dotted, Dashed, or GrooveBorder Radius: Set the border radius to control corner roundnessBox Shadow: Adjust box shadow options

Advanced

Set the Advanced options that are applicable to this widget

Read the full release post about the Blockquote widget

Custom Icons (Pro)

Upload your own custom icons to your website using Elementor Pro』s Custom Icons feature. You can use Fontello, Icomoon, or Fontastic for the job.

Creating your font set

Fontello

Go to http://fontello.com/Choose some icons, or upload your own custom SVG filesClick the wrench. Add a CSS prefix. Make sure it』s uniqueGive your font a nameDownload the font (zip file) 

IcoMoon

Go to https://icomoon.io/appChoose some icons, or upload your own custom SVG filesClick on the 『Generate Font』 tabClick the Preferences buttonGive your font a nameUnder 『Class prefix』, give it a unique prefixClick the X to exitClick 『Download』 to download your font (zip file) 

Fontastic

Create a Fontastic accountSelect some icons or alternatively import your ownTo import click 『Add More Icons』 in the top menu barClick on the 『Modify Font』 tab Give your font a nameGive your font a unique CSS Class PrefixClick SaveGo to the 『Publish』 tabClick 『Download』 to download your font (zip file)

Installing your Font Set

In the WordPress dashboard go to:

Elementor > Custom IconsClick Add NewDrag & Drop your font zip fileEnter your icon set nameClick UpdateYou will now find your new custom icons under the 『Custom Icons』 area, where you』ll see your icon set name, icons number indicator and your unique CSS Prefix for each icon set.

Blend Mode and CSS Filters

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.

Mouse Effects – Mouse Track

Set an element to move in relation to the visitor』s mouse movement.

Advanced or Style > Background

Motion Effects

Mouse Effects: Slide to ONMouse Track: Click pencil edit iconDirection: Choose from Opposite or Direct. Opposite will move the element in the opposite direction of the mouse movement. Direct will move the element in the same direction as the mouse movement.Speed: Set the speed from 0 to 10Apply 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: 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.

Slides Infinite Loop

The Infinite Loop option loops the slides infinitely.

When turning Infinite Loop off, you can only slide left or right, according to the number of slides.

How To Set Absolute Position For An Element

Set Absolute Position for an element, with the ability to set positioning separately for desktop, tablet, and mobile devices.

Positions Explained

Static Position – The element is in its natural state, positioned merely by the natural flow of the page. This is the default position of all elements.

Absolute Position – The element is positioned absolutely to its first positioned parent.

Fixed Position – The element is positioned relative to the user』s viewport.

How to Set An Element Using Absolute Positioning

Under any widget go to the Advanced tab > Custom Positioning

Absolute: Click pencil icon to set the element to absolute on.Grab the element and drag and drop it on your specific position.

Tip: You can manually enter the numeric X and Y positions in the Horizontal and Vertical Offset scales.

What is Horizontal and Vertical Orientation?

These set the reference point for the absolute positioning, with options of Start and End for each.

Note:  Absolute positioning is not the recommended method for building web page layouts. Having said that, it does come in handy in many situations where you want to position the various page elements more freely.

Dark Mode

Elementor』s Dark Mode saves your laptops』 battery life (while helping the environment), eases eye strain, particularly at night, and provides contrast improvement in the editor panel for better accessibility.

Select Mode

Go to Elementor Widget Panel > Hamburger Menu > Preferences > UI ThemeChoose Auto Detect, Light, or Dark

Note: Most modern browsers allow websites and web apps to automatically display Dark Mode based on the user』s preference which they have assigned via their operating system. If Auto Detect is chosen for Elementor』s UI Theme, your preferences as defined by your Operating System (OS) and controlled by your browser will be used.

What is Elementor 2.0

Elementor 2.0 is the next generation of our plugin. We wrote about it in this blog post: 

https://elementor.com/upcoming-elementor-v2/

Elementor 2.0 will enable you to edit more than just content. Headers, footers, single post pages, archive pages, 404 pages, search result pages and more.

It will also have full compatibility with Advanced Custom Fields (ACF), so you can use ACF data anywhere using Elementor.

Dynamic Lightbox (Pro)

The Dynamic Lightbox feature provides the ability to link an element to an image or video which will open in a lightbox. The widget accepts Youtube, Dailymotion and Vimeo movies.

To set an element』s link to open an image or video in a lightbox:

From the element』s Link field, click the Dynamic icon and select Actions > Lightbox. This will insert the 「Lightbox」 tag in the Link field.Click in the Link field to open the Lightbox popup Settings window.To open a video in a lightbox, select the Video icon, and enter the video』s URL.To open an image in a lightbox, select the Image icon, and choose an image from the media library.

Scrolling Effects – Rotate

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.