Rey theme custom Elementor features

You are here:
Estimated reading time: 5 min

These are custom features that Rey implements and extend Elementor default functionality.

LinkSection features

LinkMulti-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 .

Screen Capture on 2019-08-22 at 12-37-43.gif
Enabling multi-rows option for a section containing 3 columns, each containing a heading.

Note that manual resizing handles are disabled.


LinkImage 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).

LinkStretch 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.

LinkTabs 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 .

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 .

LinkScroll 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 .

LinkScroll 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 .

LinkScroll 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 .

LinkAnimated 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 .

LinkHide 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 .

LinkHide 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 .


LinkColumns

LinkVideo 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 .

LinkCustom 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 .

LinkAnimated 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 .

LinkSticky 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.


LinkButtons

LinkExtra 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

LinkHeadings

LinkDynamic 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.

LinkText 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 .

LinkVertical 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.

LinkAnimate 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:

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).


LinkImage

LinkDynamic 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.

LinkCustom CSS height

This will simply apply a forced height on the image. However it’s always best to upload images already edited and resized.


LinkText

LinkRemove 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.


LinkVideo

LinkPlay Icon Type

This option extends the Video element’s design by adding extra “play” icons, such as Youtube play icon or a Caret.


LinkAll widgets

LinkInline 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:

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.

LinkAnimation 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 .

Was this article helpful?
Dislike 0
Views: 2660

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!