Parallax with Color Overlay

Home Forums Jevelin Theme Parallax with Color Overlay

Home Forums Jevelin Theme Parallax with Color Overlay

This topic contains 16 replies, has 2 voices, and was last updated by  Shufflehound Support 1 month ago.

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    RESOLVED Posts
  • Hi,

    I’m trying to create a hero section with a parallax background image. The image has a lot of colors, so I want it to have a black overlay with 70% opacity. However, the Background Color option below the Background Image doesn’t work with a parallax background image. It works with a static image, as is on my website.

    Please help. Thanks!

    Hi @iancdma,

     

    I hope you are well today and thank you for your question.

     

    I visited your shared site but didn’t see any parallax background image so could you please tell me where you are displaying it so that I can help you?

     

    Best regards,
    Shufflehound team

    https://www.dropbox.com/s/0fopx5xmjuxxyvh/L0dsDHw7ge.mp4?dl=0

    I am developing the website on localhost now, but I uploaded the video above so you can see. Parallax Background Image, for some reason, isn’t working with the Overlay Background Color.

    These are for a Section element, under the Background configuration.

    I tried to visit your shared site but it is not accessible due to sitegound optimizer assets so could you please temporarily disable it?

     

    Also you can try achieving this using Yellow Pencil editor as described in the below page.

     

    https://support.shufflehound.com/how-to-change-almost-any-element/

    Hi! My website works fine with SG Optimizer, but I’ve disabled it for now so you can check what’s wrong. Yes, I tried doing it with Yellow Pencil, but it gave me the same results.

    Now, could you please use the parallax background image and set color overlay so that I can troubleshoot it?

    I’ve updated the page, please check so you can see the issue for yourself.

    By the way, the Vertical Column centering does not seem to work for IE and mobile browsers.

    Do you offer any other channels for support?

    Attachments:
    You must be logged in to view attached files.

    To make it work, please add the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .home .sh-section-overlay-front {
        z-index: 1;
    }

     

    We only offer support from this support forum.

    Thanks. What about the Vertical Column centering issue?

    Also, how do I add another button beside Sign Up? See attached screenshot please.

    Attachments:
    You must be logged in to view attached files.

    Solution for this topic

    Thanks. What about the Vertical Column centering issue?

    You can resolve it using below custom CSS code.

     

    .section-justify-height-full .sh-column {
        min-height: 100vh;
    }
    
    .section-justify-height:not(.section-justify-height-only) .sh-column {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

     

    Also, how do I add another button beside Sign Up? See attached screenshot please.

    To achieve this, you have to develop custom code in the child theme of Jevelin theme.

     

    Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support

     

    If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

    iancdma
    Participant

    Thanks! That fixed the problem. I’m just wondering, why isn’t this already included in the theme? Or did I find bugs and you’re gonna apply these fixes in the next version?

    For the second button, I’m a (junior) developer, so I guess I’ll just find my way. Thanks again.

    Thanks! That fixed the problem. I’m just wondering, why isn’t this already included in the theme? Or did I find bugs and you’re gonna apply these fixes in the next version?

    It is not a bug but this is intentionally displayed like that on mobile devices which is a part of responsive theme design.

    iancdma
    Participant

    Thanks for that info. Is Jevelin optimized for Pingdom, GTMetrix, Pagespeed, and the likes?

    iancdma
    Participant

    Why does the Unyson editor scroll up to the top of the page every time I edit an element and close/save?

    To help us keep support thread separates could you please create a new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.

     

    If you want to you can also add reference of this thread in your newly created thread.

     

    We would be more than happy to help you with your new thread.

    iancdma
    Participant

    Issue resolved, please mark like so.

    Ok. Marked the topic as resolved.

Viewing 17 posts - 1 through 17 (of 17 total)