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 reaktionsschnelles „Stretch-to-Fill“-Layout zu erzielen. Ohne diese Ausrichtung werden die Elemente von Spalten mit unterschiedlichen Höhen nicht auf dem Bildschirm angepasst.

• Warum müssen wir uns ausrichten?
• Wie funktionieren Spalten oder Abschnitte für ein Responsive Design?
• Wie werden Elementor-Abschnitte und -Spalten ausgerichtet?
• Verwenden Sie Überlauf ausgeblendet, um Probleme mit der ansprechenden Breite zu beheben
• Positionieren
• Relative Einheiten
• Steuern Sie die Tiefe jedes Elements mit dem Z-Index
• Der Trick zur doppelten Funktionalität
• Offsets
• Die goldene Regel
• Fazit

Warum müssen wir uns ausrichten?

In jeder Spalte oder jedem Abschnitt kann der Inhalt verschiedenen Kategorien zugeordnet werden. Es kann in Form von Bildern, Text und Bewertungen vorliegen. Für ein zusammengesetztes Erscheinungsbild wird empfohlen, dass das Erscheinungsbild des Inhalts einheitlich ist. Es sollte nicht einfach nur weggeworfen werden - nur zum Teufel.

Mit einer guten Ausrichtung können Sie die Website ordentlicher und eleganter gestalten, damit sie nicht überladen aussieht. 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 jeden beliebigen Ort verschieben. Aber Sie können es nicht wirklich über einen bestimmten Abschnitt hinaus tun. Diese Widgets sind relativ zu der Spalte, in der sie sich befinden. Dies kann ein Problem bei der Reaktionsfähigkeit des Entwurfs verursachen.

Angenommen, Sie haben ein dreispaltiges Layout. Mithilfe der benutzerdefinierten Positionierung können Sie ein Widget aus der rechten Spalte in die mittlere Spalte ziehen und dort ablegen, wie Sie möchten.

Dies kommt jedoch nur Desktop-Besuchern zugute, da es für sie in Ordnung aussieht. Es wird jedoch ein Problem verursachen, wenn auf die Website von einem mobilen Gerät aus zugegriffen wird, da Elementor die Spalten auf einem mobilen Gerät vertikal stapelt.

Anstatt drei Spalten nebeneinander zu haben, werden möglicherweise alle drei Spalten übereinander gestapelt. Das Element wird nicht mehr wie auf Desktops in der mittleren Spalte angezeigt.

Sie können die mobile Ansicht zwar intelligent mit einer versteckten Einstellung optimieren, es gibt jedoch keine Garantie dafür, dass die Mehrheit der Benutzer sie finden kann. Warum also die Benutzer frustrieren? Das Design reaktionsschnell und anpassungsfähig zu machen, ist die richtige Lösung. Damit es nirgendwo abstürzt.

In diesem Fall müssen Sie auf die Beziehung des Widgets zu der darin enthaltenen Spalte achten.

Wie werden Elementor-Abschnitte und -Spalten ausgerichtet?

Landen Sie für jeden Abschnitt / jede Spalte im Layoutabschnitt und stellen Sie die folgenden Ausrichtungsoptionen gemäß Ihren Anforderungen ein:

• 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 ersten drei vertikalen Spaltenoptionen ausgerichtet werden kann, dh oben, in der Mitte und unten.
• oben
• Mitte
• Unterseite

Für diese Angelegenheit gibt es ^* drei neue Optionen, die es wirklich bequem machen, den Inhalt nach Ihren Wünschen auszurichten.

• ^*Abstand zwischen - Legt den Abstand zwischen Widgets am Anfang und am Ende am Rand der Spalte fest. Die Widgets haben einen gleichen Abstand, dh zwischen ihnen ist der gleiche Abstand.
• ^*Abstand um - 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 Widgets ist einheitlich - zwischen, vor und nach ihnen ist gleich.

• Horizontale Ausrichtung: Mit dieser Option können Sie die Inline-Positionierung durchführen und die Inline-Widgets, die sich in derselben Zeile befinden, horizontal ausrichten. Mit den folgenden 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
• Beendet alle Symbole nach rechts
• Abstand zwischen - Der Abstand zwischen Widgets am Anfang und am Ende am Rand der Spalte. Die Widgets haben einen gleichen Abstand, dh zwischen ihnen ist der gleiche Abstand
• Abstand um - 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 Widgets ist einheitlich - zwischen, vor und nach ihnen ist gleich

Verwenden Sie Überlauf ausgeblendet, um Probleme mit der ansprechenden Breite zu beheben

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

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

Layouteinstellungen > Setzen Sie die Überlaufoption auf Ausgeblendet

