Rey theme custom Elementor features

You are here:
Estimated reading time: 4 min

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 .

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.


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 .

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

Currently there are only 2 effects – Clip in and 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 .

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 .


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:

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:

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 .

Was this article helpful?
Dislike 0
Views: 381

Join the conversation