So richten Sie Elementor-Abschnitte und -Spalten aus

Während Sie mit Elementor , werden Sie feststellen, dass es etwas schwierig ist, Ihre Abschnitte und Spalten individuell zu positionieren. Sie müssen Spalten und Abschnitte vertikal und horizontal ausrichten, um ein ansprechendes „Stretch-to-Fill“-Layout zu erreichen. Ohne diese Ausrichtung können die Elemente von Säulen mit unterschiedlichen Höhen nicht auf dem Bildschirm angepasst werden.

• Warum müssen wir uns angleichen?
• Wie funktionieren Spalten oder Abschnitte für ein Responsive Design?
• Wie richtet man Elementor-Abschnitte und -Spalten aus?
• Um Probleme mit der Antwortbreite zu beheben, verwenden Sie Overflow Hidden
• Sich um die Positionierung kümmern
• Relative Einheiten
• Steuern Sie die Tiefe jedes Elements mithilfe des Z-Index
• Der Trick mit doppelter Funktionalität
• Offsets
• Die goldene Regel
• Abschluss

Warum müssen wir uns angleichen?

In jeder Spalte oder jedem Abschnitt kann der Inhalt unterschiedlichen Kategorien angehören. Dies kann in Form von Bildern, Texten und Bewertungen erfolgen. Für ein stimmiges Erscheinungsbild empfiehlt es sich, auf ein einheitliches Erscheinungsbild des Inhalts zu achten. Es sollte nicht einfach so weggeworfen oder weggeworfen werden, nur so zum Spaß.

Mit einer guten Ausrichtung können Sie dafür sorgen, dass die Website übersichtlicher und edler erscheint – sodass sie nicht überladen wirkt. Mit der Ausrichtungsoption können Sie mehrere Widgets unterschiedlicher Größe nebeneinander in derselben Spalte anpassen.

Wie funktionieren Spalten oder Abschnitte für ein Responsive Design?

Mit Elementor 2.5 können Sie Ihr Design und Ihre Inhalte individuell positionieren. Mit der neuen benutzerdefinierten Positionierungsfunktion können Sie die Widgets an einen beliebigen Ort verschieben. Aber über einen bestimmten Abschnitt hinaus ist das nicht wirklich möglich. Diese Widgets sind relativ zu der Spalte, in der sie sich befinden. Dies kann zu Problemen bei der Reaktionsfähigkeit des Designs führen.

Angenommen, Sie haben ein dreispaltiges Layout. Mithilfe der benutzerdefinierten Positionierung können Sie ein Widget per Drag-and-Drop von der rechten Spalte in die mittlere Spalte ziehen oder wie auch immer Sie möchten.

Dies kommt jedoch nur Desktop-Besuchern zugute, da es für sie in Ordnung aussieht. Es wird jedoch zu einem Problem führen, wenn die Website von Mobilgeräten aus aufgerufen wird, da Elementor die Spalten auf Mobilgeräten vertikal stapelt.

Anstatt also drei Säulen nebeneinander zu haben, könnten Sie alle drei Säulen übereinander gestapelt erleben. Das Element wird nicht mehr wie auf Desktops in der mittleren Spalte angezeigt.

Sie können die mobile Ansicht zwar mit einer versteckten Einstellung intelligent anpassen, es gibt jedoch keine Garantie dafür, dass die Mehrheit der Menschen sie findet. Warum also die Benutzer frustrieren? Die richtige Lösung besteht darin, das Design responsiv und anpassungsfähig zu gestalten. Damit es nirgendwo abstürzt.

Dabei müssen Sie auf die Beziehung des Widgets zur Spalte achten, in der es sich befindet.

Wie richtet man Elementor-Abschnitte und -Spalten aus?

Gehen Sie für jeden Abschnitt/jede Spalte zum Layoutabschnitt und legen Sie die folgenden Ausrichtungsoptionen gemäß Ihren Anforderungen fest:

• Vertikale Ausrichtung: Sie können die folgenden Einstellungen für die Widgets auswählen. Beachten Sie jedoch, dass der Inhalt einer Spalte nicht an den vertikalen Optionen der ersten drei Spalten, also oben, in der Mitte und unten, ausgerichtet werden kann.
• Spitze
• Mitte
• Unten

