Responsive Design und Layout mit Elementor

Responsive Design – Layout mit Elementor

tl;dr: Mit Elementor ein funktionierendes responsive Design aufzubauen ist einfach. Um die Details und Möglichkeiten geht es in diesem Artikel. Inklusive Grundlagenwissen: die Wahrheit über Pixel!

Wie Breit ist der Bildschirm?

Wer mit Elementor oder Elementor Pro als Pagebuilder arbeitet und sich nicht wirklich um das Thema responsive Design kümmert wird trotzdem eine funktionierende Gestaltung bekommen. Das liegt einfach daran, dass die Voreinstellungen sinnvoll gewählt wurden und der Webdesigner mit einem minimalen Aufwand Fehler, die nur auf bestimmten Bildschirmgrößen auftreten, korrigieren kann. 

Es lohnt sich jedoch, schon in der Entwurfsphase eines Projektes über die unterschiedlichen Usererfahrungen (UX) der hoffentlich zahlreichen Benutzer der Webseite nachzudenken. Die erste Frage lautet also: wie groß (oder breit) ist der Bildschirm des Besuchers? Und die Antwort drauf lautet: wir wissen es nicht! Was wir aber wissen ist, dass unterschiedliche Geräte unterschiedliche Anforderungen an unser Design stellen. Gemeinhin eingeteilt in Desktop, Tablet und Mobile.

Bildschirmbreiten
Die Bildschirmbreite (pink) kennen wir nicht, die anderen Breiten können wir beeinflussen.

Da wir die Bildschirmbreite nicht kennen (und diese ggf. schon recht breit werden kann) können wir eine Breite angeben, in welcher der Inhalt der Seite untergebracht werden soll. Wenn wir diese Inhaltsbreite überschreiten wollen (z.B. im Header, Footer oder für Hero-Bilder) müssen wir das extra einstellen. 

Wenn jetzt ein Gerät (oder das Browserfenster) schmäler als die Inhaltsbreite ist möchte ich eine andere Darstellung anzeigen, zB. um ein 3 spaltiges Layout in ein 2spaltiges zu verwandeln. Dieser Punkt wo ich zwischen diesen Ansichten wechsle ist der sog. Tablet-Breakpoint

Wenn der User nun ein Gerät hat, das noch schmäler ist – ein Handy – wird eine 1spaltige Darstellung des Layouts sinnvoll sein. Der Mobile-Breakpoint.

Die Voreinstellungen im Elementor für diese 3 Breiten sind:

Inhaltsbreite: 1140 px

Tablet-Breakpoint: 1025 px

Mobile-Breakpoint: 768 px

Diese Werte sind unter 

Dashboard > Elementor > Einstellungen > Stil

zu verändern. 

Die Maßeinheit ist hier immer Pixel – das geht auch nicht anders, denn jeder Bildschirm ist aus Bildpunkten aufgebaut. Besonders Einsteiger und Menschen mit einem Gestaltungshintergrund auf Papier haben damit öfter Probleme. Sehr oft führt das dazu, dass Bilder viel zu groß verwendet werden oder umgekehrt, Screendesigner sind enttäuscht, wenn Ausdrucke unscharf werden oder viel zu klein sind. Deshalb hier etwas Grundlagenwissen zum Thema:

Wieviel ist das in Zentimeter? Die Wahrheit über Pixel.

Ein Pixel ist ein Bildpunkt. Er ist so groß, wie das Gerät, welches diesen Punkt darstellt, es herstellt. (Der Einfachheit halber gehen wir von quadratischen Pixeln aus.)

Beispiele hierfür: 

  • ein klassisches Bildschirmpixel ist etwa 0,26 mm breit.
  • ein Pixel(Punkt) mit einem Filzstift auf Papier ist etwa 0,7 mm breit
  • ein Bildpunkt eines klassischen Druckwerkes ist etwa 0,08 mm breit
Damit wir also vergleichen können müssen wir wissen, wie viele Punkte auf einer bestimmten Strecke Platz haben. Diese Strecke wird traditionell in Zoll angegeben, engl. inch, also dots per inch oder auch dpi. Ein Zoll ist 2,54 Zentimeter lang. 
 

Wichtig sind also immer 2 Dinge:
wieviele Pixel ist ein Objekt breit und
mit wie vielen dpi wird das Objekt dargestellt? 

Anwendungsbeispiele:

Ein Monitor der mit 27 Zoll angeschrieben ist gibt an, welche Aussenmasse das Gerät hat. Die Angabe 1980 x 1080 Pixel beim selben Monitor geben an, wie viele Bildpunkte dargestellt werden. 

Ein Foto hat 5 MB und stammt aus einer Digitalkamera. Diese Zahl sagt überhaupt nichts darüber aus, wie groß das Bild in Pixeln ist. Anderseits weiss man von einem Bild das 1600 x 900 Pixel groß ist nicht, wie viel Speicherplatz es benötigt.

