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?

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.

Ahmad

Kommentare ansehen

  • Wo finden Sie diese Optionen? Sie existieren nicht. Ist das für Premium Elementor? Wenn ja, sollten Sie es in Ihrem Artikel erwähnen, damit die Leute nicht ihre Zeit damit verschwenden, es durchzulesen.

  • Hallo,

    Estoy-Maquetando mit Elementor Pro.
    Denken Sie nicht an die Banner, eines an der Rückseite oder ein anderes an der Rückseite des Bildschirms. Für ihn hat er Folgendes erstellt: - Ein Abschnitt für jedes Banner.
    - Ein mit einem Rahmen umhüllter Rahmen, so dass er ein Bild hinterlegen konnte.

    Eine Person muss an den Rand des Bildschirms angeschlossen werden (Ränder sind 0 imagino). Algun consejo? Vielen Dank!

  • Hallo, das erste, was ich mir ansehen würde, wäre die im ersten Teil dieses Beitrags beschriebene Einstellung für die vertikale Ausrichtung der Spalte.
    Prost,

  • Buongiorno, tutto chiaro, grazie!
    Mein Aufenthaltsort könnte es sein, dass ich drei Rechte (mit drei Impulsen unter einem anderen Punkt) in die erste Reihe einbaue. Cerco di spiegarmi meglio: Vorrei teilte einen Abschnitt in die richtige Spalte.
    Im Falle eines Fotos mit einem Cover und einer Colonna einer Sinistra mit kontinuierlichem Puls (unsopra l'altro), äquidistanter und zentraler Position der Kolonnade der Sinistra, dem Rimandano mit dem Modell des Smartphones entsprechend seiner Qualität und Verfügbarkeitsabdeckung im Foto. Ich bin mir sicher, dass wir nicht wissen, was ich will, wenn ich etwas brauche.
    Also keine Aperta a tutti, ich schlage
    Grazie vor

  • Scusate, ho appena capito come fare (l'ho capito per errore). Erschrecke die Störung und grazie lo stesso

    • Hallo, OK, großartig, das ist sicher möglich. Sie können den Inhalt in jeder Spalte sogar vertikal zentrieren

  • Es liegt ein Problem mit dem Absatz vor, der nicht gelöst werden kann. Der Inhalt ist wie folgt: Bild, Titel und Text. Nein, ich habe mich nicht darum gekümmert (es war nur eine Kolumne, aber es war so, als ob ich mit der Arbeit beschäftigt war oder mich nicht mehr darum kümmern konnte, noch einmal den Text zu lesen) Ich habe es nicht geschafft und wollte nicht mehr. Es wurde alles von tamaño móvil bearbeitet, es ist also eine schnelle Lektüre! Alguien weiß, was das bedeutet? Er hat versucht, seinen Job zu machen und articulo und parece que nada funciona 🤗

    • Hallo, ich denke, Sie müssen zunächst alle Ihre Ausrichtungen in Abschnitten, dann in Spalten und dann in Inhaltsblöcken überprüfen. Es ist auch möglich, dass das CSS Ihres Themes bei dieser Ausrichtung eine Rolle spielt.

  • Bonjour!
    Sie erreichen die Cheveux mit dem Auto, je nachdem, ob Sie 3 Doppelpunkte in der Horizontalen ausgerichtet sind.
    Wenn Sie das Design mit der perfekten Ausrichtung umgeben, können Sie die Modifikationen, die Säulen mit nachgerüsteten Imbriquées und die unterschiedlichen Taillenlinien (Größere und Höhere) auf der Spurweite des Krans visualisieren. Ihre Wahl liegt in der Form des Körpers und der Form des Aligners. Kommentar fair?

  • Hallo, ich habe das Element installiert, aber sobald ich einen neuen Abschnitt vereinbart habe, vergleiche ich nicht die Optionen für den horizontalen und den vertikalen Absatz.
    Wie haben Sie ein Complemento Adicional installiert? Gracias

  • Hola, ich habe die Elementor-Version und es gibt keine Möglichkeit, welche Optionen angezeigt werden, was könnte das sein?

  • Hallo,

    Ich habe mehrere Widgets in der Fußzeile. Das ist immer eine Schlagzeile, ein kühner Punkt. So muss ich ungeschriebene Texte nicht in ein Feld (h4 und p) schreiben, es sei denn, ich schreibe das in 2 Abschnitten. Wie finde ich jetzt die nächsten WordPress-Bereiche? Es bleibt noch Platz für die Überschrift und den Text.

    Ich danke Ihnen für Ihre Hilfe

    • Hallo, es gibt mehrere Optionen, um den Abstand zwischen Texten zu moderieren: Es könnte sich um Abschnitts-, Spalten- oder Widget-Ränder oder -Abstände handeln, ODER es könnte eine Schriftartoption wie die Zeilenhöhe sein.

kürzliche Posts

So verwenden Sie Kopf- und Fußzeilen mit Elementor

Kopf- und Fußzeilen einer Website sind wesentliche Elemente. In den meisten Fällen dient der Header der Navigation …

6. Januar 2022

WordPress-Theme-Vergleich: Astra vs OceanWP

Zwei der beliebtesten WordPress-Themes auf dem Markt sind Astra und OceanWP. Fachmann…

2. Januar 2022

Vergleich des WordPress-News-Themes: Zeitung vs. Astra

Um eine hervorragende Nachrichten-Website zu erstellen, müssen Sie kein Webdesigner werden. Wir…

25. Oktober 2021

Erstellen Sie eine nachrichtenbezogene Website mit dem Zeitungsthema

Das Newspaper-Theme ist eines der bedeutendsten WordPress-Themes, das von tagDiv entworfen wurde, einem…

18. Oktober 2021

So erstellen Sie einen E-Commerce mit dem Avada WooCommerce Builder

Wenn es um die Einrichtung eines Online-Shops geht, ist WooCommerce das plugin -in der Wahl. Es…

4. Oktober 2021

So verwenden Sie Sticky-Header- und Scrolling-Effekte mit Elementor

Ein Header ist im Allgemeinen das Erste, was eine Person sieht, wenn sie Ihre Website besucht.

21. September 2021