In today’s video, I try to recreate the https://www.jamespopsys.com/ Squarespace website in just 30 minutes, using the 2023 WordPress theme and Gutenberg Site Editing.
Introduction
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.
Conclusion
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 Reply