Font (Text) Tricks for Hero Pages


#1

I’m building a website for our daughter’s wedding. I’m looking for design suggestions. What are some cool ways to keep a colorful Hero image visible, yet have the text legible? Thanks to our friend Eldar I got some ideas. :grinning: Love to get some other ideas.


#2

Hello @KBConcepts,

I am so happy to hear that! These days, I am finishing building a new template for Blocs Templates, and after I am done, I will try to come up with a few more ideas for your new project!

Hope everything is great with you!

Cheers,
Eldar


#3

Thank you my friend :slight_smile:


#4

One of the easiest ways to do this is to create your hero bloc and make it parallax.

You then create the various other blocks needed and use the same hero image in each block. Again, set the background as parallax on each bloc. This will ensure that the single hero image remains in view.

The next issue is how to create text and other content that can roll over the background image yet remain legible. An easy way to do this is to create a semi-transparent tile that can be used as a background image in each Bloc ROW. By using this method, you could make a number of semi-transparent background tiles in various colours and use different colours in each part of the page.

The background tile can be made in any graphics app, but should be saved as a PNG file in order to maintain the translucent effect. You add the tile by selecting a row and creating a custom class. In the style settings tab, add the background image and set it to top left and repeat. This will fill the row with the image and allow the underlying hero image to remain visible. The overall effect is similar to using the texture option on a bloc. The difference is that the texture option fills the whole bloc whereas the row background option is confined to the content area only.

When adding backgrounds this way, you may have to add some padding to the rows through the same custom class so that the background forms a border around the content.

Example using a 50% black Background tile in a row.


#5

Excellent reply, thanks you for taking the time to make it so clear. :slight_smile: