Help Center > Editor V4 > Elements > Flexbox-Element

Flexbox-Element

Zuletzt aktualisiert: September 3, 2025

Dieser Beitrag wurde mithilfe maschineller Übersetzung übersetzt, und daher kann es zu geringfügigen Ungenauigkeiten oder Unterschieden in der Formulierung im Vergleich zum Original kommen. Wir entschuldigen uns für etwaige Unannehmlichkeiten. Bitte kontaktieren Sie uns, falls Sie eine Klärung benötigen.

Element hinzufügen und löschen

So greifen Sie auf ein Widget zu und verwenden es:

  1. Klicken Sie im Elementor Editor auf +.
    Alle verfügbaren Elemente werden angezeigt.

  2. Klicken oder ziehen Sie das Element auf die Arbeitsfläche. Weitere Informationen finden Sie unter Elemente zu einer Seite hinzufügen.

So löschen Sie das Widget:

  1. Wählen Sie das Element auf der Arbeitsfläche aus, indem Sie darauf klicken.
  2. Drücken Sie die Entf-Taste auf Ihrer Tastatur. Weitere Informationen finden Sie unter Elemente von einer Seite löschen.

Was ist ein Flexbox-Element?

Eine Flexbox ist ein Container, der dazu dient, andere Elemente, einschließlich weiterer Flexboxen, aufzunehmen. Flexboxen bieten Ihnen große Flexibilität bei der Gestaltung und Anordnung des Inhalts. Das macht sie zu einem großartigen Werkzeug für komplexe, pixelgenaue Designs.

Sehen Sie alle verfügbaren Optionen des Bewertungs-Widgets.

Häufiger Anwendungsfall

Ellis entwirft eine Homepage für einen Salon. Sie möchten einen auffälligen Hero-Bereich, um die Aufmerksamkeit der Besucher zu erregen und ihnen zu ermöglichen, direkt von der Homepage aus einen Termin zu buchen.

Sehen Sie ein Video, das das Widget in Aktion zeigt.

Flexbox-Element hinzufügen: Schritt für Schritt

  1. Fügen Sie ein Flexbox-Element zur Arbeitsfläche hinzu. Details finden Sie unter Elemente zu einer Seite hinzufügen.

  2. Klicken Sie im Bedienfeld auf die Style-Registerkarte.

  3. Öffnen Sie den Layout-Abschnitt.

  4. Stellen Sie die Ausrichtung auf Reihe ein.

  5. Fügen Sie zwei untergeordnete Flexboxen in die erste Flexbox ein.
    Die beiden untergeordneten Container sollten nebeneinander liegen.

  6. Wählen Sie den linken Container durch Anklicken aus und klicken Sie auf die Style-Registerkarte.

  7. Öffnen Sie den Bereich Layout und stellen Sie die Ausrichtung auf Spalte ein.

  8. Öffnen Sie den Bereich Größe und stellen Sie die Mindest-Höhe auf 600 PX und die Mindest-Breite auf 60 %. Details finden Sie unter Style-Registerkarte – Größe.

  9. Öffnen Sie den Bereich Hintergrund und fügen Sie eine Hintergrundfarbe hinzu. Details finden Sie unter Style-Registerkarte – Hintergrund.
  10. Fügen Sie zwei Überschrift-Elemente und einen Button hinzu.

  11. Fügen Sie Inhalt und Styling zu den Überschrift- und Button-Elementen hinzu. Details finden Sie unter Überschrift-Element und Button-Element. Details zur Positionierung finden Sie unter Style-Registerkarte – Abstand, Style-Registerkarte – Größe und Style-Registerkarte – Position.
  12. Wählen Sie die Flexbox auf der rechten Seite aus.
  13. Klicken Sie auf die Style-Registerkarte.
  14. Öffnen Sie den Bereich Layout.
  15. Stellen Sie die Höhe auf 600 PX und die Breite auf 40 % ein.
  16. Öffnen Sie den Bereich Hintergrund.

  17. Fügen Sie ein Bild als Hintergrund hinzu. Details finden Sie unter Style-Registerkarte – Hintergrund.

Einstellungen für das Flexbox-Element

Sie können Ihre Widgets mithilfe von Inhalten, Stilen und anderen erweiterten Parametern anpassen, was Ihnen große Flexibilität bei der Anpassung an Ihre Bedürfnisse bietet. Klicken Sie auf die Registerkarten unten, um alle für dieses Widget verfügbaren Einstellungen anzuzeigen.

Wählen Sie den HTML-Tag für Ihre Flexbox. Das korrekte Tagging Ihres Elements hilft Suchmaschinen, Ihre Website zu verstehen und kann das SEO verbessern.

Auswahlmöglichkeiten sind:

  • Div
  • Header
  • Sektion
  • Artikel
  • Aside
  • Footer.

Klicken Sie auf das Pluszeichen, um einen Link einzugeben. Besucher, die auf die Flexbox klicken, öffnen den Link.

Note
Wenn Sie einer Flexbox einen Link hinzufügen, können Sie keines der Elemente in der Flexbox anklickbar machen.

In neuem Tab öffnen: Wenn die Flexbox einen Link enthält, aktivieren Sie diese Option, wenn der Link in einem neuen Tab geöffnet werden soll.

Siehe die einzelnen Artikel zu den Stiloptionen:

Auf dieser Seite

Diesen Artikel teilen

Hosted with