[Resolved] Reduce space between blocks?

[Hakim]

Hi team,
Is there any way to reduce the space between blocks?
Alternatively, can I have fonts of different sizes and/or colour within a block.
And is there a way to add space between words within a block?

I am Using GP theme and plugin on WP-5.02

[Leo]

Hi there,

The space between each paragraph block is controlled by the Paragraph margin in Customizer > Typography > Body.

You can change the text color and font size in the Paragraph block settings that’s built-in to WP (not GP).

As for space within a block, maybe <br> is what you are looking for.

I would recommend Googling “Gutenberg tutorial” to see some tips on how to use it.

[Hakim]

Thank you Leo

The paragraph spacing reminder is fantastic – thank you. I will be interested to see if that setting also effects the large gap at the bottom when you have columns – one text and one an image.

The tutorials i have done and have not seen anything relevant. What I am wanting is to be able to have, for example, one word that is both gold and bold while the rest of the paragraph remains black text. Changes to text colour in the block settings apply to all words, not just those selected it seems.

And as far as space in text is concerned,
Sometimes I would like to be able to indent, or emphasise something by having space around a word or phrase …

I don’t know if this something I can do via the code window?

[Leo]

Ahh then inline HTML style is likely the way to go.

Something like this should help:
https://www.w3schools.com/html/html_styles.asp

If you aren’t comfortable with any coding, then going back to the classic editor might be a good option:
https://en-ca.wordpress.org/plugins/classic-editor/

[Hakim]

Ahh Leo! YES!

Styles it is I think. I have just today done my first use of ‘class’ with:

In your theme’s style.css need to create a class like:
.redtitle {
   color: red;
   background-color: black;
}
Then, in the H2 Advanced CSS, you would put “redtitle” without the quotes to use that style. Looks like this in the source code:
<h2 style="text-align:center" class="redtitle">

Except I used simple css on the page settings:

.goldtitle {
   color: #bf8f00;
   background-color: white;
}

and then goldtitle in the H2 block Advanced settings.

It works, so now perhaps I can get rid of my clumsy workaround using columns with the class setting for the single word in the left column.

Much gratitude Leo.

Hakim

[Hakim]

However, my current skills are not up the job -as in what I have done is not working- my clumsy workaround will have do until I learn HTML & CSS … 🙁

Thank you Leo. You have shown me the way forward.
Hakim

[Leo]

Glad I could help 🙂

[Author]

Posts