Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1316298

    Hello,
    how can I add a full width background image in tag archive page?
    I see a very basic editor with no access to ALB
    I tried to generate an header in another page with ALB and paste its code in the tag editor HTML textarea, but it does not work.

    Thank you
    Mauro

    • This topic was modified 3 years, 3 months ago by Mike.
    #1316764

    Hey profumopuntoit,
    Thank you for your patience, I see that your page is a woocommerce archive page, so you would go to that category and upload a thumbnail and choose Display product image and description as fullwidth page banner
    2021-08-14_005.jpg
    then you will have a full width banner on the frontend for the category
    2021-08-14_006.jpg
    Please note that Tags don’t have this option, but the shop page does in the theme options, you can also set one banner for all category pages.
    2021-08-14_007.jpg

    Best regards,
    Mike

    #1318502

    Thank you Mike,
    as it is not possible via Enfold interface, I did it with a bit of HTML and CSS
    It is not portable code, easy to reuse, but it works.
    I hope that Enfold will add this functionality in a future release

    <div class=”jmb-full-width-image”></div>
    <p class=”jmb-full-width-image-paragraph1″>Our Gourmand</p>
    <p class=”jmb-full-width-image-paragraph2″>Perfumes</p>

    .jmb-full-width-image-paragraph1 {
    margin-top: -165px;
    margin-bottom: 204px;
    color: #f2f9bd;
    padding-left: 10px;
    font-size: calc(19px + 2vw);
    }
    .jmb-full-width-image-paragraph2 {
    margin-top: -145px;
    margin-bottom: 81px;
    color: #f2f9bd;
    padding-left: 10px;
    font-size: calc(19px + 2vw);
    }
    .jmb-full-width-image {
    background: url(/wp-content/uploads/gourmand-perfumes1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
    height: 400px;
    margin-top: -36px;
    margin-left: -50px;
    padding: 0;
    outline: none;
    }

    The interesting point is
    width: 100vw;
    that set the width of the image at 100% of the viewport

    At the moment it works correctly in the staging site where I had to modify the width in Enfold settings => General Layout => Maximum Container width from 1310px to 100%, in the production site I did not do this modification yet, because I am afraid that it could break something.

    Setting Maximum Container width to 100% can have some weird effect? From the staging site it does not seem so

    Thank you
    Mauro

    #1318641

    Hi,
    Thank you for sharing your snippet, perhaps others will also find it helpful, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Header with full width background image in tag archive page’ is closed to new replies.