At one point, I considered converting all my WordPress cover blocks into images. The idea was to ensure they looked consistent across devices—especially on mobile—while also enabling reuse across dynamic pages. However, I’ve since decided against this for several reasons.
First, converting every cover block would be time-consuming. More importantly, replacing text with images negatively impacts SEO since the content is no longer crawlable. And ultimately, many of the layout issues I was trying to solve can be handled more efficiently with CSS and regular mobile checks.
One reason I leaned toward image conversion was the difficulty of integrating ACF Pro fields into cover blocks. Despite trying three different AIs over several days, none could get it working correctly for my specific use case. The same holds true for migrating WordPress footnotes into custom post types. Some tasks are simply too complex to fully automate with AI—especially if you don’t have time to dive deep into the code yourself. (I’ll cover the footnote migration in another article.)
Still, the technique I was experimenting with is worth sharing. In fact, my first chapter currently uses this method: most of its cover blocks are screenshots turned into images. They now render consistently on desktop and mobile.
Here’s how I used Safari’s Developer Tools to take a clean screenshot of a cover block:
- Open Safari on your Mac and navigate to the page with the cover block you want to capture.
- Zoom out (using
Cmd+-) to fit the block nicely within the viewport. - Right-click the cover block and choose Inspect Element to open the Developer Tools.
- In the Elements panel, select the outermost HTML element that wraps the entire cover block.
- Right-click the selected HTML node and choose Capture Screenshot.
(Click image to see full size)
Safari will generate a high-quality screenshot of just that HTML element—styled exactly as it appears on the page. I then converted the output to WebP format for optimal web performance.
(Click image to see Chapter)
In short, Safari’s built-in developer tools let me treat WordPress cover blocks as design templates—allowing for precision image capture without needing external tools or design software. While I’m stepping away from this method for now, it’s a useful trick to keep in your toolbox.
