New project request: Hero Block Config

[diannevolek]

Hero Block Config - why do we need it?

The hero area is the best opportunity to provide context for the website, and quickly redirect users to key areas without them needing a [mobile] menu. Even an ordinary website has a WOW factor with a good hero.

Please ignore this if it conflicts with existing logic/layouts, or if there is already a better way. I used CSS Editor, so I didn't look at existing modules.

What does it do

Styles the Hero block. Installing the module puts a full-width banner picture, default text and two buttons in place. The site immediately looks nice and all they need to do is adapt it.

All the following can be done in CSS Editor, but having them as options would make life easy for a beginner. Options are specific to Hero blocks.

1. Content (title and text) can have an option for a "semi-transparent" background. This allows you to move logos out the header bar. Logos have really different proportions and it's hard to design a header that sizes them well. Every client demands a big logo on the home page. Text Background color options are strictly white or black, plus a %.

2. The width of the inner content block can be set as a % on desktop. Always 100% on mobile.

3. Checkbox - "don't show hero on mobile".

4. Two equal width buttons. First one is solid, second one outline - same colour. If you don't add text to the button it doesn't appear. Corner radius would be nice - 8px (checkbox?). Don't provide more buttons or other options.

5. Overlays to darken or fade a background image, or add a color tint. I don't personally like these but it allows you to put text on top. 100% would give you a flat-color background.

6. Keep existing options like upload image, classes on both title and text, heading styles etc.

7. Very optional. Allow up to 3 images to be added. Show any one of them randomly. No slideshows.

[stpaultim]

@hosef - Do you this could be a part of configurable block styles or should this be it's own module?

[izmeez]

This is interesting. So you used the module CSS Editor to make the changes, https://backdropcms.org/project/css_editor

[diannevolek]

I used CSS Editor to do the styling changes, but it can only do a background image, button styles, overlays, don't show/change on mobile etc. It can't do random images, or add the buttons. The negative of CSS editor, is that it can't be used with the user-friendly colour selectors, which are much easier for most people.

[izmeez]

@stpaultim Good question, could the https://backdropcms.org/project/configurable_block_style module fills the need?