Die beste Qualität in der Darstellung wird dann erreicht, wenn ein Bild genau so groß ist wie die Darstellung, in der ich es verwende. Wenn also mein Inhaltsbereich 1140 px breit ist und ich ein Bild über die volle Inhaltsbreite will sollte ich das Bild auch genau in dieser Breite abspeichern.

 

Relative und Absolute Angaben

Wir wissen also genau genommen nicht, wie groß so ein Pixel ist, trotzdem ist ein Pixel ein absoluter Wert. Wenn wir an einem (responsive) Design arbeiten sollten wir versuchen, nicht in absoluten sondern in relativen Angaben zu denken und zu gestalten. Zumindest dort, wo es angebracht ist:

Es gibt eine Voreinstellungen Widgetabstand der auf 20 px gesetzt ist. Das ist grundsätzlich ein sehr brauchbarer Wert, schliesslich will man vermeiden, dass ein Fließtext bis zum Bildrand läuft oder eine Iconbox direkt an eine andere stößt. Eine Abstand in Pixel kann jedoch auch problematisch werden. Ein klassisches Problem ist hier ein Padding (also der Abstand des Inhaltes zum Rand des Elements) das dazu führt, dass der Inhalt am Handy kaum mehr Platz hat weil seitlich die Abstände absolut gesetzt wurden.

Grundeinstellung
Die Voreinstellung. Im Textwidget ist kein Abstand zum Rand des Widgets.
Padding links und rechts 100 px
5 % abstand
Hier wurde in Abstand von 5 % eingestellt.

Immer dann, wenn wir nicht genau wissen wieviel Platz wir eigentlich haben, sind also relative Angaben sinnvoll. Die bekannteste Einheit für eine relative Angabe ist natürlich % [Prozent], wobei sich die Angabe der Zahl immer auf den zur Verfügung stehenden Platz, also das nächstäussere Element bezieht.

Es gibt aber auch andere Masseinheiten die auch im Elementor auftauchen können. Hier ein Überblick:

AbkürzungNameBedeutung
pxPixelAbsolute Größeneinheit in Abbildungspunkten
%Prozentrelative Angabe zur nächsthöheren Ebene
emEMSSchriftgröße des Elements (=so groß wie das große M der Schrift)
exEXSchriftgröße des Elements (=so groß wie das kleine x der Schrift)
remRoot Emswie EMS, nur dass sich die Relation zum Root-Element (oft HTML-Tag) bezieht.
vwViewport With1/100stel der Anzeigenbreite
vhViewport Height1/100stel der Anzeigenhöhe

Responsive Mode im Elementor

Das Elementor Interface bietet nun dort, wo es Elementor für angebracht hält, die Möglichkeit an unterschiedliche Einstellungen für die verschiedenen Modi Desktop – Tablet – Mobil vorzunehmen. Der Wechsel zwischen den Modi kann entweder durch kleine Popups oder links unten im Bedienfeld über die Funktion Responsiver Modus erfolgen. Das Video zeigt eine kleine Demo:

Video abspielen
In eigener Sache:
werkform hilft bei der grafischen Konzeption und der Gestaltung von Websites und Templates - natürlich von Anfang an responsive gedacht! Kontaktiere mich um ein Angebot zu bekommen.
Werbung

Schriften einstellen

Eine der wichtigsten Anpassungen die man im Responsive Design vornehmen kann sind die Schriften. Am mobilen Gerät ist einfach viel weniger Platz auf der einen Seite, der User ist aber näher davor auf der anderen Seite. Es ist also eine gute Idee, die Schriftgrößen (aber auch Farben, Schriftarten etc.) grundsätzlich einzustellen. Generell geschieht dies über die Theme Stil Optionen (einen eigenen Artikel zu dem Thema gibt es hier), so ferne man mit einem Lightweight Theme wie Hello Elementor arbeitet.

 

Schritt 1:

Theme Stil > Typografie > Typographie
Unterschiedlich einstellbar sind hier die Schriftgrößen für die drei Modi. In dem Beispiel hier wurde die Schrift Work Sans lokal eingebunden. Für den Desktop wurde die Größe 1 EM gewählt (was ungefähr 16 px entspricht). Angepasst für Tablet 0,9 EM und Mobil 0,8 EM.

Schritt 2:

Theme Stil > Typografie > Absatzabstand

Unterschiedlich einstellbar ist hier der Absatzabstand für die drei Modi.

AbsatzAbstand
Der Absatzabstand kann für Desktop, Tablet und Mobil unterschiedlich gewählt werden.

Schritt 3:

Theme Stil > Typografie > H1 … H6

Nun können für die Überschriften H1 bis H6 vorgenommen werden. Während Angaben wie zB. Schriftschnitt oder Stil nicht unterschiedlich einstellbar sind, kann man

  • Größe
  • Zeilenhöhe
  • Zeichenabstand

für die 3 Modi anpassen. Als Beispiel wurde hier die H1 für Desktop auf 2,5 em gesetzt, für Tablet und Mobil auf 2,0 em (also doppelt so groß wie der Fließtext). Zeilenhöhe und Zeichenabstand wurden belassen.

 

