Trick # 415 | Dieser Beitrag beinhaltet 1106 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Der heutige Tipp ist gleichsam ein kleines Weihnachtsgeschenk an die Besucherinnen und Besucher der Dr. Code-Praxis: Wir bauen eine Divi-Seite, auf welcher Sie mit dem Mausrad punktgenau von Sektion zu Sektion scrollen können.
Wir haben diesen Trick in diesem Beitrag gleich aktiviert. Scrollen Sie mit dem Mausrad und Sie werden feststellen, dass der Bildschirm nicht einfach durchscrollt, sondern bei jedem Abschnitt «einrastet».
Damit dies besser ersichtlich wird, haben wir die einzelnen Sektionen abwechselnd farblich hinterlegt.
Alles, was Sie für diesen Trick benötigen ist ein kleines Script und eine Einstellung in den Divi-Seiteneinstellungen: Die Punktnavigation (auf englisch Dot Navigation) muss aktiviert sein. Dies können Sie in den Einstellungen rechts Ihrer Seite oder Ihres Beitrags einstellen.
Nun folgt ein Script, welches Sie in ein Code-Modul auf der betreffenden Seite oder im Beitrag – bzw. in den <head>-Bereich Ihrer Website (unter Divi/Theme-Optionen/Integration) kopieren:
<script>
( function( $ ) {
$( document ).on( 'mousewheel DOMMouseScroll', function( event ) {
if ( ( $( '.et_pb_side_nav' ).length === 0 ) || $( 'html, body' ).is( ':animated' ) ) return;
event.preventDefault();
var direction = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var $position = $( '.et_pb_side_nav' ).find( '.active' );
var $target;
if( direction < 0 ) {
$target = $( $position ).parent().next();
} else {
$target = $( $position ).parent().prev();
}
if ( $( $target.length ) !== 0 ) {
$( $target ).children( 'a' ).trigger( "click" );
}
} );
} )( jQuery );
</script>Beim Aufbau der Seite oder des Beitrags achten Sie nun darauf, dass Sie möglichst häufig Sektionen verwenden. Statt nur neuer Zeilen hinzuzufügen, verwenden Sie am besten gleich eine Sektion, die Sie dann mit der gewünschten Zeile bestücken. So zeigt sich der Effekt am besten.
Der Effekt kann sehr gut mit Parallax-Hintergrund verwendet werden – so wie in dieser Sektion.
Zusatztipp: Sektionen auf ganzer Seitenhöhe und -breite darstellen
Besonders bei den Parallaxen wünscht man sich eventuell eine bildschirmfüllende Darstellung. Geht natürlich auch: Vergeben Sie der betreffenden Sektion die CSS-Klasse «fullpage-valign», die Sie im Tab «Erweitert» der betreffenden Sektion unter «CSS-ID und Klassen» ins Textfeld «CSS-Klasse» einfügen können.
Dann noch folgender CSS-Code in das Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) …
.fullpage-valign {
height:100vh;
display: flex;
flex-direction: column;
justify-content: center;
}… und schon wird die gewünschte Sektion formatfüllend dargestellt.
Im Rahmen dieses Beitrags können wir das nur annähernd zeigen – besser ginge es mit einer Full-Width-Darstellung Sie sehen aber den ungefähren Effekt hier:
Werbung
Werbung
