So I implemented a hero image and a text into the Carousel Template but it just doesn't work right, mainly because of the different scroll behaviours.
That's why I thought of a little hacky solution. Instead of sending my user directly to the requested Carousel Template page I send him first to a "bridge page" which has only a hero image and little text like the first sections of this page ( http://clapat.ro/themes/munio-wordpress/munio_portfolio/iceland/ ). And after passing the text the user should automatically get transferred to his actual target page, the Large Carousel Template page. The transition should be done with Ajax so the user won't hardly notice what happened.
What I now need to make this work is some kind of JS for the automatic transition. Like a hidden link activated after the user scrolled to a certain point when passing the text of the bridge page. Do you know what I mean? Or do you maybe have another solution for me?
so basically the HTML code of the hero section, hardcoded
Otherwise a more thorough custom work would be an extra option for hero image for normal pages in /include/metabox-config.php and then modify /include/hero-properties.php to take this into account.
and then add in the above mentioned line and file:
<?php
// display hero section, if any $munio_hero_properties = munio_get_hero_properties( get_post_type() ); if( $munio_hero_properties->enabled ){
get_template_part('sections/hero_section'); }
?>
the slight scroll down after page loads is produced by this code:
Hi guys,
I am moving forward customising your theme, still loving it;), but I got into a dead end at the moment and maybe you can help me out.
In the Large Carousel Page ( http://clapat.ro/themes/munio-wordpress/large-carousel/ ) I really need a hero image and a short text like you can find on this page i.e. ( http://clapat.ro/themes/munio-wordpress/munio_portfolio/iceland/ ). I also like the little effect after the user gets from here ( http://clapat.ro/themes/munio-wordpress/ ) to this page, when the page gets scrolled a little bit and you can see the text in the bottom.
So I implemented a hero image and a text into the Carousel Template but it just doesn't work right, mainly because of the different scroll behaviours.
That's why I thought of a little hacky solution. Instead of sending my user directly to the requested Carousel Template page I send him first to a "bridge page" which has only a hero image and little text like the first sections of this page ( http://clapat.ro/themes/munio-wordpress/munio_portfolio/iceland/ ). And after passing the text the user should automatically get transferred to his actual target page, the Large Carousel Template page. The transition should be done with Ajax so the user won't hardly notice what happened.
What I now need to make this work is some kind of JS for the automatic transition. Like a hidden link activated after the user scrolled to a certain point when passing the text of the bridge page. Do you know what I mean? Or do you maybe have another solution for me?
I tried it with this...
https://i.ibb.co/VWHDD0Q/click-on-hover.png
...but the transition isn't done with Ajax and it won't work on mobile devices.
Regards
Hello Viktor.
Hmm ok what you can actually do is adding this in carousel-page.php on line 32 between div id 'main' and 'main-content'
https://prnt.sc/rzwy43
so basically the HTML code of the hero section, hardcoded
Otherwise a more thorough custom work would be an extra option for hero image for normal pages in /include/metabox-config.php and then modify /include/hero-properties.php to take this into account.
and then add in the above mentioned line and file:
<?php
// display hero section, if any
$munio_hero_properties = munio_get_hero_properties( get_post_type() );
if( $munio_hero_properties->enabled ){
get_template_part('sections/hero_section');
}
?>
the slight scroll down after page loads is produced by this code:
if( $('#project-nav').length > 0 ){
if ($("body").hasClass("smooth-scroll")) {
TweenMax.to(scrollbar, 1.5, {scrollTo:120, delay:0.3, ease:Power4.easeInOut});
} else {
TweenMax.to(window, 1.5, {scrollTo:120, delay:0.3, ease:Power4.easeInOut});
}
}
in /js/scripts.js so you need to duplicate it and make it work for the carousel page template
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy