Description
A couple of weeks ago, a viewer named @groovebird812 spotted a layout on one of my demo sites and asked how to implement three overlapping images. They mentioned the WordPress Block Editor isn't their best friend, so I thought I would make a quick video to show exactly how easy this is to achieve with native blocks and some custom CSS.
You might be wondering why we don't just create a single graphic in an editing program. Building this natively is crucial for three reasons: it allows your clients to easily swap out images later, it gives you better SEO juice through multiple alt tags, and it keeps your code incredibly clean.
In this video, I walk you through the setup, the CSS, and how to make sure the whole thing stays responsive on mobile screens.
Ciao!
Jakson
https://jakson.co
*Timestamps:*
0:00 The viewer request from Groove Bird
0:30 Three reasons to avoid using static graphics
1:40 Setting up the layout in the Free Starter Block Theme
2:20 Styling the core image blocks with percentages, borders, and shadows
3:28 Adding classes (featuring the CSS Class Manager plugin)
5:35 Applying negative margins in CSS
7:50 Writing media queries for mobile responsiveness
*Resources Mentioned:*
👉 Grab my FREE Starter Block Theme and other WP goodies here: https://jakson.co/freebies/
👉 My vid on the the latest Starter Block Theme v4 https://youtu.be/oOEvif0329k
👉 Check out the CSS Class Manager plugin to streamline your workflow: https://youtu.be/oJzrWB3Y8Co