Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 24, 2021 at 7:37 pm #1296547
    sldeutsch

    Hi –

    My site is http://www.thestrapsaver.com.

    I have layerslider in the hero and it’s causing my site to be slow among other issues (CLS) – it’s overkill for what I need.

    I tried to put raw ht image tag and it was converted to a shortcode which includes about 5 levels of divs and styling I do NOT want for this image. (it is a white border that keeps it from being full screen) It looks right when I preview but not right when I save it. when I save it, wordpress strips everything out and replaces it with shortcode.

    Top is my current carousel, bottom is image before I save it (preview) https://drive.google.com/file/d/1TW8xrq8gqlKM6wDHCqpQlMEbIw3PNNRT/view?usp=sharing
    Image after I save it: https://drive.google.com/file/d/1cBQOc-N_QIfhNiB-Bqgy_Fq8DDJ9afGE/view?usp=sharing

    Thank you!

    Shari

    Code: https://drive.google.com/file/d/1NPCSyZKSamaYmtEDwytoq8xKKI8_qkBo/view?usp=sharing

    I know there has to be an easy way to add full-screen hero with a button without something as complex as layerslider. Can anyone help?

    April 27, 2021 at 7:57 am #1296918
    Ismael

    Hey sldeutsch,

    Thank you for the inquiry.

    If complex animations or moving contents are not required, you can easily add a hero image using a Color Section with background or a Fullwidth Easy Slider. Have you tried those elements yet?

    Best regards,
    Ismael

    April 30, 2021 at 3:37 pm #1297584
    sldeutsch

    I was having difficulty getting a button on the lower right with either of those. How would might I do that?

    Thanks!
    Shari

    May 3, 2021 at 5:39 am #1297852
    Ismael

    Hi,

    Thank you for the update.

    If you are using the Fullwidth Easy Slider, you can add a button or two in the slide’s Advanced > Link Settings panel. Set the Apply a link or buttons to the slide? settings to the third or fourth option.

    Best regards,
    Ismael

    May 3, 2021 at 3:16 pm #1298027
    sldeutsch

    I wasn’t able to move it to the lower right – as currently seen on my home page – https://www.thestrapsaver.com (but that’s with layerslider – which I want to remove) – can you give me a suggestion on how to move it? I created this test: https://dev2.thestrapsaver.com/full-width-easy-slider-test/ – but again, need to move that button…

    May 4, 2021 at 2:20 pm #1298281
    Yigit

    Hi,

    Please edit your element and go to Advanced > Developer Settings and give it a custom ID (“hero-slider” in example below) and then add following code to Quick CSS in Enfold theme options > General Styling

    #hero-slider .slideshow_caption {
    width: auto;
    height: 170px;
}

    Best regards,
    Yigit

    May 6, 2021 at 3:04 pm #1298798
    sldeutsch

    I put this in – thank you – and it’s right on desktop, but when it switches to mobile, the button moves to the left site. (you can see it in place now on https://dev2.thestrapsaver.com/full-width-easy-slider-test/)

    May 9, 2021 at 4:53 am #1299140
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
#hero-slider .slideshow_align_caption a {
  float: right; 
}
}

    Best regards,
    Rikard

    May 9, 2021 at 9:23 pm #1299185
    sldeutsch

    Wow, this is great! One last thing – and I don’t know how much of an issue this is, but when I change screen resolutions from mobile to desktop (and vice version) the button disappears – is there anything that we can do about that?

    May 10, 2021 at 5:15 am #1299221
    Nikko

    Hi sldeutsch,

    Inside the Media Query code block:

    @media only screen and (max-width: 767px) {

    please add this CSS code:

    #hero-slider .slideshow_align_caption .avia-slideshow-button {
    visibility: visible;
}

    Hope it helps.

    Best regards,
    Nikko

    May 12, 2021 at 2:39 pm #1299934
    sldeutsch

    It’s not working, but it could be me. This is what the code looks like:

    #hero-slider .slideshow_caption {
    width: auto;
    height: 170px;
}
@media only screen and (max-width: 767px) {
#hero-slider .slideshow_align_caption a {
  float: right; 
#hero-slider .slideshow_align_caption .avia-slideshow-button {
    visibility: visible;
)
}
}
    May 12, 2021 at 3:48 pm #1299953
    Nikko

    Hi sldeutsch,

    The code is invalid, please replace it with:

    #hero-slider .slideshow_caption {
    width: auto;
    height: 170px;
}

@media only screen and (max-width: 767px) {
  #hero-slider .slideshow_align_caption a {
    float: right; 
  }

  #hero-slider .slideshow_align_caption .avia-slideshow-button {
    visibility: visible;
  }
}

    Best regards,
    Nikko

    May 15, 2021 at 5:20 pm #1300491
    sldeutsch

    Well, that’s fantastic! Thank you for taking that very long walk with me – I don’t fully understand CSS :) Appreciate the help!

    May 17, 2021 at 3:35 am #1300617
    Nikko

    Hi sldeutsch,

    You’re welcome, it’s a pleasure to help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Need help adding a full-screen static hero with a button’ is closed to new replies.