Skip to main content
Peak Performance Digital Logo

Creating an Accessible HTML and CSS Biography Card Using the Pinegrow Web Editor

Creating an Accessible HTML and CSS Biography Card Using the Pinegrow Web Editor

In this video, I show how we can build an accessible and responsive biography grid using plain HTML and CSS inside the Pinegrow website editor. I had originally recorded this video as part of a series where I build the same design using Oxygen, Elementor, Pinegrow, Bricks, and Generate Blocks, but that frankly got unwieldy since each build took more than 30 minutes. On top of that, the page builder landscape took a few giant shifts within the span of a few weeks, making a lot of what I had recorded obsolete. In the end, I just scrapped the whole thing.

Now, I’ve decided to resurrect the Pinegrow build to use as the foundation for a shorter series on how to create custom WordPress blocks using Pinegrow. This video focuses on the core structure of the component and is platform agnostic, so you can take this same code and apply it to your own projects. Whether you are building a website using plain text or using a developer-focused site builder like Oxygen, Breakdance, or Bricks, this should apply. For other WordPress builders such as Elementor or Generate Blocks, the concepts remain largely the same, but you’ll probably have to adapt the implementation a bit to match their particular workflows.

This is part 1 of a 2-part series. In the 2nd part, we turn this card into a native WordPress block.

Recent Posts

  • About the Recent WordPress Drama

    As many of you have heard, there is some drama in the WordPress space right now. If you haven’t heard anything yet, consider yourself lucky to have avoided the needless drama so far. In this post, I’ll cover what is happening, who is impacted, why it’s important, how we are protecting you, and some thoughts […]

  • Using Sass with Pinegrow

    I recently had someone ask whether Pinegrow supports Sass, so I thought I’d do a quick video demonstration. In this demo, I show you how we activate our Sass stylesheet and how we can use a simple Sass variable to change the color of a heading.

  • Pinegrow Countdown: Day 1 – Pinegrow Plays Nice with Others

    A lot of products in the WordPress space have grown in popularity, primarily because of their open and flexible ecosystem that allows 3rd party developers to create add-ons, extensions, and libraries. Pinegrow also has a great plugin API. But I’m going to show you in this video, that in most cases, you don’t even need it.

  • Pinegrow Countdown: Day 2 – Pinegrow is STILL not a Page Builder

    In this video, I’m going to show you why Pinegrow is different from Page Builders so you don’t fall into the trap of trying to use it like something it’s not, only to get frustrated and give up.

  • Pinegrow Countdown: Day 3 – Frameworks in Pinegrow

    Pinegrow has built some fantastic helpers for popular frameworks. In fact, when you start a new project in either Pinegrow Desktop or the Pinegrow WordPress plugin, you’ll be asked which framework you want to choose. If you are already used to using one of the built-in frameworks, the choice will be easy. If not, this little video will hopefully help you understand what the frameworks do and how you should answer those important initial questions.