[Resolved] How to edit single blog post template in Bold library

Home Forums Support How to edit single blog post template in Bold library

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

    Hi,
    I am trying to edit the hero section of the single blog post on your Bold site library. I know this is done outside of Elementor and is largely controlled by custom CSS.

    My issue is that if the title of the post is anything more than 3 words it overflows and you end up with what appears to be a double line break and looks completely wrong.

    I need to be able to have much longer titles because of the technical nature of my posts but can’t quite see where the font size is controlled in the hero nor how to change any of the attributes on the surrounding blue box.

    You can see an example here https://hellequinsystems.co.uk/connecting-devices-to-the-cloud/
    this just shows the header and the issue I’m having

    Thanks

    #1023207
    David
    Staff
    Customer Support

    Hi there,

    in Customizer > Typography > Headings – try reducing the Line Height of the H1

    #1023251
    Richard

    Thank you, that worked.

    Regarding the second part, how do I change the attributes of the single post text box at the top that this title is displayed in?

    #1023263
    David
    Staff
    Customer Support

    In Appearance > Elements – look for the Single Post Hook – it uses custom HTML and some PHP to pull in the title / meta and featured image.
    It is then styled using CSS in Customizer > Additional CSS.

    What specifically do you want to change?

    #1023268
    Richard

    Thanks David, it is more for reference at this point to have the info at hand as I’m working on that aspect now.

    Going back to my first question, changing the font size of header H1 is fine to a point but what if I want it to deliberately spill over to the next line – at the moment if this happens this is an inordinate line break size. Is it possible to have it flow onto the next line without a line break?

    #1023271
    Richard

    Further to my last reply, bringing H1 down sufficiently for display of a post on a mobile device so that a line break is not introduced makes my home page header too small, so getting around the line break would be a much better solution for me if possible…

    #1023274
    David
    Staff
    Customer Support

    You can use this CSS to specifically target size and lineheight for the custom hero H1:

    /* Desktop */
    .custom-hero h1 {
        font-size: 40px;
        line-height: 1.5;
    }
    /* Mobile */
    @media (max-width: 768px) {
        .custom-hero h1 {
            font-size: 24px;
            line-height: 1.5;
        }
    }

    The spacing that is appearing is related to the Line Height – not a line break.

    #1023600
    Richard

    Hi David,

    Thanks that worked, I think I am pretty much there now. Just one thing is there an easy way of adding a text box(es) to the Blog page hero section?

    #1023602
    David
    Staff
    Customer Support

    Would require either adding some HTML/CSS or the header element supports shortcodes if its being generated by a plugin.

    Do you have an example ?

    #1023603
    Richard

    and where can I change the Blog page hero “Blog” text, it doesn’t seem to be tied in with the blog page title.

    #1023608
    Richard

    Ok, thanks I’ll have a think about what I actually want 🙂

    Is it straight forward to change the “Blog” text on the hero?

    #1023618
    David
    Staff
    Customer Support

    The Blog isn’t a normal page so the_title doesn’t exist.
    Edit ( or create ) the header element specifically for the blog and change the title in the content.

    #1024075
    Richard

    Hi David, I’ve managed to get it sorted now, thanks very much for your help

    #1024145
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.