Have you ever visited Apple’s website and checked out the pages showcasing their flagship products? Whether it’s for the latest iPhone or iPad, I’m sure those pages made you want to keep scrolling until the end, stopping every now and then to read and explore all the details about their features.
It always happens to me, and it’s impressive how a full-screen experience can really grab your attention, right?
If you’re using WordPress, Gutenberg (or another page builder), and a theme that lets you preview your blog posts in full-screen, you can offer your readers a similar experience. For a simple blog post with just an image and text, creating a full-screen layout is easy. I’ll show you how in this post.
However, if you want to create something like Apple’s design, you’ll need to learn some technical skills, like CSS, HTML5, and sometimes JS. That said, most bloggers don’t need designs like that. All we really need is to make our blog posts easy to read and understand by removing distractions on the screen. A full-screen layout does just that.
First Things First!
Before switching our blog posts to a full screen layout, there are three things you should keep in mind:
(1) A full screen layout means readers will only see the content—no sidebar—and they’ll view one ‘section’ at a time. If designed that way, the content can also stretch all the way from the left edge of the screen to the right. I’ll show you how to do that later.
A “section” can be a block of text, a quote, a list, an image, a video, or anything else you want readers to pay attention to.
For example, there’s my post, Tips for Creating Blog Post Intros That Hook Your Readers. There, each tip appears on its own screen, so only one tip is visible at a time.
(2) Another thing to keep in mind with this design is that you need to test it on different screen sizes before publishing.
If your audience uses smaller screens, you might need to adjust the size or number of elements shown at a time. It’s a good idea to check the design on both a tablet and a PC.
(3) You should also think about the length of your blog post before using a full screen layout for each section.
This layout can take up a lot of space, which might be annoying for readers—too much scrolling (or button pressing) just to get through the whole post.
Creating Full Screen Layout
Now, are you sure about using a full screen layout for your post? Yes? Great, it’s time to design it! It’s really easy. Just follow these seven steps:
Step 1: Group the content and elements you want to show on a single screen inside a Group block.
Step 2: Place that group inside a Stack block.
Step 3: Place that stack inside another Group block.
After step 3, you’ll have a nested group-stack-group structure. This setup is important because it lets us display content together on the screen and align it in different ways:
- The inner group keeps the content elements stacked closely together vertically.
- The stack uses the full vertical height of the screen, allowing you to place content at the top, middle, or bottom.
- The outer group controls the horizontal space available and lets you align the content to the left, center, or right of the screen.
After setting up the design blocks in a nested structure, the next step is to adjust the settings of these blocks to align and position the content the way we want. For this example, we’ll center the content, just like in my example blog post. We’ll start with the outer group. Let’s continue:
Step 4: Select the outer group block. On its toolbar, click the alignment button and choose “full width.” Then, set the justification to “center.”
Step 5: Select the stack inside the outer group block. Go to the block settings and click the styles tab. Here, you’ll see the minimum height setting. Set it to 100vh so the stack’s height automatically adjusts to the reader’s screen height.
Step 6: Select the stack again and, on its toolbar, change the alignment to “middle.”
Step 7: If you want to adjust the content width, select the outer group and go to its settings. In the layout section, you can either check or uncheck the “Inner blocks use content width” option, or adjust the content width and wide width to your preferred size.
Note: If you’re using multiple consecutive fullscreen nested group-stack-group blocks and changing their background colors, make sure to set their margin to 0 px to prevent gaps between them. You might also want to set the outline color to match the background color so lines don’t show up between the blocks.
That’s it! For more design ideas, check out my guide on creating an engaging blog post.
Love this? Pin it and share it with your friends!
