Sometimes you want a gap between two blocks. When you have an image that has text from a particular paragraph block wrapped around it you may not want the following paragraph text block to wrap as well. Separating blocks can be a problem with an image block and a paragraph block that you have put together. We show how you can separate blocks using a custom html block.
The problem
Here’s an example of how it can go wrong:
Here is the text of the first paragraph that is meant to wrap around the image on the left.
Here is another paragraph block – it wraps around as well but really we would prefer it doesn’t as the content isn’t related to the image in this case.
Here’s a screen grab of what it looks like in case your screen shows this differently (smaller screens won’t demonstrate the problem clearly):
Using the ‘custom html block’ to create a break
One solution is to add a custom html block between the two paragraph blocks, containing the following code:
<div style="clear:both;"></div> When we do that the following happens:
Here is the text of the first paragraph that is meant to wrap around the image on the left.
The second paragraph is now nicely placed below the image, and no longer wraps around it. When you save it and examine it in the front end of your site you won’t see the code block at all.
And here’s a screen grab to demonstrate it clearly in case your own screen size doesn’t show it in the same way:
The html in the custom html block itself is not visible, but creates the break between the two paragraphs. So, you can now separate blocks!
Turning it into a reusable block
If you think you’re going to use this custom html block more than once on your site then turn it into a reusable block – it will save you having to cut and paste the code every time you need it as it will then appear in your library of reusable blocks. You should name it something clear so you can spot it easily when you next need it.
