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

  • @geraldheagney6038
    @geraldheagney60382 жыл бұрын

    Thanks! I always get great ideas from your presentations.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    thanks Gerald :)

  • @JonathanCampDesigner
    @JonathanCampDesigner2 жыл бұрын

    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

    @jamiewp

    2 жыл бұрын

    Cheers Jonathan, i've had quite a few comments along the same lines so I'll get on the case :)

  • @TadDoylemusic
    @TadDoylemusic2 жыл бұрын

    This is amazing! I love it. Thank you.

  • @realMartinHamilton
    @realMartinHamilton Жыл бұрын

    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

    @jamiewp

    Жыл бұрын

    Thanks Martin - noted about me 😅

  • @rabeezley
    @rabeezley2 жыл бұрын

    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

    @jamiewp

    2 жыл бұрын

    Noted!

  • @Series_Savant
    @Series_Savant2 жыл бұрын

    Thank you for your lessons! How can I make border-radius 50% to the background image?

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Could you u share an example of this design ?

  • @dennisbrock1435
    @dennisbrock14352 жыл бұрын

    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

    @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/

  • @DavidOldenburg1
    @DavidOldenburg12 жыл бұрын

    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

    @jamiewp

    2 жыл бұрын

    Hi David, that sounds a little odd - i've not seen that before . Is definitely the cover block?

  • @Drake_J
    @Drake_J Жыл бұрын

    Hey! awesome video. Is there a way to save these CTA's so I can copy and paste to every blog post?

  • @jamiewp

    @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/

  • @amumtomum
    @amumtomum2 жыл бұрын

    How do I add it to my post when I download it from your site? Thanks

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    just paste it into a page should work :)

  • @amumtomum

    @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?

Келесі