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.

Embed a Facebook Feed Into your Full or Mobile Site

A great resource for a recent news page on a mobile site or full site is using a Facebook feed if available. A lot of plugins are available but Facebook offers a great developer resource that is simple and easy to use. Watch the video below. I added links below the video for the Facebook developer page and the plugin I like to use.

Facebook Developer Page Plugin Code

https://developers.facebook.com/docs/plugins/page-plugin

Addfunc Head and Footer Plugin

AddFunc Head & Footer Code

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.

Place Pictures in Image Module without Stretching or Squeezing the Image

Using the image module can be a great solution for a portfolio or grid album look, but when some images are taken portrait and landscape you can have some images look great and some look squished or stretched. This can really hold true when viewing from a mobile device.

The solution is really quite easy by using a CSS property object-fit: cover. The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

So, if you have an image 1200 x 600 or an image 600 x 1200 they will just display in the image module correctly.

In my example below, you need to give your section holding the image modules a CSS Class of JSgallery

Then add a code module within the section and use this CSS style. <style> .JSgallery img {height: 220px; object-fit: cover;}</style>

This keeps everything looking great as a grid and when you click on the image for lightbox view it will open the true size of the image, whether its landscape or portrait.

A good live example of this can be seen HERE

Admin Dashboard view

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.