• Thema

  • Technologie

Pixelgenau gestalten mit dem Elementor

Es kommt vor, dass man etwas ganz genau gestalten möchte. Dann wird es gar nicht mal so leicht mit dem Elementor. Der hat nämlich gewisse Hilfestellungen, die zur Behinderung werden, wenn man auf Basis von einem XD oder Figma-Design arbeiten will.

Leer ist nicht gleich null

Wenn man Margin und Padding (egal ob beim Abschnitt, in der Spalte oder im Widget) nicht verändert, sind die Felder leer. Aber Achtung! Leer ist nicht dasselbe wie Null! Leer ist ein Standardabstand, also immer etwas Padding. Hier der Beweis:

Widget-Abstand in der Spalte

In den Spalteneinstellungen gibt es ein kleines aber wichtiges Feld «Widgetabstand». Auch dieser ist standardmässig nicht gleich null, sondern 20px. Auch hier ein Beispiel, zwei Bilder über einander:

Spaltenabstand «keine Lücke»

Diese Einstellung im Abschnitt hat es in sich. Wie die beiden oberen Funktionen ist auch das eigentlich eine Hilfestellung. Wenn man nämlich nichts anderes einstellt, haben die Widgets immer ein bisschen Abstand zum Spaltenrand. Diesen Abstand kann man auf «keine Lücke» umstellen, und dann in der Spalteneinstellung manuell ein Padding einstellen.

Abschnittshöhe einstellen

Um die richtige Höhe eines Abschnitts zu erreichen, empfiehlt es sich, mit “Mindesthöhe” zu arbeiten. Solange der Inhalt dann weniger hoch ist, bleibt der Abschnitt genau so hoch, wie definiert.

Hier ist es je nach Situation auch praktisch, von Pixel auf VH umzustellen, das steht für die Höhe des Bildschirms. Wenn ich den also auf 50 setze, ist der Abschnitt immer halb so hoch wie der aktuelle Bildschirm. Ausser natürlich der Inhalt nimmt mehr Platz ein als die Mindesthöhe.

Klick vergrössert das Bild

Noch mehr finden:

  • Thema

  • Technologie

Beitrag teilen
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on xing
Was denkst du dazu?
yeah!
4
wooow
2
what?
0
meh.
0
hahaha
0
Diskussion

4 Antworten

  1. Hallo Simea! Danke für den Einblick, das macht Sinn! Wann ist denn bei welchen Projekten die Grenze, wo man mit dem Elementor-Code/Unterbau wegen Performance/Schnelligkeit nicht weiterkommt. Oder ist das gar nicht so das Problem? Webflow wirbt ja u.a. mit der 1 Zeile Code während Elementor etc. dann für den gleichen “Inhalt” 10 Zeilen hat …

  2. Hallo! Habt Ihr eigentlich Erfahrung mit Webflow gesammelt? Es heißt ja, dass es schlanker ist, da es nicht auf WordPress basiert.

    1. Hi Matthias

      Ich habe Webflow mal getestet, vor 3 Jahren. Aber ist schon sehr lange her. Ich denke, es hat seine Berechtigung, das Tool. Aber es hat zwei grosse Nachteile gegenüber WordPress: Webflow ist nicht Open Source und damit nicht so flexibel und erweiterbar mit eigenem Code. Zudem ist die Datenbank von WordPress eine MySQL-Datenbank. Also sehr sauber und ermöglicht auch Anbindungen. Das geht bei Webflow nur mit recht komplizierten Erweiterungen. Für unsere Projekte sind das Killer-Kriterien, gerade wenn wir von Multi-Channel-Projekten mit WordPress sprechen, aber auch sonst Websites, die skalierbar sein müssen. Aber ich höre viel gutes vom Designer-Interface über Webflow, ich denke das hat sicher eine Berechtigung für “einfache” Websites. Wobei ich “einfach” wirklich wertfrei meine.

Schreibe einen Kommentar

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

 

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • publishingblog-News
    jeden Dienstag die neusten Blogposts in deiner Inbox

    Noch mehr finden:

    • Thema

    • Technologie

    Dein Gerät ist aktuell offline.