When using the Enfold theme, sometimes it is helpful to have an extra widget area that appears directly above the footer and spans the entire width of the page. This section could be used for a multitude of applications such as a call to action or displaying breadcrumbs via a shortcode (see example in footer of this site). To make this magic happen is a two step process. First you need to register your new widget area and then you need to add a function to the theme which injects the new widget area above the footer.

Step 1 – Register the widget area

To register the new footer area add the code below to your theme’s functions.php file.

function footer_extra_widget_area() {
	// Register Sidebar Widget Area	
	register_sidebar( array(
		'name'          => 'Footer - Extra',
		'id'            => 'footer-extra',
		'before_widget' => '<div id="footer-extra" class="container_wrap"><div class="container"><section id="%1$s" class="widget clearfix %2$s">',
		'after_widget' => '<span class="seperator extralight-border"></span></section></div></div>',
		'before_title' => '<h3 class="widgettitle">', 
		'after_title' => '</h3>'
	) );
add_action( 'widgets_init', 'footer_extra_widget_area' );

Step 2 – Inject the widget area above the footer

To inject the widget area above the footer add the code below to your theme’s functions.php file.

// Enfold - Add Extra Widget Area above Footer

add_action('ava_before_footer','avia_above_footer');

function avia_above_footer(){
dynamic_sidebar( 'footer-extra' );
}

Step 3 – Style to fit your needs

To restrict the content container to the width of the site add the following CSS to your styles.css file. Adjust the width to correspond to the site width set in your theme options.

#footer-extra {
	border-top: 1px solid #ccc;
	background: #fff;
	border-bottom: 1px solid #ccc;
}

Adding a simple call to action bar

Here are some additional CSS that you might find useful if you are using this block to create a call to action bar. Just add a default WordPress text widget to your Footer Extra widget area, add a header and a simple text link such as “contact us”. The CSS below will create a CTA bar that has a header aligned to the left and button aligned to the right. Both are centered vertically.

Note: You will need to add some mobile styles to ensure this looks correct on smaller screens.

#footer-extra h3, 
#footer-extra h4, 
#footer-extra h5, 
#footer-extra h6 {
	display: table-cell;
	vertical-align: middle;
	color: #222;
	font-size: 2em;
	padding-right: 40px;
	width: 100%;
}

#footer-extra p {
	display: table-cell;
	vertical-align: middle;
	white-space: nowrap;
}

#footer-extra a {
	display: block;
	text-align: center;
	color: #fff;
	background: #222;
	width: 20%;
	min-width: 200px;
	padding: 20px 50px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#footer-extra a:hover {
	background: #444;
	text-decoration: none;
}

Sources: Enfold Forums