Add a Section just for Mobile

Creating a section in Divi just for mobile devices is a great way to go. Below are some images that shows some comparable information and a video below walking people through adding a section just for mobile within Divi.

A mobile site does not have to deliver less content, but the content delivered should be mobile friendly. Part of the friendliness is not having a page load that is large and not having the end user scroll 20 inches down a screen to look for information. Could be just a mobile home page that links to the sites responsive pages. Take a look at the page sizes below.

Page load speed is also very important for the mobile user. Google set a benchmark of 3 seconds load time or less. Anything more than that could result in the visitor leaving the site. Below I added load times for a dedicated mobile view and responsive view. Both are below 3 seconds which is great but page size, requests and load time is quite different.

When people visit a site from their mobile device they are usually looking for just a few things. Phone number, contact us, services, business hours and if it is a restaurant include the food menu to that. Does responsive offer that, kinda yes. Does it deliver it with an interactive experience for the mobile user? Not really. With Divi you can just add a section dedicated to a mobile layout and not do a mdot or any redirect at all. Why not give the end user a tap to call, tap for directions and other info right on the screen of the mobile device? Interaction is key and a truer mobile look, offers that. You can run speed tests and google mobile friendly tests and get verying results, but always make sure that mobile friendliness is near or around 100%.

Adding a section just for mobile devices.

Divi Mobile Solution without Mobile Redirect

Mobile, Mobile, Mobile… yes that seems to be a major topic of conversation lately and it should be. We build a ton of mobile solutions for clients and developers using divi, but some still think you need a mobile redirect to accomplish this and you do not. Not even a little bit.

Now a mobile site is better than responsive but you can search my blog for posts that explain why responsive is not a perfect solution for mobile sites or you can contact me and I am happy to talk about it with you.

Anyway, I did a quick video that shows just how simple it is to deliver a true mobile solution without using a mobile redirect and Divi really makes this possible. The video below shows just how quick and easy it is. Trust me your mobile visitors will appreciate the mobile experience.

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.

How to do Blurbs Side by Side and not Stacked on Mobile

With Divi, using a blurb module is one of the easiest ways to create a great looking mobile site. A true mobile site increases the interaction with those visiting your site.

One thing people need is the blurbs to be side by side and not stacked on a mobile screen. Watch the video below to see how this happens. The actual code is listed out below. Need help getting a true mobile experience with your site, Contact us for help.

Code for code module.

<style>.mobileColumn {display: inline-block; max-width :50%;} </style>

Row / Custom CSS for each Column Class ID use

mobileColumn

The code is case sensitive.

True Mobile Site for Event Brings Great Interaction

The Kentucky Woolfest was a great time and the true mobile site for the event proved to be a great success. The full site was used but we wanted a nice interactive mobile site for our client during the 3 day event. People could search craft vendors, food and check the times for the entertainment on the two stages.

Stats for the mobile site was 14,688 unique views and 29,366 page views overall.

While on the mobile site user could add to home-screen for a nice app icon and when launched users had a full screen for a mobile web app look and feel.

Both the Full and Mobile site were done with Divi.

www.kywoolfest.org