WordPress Revolution Slider und Responsive Webdesign

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.

 

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.

9 Gedanken zu “WordPress Revolution Slider und Responsive Webdesign”

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

    lg
    Paul

  2. Hi Paul

    Ja es funktioniert auch mit Bildern. Allerdings darfst du de Bilder nicht als Bild Ebende einbinden sondern über eine Textebene und dann mit Inline Html das Bild einfügen. Falls du nicht weißt wie das geht dann schreib mir einfach eine Email.

    lg

  3. 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

  4. Hallo Marc

    Also, die revapi findest du in den Einstellungen des jeweiligen Sliders unter Einstellungen –> API Funktionen und dort steht dann sowas wie revapi1.revpause(); in etwa und daran kannst du es ablesen. Und gleich unter dem Tab API Funktionen hast du den Tab Css/Javascript. Wenn du diesen anklickst gehen zwei Editoren auf einmal CSS und einmal Java Script und dort gehört der Code eingebettet…

    Hoffe das hilft dir weiter.

    lg

  5. 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

  6. 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

  7. 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

  8. 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

    • Also müsste ich mir genauer ansehen aber wüsste nicht warum das Sinn machen sollte? Ist doch egal welche Nummer das hat oder?

Schreibe einen Kommentar