Add Wdget after content but above Footer

I’m trying to add a wdget area at the bottom of each page but before the Footer. I have tried things like

add_action('ava_before_footer','avia_above_footer');
function avia_above_footer(){
dynamic_sidebar( 'abovefooter' );
}

but this puts the widget inside the footer and makes the footer style wrong.

I want to get the widget on every page including shop pages to look like this

Sample page

Does anyone know how I can do this?

Many Thanks
Regards
Colin