Platinum Support

Div Block element

Last Update: May 27, 2025

The XXXX widget is an experimental feature that XXX

In order to use XXX widget, you need to activate it. For details, see activating Elementor features. 

Add and delete the element

Menu widget button Div Block element 1

To access and use a element:

  1. In Elementor Editor, click +.
    All available elements are displayed.

  2. Click or drag the element to the canvas. For more information, see Add elements to a page.

To delete the widget:

  1. On the canvas, select the element by clicking it.
  2. Press the delete key on your keyboard. For more information, see Delete elements from a page.

What is the Div Block widget?

A Div Block is a generic container designed to hold other elements, including other Div Blocks. Div Blocks are similar to Flexbox containers, but are lighter and load faster. They are a great solution for simple designs.  

See all the options available with the Div Block.  

Common use case

Ellis is designing a home page for their new restaurant. They decide to use a simple, quick loading design for the hero section.

Example

3 Open form Fields Div Block element 3

Add a Div Block element - Step-by-step

  1. Add a Div Block to the canvas. For details, see Add elements to a page.
    1 Add the Div Block Div Block element 5
    The Div Block options appear in the panel.
    2 click the style tab Div Block element 7
  2. Click the Style tab. 
    3 opent he size field Div Block element 9
  3. Open the Size field.
    4 Set the size Div Block element 11
  4. Set the Div Block to
    1. Width: 1000 PX
    2. Height: 500 PX
      5 Open Background field Div Block element 13
  5. Open the Background section.
    6 the final results Div Block element 15
  6. Add a background image.
    For details, see Style tab – Background and Add a layered background.

Settings for the Div Block element

You can customize your elements using the General and Style tabs. These options offer you flexibility in tailoring elements to your needs. Click the tabs below to see all the settings available for this element.

image 20 Div Block element 17

Tag your Div Block according to the content inside. Tagging your block correctly helps search engines understand your site and can help SEO.  Choose among the following HTML tag:

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

Click the plus sign to enter a link. Visitors clicking the Div Block file will open the link. 

Note
If you add a link to a Div Block, you cannot make any of the elements in the Div Block clickable.

If you add a link the following option appears:

Open in a new tab: If the Div Block contains a link, toggle on if you want the link to open in a new tab.

image 16 Div Block element 19

View the individual articles on Style options:

On this page

Share this article