revolution slider responsive design wordpress

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.

Daniel Knoflicek ist seit 2012 Geschäftsführer von Slidebird Webstories, einer Agentur für online Marketing, Webdesign und Webentwicklung. Des Weiteren hat Daniel Knoflicek das Start Up Ernst M. gegründet, welches vegane, bio Marmelade in Österreich herstellet und vertreibt. Er ist als CTO für das Start Up tätig. Seit 2015 und der Gründung von DESK.WORKS ist Daniel Knoflicek als Brand Ambassador für Österreich zuständig.

Comments

  • Paul

    Danke für den Beitrag. Funktioniert das auch mit Bildern? Also dass man Sie dann einfach größer macht mit diesem Code?

    lg
    Paul

    13. Mai 2015
  • Marc

    Hallo Daniel,

    ich bin kein Entwickler und kann leider die letzten beiden Punkte nicht ganz nachvollziehen. Wäre dankbar wenn Du mir folgende Fragen beantworten könntest. Was für ein Java Skript Code muss eingefügt werden (was muss wo rein)? Und wie komme ich in die revapi Funktion. Würde mich sehr freuen falls Du es so leihen haft wie möglich beschreiben könntest. 🙂

    Grüße

    16. Juli 2015
  • Marc

    He Daniel,

    danke für Deine Antwort. Also das bedeutet ich Trage in den Tab CSS folgenden Code ein : Lorem Ipsum dolorem
    Die API Funktion habe ich gefunden, auch den Code : revapi5.revpause(); . Aber wie komme ich oder wo finde ich den ausformulierten Java Script Code in dem die Werte geändert werden sollen.

    PS. bin durch Zufall auf Deinen Blog/Site aufgrund meines Problems gestoßen etwas umgeschaut und wollt nur am Rande ein kurzes Lob für Inhalte und Aussehen aussprechen.

    Beste Grüße
    Marc

    16. Juli 2015
  • Veronika

    Hallo

    Daniel ist bis Montag nicht mehr erreichbar daher werde ich versuchen dir weiter zu helfen.

    Danke erstmal fürs Lob… 🙂

    Den Java Code musst du hier rauskopieren und dann in den JS Tab im Revolution slider rein kopieren. Der Code ist auskommentiert somit musst du nur das tun was hinter den “//” Zeichen steht… also anfänglich mal die revapi Zahl ändern usw…

    lg
    Veronika

    16. Juli 2015
  • Hi,
    ich bin auf der Suche nach einem Hack, mit dem der RevSlider (WordPress) auf mobilen Geräten nicht das Riesenbild benutzt, sondern ein kleineres, welches ja in der Mediathek beim Upload auch generiert wird. Komischerweise sehe ich aber immer nur Slider, die auf Mobiles die volle, nicht nötige Auflösung zeigen. Habt Ihr dazu einen Vorschlag?
    Vielen Dank und liebe Grüße
    Nielz

    21. Juni 2018
  • Hallo,
    bei der Erstellung eines Sliders, wird ja automatisch eine Nummer vergeben, nun meine Frage: Kann man diese Nummer manuell ändern? Wenn ja wie? Wenn z.B. alte Slides gelöscht werden, müsste man ja die Nummern wieder vergeben können.

    Gruß
    Moni

    9. August 2018
Leave a Comment