Take the Time to Deliver a True Mobile Experience with Divi

So many ways to accomplish things with the power of Divi and one of those is a true mobile solution. Not going to knock people for using the responsive look, but why not deliver an interactive look and feel for those visiting your site via a mobile device. This post I am going to focus on Posts.

You can even use a different navigation menu for your full site and your mobile site. How? The answer is a little long but simple to do. Lets start with the elements of a website. Really there are two. Pages and Posts. For pages including my home page I use the blank page template. Now I have full control of every aspect of the site and what elements show on full sites, tablets and mobile. Sections are key and the cool thing with Divi is being able to show or hide sections by the devices accessing that particular page. For posts I use a little piece of global CSS that hides the default header on posts and basically gives me a blank page template on posts. Change the divi post settings to full width and hide the post title, since I use the post title module.

Global CSS for hiding header and other features on post pages.

.single-post #main-header,
.single-post #main-footer,
.single-post #sidebar,
.single-post #top-header{
display:none;
}
.single-post #page-container {
padding-top:0 !important;
}.

Once you have the blank page look on posts, simply pull in two full width navigation menu’s. Pick which menu you want to show on mobile or full site view. The below image shows my full site menu on top, then my mobile menu with an extra coding box for a drop down menu on mobile. Then the rest of the sections I simply pull in the modules to deliver the content.  I  save this layout to my library as Main post template and I pull this layout in for each post I do. Now I deliver a great experience for desktop visitors and mobile visitors. Divi offers Builder so why not Build.