Divi Mobile Features Page Layout

Divi Mobile Features Page Layout

We have several requests from clients that wanted a features page on mobile devices to be two across instead of stacking.  So we created a template that offers side by side features and includes several color options. The JSON file includes a locked code module that allows them to be side by side. We will have this in our store free over the weekend. Enjoy.

Features
Top Header with Home navigation
Logo Row
Features Ribbon Image Row
10 features in 5 rows
5 color check mark PNG images included
Locked Code Module
Footer Row

Available in our Store Here.

Be sure to like our Facebook Page

Best Way to have Different Menus for Full and Mobile Sites

Best Way to have Different Menus for Full and Mobile Sites

Creating a page called Mobile and using the blank template is all you need to do. You can grab one of our Divi Mobile Designs from our store or build your own.

Creating a page called Mobile and using the blank template allows you tons of flexibility with the look and feel. Create a new menu and call it mobile menu and add what pages you want.

Keep in mind you really don’t need a navigation menu at all when creating a mobile page, since you create your button nav links right on the page itself.

Once you have a blank page template, start adding your sections,rows and modules. Every column should be full width and images should not exceed 300px wide. Because too many devices are still out there with a CSS pixel width of 320.

I usually create my rows like this.
Full Width Navigation. (If needed)
Logo
Impact Statement or Slogan
Tap to Call
Slider if you want one.
Text Module for adding your button tabs.
Social Icons
Footer

Follow us on Facebook and ask questions. We are here to help.

How to Create a Great Looking Mobile Site with Divi

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

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

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.