Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Pro – Full page slider?
- This topic has 8 replies, 3 voices, and was last updated 7 years, 11 months ago by
alistairmckenzie.
-
AuthorPosts
-
February 14, 2015 at 7:56 am #140839
MBWS Marketing
MemberHello,
I'm in love with the new Altitude Pro theme and I'm trying to achieve the next thing:
Use the Genesis Responsive slider as background for Front Page area #1.
I've been trying and failing for three days now and wonder if anyone knows/already has made something how this can be achieved. I'll continue trying but since I'm not the most experienced coder it's really hard.
Thanks for helping me
April 2, 2015 at 4:42 am #146435alistairmckenzie
MemberI would like to do the same thing if anybody has the answer
June 10, 2015 at 12:33 pm #155759pairfum
MemberDear Swohlert and AlistairMcKenzie,
I am trying to achieve the same either with the genesis responsive slider or the SliderPro plugin.
Did you find a solution that you can post here ?
Many thanks for your help.
June 11, 2015 at 2:46 am #155817alistairmckenzie
MemberHI pairfum i did the following and it worked for me it might not be perfect but it works see below:
I altered the front-page.php line 72 and changed the front-page-1 to the below and then added my slider into the Front Page 1 widget area hope it works for you
//* Add markup for front page widgets
function altitude_front_page_widgets() {echo ‘<div id=”front-page-1″><div class=”wrap”>';
genesis_widget_area( ‘front-page-1′, array( ‘before’ => ‘<div class=”front-page-1 widget-area”>’, ) );
echo ‘</div></div>';June 11, 2015 at 3:19 am #155821pairfum
MemberDear Alistair,
Many thanks for your suggestion.
Unfortunately, it did not seem to work for me. The site crashed completely, i.e. blank page.
This is what I did:
In front-page.php, I deleted lines 71 - 74:
genesis_widget_area( 'front-page-1', array(
'before' => '<div id="front-page-1" class="front-page-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
'after' => '</div></div></div></div>',
) );Then I inserted your code in the same area:
echo ‘<div id=”front-page-1″><div class=”wrap”>';
genesis_widget_area( ‘front-page-1′, array( ‘before’ => ‘<div class=”front-page-1 widget-area”>’, ) );
echo ‘</div></div>';Subsequently, I added our slider to the Front Page 1 widget.
Can you see whether I did anything that was not in accordance with your instructions ?
Many thanks for your help.
Kind regards,
Pairfum
June 11, 2015 at 4:41 am #155825alistairmckenzie
MemberMaybe the numbers wrong change from:
Original File:
//* Add markup for front page widgets
function altitude_front_page_widgets() {genesis_widget_area( 'front-page-1', array(
'before' => '<div id="front-page-1" class="front-page-1"><div
class="image-section"><div class="flexible-widgets widget-area' .
altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
'after' => '</div></div></div></div>',
) );to New
//* Add markup for front page widgets
function altitude_front_page_widgets() {echo '<div id="front-page-1"><div class="wrap">';
genesis_widget_area( 'front-page-1', array( 'before' => '<div
class="front-page-1 widget-area">', ) );
echo '</div></div>';Try the above its only the front page 1 and make sure you dont leave the
trailing ) ); in before the next widget area AlistairJune 11, 2015 at 7:10 am #155840pairfum
MemberDear Alistair,
Many thanks for your suggestion which I have tried but unfortunately, it produced the same result for us: a blank white screen.
Following your comments though, I have simply added SliderPro to the front-page-1 widget and it works, but the slider is not tall enough (even though its setting is 1600 x 1050 px). Essentially, it seems to cut the background image as parts of the image are visible above & below the slider.
By the way, this is the testing site: http://www.staging3.pairfum.com
With kind regards,
Pairfum
June 11, 2015 at 7:25 am #155841MBWS Marketing
MemberHello Pairfum,
I have tried about 10 different options to get a full page slider, but every single time there's a conflict somewhere, either with javascript, mobile usability, certain browsers not displaying well etc etc . After many hours of work I have given up the search (used every way I know).
My client wanted a slider really badly but after showing him a research I did he bailed from a slider. I tested the amount of views on the second slide in a slider set at 5 seconds, and only 3% of the people saw the slide. So the effort isn't worth the result.
What worked best for me (least amount of bugs):
Add this to functions.php
// Register Home Slider widget area genesis_register_sidebar( array( 'id' => 'home-slider', 'name' => 'Home Slider', 'description' => 'This is the home slider section' ) ); add_action( 'genesis_before_header', 'sk_home_featured' ); //* Display Home Slider widget area's contents below Navigation on homepage. function sk_home_featured() { if ( is_home() || is_front_page() ) { genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', 'after' => '</div>', ) ); } }
Add this to your style.css:
#genesis-responsive-slider { border: none !important; padding: 0 !important; } .home .site-tagline { margin-top: 0; } .flexslider .slides > li { margin-bottom: 0; } .flex-direction-nav li { margin-bottom: 0; } .flex-control-nav li a, .flex-direction-nav li a { border-bottom: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .flex-direction-nav li .prev { left: 0 !important; } .flex-direction-nav li .next { right: 0 !important; } .flexslider .slides img { width: 100%; vertical-align: top; } .flexslider { max-width: 100%; }
I'm not 100% sure this is the complete code. Anyways, it adds a new front page widget where you can put the Genesis Responsive Slider. You can leave front-page-1 empty
If you need more help, let me know.
June 11, 2015 at 7:54 am #155844alistairmckenzie
MemberLooks full page to me
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.