Archived topic

Add Colour Block into Text

1 reply · Started by Jeremy on September 22, 2022

Viewing posts 1–2 of 2

September 22, 2022 at 12:51 am #2350297

Hi,

Is there a way to add a block of color into a line of H1 / H2 text the size of that text?.

At the moment, I can do it with a Square Emoji but am restricted in the colors which I want to change.

I have included an example in the private information below.

September 22, 2022 at 1:20 am #2350312

Hi Jeremy,

You can add add-square to the class list of the Heading/Headline Blocks through the Advanced section in the Block settings.

Then, add this CSS in Appearance > Customize > Additional CSS:

.add-square:before {
    content:" ";
    height:100%;
    width: 50px;
    background-color: #ff0000;
    position:absolute;
    left: 0;
    bottom:0;
}
.add-square{
    position:relative;
    padding-left: 50px;
}

You may alter the values in this code to your preference.

This archived topic is closed to new replies.

Start building better websites today.