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.

As you can tell, I love working with the versatile new Divi Theme by Elegant Themes. One of my recent projects required me to create a new footer section that I can add widgets to and so I thought I would share what I learned.

I wanted my new footer section to be above the original footer section and I wanted it to have its own unique background so I had to place it outside of the existing footer section.  But I still wanted to keep it contained in the “clearfix” container which basically means, I did not want it aligned all the way to the left of the screen, but aligned with everything else.

new-footer-section-01

 

To do so, I had to open up my child theme footer.php and find the following code…

if ( ! is_page_template( 'page-template-blank.php' ) ) : ?>

 

and then I added the following code just below it…

 

<!-------------------------------->
<!-------- NEW FOOTER SECT-------->
<!-------------------------------->

	<footer id="new-footer">
		<div class="container clearfix">
			<div class="new_footer_section"><?php dynamic_sidebar( 'new_footer_section' ); ?></div>
		</div>
	</footer> <!-- #new-footer -->

<!-------------------------------->
<!-------- NEW FOOTER SECT-------->
<!-------------------------------->	

 

Note: If I wanted to inherit all the other CSS atributes associated with the regular Divi footer, then you place this code just under the “main-footer” footer id and then remove the footer id from the custom code above and just add the content within and with the “<div></div>” tags shown above.

 

The next step is to create a new sidebar in Appearance -> Widgets -> Create. You will want to name it new_footer_section. You can name it whatever you want but be sure that the name of the sidebar is the same as the name you used for the footer.php code.

 

Adding the Widgets

To accomplish what I had in mind, I simply needed to add some images that link to other pages. So for this project I used a simple image plug-in called Image Widget. It is a simple image widget that uses the native WordPress media manager to add image widgets to your site.

2014-08-04_18h27_32

Image Widget

 

 

Once I added my four widgets, I just had to use some custom CSS to get the background color and spacing that I wanted. To do so, I opened up my child theme style sheet (style.css) and added this.

	/*New Footer Section*/

		#new-footer {
                 background:#222222;
                 margin-top:-30px
                 }
		.new_footer_section  {
                 overflow:hidden;
                 padding: 40px 0;
                 }
		.new_footer_section .et_pb_widget {
                 float: left;
                 margin: 0px 0px 0px 0px;
                 padding: 10px 30px;
                 }

 

And then I wanted to add a little something extra. I wanted the corners slightly rounded and I wanted them to get a little bigger when you mouse over them so I added this little fun bit of code as well.

		#new-footer img {
                 border-radius: 9px;
                 -moz-transition: all 0.09s;
                 -webkit-transition: all 0.09s;
                 transition: all 0.09s;
                 -webkit-filter: drop-shadow(5px 5px 5px black);
                 }

                 #new-footer img:hover {
                  -webkit-transform: scale(1.15); 
                  -moz-transform: scale(1.1); 
                  -o-transform: scale(1.1); 
                  -ms-transform: scale(1.1); 
                  transform: scale(1.1);
                  }

 

And lastly, I just needed to tweak the mobile queries so that it adjusted well according to the different mobile devices so I added these special @media snippets on the bottom of my style sheet.

 

/*------------------------------------------------*/
/*-----------------------[RWD]--------------------*/
/*------------------------------------------------*/

/* (981-1100) Tablet Landscape*/
	@media only screen 
	and ( min-width: 981px ) 
	and ( max-width: 1100px ) {

		/*New Footer Section*/
			.new_footer_section {
                         float: left; 
                         margin: 0px 0px 0px 0px;  
                         padding: 10px 15px;
                          }
		 }

/* (768-980) Tablet Portrait*/
                @media only screen
                and ( min-width: 768px )
                and ( max-width : 980px) {

		/*New Footer Section*/
			.new_footer_section .et_pb_widget {
                         float: left;
                         margin: 0px 0px 0px 0px; 
                         padding: 10px 16px; width:20%!important
                          }
		 }

/* (480-767) Mini Tablets or Larger Galaxy Phones */
                @media only screen and ( max-width: 767px ) {

		/*New Footer Section*/
			.new_footer_section .et_pb_widget {
                         float: left;
                         margin: 0px 0px 0px 0px;
                         padding: 10px 16px; 
                         width:40%!important
                         }
		 }

/* (0-479) CELL PHONES (Apple) */
		@media only screen and ( max-width: 479px ) {

		/*New Footer Section*/
			.new_footer_section .et_pb_widget {
                         float: left;
                         margin: 0px 0px 0px 0px;
                         padding: 10px 21px; 
                         width:35%!important
                          }

		 }

 

The CSS in this tutorial is specific to these particular widgets and images. You will have to add more customization if you were adding other widgets such as “Recent Posts” or even “Text” widgets. But my hope is that this gives you an idea of how easy it is to add your own custom footer section in Divi.

Let me know how it works for you. You can also view the example site here


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-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 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