Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1214350

    >>>>>> Update, I need some additional help after all.

    This is the page without the slider : https://aptilostaging.wpengine.com/cloud/zero-touch-wifi-iot-no-slider/
    I have managed to get it to look as I want with one exemption. I want the heading with white transparent background to be in the bottom LEFT corner of the color-section (background image) in order to look as much as possible as the page using the advanced layerslider. I have made some tweaks, with my limited knowledge in CSS, trying to achieve this. Works well for tablets but NOT for mobile phones for some reason.
    FOR YOUR REFERENCE :This is the page with the advanced layer slider i.e. the look I want: https://aptilostaging.wpengine.com/cloud/zero-touch-wifi-iot/

    This is the updated CSS (from Guenni’s original design), any suggestions are much appreciated:

    .responsive-colorsection {
    width: 100vw !important;
    height: 29.6vw;
    }

    .responsive-colorsection .container {
    position: relative;
    height: 100% !important;
    top: 0 !important;
    }

    .responsive-colorsection .container .content {
    position: absolute !important;
    bottom: 0px !important;
    left: 0px !important;
    width: auto !important;
    }

    .responsive-colorsection .container .av-special-heading {
    background-color: rgba(255,255,255,0.9);
    padding: 10px 15px;
    }

    .responsive-colorsection .template-page .entry-content-wrapper h1 {
    text-transform: none !important;
    }

    >>>>>>
    Hi,
    I am looking for a way to replace the Advanced Layerslider with a fixed picture. This is because I want to speed up our site and also Layerslider is the only remaining problem when it comes to use webp pictures through the imagify plugin.

    First I thought of using the color section and simply put the picture I want to use as background picture. Then use custom CSS to produce the H1 heading I want in terms of size etc to go on top of the picture. Problem is that I cannot find a way to get the picture all the way out to the edge, even if I set the padding to zero there will still be a few pixels white space to the left and right (if the picture is centered), this is not the case if I use colored background instead of picture. The next issue is that there is no way to say that the color section should fit to the background picture size. I need it to scale with different devices just like Layerslider does.

    Is there a way to overcome this? I really want to get rid of the Advanced Layerslider as it only ads unneccesary code to my pages and ridiculously enough the majority of them only have one picture anyways. But I need the heading to be on in front of the picture at the bottom just like in the layerslider.

    • This topic was modified 4 years, 1 month ago by Terve.
    #1214397

    this is a full-width slider of Enfold. – With Caption Text ( in this case with frame ) etc. pp. there are a lot of options to choose ( even the h1 for the heading could be reached.)
    on Styling Tab of the slide options – you can set for different screen-width the font-sizes.

    https://webers-testseite.de/terve/

    #1214401

    Thanks Guenni, but will this not also mean unnecessary java code etc that will affect performance? What I am after is to just display a full-width 1500 wide picture that have a styled text H1 like you show in your exampel and that scales down for smaller screens. Fast and simple is what I am after.

    #1214409

    you take your color-section with background-image.
    Set the background-image to cover.
    The color-section with custom-class f.e: responsive-colorsection
    and : no minimum height – thats ruled by quick css

    now you have to know the aspect ratio of your image ! mine on the testpage is nearly a 16:9 image
    so if the image-width is 100% the height must be 56.25%

    so:

    .responsive-colorsection {
      width: 100vw !important;
      height: 56.25vw;
    }
    
    .responsive-colorsection .container {
      position: relative;
      top: calc(100% - 150px) !important;
    }

    for a more banner like image take a different aspect ratio image !
    See example page from above.

    btw.: I hope you have performance optimized the pictures with the same vigor ;)

    #1214697

    Thanks Guenni, I will try that. Yes, images are optimised through Imagify. Performance is getting more and more important for SEO and I am very focused on that.

    #1214891

    Hi Terve,

    Thanks for the update, please let us know how you get on with it. Thanks @guenni007 for helping out :-)

    Best regards,
    Rikard

    #1215204

    Guenni,
    Can I ask what you mean by “Set the background-image to cover.” ? I can’t see any such settings for the color section element.

    #1215206

    On Styling Tab :

    but you can implement the attribute on css too:

    .responsive-colorsection {
        width: 100vw !important;
        height: 56.25vw;
        background-size: cover !important;
    }
    #1215236

    Thanks Guenni, that worket perfectly. If I want to have a h1 text anchored at the bottom with a white transparent background and have it scaling with the image, is that possible to achieve through CCS too? I am very novise when it comes to CCS. Look here https://aptilostaging.wpengine.com/cloud/zero-touch-wifi-iot/ at the layerslider on the top and the colorsection right under. It is the look of the layerslider h1 heading I am looking for (no rotation of text though).

    #1215293

    first – how did you get the 28,67 vw height?
    you are using the image with 1500 x 630 ?
    so height has to be : 42vw

    so remove please the other code – and replace with

    try :

    .responsive-colorsection {
        width: 100vw !important;
        height: 42vw;
    }
    
    .responsive-colorsection .container {
      position: relative;
      height: 100% !important;
      top: 0 !important;
    }
    
    .responsive-colorsection .container .content {
      position: absolute;
      bottom: 10px !important;
      width: auto !important;
    }
    
    .responsive-colorsection .container .av-special-heading {
      background-color: rgba(255,255,255,0.9);
      padding: 10px 30px;
      border-radius: 0.5em;
    }
    
    .responsive-colorsection .template-page .entry-content-wrapper h1 {
      text-transform: none !important;
    }
    #1215301

    Hi Guenni, Yes, the 28.67 was an error from my side, sorry for the confusion. I realized this myself but have not purched our casches as we are working on a cashing issue at the same time with our provider. Thanks alot, I am very greatful!

    #1215303

    Worked perfectly, I will make some detail changes now to get it 100% as I want it. Thanks again for all your help Guenni. You thought me some on CSS as well!
    We can close this now I think.

    #1215309

    Fine – you are welcome

    #1215514

    Hi Terve,

    Glad you got it working for you with Guenni007’s help! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘How to replace the Advanced Layerslider’ is closed to new replies.