I have two text boxes on top of an image, I want them both to be a paragraph, but I want the upper text to be a different colour and different size than the text below.
The only way I have been able to do this is to make them separate headings (i.e, the top is Heading 3 and the bottom text is paragraph) and that way I can change their appearance individually.
I tried to set a custom class for the upper most text to be able to have them both as a paragraph, but use a custom class on the upper text to make it different, but its not working…
‘Rockdoor Ultimate’ should be a Paragraph, but a text size of 24 and purple
‘From £970 including VAT and installation’ should be a paragraph too, but a text size of 18 and white.
The easiest way is to create a single text box and create a span on the text you want formatted differently. Just select the portion that has to be different and click on the span icon in the editor window. Here are the steps:
and here is an example of a single heading bric styled with a span (taken from your example)
I doesn’t really matter if you start with a standard paragraph bric or a heading bric. For your example, I would probably opt for a standard paragraph bric styled for the white text element. Then wrap the heading part of the text in a span and style the heading how you need it. You could then duplicate the bric, change the price info and apply a different class to the heading span to get the different colours you need.
I’ll have a look at this. thanks!!
Only issue with this is that ever span turns into a hyperlink. I just want a text box. Unfortunately adding a custom class (with a text size of say 16) to my paragraph will not overwrite the existing size. Perhaps @Norm could take a look when he gets a minute. thanks
This is not normal behaviour. The span icon is right next to the link icon in the editor window - are you sure you are clicking the correct icon.
2 Likes
Strange. I was certain I was clicking the 2nd icon from the left. I just tried and you are right. The ones with the link have an A above them…
Thanks and sorry for the confusion!
