Theme: Twenty Twenty. Adding Buttons
-
[Not public, I’m in the process of making the website]. I’ve tried putting six buttons at the top of a Page of services, using the Buttons block from Layout. They display by default as three above and three below. I’ve set the LH ones to left-align, the middle ones to centre-align, and the right ones to right-align. The left and right buttons work fine but the middle ones don’t centre even though they’re set to centre-align. They both nestle up against the left-aligned buttons. How to you recommend controlling the layout of the buttons? Fyi I may want to add more services to the Page which would mean adding more button(s) in addition to the six I have now. Thanks.
The blog I need help with is: (visible only to logged in users)
-
Hi there, could you send a link to the site you’re having trouble with? The one listed doesn’t have the buttons you’re describing, that I can see.
Please note these forums are for the sites hosted and managed here at WordPress.com. For help with a site hosted somewhere else, you’ll need to use the forums for self-managed WordPress installations instead.
-
https://greatsouthernplans.wordpress.com/services/whatwedo/
Right at the top of the web page.
Like I said the site is currently private. Are you still able to look at it?
-
Those of us on staff can see private sites, yes.
I’ve set the LH ones to left-align, the middle ones to centre-align, and the right ones to right-align. The left and right buttons work fine but the middle ones don’t centre even though they’re set to centre-align. They both nestle up against the left-aligned buttons. How to you recommend controlling the layout of the buttons?
Right, setting alignment on individual buttons is not the way to go here, as that the Buttons block was not designed to control layout in this way – if you add multiple button blocks inside on buttons block, it will display them inline next to one another. The only reason you’re seeing two lines is because of the width of your buttons – if there were less text in your buttons there might be only two or only one button on the second row.
If you were on the Premium Plan we could have used CSS to compensate and fix the layout, but without CSS this needs a bit more complicated setup:
1) Start with a Group block like you have now.
2) Inside the Group block, and a Columns block and set it to three columns.
3) Inside each column, add a Buttons block containing only one button. Set the alignment to left, centre or right for the Buttons block, not the button itself.
4) Add a second columns block below the first one, inside the Group block, and repeat the process there with the second row of buttons.
For each new row of buttons you might want to add in future, you can just repeat this process. In fact, you might even want to consider saving the first columns block as a reusable block to make adding additional rows easier going forward.
This needs a separate columns block for each row, else the buttons won’t be aligned horizontally.
I know this is a bit complex, but it’s the only way I can find to have the buttons align correctly both horizontally and vertically.
-
Many thanks for your detailed help. I followed your instructions but found the longer text like ‘Subdivision’ and ‘Industrial’ were wrapping onto a second line of the button – I guess using the Columns block takes up some of the available space leaving less room for the buttons.
I’ll try a new approach altogether and scrap this particular effort! Thanks again, I learnt a lot in the process and appreciate your response.
-
- The topic ‘Theme: Twenty Twenty. Adding Buttons’ is closed to new replies.
WordPress.com Forums 