elliott richmond

Creating a website and building complex layouts in the WordPress block editor has never been easier, thanks to the WordPress block editor and the full site editing experience. In this video, I demonstrate just how simple it is to replicate a complex website layout using only the block editor without touching a single line of code.

Why This Challenge?

Previously, I took on a full site speed build challenge, which was a lot of fun but didn’t leave much room for explaining the thought process behind each decision. This time, I wanted to take a more methodical and educational approach. By breaking down the build step by step, I aim to show not just what blocks to use, but why they work in each scenario.

To do this, I used a site called A Million Screenshots to randomly select a website to replicate. The chosen site, Blookup.com, features an interesting, structured layout with a large hero image, staggered content sections, and call to action elements. The challenge? Recreating this visually engaging design using nothing but the block editor.

How I Approached the Building complex layouts in the WordPress block editor

Instead of building the entire site, I focused on key structural elements:

1. Header Layout
   • A cover block for the background image
   • A row block (using flexbox) to align navigation, logo, and icons evenly
   • A group block to control alignment and spacing
2. Hero Section
   • A cover block with a full width background image
   • A row block to arrange the text, buttons, and navigation links
   • A stack block inside the cover block to maintain spacing and alignment
3. Staggered Content Layout
   • A columns block for the primary content structure
   • Nested columns blocks to create the staggered breakout effect
   • Negative margins to push content outside the grid for a layered look
   • Cover blocks with different images and text arrangements
4. Call to Action Section
   • A cover block with a gradient overlay to create a two tone background
   • A columns block to separate the image and text
   • A carefully positioned image that appears to break out of the section

Key Takeaways

Building complex layouts in the WordPress block editor is more powerful than many give it credit for. With the right approach, you can create layouts that rival custom coded designs. Key techniques like using stack and row blocks for alignment, negative margins for creative layouts, and patterns to speed up repetition make the block editor a highly capable tool for modern web design.

Watch the Full Video

If you want to see exactly how I built this layout, including my thought process and tips for working efficiently with blocks, check out the full video on my YouTube channel. If you find it useful, do not forget to like, share, and subscribe.