Auf diese Weise wird der überschüssige Bereich abgeschnitten, und es ist kein horizontaler Bildlauf erforderlich

Positionieren

Sie müssen sich auch um die Positionierung der Spalten kümmern. 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 dem 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 der Abschnitt / das Element fest auf dem Standpunkt des Besuchers bleibt. Wenn der Benutzer durch die Seite blättert, 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 ist es eine gute Idee, relative Einheiten zu verwenden, da dadurch das reaktionsschnelle Design funktionaler wird, wenn es um unterschiedliche Bildschirmgrößen geht.

Die relative Einheit passt sich an die relative Breite und Höhe des Bildschirms an, sodass sich die Größe der Elemente oder Abschnitte ändern kann und das Design besser reagiert. Wenn Sie sich für die Verwendung von Pixeln entscheiden, müssen Sie mehrere reaktionsfähige Abschnitte für unterschiedliche Bildschirmgrößen erstellen.

Steuern Sie die Tiefe jedes Elements mit dem Z-Index

Wenn Sie für die Widgets die "absolute" oder "feste" Positionierung verwenden, gibt es viele Situationen, in denen sich zwei oder mehr Widgets überlappen können, dh sie sind "übereinander" gestapelt. 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 zur doppelten Funktionalität

Wenn Sie mit der rechten Maustaste ein Element mit benutzerdefinierter Positionierung duplizieren, hat der Rechtsklick möglicherweise nicht funktioniert.

Aber siehe da. Das ist nicht wahr. Die Duplikatfunktion hat einwandfrei funktioniert und das Element dupliziert. Da jedes Element genau dieselbe benutzerdefinierte Position hat, ist das duplizierte Element genau über dem anderen Element gestapelt (was den Eindruck erweckt, dass kein Duplikat erstellt wurde).

In einfachen Worten, wenn Sie eine Spalte erfolgreich erstellen, 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 mit der Rechtsklick-Option nicht. Sie können jedoch die Duplikatfunktion verwenden, um die Einschränkung zu überwinden und die Spalte zu kopieren.

Ziehen Sie das obere Element ein wenig, um das andere anzuzeigen. Beide Elemente sind sehr vorhanden. Wenn Sie eine Spalte duplizieren, wird sie über der alten gestapelt. Sie können verwirrt werden. Aber keine Sorge, Sie können es einfach ziehen und dann in Ihrem Webseiten-Design verwenden.

Offsets

Es gibt Fälle, in denen Sie Offsets für den Inhalt Ihrer Webseite festlegen müssen. Mit Elementor können Sie den Versatz einfach einstellen. Wenn Sie also einen Versatz von 500 Pixel von links festlegen, bleibt basierend auf Ihrer Eingabe Platz um den Inhalt herum. In ähnlicher Weise können Sie auch den Versatz auf der rechten Seite einstellen. Es wird empfohlen, sowohl den linken als auch den rechten Versatz auf einen ähnlichen Wert einzustellen, da der Inhalt auf dem Bildschirm richtig ausgerichtet wird.

Es gibt Fälle, in denen Sie Offsets für den Inhalt Ihrer Webseite festlegen müssen. Mit Elementor können Sie den Versatz einfach einstellen. Wenn Sie also einen Versatz von 500 Pixel von links festlegen, bleibt basierend auf Ihrer Eingabe Platz um den Inhalt herum. In ähnlicher Weise können Sie auch den Versatz auf der rechten Seite einstellen. Es wird empfohlen, sowohl den linken als auch den rechten Versatz auf einen ähnlichen Wert einzustellen, da der Inhalt auf dem Bildschirm richtig ausgerichtet wird.

Die goldene Regel

Verwenden Sie für ein besseres Reaktionsdesign relative Einheiten. Dies liegt daran, dass die absolute Positionierung schwierig sein kann, wenn auf die Website von einer anderen Plattform aus zugegriffen wird. Die Verwendung relativer Einheiten zum Entwerfen Ihrer Abschnitte führt zu einem reaktionsschnelleren Entwurf. Die Änderung der Breite kann mit Hilfe relativer Einheiten perfekt gehandhabt werden. Mit "relativ" meinen wir das Variieren von Einheiten wie Prozent oder Ansichtsbreite (VW), anstatt Einheiten wie Pixel zu fixieren.

Fazit

Elementor ist ein super benutzerfreundlicher Website-Builder. Manchmal kann es zu Problemen bei der Anzeige von Websites kommen, wenn auf die Website von einem Mobiltelefon oder Tablet aus zugegriffen wird. Mithilfe der Ausrichtung von Abschnitten und Spalten können Sie Ihre Websites ganz einfach perfektionieren.