Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

I have been injecting Divi library sections into pages for a couple of years now and one of those sections is a fixed footer bar for mobile devices. This is great if you want to have a clear call to action for mobile viewers. It also gives your website the look and feel of an actual app.

In this tutorial, I will show you how to use a Divi Library Layout, a little custom CSS, and a little PHP, to inject a fixed Mobile Footer Bar that gives your website an app-like appearance.

View The Live Demo

To do this you will need a basic child theme with a functions.php file.

UPDATE: If you are using a child theme that with an older version of Divi’s header.php and footer.php, before they added the hooks, then you will need to update those files.

Let’s Get Started Setting up the standard Divi Section.

 

Adding the row and custom class

1. Go to your Divi Library and add a new layout.

 

2. Give it a name and choose Layout as the the Layout Type.

 

3. Insert your columns. You can choose any amount but I find that three is ideal.

 

4. Now using the blurb module, add your text, url and icons for all three columns.

 

5. To assign a custom class to the entire section, open up the section settings and in the “Advanced Tab > CSS Class” add this class: gq_m_mobile_footer_bar

 

 

Adding The PHP

6. Go to Appearance>Editor and open your functions.php file and you are going to insert this snippet.

Unfortunately my Syntax plugin does not know how to read the shortcode without messing up this page so you will have to write the code yourself or grab the snippet from this txt file.

 

Inserting the Divi Library Section into the PHP snippet

Now we are going to grab the layout shortcode and insert it into the PHP snippet above.

7. Go to your Divi Library and open up the layout you just created. Once you have the layout open, check out the URL and you will see a sequence of characters and numbers. You are going to want to grab the numbers as we will need that for the next steps. For example in my case, the number sequence that I want to grab is 27253. This is the URL in my example: https://montereydev.com/demos/divi/mobile-footer-bar/wp-admin/post.php?post=27253&action=edit

 

8. Go back to Appearance> Editor and open the functions.php where you added the snippet above and in this shortcode, replace the number with your own.

 

 

Adding The Custom CSS

Since you are working with a child theme you can go to Appearance>Editor and open your stylesheet. Otherwise go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS.

/*------------------------------------------------*/
/*------------[GQ MOBILE FOOTER BAR]--------------*/
/*------------------------------------------------*/		
		@media only screen and (min-width : 981px) {
			.gq_m_mobile_footer_bar {
				display:none;}}
		@media only screen and (max-width : 980px) {
			.gq_m_mobile_footer_bar {
				padding: 0px!important;
				background: #171717;
				bottom: 0;
				width: 100%;
				left: 0;
				position: fixed;
				vertical-align: middle;
				z-index: 99;} 	
			.gq_m_mobile_footer_bar .et_pb_row {
				padding: 13px 0px 10px;}
			.gq_m_mobile_footer_bar .et_pb_column {
				width: 25%!important;
				margin-bottom: 0px!important;}	
			.gq_m_mobile_footer_bar .et_pb_row_4col>.et_pb_column.et_pb_column_1_4 {
				width: 25%!important;
				margin-right: 0%;}
			.gq_m_mobile_footer_bar .et_pb_column.et_pb_column_1_3 {
				width: 33%!important;
				margin-right: 0%;}
			.gq_m_mobile_footer_bar .et-pb-icon {
				color: #c4c3c3!important;
				font-size: 24px;
				font-weight: 200;}
			.gq_m_mobile_footer_bar .et_pb_main_blurb_image {
				margin-bottom: 6px;}
			.gq_m_mobile_footer_bar .et_pb_module_header {
				color: #c4c3c3;
				font-weight: 300;
				font-size: 14px;
				text-align: center;
				padding-bottom: 0px;}}

 

Making Adjustments To The CSS

As with all my tutorials, my goal is not to teach you how to use Divi Settings as much as it is to teach you how to customize your website learning a little CSS along the way. So with that being said, here are a few CSS tips to help you learn a little more about CSS.

This snippet hides the footer on screen sizes larger than 981px.

 

This snippet assigns the background color, padding and position.

 

By default, the columns become fullwidth on mobile devices. This little snippet assures that the three column and four column rows do not default to fullwidth.

 

This next piece modifies the icon color, size and weight.

 

And finally, this last piece assigns the color, weight and size style to the header text.

 

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest