Output page title fields after the header

functions.php

// add our custom Page Title after the Site Header
add_action( 'fl_after_header', 'bb_after_header' );
function bb_after_header() {
	// most home pages will be custom pages so we don't want to ouput the custom Page Title on the home page
	if(!is_front_page()){
		// get the value of the ACF background file we uploaded to the field. 
		// If you named your field a different name to $bb_page_title_bg, replace this with your field name
		$bb_page_title_bg = get_field('bb_page_title_background');
	    		
	    		// the below outputs the field. As the BB theme runs on Boostrap, we're using some
	    		// bootstrap grid classes to keep the content of this Page Title in the same grid as the other content on the page
	    		echo '<header class="bb-page-title text-center"><div class="container"><div clas"row"><div class="col-md-12">';
	    			// output the page title inside our new row
	    			// just to show you an example - here we can change the title for all shop pages
	    			if( is_shop() || is_product_category() || is_product_tag() || is_product() ){
	    				echo '<h1 class="bb-page-title-heading" itemprop="headline">Our Awesome Products</h1>';
	    			}
	    			else // if it is not a shop page we ouput the title of the post or page
	    			{ 
	    				echo '<h1 class="bb-page-title-heading" itemprop="headline">'.get_the_title().'</h1>';
	    			}
	    			echo '<h1 class="bb-page-title-heading" itemprop="headline">'.get_the_title().'</h1>';
	    		echo '</div></div></div></header>';
	    		// if there is an image uploaded into our new custom ACF background field
	    		if($bb_page_title_bg){
	    			// set the URL of the variable $bb_page_title_bg_url to the URL value of of image field
	    			$bb_page_title_bg_url = $bb_page_title_bg[url];
	    		} else {
	    			// If there is no background image set on the current page or post
	    			// we set the default image to the URL below. Change this to whatever you want your
	    			// default image to be for the background
	    			$bb_page_title_bg_url = 'http://beyondbeaver.com/wp-content/uploads/2016/07/mountains-snow-darker-top-cropped.jpg';
	    		}
	    		// now we output the CSS required to add the background to the image
	    		// 
	    		echo "<style>
	    				/* For smaller devices and up, the padding is reduced to only 30px top and bottom on this custom Page Title */
	    				.bb-page-title{padding:30px 0;}
	    				.bb-page-title h1{margin:0;color:#fff;font-size:2em;}
	    				/* Change thge 993px to whatever you'd like. We use 992px as our medium breakpoint so here
	    				we are targeting all devices LARGER than the medium device breakpoint set in beaver builder global settings */
		    			@media (min-width: 993px) {
		    				.bb-page-title{background:url('$bb_page_title_bg_url') no-repeat center top;margin-top: -122px;padding:200px 0 80px;background-size:cover;}
		    				.bb-page-title h1{font-size: 2.7em;}
		    			}
	    			</style>";
    	}
}