Außerdem gibt es ^* drei neue Optionen, mit denen Sie den Inhalt ganz bequem nach Ihren Wünschen ausrichten können.

• ^*Abstand zwischen – legt den Abstand zwischen Widgets am Anfang und am Ende am Rand der Spalte fest. Die Widgets haben den gleichen Abstand, das heißt, zwischen ihnen ist der gleiche Abstand.
• ^*Space Around – der Abstand zwischen den Widgets ist gleich und die Kanten sind halb so groß wie der Abstand zwischen den Widgets.
• ^*Gleichmäßiger Abstand – der Abstand zwischen den Widgets ist gleichmäßig – er ist zwischen, vor und nach ihnen gleich.

• Horizontal ausrichten: Mit dieser Option können Sie eine Inline-Positionierung durchführen und die Inline-Widgets, die sich in derselben Zeile befinden, horizontal ausrichten. Mit diesen Optionen können Sie den Inhalt der Spalten horizontal ausrichten:
• Start – richtet alle Symbole links aus
• Mitte: Positioniert die Symbole in der Mitte der Spalte
• Setzt alle Symbole nach rechts
• Abstand zwischen – der Abstand zwischen Widgets am Anfang und am Ende am Rand der Spalte. Die Widgets haben den gleichen Abstand, das heißt, zwischen ihnen ist der gleiche Abstand
• Space Around – der Abstand zwischen den Widgets ist gleich und die Kanten sind halb so groß wie der Abstand zwischen den Widgets
• Gleichmäßiger Abstand – der Abstand zwischen den Widgets ist gleichmäßig – er ist zwischen, vor und nach ihnen gleich

Um Probleme mit der Antwortbreite zu beheben, verwenden Sie Overflow Hidden

Wenn es um die Darstellung einer Website auf Mobilgeräten geht, besteht eine hohe Wahrscheinlichkeit, dass Sie auf ein Problem stoßen, bei dem ein Widget mit benutzerdefinierter Positionierung über die Breite einer Spalte hinausgeht.  

Dies führt für mobile Besucher zu einer wirklich frustrierenden Situation, da sie horizontal scrollen können. Und das ist nicht das, was Sie sich für Ihre Website gewünscht haben. Dies kann behoben werden durch:

Layouteinstellungen > Setzen Sie die Überlaufoption auf „Ausgeblendet

Dadurch wird der darüber hinausgehende Bereich abgeschnitten und ein horizontales Scrollen entfällt

Sich um die Positionierung kümmern

Sie müssen auch auf die Positionierung der Säulen achten. Sie können mit Elementor 2.5 eine benutzerdefinierte Positionierung festlegen – absolut und fest.

Die absolute Positionierung ist die Positionierung des Elements relativ zu dem Abschnitt oder der Spalte, in der Sie sich befinden. Wenn Sie also die absolute Positionierung für ein Element oder einen Abschnitt verwenden, bewegt sich dieser Abschnitt nicht entlang des Besucherfensters.

Die feste Position unterscheidet sich von der absoluten Position, da sie dafür sorgt, dass der Abschnitt/das Element am Standpunkt des Besuchers fixiert bleibt. Wenn der Benutzer also durch die Seite scrollt, bleibt das Element dort.

Relative Einheiten

Beim Entwerfen Ihrer Webseite werden Sie feststellen, dass es mehrere Möglichkeiten gibt, die Elemente zu positionieren. Für die absolute Positionierung empfiehlt es sich, relative Einheiten zu verwenden, da das responsive Design dadurch bei unterschiedlichen Bildschirmgrößen funktionaler wird.

Die relative Einheit passt sich automatisch an die relative Breite und Höhe des Bildschirms an, wodurch die Größe der Elemente oder Abschnitte selbst geändert werden kann und ein besser ansprechendes Design erzielt wird. Wenn Sie sich für die Verwendung von Pixeln entscheiden, müssen Sie mehrere responsive Abschnitte für unterschiedliche Bildschirmgrößen erstellen.

Steuern Sie die Tiefe jedes Elements mithilfe des Z-Index

