How to Add or Remove Blank Space Between WordPress Blocks
HTML-код
- Опубликовано: 12 сен 2024
- WordPress's Block Editor makes it incredibly easy to create beautiful pages. However, it still has 1 critical flaw. It does not allow you to manages spaces between blocks effectively.
In this video, I'm going to tackle that problem and show you exactly how to add, remove, and manage spaces between WordPress blocks.
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin wpforms.com/wp...
►Best WordPress Analytics Plugin www.monsterins...
►Best Lead Generation Plugin optinmonster.com/
►Best WordPress SEO Plugin
aioseo.com/
►Best Theme Builder for WordPress www.seedprod.com/
Related Videos
►WordPress Tutorial - How to Make a WordPress Website for Beginners • 📘 WordPress Tutorial -...
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor • 🧱 How to Use the WordP...
►What is SEO and How Does it Work? • 🧱 How to Use the WordP...
►How to Install a WordPress Theme • How to Install a WordP...
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
www.youtube.co...
Follow us on Twitter:
/ wpbeginner
Check out our website for more WordPress Tutorials
www.wpbeginner...
#WPBeginner #WordPress #WordPressTutorial
Thank you so very much for these tips! This caused me a lot of problems as a newbie.
There are a few things I would like to add:
- For wordpress v6.2.2 put the css is in: Dashboard -> Design-> Website Editor -> Styles [the black/white circle button when editing templates] -> Additional Css
- Depending on the theme (for example in twenty-three) it is necessary to prioritize conflicting css properties, this means to use: margin-top: 0 !important;
- Use F12 in Chrome and select your block and see which block's margin is causing the trouble.
- Consider setting the spacing between blocks property (in styles -> layout) to 0 and edit the layout properties of the block types (style-> blocks).
what about in Zoologist theme? I am so frustrated right now
Your tutorial is straightforward and very to easy to follow. Thanks a lot!
Glad to hear!
As someone who hates computers, this tutorial is so well done that even I can follow it. Fantastic job.
Glad to hear! We hope our guides continue to be helpful for you :)
Wonderful, so helpful! Just the advice I was after and explained brilliantly, thank you so much!
You're welcome! Glad our video was helpful :)
I love how you teach your videos! Thank you, Sir.
Glad you like it :)
great presentation style, thank you 👍
Glad you liked it :)
That was exactly what I was looking for. Thank You!
You're welcome, glad our guide could assist!
Excellent teaching.... thank you !
Glad it was helpful!
Thank you for this tutorial! I'm new to Wordpress and learning a lot this way. I'm not afraid to try things also when it comes to code writing. Again, I am new to all of this, hehe. But wauw, so many questions but also so many possibility's!! :)
Glad our guide was helpful!
@@wpbeginner I really would like remove the background colour, transparent, now it's black and in front of my picture. Do you also have a tutorial regarding that?
This is awesome! Thank you for sharing!
You're welcome, glad you found it helpful!
Wonderful! Any thoughts on why I have too much space between an image and a text block on mobile only?
It is likely a CSS issue with your theme's mobile styling, If you check with your theme's support they can normally let you know the CSS to change.
@@wpbeginner Thank you so much!
@@wpbeginner Actually, I'm not sure I have a theme per say. I use WP blog in conjuction with SHOWIT.
I really enjoy some of your videos. I have a question though: Where (or how) do you suggest I can create (or others by paying) a custom wordpress theme ??
Are any tools I can use to create one?? Thanks!
If it is for your site then we have a guide below that you should find helpful:
www.wpbeginner.com/wp-themes/how-to-easily-create-a-custom-wordpress-theme/
THANK YOU SO MUCH ! I used to write a dot to give space between blocks hahaha
Glad we could give a good alternative :)
Thank you so much!!!!
You're welcome!
Thank you! Is there a way of removing the spacing between blocks in the backend editor as well (like you did at 5:44). I prefer creating my sites with my sections directly against eachother (no space between them). But it's very frustrating because the editor isn't WYSIWYG so I have to keep opening the frontend to see things without the margins. Can we apply the same "fix" to the editor somehow?
For the moment we do not have an easy CSS solution
That was fantastic
Thank you!
Thank you for your clear explanation. I appreciate the demonstrations you make to help understand what the incorrect way does. I am struggling with a footer, and unfortunately, your solution does not work. The inspector tool F12 shows the culprit, namely "margin-block-start: 1.5rem;" How can I reduce it? Customizer seems to not recognize margin-block-start in CSS code. (using twenty-twentytwo theme). Thanks
If your theme is not allowing the CSS customization, you could try adding !important to the end of your custom css to see if that allows the code you are using to replace it to work.
@@wpbeginner Thank you so much for your reply! Adding !important does not make a difference. What I mean is that "margin-block-start" is not recognized as a property, since it shows up in red.
Thanks a lot!
You're welcome!
😊 Thank you!
You’re welcome!
Great video. I do have one question. The spacings between all my images are exactly the same. However, if I add a column, then the spacing under the column is wider. Is there a way of reducing the spacing under columns? I really appreciate any help you can provide.
You should be able to follow the method from this article to reduce the spacing after your columns as well
Thanks!!
You're welcome!
thank you
You're welcome
This may not be the right place to ask this question but here goes: We have a literary blog and our posts are short stories or poems. I paste text into a post with spaces between all paragraphs, and those spaces disappear. The paragraphs all run together. I've inserted spacer blocks, but that is cumbersome as I have to insert them between every paragraph. There must be a more elegant way to preserve spaces between paragraphs. I would very much appreciate help with this nagging issue.
If you use Shift+Enter that should allow you to add space between your text while keeping the same paragraph block.
Hello, My name is Humphrey. Thank you very much for this video. I have followed it and reduced spacing between images in my blog post which worked very well. However, I still have one challenge. The wide blank spaces between image blocks on the MAIN SIDEBAR were not reduced but remained the same. Please can you show me how I can reduce spaces between image blocks on the main sidebar? Thank you very much.
The sidebar normally has styling that would require CSS changes. We would recommend using our guide below for how to use inspect element and that would allow you to find what needs to be reduced for the spacing.
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
I tried this on two group blocks (both containing columns) that were next to each other with no success. I can tell there is still a space, because the groups have a background color. There is no spacer block (or any other block between them). Do I need additional CSS when trying to get rid of spacing between group blocks? Thanks.
It can depend on your theme but more than likely your group blocks have slightly different CSS that you would need to modify. You can check the CSS for your blocks using Inspect element and we cover how to use that in our article below!
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
I don't get the same interface during editing how can I get one in your video
Ours is the current default block editor, if you're not seeing it then either your theme or a plugin on your site is likely overriding the editor.
Cant find the customizer button, pleas help! What should i do? It just disappeared
Did your theme change and start using the full site editor? If that is the case under Appearance you would see Editor. If not then you would want to ensure you are an admin user on your site.
So weird. I have the classes in like. you do and they show up when I inspect the page, but the blocks still have a margin of either top or bottom still applied. Even though I can see the class name that we created added to the block.
There may be some CSS overriding what you are adding, we would recommend trying Inspect Element using our guide below to help test for this.
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Great tutorial - one problem, customizer is not there.
Your theme may be using a custom interface, if you have not done so already we would recommend reaching out to the support for your specific theme and they should be able to assist!
Hi, I followed all the steps but it did not work. I'm struggling to figure out why it isn't working.
It is difficult to say without viewing your site directly, you can get a better idea on what is causing the extra space using inspect element following our guide below!
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
how to strech section/container to full width, I've tried all methods, elementor full-width, width 100% and also checked page code, but couldn't resolve the issue. please help
For Elementor, we would recommend reaching out to Elementor's support and they would be able to assist.
@@wpbeginner elementor only give feedback to pro users, I mailed them the issue.
Did not work for me
If none of the methods we mention in this guide work for you, we would recommend reaching out to the support for your theme as the theme's styling would likely be overriding what you are setting.
I want to know how not to create seperate blocks between Paragraph and its heading simply by pressing ENTER key
It's so annoying
For the time being the block editor would require a new block for the content. You may want to look into the classic editor for the type of editing that you want.
Not able to see the same sub menu Appearance>Customize in my installation.
Your theme may be a full site editor theme. We would recommend taking a look at our article below:
www.wpbeginner.com/beginners-guide/how-to-fix-missing-appearance-menu-in-wordpress-admin/
@@wpbeginner Thank you for your reply
Lost me at CSS Class....LOL
Haha, I don't understand much CSS myself, so if I could do it, you can too.
-- Yuvraj, the person in the video. :)
Hi, thanks a lot! But it didn't work on the column block of my site (Astra Theme). Kindly give some suggestions if possible.
Update: The !important property solved the problem. Many many thanks to @f.libaax7408!
Glad to hear that solved the issue for you!