Rey elements – Covers

You are here:
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.

LinkBlurry 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

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

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

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

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

LinkSplit 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.
Was this article helpful?
Dislike 7
Views: 2676

22 Replies to “Rey elements – Covers”

  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.

    1. mariushoria[ Post Author ]

      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

  2. Raymond

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

    Many thanks for all your hard work.

    1. mariushoria[ Post Author ]

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

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

    1. mariushoria[ Post Author ]

      Hey!

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

      Marius

  4. Andrew Parker

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

    1. mariushoria[ Post Author ]

      Hi there!

      Please try editing the Cover – Split slider’s Main slide options where you should be able to see the video options eg: https://d.pr/i/reV5KB .

      Marius

  5. tika Stefano

    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

    1. mariushoria[ Post Author ]

      Hey there!

      You should be able to find an option inside the cover, called ‘Scroll Sensitivity’ eg: https://d.pr/i/kDSYZW .

      Hope it helps!
      Marius

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

    1. mariushoria[ Post Author ]

      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 (1920×1080) . For example i would use something like 1440×810 , 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.

      1. Jens

        Hi, correct, the Blurry slider.

        I just notice that my first slider is quite sharp whereas the second and third are quite pixelated.
        Even when not caring about the file size it’s not sharp. I’ve been careful to start with the same quality (about 24mb) and resized it down to the same aspect (1920*1080) ratio but it seems the slider forces the image to much lower resolution. I’ve also checked the resized result including magnifying/stretch before uploading and it’s more sharp taken directly from the desktop.

        In other words 🙂 How do I just achieve sharper results? Speed optimization can come later 😉

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

    1. mariushoria[ Post Author ]

      Hi Vangelis,

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

      Marius

  8. 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 😉

    1. Marius[ Post Author ]

      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!

      1. Damian

        Thanks! The theme is already awesome. For a quick workaround I have just removed video and slider works fine. Keep punching!

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

    1. Marius[ Post Author ]

      Hey Jack! Can you try disabling the Scroll hijack option eg: https://d.pr/i/ujM5D7 ? I believe this should do the trick.

      Marius

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

    1. Marius H[ Post Author ]

      Hi Lauritz,

      Can you try adding this css code snippet https://d.pr/n/f8AYu1 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

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!