Add Full Screen Section to Magazine Pro with slider and separate images

[[email protected]]

Hi,

I am using the Magazine Pro theme for a clients website.

Here is the URL of the website: http://www.tori13.com/

The client wants me place two images, one to the left and one the right of the full width responsive (revolution) slider that is on the home page. These images would be placed in the white space between the end of the slider and the edge of the screen.

This would place the images outside of the theme container.

Is there a way to use Genesis Simple Hooks to add a "full screen width section" where the slider is, then add the slider and the two images using divs (or other method)?

I also have to keep it responsive.

I am at a loss of how to accomplish this.

Any help will be greatly appreciated.

Thanks.

Mike Coviello

http://www.tori13.com/

[Brad Dalton]

Try this http://wpsites.net/web-design/add-banner-ads-outside-site-container/

---

Tutorials for StudioPress Themes & WooCommerce.

[[email protected]]

Brad,

Thank you for the link.

It is much appreciated.

I tried to implement both Method 1 and Method 2 to see which works better.

Both Methods are currently implemented on the home page.
http://www.tori13.com/

Method 1: (creates 2 new widget areas)
The visible images of the girl to the left and right of the slider are a result of Method 1, however it is not responsive and does not scroll with the page.

Is there a way to make it responsive and to scroll with the page. I tried changing the css to position: relative, but that did not work.

Method 2: (pulls 2 banner images from any Genesis child themes images folder.)
It seems that this method is more responsive, but I had trouble making my images visible. Do you have to upload them to the image folder via ftp?
Also, again I would like them to scroll with the page. Changing the css to position: relative seems to work fine for the left image but the right one disappears completely off the page. Also, how can I restrict the images to the home page only?

Any further suggestions would be greatly appreciated.

Thank you.

Best regards,

Mike Coviello

[Brad Dalton]

The screenshots clearly show you exactly what the code does.

If you want a different result, you will need to modify the code.

Please post the code you have written to make this solution responsive and to scroll with the page.

Some work is required on your behalf to add the Media Queries and any other modifications your client wants.

Here's a way to learn the basics of CSS which you may find helpful.

---

Tutorials for StudioPress Themes & WooCommerce.

[[email protected]]

I chose to go with Method #1.

I added the code to the functions.php file per your link as follows:

//* Register widget areas outside site container
genesis_register_sidebar( array(
'id' => 'left-banner-widget',
'name' => __( 'Left Banner Widget', 'wpsites' ),
'description' => __( 'Left widget area outside site container', 'wpsites' ),
) );
genesis_register_sidebar( array(
'id' => 'right-banner-widget',
'name' => __( 'Right Banner Widget', 'wpsites' ),
'description' => __( 'Right widget area outside site container.', 'wpsites' ),
) );
/**
* @author Brad Dalton
* @example http://wpsites.net/web-design/add-banner-ads-outside-site-container/
* @copyright 2014 WP Sites
*/
add_action( 'genesis_after_header', 'banner_widgets_outside_site_container' );
function banner_widgets_outside_site_container() {

if ( is_active_sidebar( 'left-banner-widget' ) || is_active_sidebar( 'right-banner-widget' ) ) {

genesis_widget_area( 'left-banner-widget', array(
'before' => '<div class="left-banner-widget">',
'after' => '</div>'
) );

genesis_widget_area( 'right-banner-widget', array(
'before' => '<div class="right-banner-widget">',
'after' => '</div>'
) );

}

}

-------------------------------------
Here is my CSS:

/*
Banner Ad Widgets Outside Site Container
------------------------------------------- */
.right-banner-widget {
max-width: 20%;
position: absolute;
right: 10px;
top: 300px;
}

.left-banner-widget {
max-width: 20%;
position: absolute;
left: 10px;
top: 150px;
}

The images are now scroll with the page, but when I grab the page tip and reduce it's size, the images get hidden behind the slider which looks terrible on different screen sizes.

I also only want the images to appear on the home page only.

Thank you.

[Brad Dalton]

Please use Github Gists to embed or link to your code.

You will need to write the CSS for the Media Queries yourself.

---

Tutorials for StudioPress Themes & WooCommerce.

[[email protected]]

Sorry, I didn't know.

Here it is:

For the php.

and for the CSS:

Thanks.

Mike

[Author]

Posts