Sticky Vertical Menu Gutenberg

In today’s video, I try to recreate the Squarespace website in just 30 minutes, using the 2023 WordPress theme and Gutenberg Site Editing.


The tutorial demonstrates creating pages and posts for the website and designing a new home page layout using columns, navigation, and query loop blocks. The video also covers adding social icons, adjusting block spacing, and making the navigation sticky using a plugin.

Creating Pages and Posts

To start, create pages and posts for the website. For each photo, create a post and add a featured image to it.

Designing the Home Page

Next, design the new home page layout using columns, navigation, and query loop blocks. Start by removing the header and footer to create a blank canvas. Add a columns block to create two columns, a left-hand column for the navigation block and site title, and a right-hand column for the query loop block. Use a three-column layout within the query loop block.

Adding Navigation and Social Icons

Add the navigation block and turn it into a menu block. Add the social icons block and style the size, background color, and icon color.

Making the Navigation Sticky

Make the navigation sticky using the sticky block plugin. Add a sticky block and place all the content for the left-hand column within it. Adjust the size of the gap and center the content.

Creating the Single Post Template

To create a single post template, copy the existing home page template and modify it to display the post content. Use the image, date, and title layout and remove unwanted content. Center the pagination block.


In conclusion, creating a sticky vertical menu site using WordPress Gutenberg is easy and straightforward. By following the steps outlined in this tutorial, you can quickly create a photography website with a sticky vertical menu.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top