Laut den neuesten Zahlen, haben in mehreren Ländern die mobilen Suchanfragen bereits die Suchanfragen auf dem Desktop überholt. Kein Webentwickler bzw. Webdesigner kann es sich mehr erlauben, responsive Design zu ignorieren.

Wir haben vergangenes Monat die neue Webseite von SCHUBERT STONE gelauncht. Das Projekt wurde von uns in WordPress umgesetzt und responsive Design war von Beginn an eines der wichtigsten Punkte. Mit Hilfe eines Bootstrap Grids und CSS Flex Boxes ist und die Umsetzung des responsive Designs auch sehr gut gelungen.

Was jedoch auffiel war, dass der Text im Revolution Slider von WordPress, speziell bei längeren Texten im “auto responsive mode” kaum zu lesen war, da er viel zu klein dargestellt wurde.

Revolution Slider mit CSS & JS optimieren

Ab der Revolution Slider Version 4.5 gibt es die Möglichkeit, einzelne Slider mit CSS & JavaScrit anzusprechen. Um nun die Schrift optimal für mobile Geräte auszugeben, muss dem Text mit Hilfe eines <span> Tags zunächst eine CSS Klasse zugewiesen werden.

Nachdem der <span> Tag um den Text gesetzt wurde, muss als nächstes der Java Script Code in den custom Java Script bereich des Sliders eingefügt werden. Dieser ist in den Einstellungen des Sliders zu finden.

Als nächstest benötigen wird die “revapi” diese finden wir in den “API Funktionen” des Sliders. Diese findet man ebenfalls in den Einstellungen des Sliders,

Und zu guter letzt fehlt noch der JavaScript Code für die zoomfunction. Der Code ist auskommentiert somit müssen nur mehr die richtgen Werte eingetragen werden 😉

(function($) {

 // Hier gehört die "revapi1" geändert. Wie beschrieben muss die API des Sliders welcher angesprochen werden soll eingetragen werden.
 var api = revapi1,

 // Hier gehört die SLider breite eingetragen. 
 // Falls der Wert 0 bleibt wird die Breite automatisch errechnet.
 gridWidth = 0,

 // hier gehört die Klasse einetragen die wir im Span Tag definiert haben. 
 zoomSelector = '.zoom-this',

 scaleFrom = 'left top',

 firstScaleCheck = 0.5, 
 firstScaleAmount = 0.35,

 secondScaleCheck = 0.25,
 secondScaleAmount = 0.75,

 // ab hier sind keine Änderungen mehr nötig
 slider = $('.rev_slider_wrapper');
 if(!slider.length) return;

 var temp = slider[0].style,
 transform = 'transform' in temp ? 'transform' : 
 'WebkitTransform' in temp ? 'WebkitTransform' : 
 'MozTransform' in temp ? 'MozTransform' : 
 'msTransform' in temp ? 'msTransform' : 
 'OTransform' in temp ? 'OTransform' : null;

 if(!gridWidth) {

 var script = slider.closest('.rev_slider_wrapper').find('script').text();
 if(script) gridWidth = parseInt(script.split('startwidth:')[1].split(',')[0], 10);

 }

 if(!gridWidth || !transform) return;

 var plus,
 origin = 'transformOrigin' in temp ? 'transformOrigin' : 
 'WebkitTransformOrigin' in temp ? 'WebkitTransformOrigin' : 
 'MozTransformOrigin' in temp ? 'MozTransformOrigin' : 
 'msTransformOrigin' in temp ? 'msTransformOrigin' : 
 'OTransformOrigin' in temp ? 'OTransformOrigin' : null,

 items = slider.find(zoomSelector).each(function() {this.style[origin] = scaleFrom;});
 api.on('revolution.slide.onloaded', function() {

 sizer();
 $(window).on('resize', sizer);

 });

 function sizer() {

 var scaled = Math.min(slider.width() / gridWidth, 1).toFixed(2);
 plus = scaled < 1 ? (1 - parseFloat(scaled)) + 1 : 1;

 if(scaled < firstScaleCheck) {
 plus = scaled > secondScaleCheck ? plus + firstScaleAmount : plus + secondScaleAmount;
 }

 items.each(sizeEach);

 }

 function sizeEach() {

 this.style.display = 'inline-block';
 this.style[transform] = 'scale(' + plus + ', ' + plus + ')';

 }

})(jQuery);

CSS Media Querries im Revolution Slider

Mit Hilfe dieses Code Schnipsel und dem <span> Tag können so nun alle Texte und auch Bilder auf mobilen Geräten optimal und gut leserlich angezeigt werden. Es besteht sogar noch die Möglichkeit, sich mit Hilfe Media Querries ein wenig zu spielen und noch spezielle Anpassungen zu machen, wie hier wieder am Beispiel der Webseite von SCHUBERT STONE. Hier wurde der Text noch mit einem transparenten Hintergrund hinterlegt, welcher auch speziell angepasst wurde.

Mit Hilfe dieser Methode kann man den WordPress Revolution Slider optimal auch auf mobilen Geräten nutzen. Falls es Fragen gibt oder irgendetwas unklar ist, wie immer einfach ein Kommentar hinterlassen.

Ich werde in einem meiner kommenden Artikel noch eine andere Methode erklären, wie man den WordPress Evolution Slider Device unabhängig komplett unterschiedlich gestalten kann.