Priority support
Help Center > Editor V4 > Elements > Flexbox element

Flexbox element

Laatste update: september 2, 2025

Deze post is vertaald met behulp van automatische vertaling, waardoor er kleine onnauwkeurigheden of verschillen in formulering ten opzichte van het origineel kunnen zijn. Sorry voor eventuele foutjes of onduidelijkheden, neem gerust contact met ons op als wij iets voor je mogen verhelderen.

Het element toevoegen en verwijderen

Om een widget te openen en te gebruiken:

  1. Klik op + in de Elementor Editor.
    Alle beschikbare elementen worden weergegeven.

  2. Klik of sleep het element naar het canvas. Voor meer informatie, zie Elementen aan een pagina toevoegen.

Om de widget te verwijderen:

  1. Selecteer het element op het canvas door erop te klikken.
  2. Druk op de delete-toets op je toetsenbord. Voor meer informatie, zie Elementen van een pagina verwijderen.

Wat is een flexbox element?

Een Flexbox is een container die is ontworpen om andere elementen te bevatten, inclusief andere Flexboxes. Flexboxes geven je veel flexibiliteit bij het ontwerpen en arrangeren van de inhoud binnenin. Dit maakt ze een geweldig hulpmiddel voor complexe, pixel-perfecte ontwerpen.

Bekijk alle beschikbare opties met de Rating widget.

Veelvoorkomend gebruiksscenario

Ellis ontwerpt een homepage voor een salon. Ze willen een opvallende Hero-sectie om de aandacht van bezoekers te trekken en hen de mogelijkheid te geven om direct vanaf de homepage een afspraak te boeken.

Bekijk een video die de widget in actie demonstreert.

Een flexbox element toevoegen: stap-voor-stap

  1. Voeg een Flexbox element toe aan het canvas. Voor details, zie Elementen toevoegen aan een pagina.

  2. Klik in het paneel op het Stijl tabblad.

  3. Open de Layout sectie.

  4. Stel de richting in op Rij.

  5. Voeg twee onderliggende Flexboxes toe binnen de eerste Flexbox.
    De twee onderliggende containers moeten naast elkaar staan.

  6. Selecteer de container aan de linkerkant door erop te klikken en klik op het Stijl tabblad.

  7. Open de Layout sectie en stel de richting in op Kolom.

  8. Open de Grootte sectie en stel de Min Hoogte in op 600 PX en de Min Breedte op 60%. Voor details, zie Stijl tabblad – Grootte.

  9. Open de Achtergrond sectie en voeg een achtergrondkleur toe. Voor details, zie Stijl tabblad – Achtergrond.
  10. Voeg twee Kop elementen en een knop toe.

  11. Voeg inhoud en styling toe aan de Kop en Knop elementen. Zie Kop element en Knop element voor details. Voor details over positionering, zie Stijl tabblad – Afstand, Stijl tabblad – Grootte en Stijl tabblad – Positie.
  12. Selecteer de Flexbox aan de rechterkant.
  13. Klik op het Stijl tabblad.
  14. Open de Layout sectie.
  15. Stel de hoogte in op 600 PX en de breedte op 40%.
  16. Open de Achtergrond sectie.

  17. Voeg een afbeelding toe als achtergrond. Voor details, zie Stijl tabblad – Achtergrond.

Instellingen voor het flexbox element

Je kunt je widgets aanpassen met content, stijl en andere geavanceerde parameters, wat je veel flexibiliteit biedt om ze aan te passen aan je behoeften. Klik op de tabbladen hieronder om alle instellingen te zien die beschikbaar zijn voor deze widget.

Kies de HTML tag voor je flexbox. Het correct taggen van je element helpt zoekmachines je site te begrijpen en kan helpen met SEO.

Keuzes zijn onder andere:

  • Div
  • Header
  • Section
  • Article
  • Aside
  • Footer.

Klik op het plusteken om een link in te voeren. Bezoekers die op het Flexbox bestand klikken openen de link.

Note
Als je een link toevoegt aan een Flexbox, kun je geen van de elementen in de Flexbox klikbaar maken.

Openen in een nieuw tabblad: Als de Flexbox een link bevat, schakel dit in als je wilt dat de link in een nieuw tabblad opent.

Zie de individuele artikelen over Stijlopties:

Op deze pagina

Deel dit artikel

Hosted with