Genesis - Site Callout w/ button

readme.md

Site Callout w/button

This creates a widget area site-wide. The widget title is the left floating element and the widget text is the right floating element. I use a general .cta-button inside the widget text for the button.

functions.php

<?php
//* Do NOT include the opening php tag

//* Hook the SITE CALLOUT WIDGET after the header
add_action( 'genesis_after_header', 'odg_callout' );
function odg_callout() {

	printf( '<div %s>', genesis_attr( 'callout' ) );
	genesis_structural_wrap( 'callout' );

		printf( '<div %s>', genesis_attr( 'wrap' ) );
		genesis_widget_area( 'site-callout' );
		echo '</div>';

	genesis_structural_wrap( 'callout', 'close' );
	echo '</div>';

}

//* Register the SITE CALLOUT WIDGET
genesis_register_sidebar( array(
	'id'          => 'site-callout',
	'name'        => __( 'Site Callout', 'themename' ),
	'description' => __( 'This is the site callout at the top of the site.', 'themename' ),
) );

style.css

.callout {
	background-color: #f5f5f5;
	border-bottom: 1px solid #eee;
	padding: 30px 0;
}

.callout .widget {
	margin-bottom: 0;
}

.callout .widget-title {
	color: #0067ac;
	font-style: italic;
	font-weight: 500;
	float: left;
	width: 75%;
	font-size: 30px;
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 0;
}

.callout p {
	float: right;
	width: 24%;
	text-align: right;
	margin-bottom: 0;
}

@media only screen and (max-width: 1023px) {
  
  .callout .widget-title,
  .callout p {
    float: none;
    width: 100%;
  }
  
  .callout .widget-title {
    margin-bottom: 20px;
  }
  
}