Video
Transcription of the video
Hi, thanks for checking out this video about the Francis demo. I really like this demo and wanted to share it with you so you can use it. Unfortunately, the demo is a bit complicated, so I want to explain what’s going on.
One of the main challenges is that I really like how the website has the image extending all the way to the right, with a division in the middle. However, it doesn’t extend all the way to the left and is instead placed in the container in the center. Another detail is that the burger menu is white here, but on other pages, it’s black.
These are the kinds of things I want to show you. To achieve this, you’ll need to use a little bit of CSS magic and understand how things are structured, especially with the classic issue all websites face: responsiveness, making sure the page works perfectly on mobile screens as well. So, here’s how I did it. First of all, if you check the customizer and the additional CSS section, you’ll find several rules that need to be added. They’re all explained here, so I hope it’s understandable. You might need to learn a bit about CSS to fully grasp it.
Another important thing to note is that on the homepage and the single portfolio pages, the content is divided into two main groups. In Gutenberg, the first group is the image, and the second group follows. These groups have specific classes assigned to them.These classes are essential for the layout to work as intended. For example, the second group has a class that makes it appear above the first one. Another class hides certain elements on mobile, and so on.
Ideally, you can import the demo and use the Yoast Duplicate Post plugin to duplicate it. Then, you can rewrite the content as needed, and you won’t need to dive deep into the technical details. But if you want to understand how it all works, it’s important to know that there are specific rules and custom CSS classes that make the demo function the way it does.
Lastly, one more thing: the Francis demo uses a flexible spacer block. This is important because WordPress’s default spacer doesn’t allow you to adjust the spacing based on the screen size. I had to use this feature to make it work. After importing the demo, just go to the homepage of the portfolio and install the spacer block. This will allow the space to adjust depending on whether you’re viewing it on a desktop, tablet, or mobile device, using VH (viewport height) for the screen size.
I hope this helps, and good luck!