Full-Window Genesis Responsive Slider

Description

Using Full-Window Genesis Responsive Slider

1. Go to Appearance > Widgets.
2. Activate the full-window Genesis Responsive Slider by adding the ‘Genesis – Responsive Slider’ widget to the ‘Home Full-Window Slider’ widget area.

Featured Image Size Requirements
For best results, featured images to be used in the full-window slider should be uploaded at a minimum size of 1600px wide x 1050px high.

Genesis Responsive Slider Settings
Go to Genesis > Slider Settings. Click on ‘Reset Settings’ to initialise or reset the minimum default requirements. You can also change manually –

Display Settings > Maximum Slider Width (in pixels) = 1600
Display Settings > Maximum Slider Height (in pixels) = 1050

In addition to the Genesis Responsive Slider settings and options, adjustments can be made to the image positioning, text alignment and excerpt offset as follows:

Image Positioning
Adjust the position of the image (top, bottom, left, right, center) by adding the following code to your custom Clip’s ‘custom-style.css’ file, and setting an alternative value for ‘background-position’.

.home-full-slider #genesis-responsive-slider .slide-image {
    background-position: center;
}

Text Alignment
Adjust the alignment of the excerpt text (left, center, right) by adding the following code to your custom Clip’s ‘custom-style.css’ file, and setting an alternative value for ‘text-align’.

.home-full-slider #genesis-responsive-slider .slide-excerpt {
    text-align: left;
}

Excerpt Offset
Adjust the offset of the excerpt (from top, from bottom) by adding the following code to your custom Clip’s ‘custom-style.css’ file, and setting alternative values for ‘bottom’ and ‘top’ (note: one value must always be ‘auto’).

.home-full-slider #genesis-responsive-slider .slide-excerpt {
    bottom: 0;
    top: auto;
}

Notes

Full-Window Slider Position
By default, the full-window slider is positioned ‘after’ the header in the page’s normal flow (using the ‘genesis_after_header’). Hooks and/or priorities may require adjustment if the navigation is uniquely positioned or additional widget areas have been added using the same hook.

Fixed Position (or Sticky) Header/Navigation
A fixed (or sticky) header/navigation will result in the full-window slider aligning with the top of the page. Setting an alpha of 60-80% on header/navigation backgrounds is often useful in such cases.

Conditions
By default, the Clip adds the slider to the front page only. However, conditions can be altered by adding the following filter code to your custom Clip’s custom-functions.php file –

add_filter( 'clip_full_window_genesis_slider_active', 'your_custom_filter' );
function your_custom_filter( $active ) {
    if( /* Add conditions here */ ) {
        return true;
    }
    return false; /* Or return $active for default */
}