I’m evaluating Blocs, so I’ve only spent a limited time watching the free video tutorials (thanks for them, those of you who made them) and I’ve had some reasonable results with the app, but one thing has stumped me so far.
I want to have text on top of a background image that stretches full width, bleeding off the edges of browser windows and I want the text to be about half way from the centre of the image to the top of the image vertically. That is for a title to appear in centred vertically in the top half of the image.
I can only seem to add brics of text to the vertical centre of the bloc containing the image. I can’t move the text bric and reposition it. Is there a way to do this? Thanks.
The standard position for a text or heading bric will be the horizontal centre of the bloc in which it’s placed. This is dictated by the padding setting for the bloc. To see this in action, place a background image in a standard structure bloc. This will give you the full width image you need. Now add a heading bric to the Bloc. This will initially place the heading at the horizontal centre of the Bloc. If you now set the padding for the Bloc to “None” you will see the heading jump to the top of the Bloc whilst the bloc itself will be reduced in height. It will look something like this:
With the Bloc still selected, create a custom class (name it bloc-padding or similar). Then, in the metrics tab of the class manager, select the top margin and adjust the padding until the text is the distance you want it to be from the top of the bloc. Now select the bottom margin and adjust the padding to extend the height of the bloc - effectively creating a larger bottom margin than the top. This is essentially creating a custom padding for the bloc rather than having a standard padding applied to the top and bottom of the bloc. In my example, I’ve set the top padding to 60 px and the bottom padding to 200 px.
