Skip to main content

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.

YouTube video

Recent Posts