Du bist dabei, eine Website zu erstellen und denkst darüber nach, wie du das am bequemsten tun kannst? Der Elementor Page-Builder ist unsere klare Empfehlung. Vor allem, weil das Tool vor kurzem aktualisiert wurde und noch mehr tolle Features bietet.
Elementor ist ein leistungsstarker und intuitiver Page-Builder, der das Leben Webdesignern und Nutzern einfacher macht. Dieses großartige Tool verwenden auch Entwickler von TemplateMonster bei der Erstellung funktionsreicher WordPress Themes wie z.B. Monstroid2. Mit Elementor ist es extrem einfach, ein WordPress Theme anzupassen und ein einmaliges Traumdesign mit nur wenigen Klicks zu erreichen. Nach dem neuesten Update erhielt Elementor eine Reihe neuer Funktionen, die den super Page-Builder noch besser machen.
Da du diesen Artikel jetzt liest, bin ich mir ziemlich sicher, dass du bereits von Elementor gehört und sehr wahrscheinlich schon einige der Elementor Plugins auf deiner Website installiert hast. Aber genug der vielen Worte. Lies weiter, um zu erfahren, welche Features der erneuerte Elementor Page-Builder mitbringt.
Platziere Widgets wie du willst
Das erste Feature, auf das wir heute eingehen möchten, heißt Position: Absolute. Was steckt dahinter? Es geht um eine neue Funktion, mit der du ab jetzt außerhalb des Rasters designen kannst. Du kannst jedes Element anklicken, ziehen und in jedem beliebigen Seitenbereich platzieren.
- Klicke ein Widget an,
- gehe zu Advanced,
- wähle Custom positioning,
- setze die Option "position" auf "absolute",
- zieh das Widget herum.
Das Gleiche ist auch für andere Elemente auf deiner Seite anwendbar.
Aber es gibt hier eine kleine Besonderheit. Wenn du möchtest, dass die Seite responsive ist und auf Tablets und mobilen Geräten korrekt aussieht, kannst du sie nicht so einfach schließen, nachdem du diese Funktion angewendet hast. Das Element kann zum ungeeigneten Platz rutschen, weil es nicht mehr an die gesamte Seitenstruktur gebunden ist.
Jetzt musst du die Position der Elemente korrigieren, die du verschoben hast. Schalte den Tablet- oder Mobilmodus ein. Dort findest du vertikale und horizontalen Werte, um den Offset des Elements festzulegen. Diese Werte sind für die Position des Elements auf der Seite verantwortlich. Du kannst sehen, wie sich diese ändern, während du das Element herumziehst. Es steht dir frei, verschiedene Werte für Desktop-, Tablet- und Mobil-Layouts zu definieren.
Mach dein Widget zum “Stalker”
Diese Funktion ist nützlich, wenn du ein Widget vor Augen des Besuchers führen willst, damit es beim Scrollen nach oben oder unten an einer fixen Position bleibt. Alles was zu tun ist, ist ein Widget zu ziehen und es im sichtbaren Bereich zu fixieren.
Hier haben wir das gleiche Problem wie bei Position: Absolut. Du solltest sicherstellen, dass deine Inhalte auf dem Tablet bzw. Mobilgerät gut aussehen.
Speichere den letzten Tab
Es gibt eine weitere Neuerung, die Elementor noch komfortabler in der Bedienung macht. Ab sofort merkt sich das Tool den Tab, mit dem du zuletzt gearbeitet hast, und du wirst genau zu diesem Bereich weitergeleitet. Du ersparst dir dadurch Zeit, denn lästige Klicks und der Neuanfang sind nicht mehr nötig.
Kompakte Widgets
Zuvor wurde einem Widget in Elementor eine Breite von 100% der Spalte zugewiesen. Ein kleiner Button nahm dabei den gesamten Platz ein, und es war unmöglich, noch etwas daneben zu platzieren, wenn man Spalten verwendet. Jetzt gibt es eine Lösung: Erstelle mehr als eine Spalte. Wie genau machst du das?
- Gehe zum Abschnitt "advanced",
- "custom positioning",
- Gehe zu "width",
- Wähle "inline".
Jetzt ist deine Spalte genau auf die Größe des Buttons zugeschnitten. Dupliziere sie und du hast zwei Buttons. Füge den Text hinzu und voila! Du kannst nun beliebig viele Buttons nebeneinander platzieren. So einfach ist das.
Flex Alignment
Werfen wir einen Blick auf ein weiteres Feature - flexible Ausrichtung: horizontal und vertikal. Zuerst zeigen wir, wie diese Option zu finden ist:
- geh zu Spalteneinstellungen (column settings),
- klick sie an, und du siehst den Layout-Tab,
- finde "vertical-align" und "horizontal-align".
Wähle etwas davon. Die Option funktioniert sowohl für horizontale als auch für vertikale Ausrichtung. Weiter betrachten wir 6 Einstellungen zum Ausrichten der Elemente am Beispiel von "horizontal-align".
Start
“start” bedeutet in diesem Fall "links" (wo wir mit dem Lesen beginnen). Die Elemente werden also auf der linken Seite der Spalte ausgerichtet.
Center
Die Einstellung sorgt dafür, dass sich Elemente in der Mitte der Spalte befinden.
End
Hier steht “end” für "rechts" (analog zu “start”). Die Elemente werden auf der rechten Seite der Spalte ausgerichtet.
Space between
Diese Option ist etwas komplizierter. Du kannst damit den Abstand zwischen Elementen einrichten, indem das erste und letzte Element in einer Zeile an der linken und rechten Seite einer Spalte fixiert werden.
Space around
Im Gegensatz zur vorangehenden Option geht es um den Außenabstand, der Elementen auf allen Seiten, unabhängig von ihrer Position in der Zeile, hinzugefügt wird.
Space evenly
Wenn du die vorherige Art der Ausrichtung ausprobiert hast, hast du vielleicht bemerkt, dass der Abstand zwischen Elementen optisch größer als an Rändern der Spalte ist. Wünschst du eine gleichmäßigere Ausrichtung, dann nutze diese Option. Sie teilt den Raum auch durch Leerzeichen auf, aber Abstände sehen über die gesamte Spaltenlänge gleichmäßig aus.
Jetzt weißt du, wie das funktioniert. Dasselbe gilt für vertikale Ausrichtung. Statt "start", "center" und "end" sind dabei "top", "middle" und "bottom" anzuwenden.
Verstecke Spalten mit der neuen Funktion
Wie du es wohl bemerkt hast, zielt das neueste Update darauf ab, einem Benutzer mehr Möglichkeiten zu geben, eine Website userfreundlicher zu gestalten. Die Darstellung auf verschiedenen Geräten lässt sich in Elementor separat einrichten. So kannst du eine gewünschte Spalte ausblenden, damit sie auf einem bestimmte Device nicht angezeigt wird. Zum Beispiel gibt es eine Infobox mit einem Bild. Und du möchtest das Bild auf Mobilgeräten ausblenden, indem Informationen weiterhin angezeigt werden müssen. Zuvor musste der gesamte Abschnitt versteckt werden. Jetzt ist es hingegen möglich, nur jeweilige Spalte auszublenden und den Rest anzeigen lassen. Sehr praktisch, nicht wahr?
Wie erledigst du das?
- Gehe zu "section",
- "advanced",
- "responsive",
- wähle Spalte verstecken.
Bitte beachte, diese Einstellungen werden bei der Arbeit im Editor nicht angezeigt. Du musst zur Live-Vorschau gehen, um dir diese Änderungen anzusehen.
Erstelle mehrere Spalten
Die letzte Neuerung, die wir heute betrachten, ist die Textverteilung auf mehrere Spalten.
- Gib einen Text in den Texteditor ein,
- Gehe zum Style-Tab,
- Lege die Anzahl der Spalten bei “columns” fest
Du kannst den Abstand zwischen Spalten nach Belieben ändern. Mit dieser Funktion kannst du bis zu 10 Spalten erstellen und selbstverständlich auch Einstellungen für verschiedene Endgeräte vornehmen. Wenn du die neuesten Funktionen von Elementor noch nicht getestet hast, kannst du den Page-Builder aktualisieren und diese ausprobieren. In diesem Video werden alle Neuerungen detailliert erklärt. Sieh alles mit eigenen Augen, viel Spaß dabei!
P.S. Dieser Beitrag stammt von Alice Margis. Der Originalartikel auf Englisch ist bei MonsterPost zu lesen.