These are custom features that Rey implements and extend Elementor default functionality.
Section features
Multi-rows (flex-wrap)
This option allows a section’s columns to be shown as rows. This feature adds a lot of flexibility to the layout, preventing adding unnecessary extra sections, creating redundant markup.
The option can be found in each Elementor section eg: https://d.pr/i/rFOpnU .
Note that manual resizing handles are disabled.
Image slideshow background
This feature will allow to add an image slideshow in the background of a section. Read more how to add section image slideshow background.
An example of this feature in use can be found in Valencia Demo (top section).
Stretch Section without JavaScript
By default Elementor provides a solution for stretching a section full viewport-wide. The solution however is JS-based, not that it’s bad, but css-only solution is better. This option replaces the built-in one.
Tabs Section
You can transform a section into tabbable content, with the help of Toggle Boxes element. A live example can be seen in Amsterdam Demo’s Just landed section.
Read more on how to create tabs .
Modal Section
Transform a section into a modal window. A live example can be seen in Valencia demo by clicking on the header’s “Request a call” button.
Read more on how to create modals .
Scroll effects – Clip In & Clip Out
These 2 effects will make a section’s background to animate reducing and increasing in size, upon scrolling the page.
A live example can be seen in Milano demo’s “Reveal your edginess” section with a full-width background, or in Paris demo’s “Make Your Mark” section.
To enable this option, access the section’s options > Advanced tab > Motion Effects > Scroll effects list eg: https://d.pr/i/zBi3vc .
Scroll effects – Sticky
This is not exactly an effect but more like a position state of the section. Enabling it will make the section stick to the top of the page.
To enable this option, access the section’s options > Advanced tab > Motion Effects > Scroll effects list eg: https://d.pr/i/9mjVkH .
Scroll effects – Colorize
This effect will colorize the entire page when this section enters the viewport. You can set a custom background color and also text colors. Here’s a quick example https://d.pr/v/13F2QG .
To enable this option, access the section’s options > Advanced tab > Motion Effects > Scroll effects list eg: https://d.pr/i/Y4VzSM .
Animated entry effects
This feature will apply various scroll-based entrance effects. A live example which demonstrates its powers can be seen in London Demo’s Lookbook page .
Read more on how to apply animated entry effects on section, columns or widgets .
To enable this option, access the section’s options > Advanced tab > Motion Effects > Entrance effects list eg: https://d.pr/i/zBi3vc .
Hide on demand
This is a feature that i mostly recommend for promotion banners or content that should act as a temporary notice.
Basically it adds a Close button or link to the section and the section will stop showing up.
To enable, edit the Hide on demand options eg: https://d.pr/i/9ze7G4 .
Hide section for either logged in or logged out visitors
You can control the visibility of a section, depending on the visitor’s login state.
To enable access Advanced settings eg https://d.pr/i/lwI7Kq .
Columns
Video background
This will extend Element’s columns element to allow video backgrounds, like section does.
Simply access the Column options > Style tab > Background section and choose the video option eg: https://d.pr/i/C224my .
Custom height
This option extend columns to have a custom minimum height. This feature is useful especially when you add a background and want to show it better.
To change a column’s height, access the Column options > Layout section > Minimum height eg: https://d.pr/i/C224my .
Animated entry effects
This feature will apply various scroll-based entrance effects to the column and widgets inside. A live example which demonstrates its powers can be seen in London Demo’s Lookbook page .
Read more on how to apply animated entry effects on section, columns or widgets .
To enable this option, access the Column options > Advanced tab > Motion Effects > Entrance effects list eg: https://d.pr/i/zBi3vc .
Sticky column
This option will enable you to make a column sticky in a series of multiple unequal height columns in a section.
A live example can be seen in London demo’ Collections page where a column will remain sticky until the other column’s products have been scrolled outside the viewport.
To enable this feature access the Column options > Advanced tab > Motion effects section > Sticky (Rey) eg: https://d.pr/i/zAPCGF .
Please know that this feature requires the other column(s) to be taller in height for the effect to be visible.
Note that the effect is not visible in edit mode.
Buttons
Extra button styles
Rey extends the button element to support extra new button styles:
- Link
- Primary
- Secondary
- Primary Outline
- Secondary Outline
- Underlined
- Hover Underlined
- Large Dash
- Normal Dash
- Underline 1
- Underline 2
Headings
Dynamic title
This feature adds a new Heading element skin, called “Dynamic Title” which is very helpful when you want to display WordPress native content such as page title, taxonomy title, description etc.
To use this feature, add a heading element and change the Skin option.
In Rey’s demos it was mainly used in Page covers that were embedded in taxonomy pages (categories) to fetch the title. eg: London demo category .
This is a primitive feature and i highly recommend Elementor PRO version which is stunningly powerful and has many more other features.
Text stroke
This option will make the heading to be outlined. The color of the stroke is inherited from the text color option.
To use this feature, access Heading’s options > Style tab > Special features > Text stroke eg: https://d.pr/i/M1EByk .
Live examples can be seen in: London demo category or shop page .
Vertical text
This option will make the heading to be vertically positioned. Examples can be seen in London Demo’s Lookbook page . Usually this option can be used with Elementor’s absolute custom positioning eg: https://d.pr/v/xiTxbB .
Note: there are issues with this feature in Elementor edit mode. It seems to be a browser bug.
Animate on Parent Hover
This option will make a heading react to it’s parent column or section hover, animating itself either through a decoration or fading in or out.
Examples:
- Underline animation in London demo or Milano demo .
- Fade-in in Valencia demo .
To enable this feature access Heading’s options > Style tab > Special features > Animate on parent hover and choose the effect and the trigger (parent column or parent section).
Image
Dynamic image
This feature adds a new Image element skin, called “Dynamic Image” which is very helpful when you want to display WordPress native content such as featured image.
To use this feature, add a Image element and change the Skin option.
In Rey’s demos it was mainly used in Page covers that were embedded in taxonomy pages (categories) to fetch the featured image eg: London demo category .
This is a primitive feature and i highly recommend Elementor PRO version which is stunningly powerful and has many more other features.
Custom CSS height
This will simply apply a forced height on the image. However it’s always best to upload images already edited and resized.
Text
Remove last paragraph’s bottom margin
This simply toggle with remove the last paragraph’s bottom-margin, especially when you have the text located in a background colored parent, which implicitly creates a larger bottom margin.
Video
Play Icon Type
This option extends the Video element’s design by adding extra “play” icons, such as Youtube play icon or a Caret.
All widgets
Inline custom positioning – extra settings
Elementor 2.5 introduced Inline positioning. This is one of the coolest feature making page building even more flexible.
I’ve added a couple of extra settings:
- Horizontal alignment (left, right, stretch)
- Flex grow (video tutorial)
- Flex shrink (video tutorial)
While horizontal alignment is suggestive what it does, flex-grow and flex-shrink should be used when elements are side by side and they each “push” one another.
All these options are based on CSS FlexBox but indeed they’re more advanced and i recommend watching some tutorials about how Flexbox works.
In Rey, most of these extra options were used building headers, to avoid using columns in header section.
Animation overrides (Animated entry effects)
This option will allow you to override the animation parameters inherited from the parent column’s entrance animations.
Read more on how to apply animated entry effects on section, columns or widgets .
To enable this option, access the widget options > Advanced tab > Motion Effects > Animation overrides .