Wenn Sie für die Widgets eine „absolute“ oder „feste“ Positionierung verwenden, kann es in vielen Situationen vorkommen, dass sich zwei oder mehr Widgets überlappen, also „übereinander“ gestapelt sind. Sie können dies vermeiden, indem Sie die normale Z-Index-Einstellung verwenden. Auf diese Weise können Sie die Tiefe steuern und auswählen, welche Widgets im Vordergrund angezeigt werden.

Der Trick mit doppelter Funktionalität

Wenn Sie einen Rechtsklick verwenden, um ein Element mit benutzerdefinierter Positionierung zu duplizieren, sieht es möglicherweise so aus, als hätte der Rechtsklick nicht funktioniert.

Aber warte. Das ist nicht wahr. Die Duplikatfunktion hat einwandfrei funktioniert und das Element dupliziert. Da jedes Element genau die gleiche benutzerdefinierte Positionierung hat, wird das duplizierte Element GENAU über dem anderen Element gestapelt (was den Eindruck erweckt, dass kein Duplikat erstellt wurde).

Vereinfacht ausgedrückt: Wenn Sie eine Spalte erfolgreich erstellt haben, können Sie die Spalte bei Bedarf duplizieren. Stellen Sie außerdem sicher, dass die von Ihnen erstellten Spalten keine benutzerdefinierte Positionierung verwenden. Wenn dies der Fall ist, funktioniert die Duplizierung nicht mit der Rechtsklick-Option. Sie können jedoch die Duplikatfunktion verwenden, um die Einschränkung zu umgehen und die Spalte zu kopieren.

Ziehen Sie das obere Element ein wenig und es wird das andere sichtbar. Beide Elemente sind sehr vorhanden. Wenn Sie eine Spalte duplizieren, wird sie außerdem über die alte gestapelt. Sie könnten verwirrt sein. Aber keine Sorge, Sie können es einfach ziehen und dann in Ihrem Webseitendesign verwenden.

Offsets

Es gibt Fälle, in denen Sie Offsets zum Inhalt Ihrer Webseite festlegen müssen. Mit Elementor können Sie den Offset ganz einfach einstellen. Wenn Sie also einen Versatz von 500 Pixeln von links festlegen, bleibt entsprechend Ihrer Eingabe Platz um den Inhalt herum. Ebenso können Sie auch den Offset auf der rechten Seite einstellen. Es empfiehlt sich, sowohl den linken als auch den rechten Versatz auf einen ähnlichen Wert einzustellen, da der Inhalt dann richtig auf dem Bildschirm ausgerichtet wird.

Es gibt Fälle, in denen Sie Offsets zum Inhalt Ihrer Webseite festlegen müssen. Mit Elementor können Sie den Offset ganz einfach einstellen. Wenn Sie also einen Versatz von 500 Pixeln von links festlegen, bleibt entsprechend Ihrer Eingabe Platz um den Inhalt herum. Ebenso können Sie auch den Offset auf der rechten Seite einstellen. Es empfiehlt sich, sowohl den linken als auch den rechten Versatz auf einen ähnlichen Wert einzustellen, da der Inhalt dann richtig auf dem Bildschirm ausgerichtet wird.

Die goldene Regel

Für ein besseres responsives Design verwenden Sie relative Einheiten. Denn die absolute Positionierung kann schwierig sein, wenn die Website von einer anderen Plattform aus aufgerufen wird. Die Verwendung relativer Einheiten zum Entwerfen Ihrer Abschnitte führt zu einem reaktionsschnelleren Design. Mit Hilfe relativer Einheiten lässt sich die Breitenänderung perfekt abbilden. Mit „relativ“ meinen wir variierende Einheiten wie Prozent oder Ansichtsbreite (VW) und nicht feste Einheiten wie Pixel.

Abschluss

Elementor ist ein äußerst benutzerfreundlicher Website-Builder. Manchmal kann es zu Problemen bei der Website-Anzeige kommen, wenn der Zugriff auf die Website über ein Mobiltelefon oder Tablet erfolgt. Mithilfe der Abschnitts- und Spaltenausrichtung können Sie Ihre Websites ganz einfach perfektionieren.