Home Forums Weaver Xtreme Theme Featured Image and Title

This topic contains 13 replies, has 2 voices, and was last updated by  scrambler 3 months, 3 weeks ago.

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


    I am wanting to have my featured image full width with the title of the post overlaying the image like the example below.


    I do not know if this is a page builder function or if it can be accomplished with Weaver.

    Any assistance is appreciated.




    We can do that with a combination of weaver options and Custom CSS, but we first need to clarify a couple of things.

    The example you show is about the header not the featured image. Are you trying to do a header with a banner and text on top, of do you want that look for post featured images?



    If that is what you want for the Site header, just set you header image Alignment option to align full

    Then use the Title tagline option “Move Title / Tagline” Over Image.

    For any tweaks, provide a link to the site with that done



    I am trying to have the Featured image work as a full-width background with the title of the post overlaying on the FI.



    Is that on a blog page with several post or on the single post page?



    If the Single post page, do the following
    Main options > Post Specifics > Featured image-posts > FI Location Single page > “Banner above Title”
    Main options > Post Specifics > Featured image-posts > FI Alignment Single page > “center”

    Then add the rules below to the theme Gloabl Custom CSS Rule box
    .single-post .page-title, .single-post .entry-meta {position:absolute;top:10%;width:100%;text-align:center;}
    .single-post .entry-meta {margin-top:60px;}

    Post back with a link to a single post page for tweaks



    I gave it a shot…but the title is not overlaying and the image is not full-width.




    Change top:10% in the rule by top:50px (or any value that works for you)

    You should also change the text color to white and increase the margin for the meta line

    .single-post .page-title, .single-post .entry-meta {position:absolute;top:50px;width:100%;text-align:center;color:white;}
    .single-post .entry-meta {margin-top:100px;}

    As far as being full width, you have a sidebar on single post pages, so you would first need to remove the sidebar by changing the sidebar setting in main options > Sidebar & layout > Post Single page setting



    If you wanted to keep the sidebar, we can try but it becomes quite complicated, and may be hard to keep responsive.

    Have a try at adding the rules below to redo the layout to have the sidebar under the Featured image

    .single-post.is-desktop .l-content-rsb {width:100%;}
    .single-post.is-desktop #primary-widget-area {position:absolute;right:0;top:520px;}
    .single-post.is-desktop #secondary-widget-area {position:absolute;right:0;top:1000px;}
    .single-post.is-desktop .entry-content {margin-right:29%;}
    But for your featured image to fill the whole width, it will need to be a bigger image, and then the top position of the sidebar would need to be adjusted.
    That also means that all Featured image would need to have the same size so the sidebar position is correct for all.


    Is there a way that I can move this up to the FI and the Title Overlay so that it is in the header (like the Header Image Replacement option on the posts)  either on a global or post setting as I still want to keep my sidebar intact.




    I think we had a timing issue from your post to my post.  I had not had the chance to read or try your last suggestion.

    I am just wondering if I could make this change on a post by post basis since I will need to add a new FI to each post.



    I am just wondering if I could make this change on a post by post basis since I will need to add a new FI to each post.

    Not 100% sure what you mean by that.

    Do you mean you do not want that layout for ALL posts but only a few?

    Or do you mean you cant have the same size FI for all posts?
    In that case, we do have the ability to make the CSS specific for each post, but is it more work…



    Sorry for not being clear.  Anytime that I mess with the theme I get a little stressed.

    Answer:  I do not want that layout for ALL posts but only a few.

    Right now this site change will require me to touch every post to replace the FI.  Since I have to touch every post, I am okay with controlling this formatting on a post level.  (Unless there is an easier, more effective option.)

    When I was messing around I was able to add a wide image, not the featured image to a post in the header section using the Header Image Replacement HTML option on the post to get the full-width image.  Problem, it is now on my archive page.

    Post:  https://emptynestin.com/money-mindset-questions/

    Archive Page:  https://emptynestin.com/personal-growth/

    Where I stand…

    • I am not sure how to move the title over the image or if it is possible.
    • At this point, I am pretty okay with just being able to accomplish the full-width image.
    • My intent is also to create a page for the Personal Growth section and so the image on the archive page is something that I can also overlook.

    ** I would love to see the white space following the menu, above the image, removed. Is this possible? **

    Thank you for your help and patience!



    For just replacing the Header Image by the Post Featured Image, you could actually use

    Post Single page options > Single Page View: Featured Image > Header Image replacement

    But with either of these options, there is no responsive way to move the actual title up on the image in a responsive way, because they have different container as a reference. If I move the title up with a fixed value, when the browser gets smaller, the position of the text will change relative to the image and wont look right.

    Now using the header image Replacement HTML, you could add the title manually with the image. It would look something likethis

    <img src="https://cdn.shortpixel.ai/spai/w_1380+q_glossy+ret_img/https://emptynestin.com/wp-content/uploads/Money-Mindset-Questions-to-Help-You-Find-Happiness-and-Fortune-Header2.jpg" />
    <div class="mytitle">Your Post Title</div>

    Then add the CS rule below to style the title div so it moves over the image

    .mytitle {width:100%;text-align:center;position:absolute;top:100px;font-size:150%;color:white;}


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

You must be logged in to reply to this topic.