Rey elements – Covers

Deprecated article

This article is no longer maintained and may describe behaviour that has since changed.

Estimated reading time: 1 min

These are Elementor widgets built to be used in Rey theme. Video tutorials are coming soon!

These elements are all exclusively only in Rey theme.

Blurry Slider

This unique element displays a full-screen slider, animating its slides in a blurry-flashing manner. It supports images, videos and custom captions.

Blurry Slider cover
Blurry slider in Milano demo

Nest Slider

This unique element displays a full-screen slider, animating itself upon page loading, covered with nest-like bars.

It supports images, videos and custom captions.

Nest slider
Nest slider in Beijing Demo.

Hover Panels

This unique element displays a multi-column panel with images and text, animating each item inside on hover. It supports adding menus inside the items, as well as a custom button.

There isn’t an item limit, however try not to use more than 4 unless you don’t need to display too much informations that may not be well shown.

Screen Shot on 2019-08-22 at 00-20-51.png
Hover panels in Tokyo Demo .

Side Slider

This unique element displays a slider on the right side of the page, starting full-screen and animating to an active position.

It supports images, videos and custom text captions.

Multiple effects are available but the speciality is the curtain like transitions.

Side slider cover.
Sideslider cover in Paris demo .

Skew Cover

This unique element displays a slider with its images skewed, transitioning the slides with a curtain-like effect.

Screen Shot on 2019-08-22 at 00-28-29.png
Skew Cover in Amsterdam Demo .

Split Slider

This unique element displays multiple slides in a split style layout, with caption on the side and media on the other.

Sliding only is triggered by scrolling the page. It supports custom url’s at the bottom and social icons on the side, when the slider decreases itself in size.

Split slider
Split slider in New York demo.
Show comments and replies (closed)Hide comments and replies

Left here between 2020 and 2021, when comments were open. The answers were written then and may describe a version of Rey that has changed since.

  1. Jarrad

    Hi Team,
    What am I doing wrong, when I add one of these Rey Cover Silders to a page and have a negative margin on my header it always displayers over my header even after changing the Z-Index on the section and element.
    Thank you for your advice.

  2. MariusRey

    Hey Jarrad,

    Could you please drop me a message through the support form at https://support.reytheme.com/new/ and send me the link to the site so i can inspect with Chrome dev tools? I really need to have a look before suggesting any fix.

    Thanks!
    Marius

  3. Raymond

    Could you possibly add Distortion and Double Covers (Sliders) when you get a chance?

    Many thanks for all your hard work.

  4. MariusRey

    Hi Raymond! Yess, forgot about that. Will do it in a couple of days to wrap up with the new update. Thanks!!

  5. Rchin

    For the Nest Slider in the social icons, could you add option to select a Patreon icon please? I know it's not really a social icon but I need one there, thanks.

  6. MariusRey

    Hey!

    Sure, i've noted to add it for the upcoming update.

    Marius

  7. Andrew

    The model video in the New York Demo... how do I change it? There is nothing clear cut anywhere on how to change it

  8. MariusRey

    Hi there!

    Please try editing the Cover - Split slider's Main slide options where you should be able to see the video options eg: [link no longer available] .

    Marius

  9. Tika

    Hi I would like to know if it is possible to adjust the speed of the scroll. I feel that when I scroll the movement is too fast. thanks

  10. MariusRey

    Hey there!

    You should be able to find an option inside the cover, called 'Scroll Sensitivity' eg: [link no longer available] .

    Hope it helps!
    Marius

  11. Jens

    Hi Marius, trying to find the optimal image size for covers... can't find any general recommendations in documentation or comments?

    Even though the underlying theme may try to optimize I've always learnt to be consistent on images especially in order to control aspect ratio, quality and to minimize image resizement.

    Looking forward to your answer.

  12. MariusRey

    Hey Jens,

    I'm guessing you're using the Blurry slider right? It was mainly designed as fullscreen, so it's best to try sizing the images with a scaled down full-hd version (1920x1080) . For example i would use something like 1440x810 , which would indeed stretch to cover the entire screen but if you slightly add a darker overlay, the quality decrease shouldn't be that noticeable.

  13. Vangelis

    Hello there!

    I see that most of the covers work with "full width" and the "stretch section" option enabled.

    However, I would like to use the "blurry slider" in "boxed" mode. Is there a way to do that without the message

    "this widget is full viewport only etc" ???

    Thanx in advance,
    ZV

  14. MariusRey

    Hi Vangelis,

    Unfortunately no, sorry! That blur depends on the fact the slider is full-width.

    Marius

  15. Damian

    Hello,
    I would like to ask where I can disable Side Slider loop in Paris Demo? There is only autoplay option in settings.

    Also, there is a problem with Side Slider. If you have for example 3 slides like in demo page (1-image, 2-image, 3-video) and the last one is a YouTube video, then after second loop all captions disapears and slider stops showing only image from second slide.

    It would be nice to embed Vimeo clips as well ;-)

  16. MariusRey

    Hey!

    Indeed there's no setting that disables the loop. I've noted to try adding an option in the element, for the upcoming update.

    I could replicate the captions issue. I'm fixing this too. Onto Vimeo, i've noted but i'm not sure if it'll get into this updatte, most likely into 2.0.6 .

    Thanks!

  17. Jack

    Hey!
    I'm using a Split Sider but it's located on bottom of the page.
    When opening the page, it's the first element shown, forcing to scroll on top.
    How can I fix it?
    Thanks

  18. MariusRey

    Hey Jack! Can you try disabling the Scroll hijack option eg: [link no longer available] ? I believe this should do the trick.

    Marius

  19. Lauritz

    Hello,

    I could use your help as I am using the split slider in my hero section at: https://www.bedstehund.dk/

    Most of the time when I visit my page the image in the split section is pixelated. It happens to me when I go to the Rey demo sites as well (only for the split slider).

    I am wondering if the same thing happens to anyone else or if it just me? Thanks in advance for any comments or fixes to this issue.

  20. MariusRey

    Hi Lauritz,

    Can you try adding this css code snippet [link no longer available] into Customizer > Additional CSS . There seems to be a Chromium bug with cover rendered images (object fit or background-size) and this seems to be the recommended patch.

    Marius

Was this article helpful?