Archived topic
Change List text line spacing and margins (top and bottom)
9 replies · Started by Mark on May 24, 2022
Hi there,
I have GeneratePress Pro with GenerateBlocks (free)
I'd like to change the List block (Gutenberg) layout style ( I don't see a List from GB, only Gutenberg). It seems the only way I can do it is to amend the line height etc for ALL text within the GP Pro theme, not just the lists only.
I'd love to be able to do this AND have a template to save so that this style could easily be deployed because it will go on almost every page on the site.
On a side note, I'll likely have to buy GB Pro as I want to save a template for Buttons and I don't believe I can do this with the free GB version anyway? Perhaps when I buy the GB Pro version that will give me options to save a templated style of lists?
Any help much appreciated :)
Thanks
Mark
Hi Mark,
You’re correct, there’s no List Block available in GenerateBlocks. An alternative would be to use Headline Blocks as done in this sample video by Leo: https://www.youtube.com/watch?v=_teF6vLd0HM which replicates the look of a List through Headline Blocks.
If you’re using a numbered list, you would need to type the number manually if you do decide to use a Headline Block.
This will however allow you to save and use it as a Global Style offered by GenerateBlocks Pro.
If you plan on using a WordPress List Block, yes you can create a Local Template which you can reuse freely.
Example, I created a Local Template and added a CSS class which I can use to alter the look of the list: https://share.getcloudapp.com/z8umJ5GW
Then, I added the List to a Page: https://share.getcloudapp.com/d5uO8YDe
And as shown, the list is there, with the CSS class: https://share.getcloudapp.com/ApuXwngG
With this, if I add a code targeting this CSS class, I’ll be able to modify all instances this Local template is used.
Hope this clarifies. :)
Ok thanks.
In order for me to use a certain colour of button that I could save as a template that could be easily pasted into any post or page (and of course a different link for each button) ...... I assume I need to use GenerateBlocks Pro for that? There is no way to do this with GP Pro or GB Free version?
Also, same if I want to add a custom style of Separator/Divider across the site, same as above?
Cheers
You can also try utilizing the WordPress Reusable Block.
Here is an article for reference: https://wordpress.com/support/wordpress-editor/blocks/reusable-block/
There’s also a video there on how to use it.
You can also use a Reusable Block to for your Separator. If you add a CSS class, they should be present on all instances of the Reusable Block. :)
Hi Fernando,
I saw the Wordpress button previously. The problem with it is that with Reusable blocks, you have to remember to disassociate the block each time from the reusable block (by manually going in each time and clicking "Convert to regular blocks"), otherwise there's the risk that if you don't then all the associated reusable blocks will update across the site and wipe out whatever URL links were placed in them....if that makes sense? I have several VAs working on the site, and the risk is too great to do that. On another site we have (with Thrive Architect), I can do the following:
I basically want to take out the risk of human error as much as possible. Basically, I'd have a designed button, with no URL link set as the template...then every time a button needs to be added the templated button is added in and the link is manually added to that single button only.
Is that possible with my current setup? And if not, will GB Pro do that?
Cheers
I see. That would be possible with GenerateBlocks Pro Global Styles functionality.
Global Styles would allow you to re-use a style and then assign different links to each Button Block.
Here's the article for GB Pro Global Styles: https://docs.generateblocks.com/article/global-styles/
Cheers!
Hi Fernando,
Is there a guide that shows me how to save a button as a template and easily allows me to access that template?
I've tried saving a Global Template. I amend the colour and the text and center the button. When I then open up a test page to add the button, either the colour doesn't save, or the text doesn't save or the global style isn't available to select and just a hex code is available (even though I changed the hex code to a rememberable name for me to pick).
I'm not sure what I'm doing wrong? I even tried creating a global style as a container and adding a button (and changed colour/font weight/and text wording in there), but it only "half" works.
I wish there was a video on this somewhere, but I just can't find it.
Appreciate any help you can give
Cheers
Hi there,
does this video help:
https://www.youtube.com/watch?v=GjyYcr8ldHQ
Hi David,
Yes, I watched it.
This is what I'm trying to achieve:
- A styled Button saved as a template so that I can easily add to any post multiple times. When each one is added to a post, all I'd have to do is manually add the URL to it. Pretty much every button on the site will have a unique URL to add.
What I do within Global Styles:
- Similar to the video, I add a "buttons" block.
- I then rename the Global Style ID and copy/paste that to the Global Style name, just like the video.
- I then go to the button and:
a) Center it
b) Change the colour from blue to red
c) Change the button text to "Check Price On Amazon"
d) Change the weight of that text from "default" to 600
e) Change the Border Radius to 5 for all edges
f) I then save the Global style
When I go to a test page (I refresh to make sure I can grab what I just tried to save), I add a "Buttons" element, which adds a blue default button that sites to the left of the page. I then select the button and select the Global Style of what I just saved.
The button either changes colour, weight and radius to what I chose (but keeps the text "Button" and it remains sitting to the left), or does nothing.
Note that within the Global Style I created another one (with a different Global Style name, but exactly the same attributes), but this time selected the Global Style that the ID refers to as global-button-wrapper-<name I entered> - not global-button-<name I entered>
Hopefully that makes sense? It's quite hard to explain.
Thanks
Mark
Hi Mark,
As you've noticed, a buttons block is seperated into 2 parts: the buttonsblock & the buttonblock.
For example,a) Center it I assume this happened when you were selecting the buttonsblock, so this style is actually added to the buttonsblock. If you want this style (align button to center), you'll need to select the buttonsblock on your test page, apply the buttonsglobal style to it.
Make sure, buttonsglobal style is applying to buttonsblock and the same for buttonblock.
The text in the button won't change, as global style is only CSS, it will not alter the HTML.