Bei H2 wurden ähnliche proportionale Anpassungen durchgeführt, ab H3 wurde keine besonderen Einstellungen mehr getroffen für den Mobilbereich, da hier die Schriftwahl schon von Grund auf gut passt.

Responsive Optionen für die Überschriften einstellen

Sektionen und Spalten

Und der eigentliche Inhalt? Im Wesentlichen ist ausser der Typographie wie oben beschrieben der Ansatzpunkt jeweils in der Sektion zu finden, wenn ich über das Webseitenlayout für verschiedene Gerätetypen nachdenke.

Eine neue Sektion anlegen
Wer eine neue Sektion anleget kann schon vorab aus verschiedenen Spalteneinteilungen wählen.

Die Grundsatzentscheidung lautet, ob ich den Inhalt über die ganze Breite, die definierte Inhaltsbreite oder einer eigenen, nur für diesen Abschnitt gültige Inhaltsbreite anzeigen will. Weiters kann ich festlegen, wie breit der Abstand zwischen den Spalten sein soll. Dieser Abstand ist besonders beim Widget Innerer Abschnitt wichtig, da er auch für den Rand links und rechts des Textes verantwortlich ist. Beispiel zeigt das Video:

Demovideo Section
Video abspielen

Bei vielen Objekten kann es sinnvoll sein, deren Ausgabe nach Ausgabemedium zu beschränken. Sowohl von der Gestaltung als auch vom Content her kann eine Sektion vielleicht nur am Desktop gewünscht werden oder genau das Gegenteil, nur am Mobiltelefon auftauchen solle. Dazu im Elementor 

… > Erweitert > Responsive

Hier kann ich einstellen, ob ein Objekt, eine Spalte, Ein Abschnitt in der jeweiligen Größe erscheinen soll oder nicht. 

Ausgeblendete Spalte
Die zweite Spalte taucht am Desktop und am Tablet nicht auf. Links die Einstellung, rechts die Ausblendung grau dargestellt.

Eine sehr übliche Anwendung im responsive Design ist es, die Anzahl der Spalten abhängig vom Anzeigemodus zu wählen. In dem Beispiel hier wurde das mit dem Beitragswidget umgesetzt: die Blogposts werden am Computer 3spaltig, am Tablet 2spaltig und am Mobilgerät untereinander (als 1spaltig) angezeigt.

Es kann auch hilfreich sein, die Reihenfolge der Inhalte (Spalten) je nach Ausgabemedium umzukehren. Dazu 

Abschnitt bearbeiten > Erweitert > Responsive > Spalten umkehren (Mobil) 

wählen. Das Beispiel zeigt: die am Desktop erste Spalte (gelb unterlegt) ist in der Mobilversion die letzte (=unterste).

Die Spalten umkehren führt dazu, dass die rechte Spalte am Desktop die erste (oberste) am Mobilgerät wird.

Für jede Spalte kann man getrennt für die 3 Modi einstellen:

  1. Spaltenbreite (in %)
  2. Vertikale Ausrichtung
  3. Horizontale Ausrichtung
  4. Widget Abstand (in px)

Oft sieht es einfach besser aus, wenn zB. Überschriften die am Computer linksbündig stehen in der schmalen Ansicht am Mobilgerät zentriert dargestellt werden. In einer etwas kleineren Schriftgröße mit einem anderen Abstand. Das ist responsive Design: ein Inhalt mit unterschiedlichen Darstellungen je nach Ausgabemedium.

Wo uns Elementor diese Einstellungsmöglichkeiten anbietet erschliesst sich durch Ausprobieren (Abschnitt Eckradius ja, Abschnitt Box-Schatten nein, Test-Editor: Ausichtung ja, Textfarbe nein.).  Wenn es wirklich fehlt kann man immer mit Hilfe der medienbedingten Ausblendung einen Abschnitt doppelt anlegen und eben kreuzweise gestalten und den nicht benötigten Abschnitt ausblenden. Eine Lösung findet man immer.

Fazit

Es ist sehr einfach, mit Elementor eine gut funktionierende responsive Webseite zu gestalten. Dazu benötigt man kein detailliertes Wissen über CSS oder die verschiedenen Geräteklassen. Wer sich allerdings ein wenig näher mit der Materie beschäftigt und sein Projekt ordentlich plant, kann mit den richtigen Voreinstellungen ein sehr gutes, flaches Design umsetzen das wirklich überall funktionieren sollte. Es ist davon auszugehen, dass hier die Tuningmöglichkeiten immer besser werden. Mit der Weiterentwicklung der Browser und von CSS (Stichwort CSS Grid und hoffentlich bald auch nested grid) werden die Webseiten strukturell einfacher und damit auch schneller. 

Responsive Design ist ein 100%iges must, es gibt einfach keine Ausreden mehr. Wer jetzt noch nicht da ist – sorry – der ist wirklich veraltet.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.