Hero Sizing in Bubble

[norbert.nica]

Hello All,

Thought I post this in case others might have difficulties with the search.
I was interested in Hero Sizing on my landing page for my website and looked all over the net to find a solution.

I found a few videos regarding Toolit Kit however this I believe now has been renamed to Ultimate Toolkit.

Now, after you add the plug-in make sure you downgrade the version to 8.0.1 otherwise for some reason causes issues and will not work.

One more thing, when you drop the Hero Sizing element in a group make sure the group does not have a fixed width. (the height can be short).

There you go, you have Hero Sizing!

Hope it will help you, took me a while to figure out how to find the right solution.

[georgecollier]

Can you explain more? Wouldn’t you just use conditional formatting to reduce the hero text size as the page narrows?

[GH5T]

@georgecollier

Wouldn’t you just use conditional formatting to reduce the hero text size as the page narrows?

This doesn’t have anything to do with any text.

This just makes the width or height 100% (maybe only height) of the viewport, which is not really needed after the responsive update. Haven’t used that plugin for that purpose in a long, long time.

[georgecollier]

Ah. Yeah I do it with toolbox on my site, might post a tutorial soon.

[norbert.nica]

If you know a way to do it without the toolbox I am happy to hear it. The responsive update does not solve this issue as far as I am aware.

If I want an opening image covering my index page upon loading and have elements under that after scrolling I do not see a bubble solution for that.

In case you ONLY have an image on your index page that’s a different story, than you can do without any plug-in

[georgecollier]

@norbert.nica

If you know a way to do it without the toolbox I am happy to hear it

$(document).ready(function() {
  $('#anchor, #anchor > *').css('height', '100vh');
});

This resizes the element with the anchor HTML ID and its child element (which was necessary for my particular use case here https://notquiteunicorns.xyz/)

[ihsanzainal84]

All I do for my Hero images is use the image element and in Dynamic Image put the URL in ‘arbitrary text’. That lets me use the Run-mode rendering which I just set to rescale.

Width is free and fit height to content. I just set a minimum height so it doesn’t pancake in the editor.

[norbert.nica]

Thank you but that is not Hero Sizing although I appreciate your intake

[norbert.nica]

Hm, could you elaborate more on this. I am not a coder. I did use the HTML element with some codes before but I did my research and knew what I had to do.

Are you talking about the HTML element as well in bubble and use this code with it? or???

[chrisdmotz]

Hey! Were you able to resolve this? I’m having the same issue with current versions of the Ultimate Toolkit.

[norbert.nica]

Hey @chrisdmotz yes indeed I managed to find a workaround and its brilliant and simple.
Place an HTML element in a Group. Set the background of the Group to the image you want to apply the hero sizing to.

Then in the HTML element copy and paste this code in. Set the layout of the HTML element as the image shows below and you are done. Hope it helps.

PS - sorry I had to copy and paste the code as an image because for some reason it come back as a weird text here.

CODE: