Hero

  • Resolved JPo

    (@jrmyprtr)


    2 years, 9 months ago

    I’m new to Blocksy and trying to figure a few things out. I am wondering how to create a hero (i.e. .hero-section).

    I have two starter sites running on separate installs: Home Decor and Charity. I am planning on using Home Decor as the basis to customise for my site but using some elements from other starter sites. I like the hero on the Charity version that displays the page title. I’ve managed to get part of the way using Home Decor by turning on the featured image in the “Page Structure” area. But I notice three things:

    • this does not create a hero-section class
    • the page title does not display even though the toggle is on
    • the Charity site has featured image toggled off but is still present in the edit page area

    Setting the Container Background Image in the Page Title doesn’t change anything. I tried a custom image and it doesn’t appear anywhere.

    The settings in the customiser are all the same in the relevant areas, but perhaps I’m missing something.

    I’ve looked through the documentation and can’t figure it out. Can I add a hero section to pages?

Viewing 11 replies - 1 through 11 (of 11 total)

  • Hello @jrmyprtr

    Yep, you can easily do so, but you’ll have to turn on the “Title” section of the page/post, and select the “Type 2” design for it. Here’s a screenshot — https://ibb.co/Fx68YPX.

    From there, you’ll be able to customise these features further, according to your guidelines.

    If you need some reference, I’ll also invite you to watch our tutorial video here — https://www.youtube.com/watch?v=SCqwwepZtfA — which explains the options available for customisation.

    Hope this helps!
    Thanks.

    Thread Starter JPo

    (@jrmyprtr)

    Yep, you can easily do so, but you’ll have to turn on the “Title” section of the page/post, and select the “Type 2” design for it. Here’s a screenshot — https://ibb.co/Fx68YPX.

    This is partly why I am confused — I have set Type 2 and my settings match your screenshot.

    https://ibb.co/Wg5XFMg
    https://ibb.co/HKhj5Cs

    @jrmyprtr

    In this case, you’ve probably modified the page using the Gutenberg settings. You’ll need to edit the page with Gutenberg and change out the Blocksy settings, as shown in this little tutorial — https://www.youtube.com/watch?v=wcS9lkzCzkI

    Hope this helps.

    Thread Starter JPo

    (@jrmyprtr)

    Thank you. Page Title was disabled on the pages. Setting to inherit fixed it.

    You’re welcome, @jrmyprtr ! ??

    Thread Starter JPo

    (@jrmyprtr)

    I have a followup question. The hero image looks fine with a transparent sticky menu but is cropped awkwardly with transparency disabled.

    Is there a way to have the image crop in a way that can be controlled? Either through a setting, custom css or setting a focal point for cropping? Or some other method. I’ve tested this in both Firefox and Safari and the results are similar, but not the same.

    Narrowing the viewport creates a much more pleasing crop but I tend to work in full screen.

    Examples:

    https://ibb.co/4JTrP1C
    https://ibb.co/qMNDYgR
    https://ibb.co/cgmtP4g
    https://ibb.co/PwHFDsy

    Hello @jrmyprtr

    Well, this is somewhat normal to be honest. Hero sections usually employ a cover image, which implicitly has the “cover” CSS positioning. In this kind of positioning, the image is cropped until it’s hitting its horizontal margins, so it will always look different taking into consideration the size of the container.

    This isn’t something that can be “fixed”, because there’s nothing to fix here. That’s how CSS works pretty much.

    If you’d be kind to post the website’s URL, I will be able to confirm this for you.

    Thanks.

    Thread Starter JPo

    (@jrmyprtr)

    Would setting a focal point in images work? Is this something that could be added?

    Hello @jrmyprtr

    I will note this in our requests list, but in the mean time, you can easily control this via a little bit of CSS. Here’s a screenshot of what you need to target — https://ibb.co/Fb3D2Fb.

    Hope this helps

    Thanks

    Thread Starter JPo

    (@jrmyprtr)

    It does. Thanks again.

    You’re welcome, @jrmyprtr ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Hero’ is closed to new replies.

Tags