Text background question


#1

I’d like to have a grey box behind my text, similar to the sample image, but JUST behind the text itself.

I created a Custom Class - if I select “Text” in the dropdown (ringed in red) the effect disappears. All the other dropdown options look like the screenshot.

Is there a way of achieving this?

Thanks.


#2

Hello @Ian,

There are many ways to archive what you want.

You can just select the text, create a span, and then add the background color. You can also add padding to make it look better.

Cheers,
Eldar


#3

Brilliant, thanks, never heard of Spans before!


#4

Just select the text, and click on ‘wrap in span’.

13%20PM


#5

Yep, I understood, just meant I’d not heard of Spans. Works really well.

I just need to add a blank space before and after the text and it’s perfect!


Whilst you’re there Eldar - a.k.a. ‘The Man Who Knows’ - can I ask you another please?

For LG & MD… I’d like to alternate these two blocs (which seem to retain their size)

23

and

11

…but…

For SM & XS… I’d like the right side of the second bloc (the picture with added text) to appear before the left side, so for all breakpoints we always see the photo (with added text) and then the purely text side.

Any help will be massively appreciated!!!


#6

Hello again,

Great!

There are two ways to do that. Both are easy.

First - hide the image bloc (left in the second row) on SM and XS, then add a regular bloc with the same image image right after these two. Hide the new bloc on LG and MD.

Get the idea, right?

Second, you can use the new order for columns feature of Blocs 3, but you will have to use the regular bloc with width set to edge to edge to get the same look as the blocs you are referring to in your screenshots.

It’s quite a great feature, and I will maybe do a video on it soon, but it does require you a bit more work compared to the first method, which is basically, duplicating the imaging bloc, placing one before and after the text bloc, and hiding them on some breakpoints.

Hope it helps!

Cheers,
Eldar


#7

Thanks Eldar. I’ll give it a go!