When linking to a responsive Blog page you end up with a great mobile solution. However when opening a single post to read; you get a header area that may not look great on a mobile device or a menu that you don’t want accessible from a mobile user. One solution is to remove the the header and footer area on single blog post page. You can do this with Global CSS. Now you have full control of the single blog post look on a mobile device. (CSS is in a toggle below)
Now here lies a problem. When you look at your site from a desktop, laptop or tablet you will have no header area at all on single blog posts. There is a simple solution however.
When doing a blog post with builder you can add a full width navigation and disable it on mobile devices only. If you have two menu’s available. (a main menu and a mobile menu) You can add two full width navigation sections. Select which devices each one can be viewed/hidden from and you are set.
An easy thing to do on a blog post once you have the navigation menu’s setup the way you want, simply start adding modules.
Full width navigation section 1 or 2 of them.
Image Module for Site Logo
Post Title Module
Text Module for Post Content
Post Navigation Module
Text Module for footer
Save this layout to your library and you are all setup.
When doing a new post.
Use Divi Builder
Select hide post title on the right.
Load from library your saved blog post layout.
Add your post content.
Divi takes care of the rest and you now have a great looking full website blog post and one that works great on mobile.
In our shop I will add our custom Blog Post template.
Global CSS Hide Header Full site