CTA boxes with the Gutenberg Block Editor (and no plugins)
Ғылым және технология
How to build three awesome designed Call to Action Boxes using the Gutenberg Block Editor and no extra plugins.
Links
How to create a Call to Action Box with the Gutenberg Block Editor - www.pootlepress.com/2021/08/h...
Timeline
0:00 - Intro
2:00 - Create a Call to Action Box using the Cover Block
6:40 - Create a Call to Action Box using the Media and Text Block
10:30 - Create a Call to Action Box using the Columns Block
Пікірлер: 20
Thanks! I always get great ideas from your presentations.
@jamiewp
2 жыл бұрын
thanks Gerald :)
Thanks for the video - good pace. My comment is around 'responsive design'. These days we tend to design using the 'mobile first' approach. Which generally takes care of itself (nearly) on desktop. Your video(s) center around the desktop experience mostly. For example it's fine adding 50px padding on a desktop but... you don't show this or solutions for the mobile experience. Sometimes media queries have to be used 'or' sometimes the block used has options for mobile as well. These are key to todays designs IMHO. I would love to see your pace of videos covering always the desktop... and, the mobile side of things. Cheers matey.
@jamiewp
2 жыл бұрын
Cheers Jonathan, i've had quite a few comments along the same lines so I'll get on the case :)
This is amazing! I love it. Thank you.
Always good to be able to use the native Gutenberg editor to do nice cta's like you've presented. Well done except it would be good to have yourself on the left as to see controls. No worries, good info.
@jamiewp
Жыл бұрын
Thanks Martin - noted about me 😅
Nice Video... Would be great if you could put your camera window on the left, so it doesn't obscure the options you are clicking on.
@jamiewp
2 жыл бұрын
Noted!
Thank you for your lessons! How can I make border-radius 50% to the background image?
@jamiewp
2 жыл бұрын
Could you u share an example of this design ?
Hey thank you sir for your time and effort to bring us these great tutorials.. I’ve learned a lot from you … unfortunately on this tutorial my spacer is always white and I can’t seem to change the color of it… any feed back will be much appreciated…. And thanks you again.
@jamiewp
2 жыл бұрын
Hi Dennis, the spacer block can't be styled - did I style it in this demo? I might have been using our Gutenberg pro plugin www.pootlepress.com/gutenberg-pro/
For some reason I dont have the option of changing opacity of the image in a cover block? I'm using the free Blocksy theme and using only gutenberg.
@jamiewp
2 жыл бұрын
Hi David, that sounds a little odd - i've not seen that before . Is definitely the cover block?
Hey! awesome video. Is there a way to save these CTA's so I can copy and paste to every blog post?
@jamiewp
Жыл бұрын
Yup you can save them as resusable blocks or better still use our block injector plugin to dynamically inject them in the posts you want to target www.pootlepress.com/block-injector/
How do I add it to my post when I download it from your site? Thanks
@jamiewp
2 жыл бұрын
just paste it into a page should work :)
@amumtomum
2 жыл бұрын
@@jamiewp Thank you! Is it better for my site if I do it myself, or it is the same if I add the code?