Add and delete the element
Add the element to the canvas
To access and use a widget:
In Elementor Editor, click +.
All available elements are displayed.Click or drag the element to the canvas. For more information, see Add elements to a page.
Delete the element
To delete the widget:
- On the canvas, select the element by clicking it.
- Press the delete key on your keyboard. For more information, see Delete elements from a page.
What is Flexbox element?
A Flexbox is a container designed to hold other elements, including other Flexboxes. Flexboxes allow you great flexibility in designing and arranging the content inside. This makes them a great tool for complex, pixel-perfect designs.
Common use case
Ellis is designing a home page for a salon. They want an eye-catching Hero section to catch visitors’ attention and allow them to book an appointment right from the home page.
See a video demonstrating the widget in action.
Add a Flexbox element: Step-by-step
- Add a Flexbox element to the canvas. For details, see Add elements to a page.
- In the panel, click the Style tab.
- Open the Layout section.
- Set the direction to Row.
- Add two child Flexboxes inside the first Flexbox.
The two child containers should be side by side.
- Select the container on the left by clicking it and click the Style tab.
- Open the Layout section and set the direction to Column.
- Open the Size section and set the Min Height to 600 PX and the Min Width to 60%. For details, see Style tab – Size.
- Open the Background section and add a background color. For details, see Style tab – Background.
- Add two Heading elements and a button.
- Add content and styling to the Heading and Button elements. See Heading element and Button element for details. For details on positioning, see Style tab – Spacing, Style tab – Size and Style tab – Position.
- Select the Flexbox on the right.
- Click the Style tab.
- Open the Layout section.
- Set the Height to 600 PX and the Width to 40%.
- Open the Background section.
- Add an image as the background. For details, see Style tab – Background.
Settings for the Flexbox Element
You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.
HTML tag
Choose the HTML tag for your flexbox. Tagging your element correctly helps search engines understand your site and can help SEO.
Choices include:
- Div
- Header
- Section
- Article
- Aside
- Footer.
Link
Click the plus sign to enter a link. Visitors clicking the Flexbox file will open the link.
Open in a new tab: If the Flexbox contains a link, toggle on if you want the link to open in a new tab.
Style settings
See the individual articles on Style options:
