• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add Full Screen Section to Magazine Pro with slider and separate images

This topic is: not resolved

Tagged: full screen, Magazine Pro

  • This topic has 6 replies, 2 voices, and was last updated 9 years, 1 month ago by [email protected].
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 4, 2014 at 4:50 pm #117063
    [email protected]
    Member

    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/
    August 4, 2014 at 7:31 pm #117093
    Brad Dalton
    Participant

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


    Tutorials for StudioPress Themes & WooCommerce.

    August 5, 2014 at 11:07 am #117181
    [email protected]
    Member

    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

    August 5, 2014 at 7:44 pm #117225
    Brad Dalton
    Participant

    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.

    August 5, 2014 at 8:39 pm #117239
    [email protected]
    Member

    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.

    August 5, 2014 at 10:05 pm #117259
    Brad Dalton
    Participant

    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.

    August 6, 2014 at 6:13 pm #117471
    [email protected]
    Member

    Sorry, I didn't know.

    Here it is:

    For the php.

    and for the CSS:

    Thanks.

    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble