- This topic has 9 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hello,
I’m trying to design a nice table layout.
Here is my result as of today.Can you see the pink border on top?
I would like the vertical space between the grey borders and the text to be exactly the same height as for the vertical space between the top pink border and the text.I tried 2 options:
– Option 1: adding a bottom border to EACH of the Container contained inside EACH column of the grid, as can be seen here.
– Option 2: Adding a full-width container dedicated only to display the border, as can be seen here.Still, I find not way to set the vertical height the way I described it above, to get a similar vertical space between each vertical border and the text above and below.
Thank you for your help.
PS: When using Kadence Blocks, they had a blocks dedicated just for that. It was called a Divider block to make it look like here. But I want to get my site to be as lean as possible and use only GP and GB, not Kadence.
Customer Support
Hi there,
that space comes from the Bottom Margin that is added to all paragraphs.
theres a few options to change that, heres 2 of them:Option A. With CSS.
1. Select the Grid Block, and in Advanced > Addtional CSS Class(es) add:remove-p-bottom
2. Add this CSS to your site:.remove-p-bottom p { margin-bottom: 0; }Option B. Use a GB Headline block instead of Text block.
If you use a GB headline ( note you can convert a text block to one from the blocks toolbar ) and set it toPthen in its Spacing set the Bottom Margin to0.You can do that from the Block Toolbar, then set the GB Hedline to a
PabdHi @david,
Thank you.
a – What is the option YOU would choose?
b – Just because of the name of the “Headline blocks” and the way it is encoded, do you think Google’s algorithm might take it into account to try and understand the structure of the page? In other words, it might have impacts on your SEO?
c – Why don’t you guys at GP offer a space dividers to make it even more simple, just like Kadence and themes/plugins offer? Is there a reason for you not to do so?
Thanks again
a. for any kind of custom layout where i want to break from the Theme styles i would use the Headline block.
b. If you set the Headlines blocks element tag to
Pthen the HTML it outputs will bee seen no differently to the text block you’re currently using. Search engines will treat them the same.c. In our opinion, there is no need for a spacing divider block 🙂 Our Blocks have Spacing settings. This allows you to adjust the space between our blocks, by changing its padding or margins and you can borders directly to them.
Hi Dadid,
I’m sorry, but after some trial and erros, I’m still struggling.
Maybe I did not make my point clear about the c/ divider block. Your opinion is that it not useful.
But look at a real non-coder use case like myself:
A – I was able to do this nice looking on this page table with all vertical space adjusted so easily between the rows of the table using a space divider from kadence block. It took me less than10 minutes with ZERO hassle.
Look at my structure to see how I did this.
B – Now look at this still-a-draft-table on this other page (NSF content). As you can see, I’m struggling so much to make the space equal around the borders between each row.
Here, I had to create this support ticket.
Then follow your instructions in adding this code to my CSS:.remove-p-bottom p { margin-bottom: 0; }Then, adding the class to EACH grid.
Then trying to understand what space to add…
… and finally you can see I lost myself in doing this.I’m not arguing about your suggestion. But yes, I trying to convince you about the extreme user-friendliness of using a space divider to create nice layout table and horizontal borders.
I’m not sure if I will convince you but my feedback is purely factual and honest. Again I was able to do the table on the first site all by myself. The only drawback of it – which I don’t like at all – is that it forces me to have Kadence blocks installed on top of GB, which is a kind of a doubloon and makes no sense.All in all, can you please advise on what I’m doing wrong with the second site and how I should fix the table.
Than you so much for your help. I hope you appreciate my candid feedback. I just want to hemp make BGP and GB even better.
Customer Support
Hi Nicolas,
Here’s a simple screen recording showing how to add spacing and borders in GenerateBlocks: https://share.getcloudapp.com/qGuZXyvN
As shown in the video, it’s relatively easy to do and can all be done just through the Block Settings. Performance-wise, this also produces less HTML markup compared to the structure in your reference site.
In the one you’re creating, the spacing settings are different. I would suggest creating one table row, and then just duplicating it as shown in the screen recording. This would ensure consistency for all rows.
This is how we would suggest doing it in GeneratePress. Here’s another screen recording more appropriate for the structure you’re aiming for: https://share.getcloudapp.com/kpuO7Qno
If you’re not good with this, you can also use a Container Block as a “space divider”. Here’s a video showing how: https://share.getcloudapp.com/p9uL8lXk
Hi,
Extremely helpful.
Here is the result.The Large Heading approach is not natural to me and I’m sure I still miss some of the possibilities it has to offer. Powerful.
Thanks so much.
Great, it’s looking good now. You’re welcome, Nicolas!
For clarification, which Large Heading approach are you referring to?
By Large Heading approach, I just meant “using the large heading” is not intuitive to me as compared to building my page with different blocks such a divider block, containers, etc.
I see. That setup produces less HTML markup though which is better.
If you still would like to use a specific Block for the Divider, as mentioned, you can use a GB Container Block for this. For a more effortless development experience, I recommend using GB Pro’s Global Styles or Local Pattern feature.
Through this, you should be able to insert a divider with just a couple of clicks.
Global Styles: https://docs.generateblocks.com/article/global-styles/#:~:text=Adding%20a%20Global%20Style,for%20this%20block%20by%20default.
Patterns: https://docs.generateblocks.com/article/pattern-library-overview/
- You must be logged in to reply to this topic.
