How to Create a Great Looking Mobile Site with Divi

I am not going to get into the why you need a true mobile site in this post, but you can get some info about that HERE.

Here is the simplest way to get a great mobile site with your Divi WordPress Theme. This is pretty basic which is why we have a store with mobile layouts and why we build so many custom mobile sites for our clients. This post however will get your mind headed in the right direction.

STEP ONE
Create a new Page and call it MOBILE
Under page attributes / template select blank page.
Now Publish your page.

STEP TWO
(optional)
Go to Appearance / Menu and create a new Menu
Add any links or custom links you want added to this menu.
Call this menu Main Mobile and save that menu.

STEP THREE
Go back to your new mobile page and start adding sections.
First section and row is full width menu.
Now add a Standard Section full width column with an image module. (Logo)
Now add a Standard Section full width column text module. (Tap to Call Button)
Now add a Standard Section full width column text module. (For Custom Buttons)
Now add a Standard Section full width column text module. (For Social Icons)
Now add a Standard Section full width column text module.(For Footer Area)

You can find the mobile redirect plugin we like and how to use it HERE..

If you want you can make other key page names just for mobile also. www.yourdomain.com/m-about, www.yourdomain.com/m-services, wwww.yourdomain.com/m-location ect.. ect… Then link to these pages via your dedicated mobile site.

No Need for Mobile Redirect with Divi Theme

A mobile redirect plugin is simpler to accomplish a true mobile solution but with the power of Divi you can get a mobile solution without using a plugin or a separate page at all.

A few steps are required but simple to do.

Step 1
Make your home page a blank template by setting the page attribute to blank page. The header logo and navigation will be missing, but you can add the a full width section for navigation and disable it on Phone.

Step 2.
Add a standard section under the the full width navigation and use the image module for your logo. This section can be placed below or above the navigation section. Hide this standard section on Phone.

Step 3.
Create a whole new section (Or get a layout from our store) that you want visible on any mobile device. Hide this section on Desktop and Tablets.

Step 4.
All the other sections disable them for Phone.

At the end of the day a mobile redirect plugin is simpler and offers less manipulation of your true homepage. Yes Google Mobile Friendly test will see and credit you for having a mobile site when using a mobile redirect. You can check out our mobile redirect post here.

Add Facebook Like Button to your Mobile Site

A great way to interact with social media is via a mobile site. In a previous post I showed you how to embed your twitter timeline (HERE) and for this post lets look at adding a Facebook like box.  Now since this is for mobile the width is going to be 300.

Go to https://developers.facebook.com/docs/plugins/like-button and follow the 3 easy steps.

For best mobile results, use width 300, layout standard, action type Like, Button size small and un-check show friends faces.

When you get the code, it will be in two parts. One for the header of the page you are placing it and the other in a text module for placement.

One plugin I use to get code into the header section is Addfunc Header and Footer Code. This plugin works great because it gives you the option to easily add code on any individual page/post.

 

Turn your Divi Mobile Site into a Web App

Using just a couple lines of meta you can create a true app look and feel with your mobile site. One plugin I use to get code into the header section is Addfunc Header and Footer Code. This plugin works great because it gives you the option to easily add code on any individual page/post. Be sure to watch the video in this post. Offers a quick look on how the meta line code works.

Use these two lines of code below.

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name=”mobile-web-app-capable” content=”yes”>

 

 

Divi Post Blank Tempate

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

.single-post #main-header,
.single-post #main-footer,
.single-post #top-header{
display:none;
}