help center

Search
Close this search box.
On this page

Inner Section widget

Last Update: September 29, 2024
Note
The inner section widget is only available for sites using sections and rows for layout. If your site uses containers, they are not available or necessary. To learn more about using containers, check out the containers topic in our Help Center. To learn how to activate sections instead of containers, see Activate Elementor experimental features.

Add the widget

Inner Section Widget 1 Inner Section widget 1

To access and use a widget:

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

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

What is the Inner Section widget?

The Inner Section widget allows you to create nested sections within a section, enabling you to organize your page content more effectively and create complex layouts. You can add and customize various elements such as text, images, buttons, and other widgets inside each section to make your design the way you want.

Common use case

Maria is designing a product website and wants to capture visitors’ attention right from the homepage. Their strategy involves integrating key elements like product images, descriptions, and reviews into the hero section of the site.

To execute this, Maria opts for the Inner Section widget, leveraging its capability to segment the section into multiple columns. In one column, they showcase images of the product, while in another, they add its features and benefits. Additionally, Maria incorporates testimonials from satisfied customers and strategically places links to the brand’s social media profiles within one of the columns.

Inner section widget 7 Inner Section widget 3

Additional use cases

  • Creating a pricing table with different subscription plans.
  • Designing a portfolio section with thumbnails and project descriptions.
  • Building a team member section with photos, bios, and social media links.
  • Crafting a testimonial carousel with quotes and client photos.
  • Setting up a contact form alongside contact information and a map.

Add an Inner Section widget: Step-by-step

  1. Add the Inner Section widget to the canvas. For details, see Add elements to a page.
  2. By default, the inner section contains two columns.
    Inner section widget 12
  3. You can add or remove columns by right-clicking on the column handle icon Inner section widget 11.
    Note
    You can have up to a maximum of 10 columns.

    Inner section widget 14
 
Note
You can drag and drop the Inner Section widget to any column on your page, but it cannot be used within another Inner Section.

Actions you can perform with the Inner section widget

Make your inner section stay in a column when the sticky feature is enabled

You can create a customized layout where inner sections stay in the column while being sticky. To learn the process, follow these steps:

  1. In the Inner section, go to the Advanced tab.
    Inner section widget 10
  2. Under the Motion Effects section, in the Sticky field, select between Top or Bottom from the dropdown menu.

    Inner section widget 4
  3. Upon selecting Top or Bottom, an option labeled Stay in Column will appear. Toggle the Stay in Column option to Yes to make your inner section sticky behavior.

    Inner section widget 5

Settings for the Inner Section Widget

You can customize your inner sections using layout, 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.

Layout tab

The Layout tab provides options for controlling the structure and arrangement of the inner section.

Inner section widget 2 Inner Section widget 11

Allows you to specify the width of the inner section’s content area. You can choose between Boxed and Full Width layouts.

  • If you select Boxed, an additional option for Custom Width appears, enabling you to set a specific width for the content area.

Determines the spacing between columns within the inner section. You can choose from predefined options like Default, Narrow, No Gap, Extended, Wide,Wider, and Custom.

Offers options for defining the height of the inner section. Choices include Default, Fit to Screen, and Min Height, enabling you to control how much vertical space the inner section occupies.

Specifies the vertical alignment of the content within the inner section. Options include Default, Top, Middle, Bottom, Space Between, Space Around, and Space Evenly.

Determines how content within the inner section behaves if it exceeds the specified dimensions. Options include Default and Hidden, allowing you to control whether overflowing content is visible or hidden.

Allows you to choose the HTML tag used to wrap the inner section.

Inner section widget 15

The Structure options allow setting the layout or arrangement of columns within that section. 

The default options 50,50, 33,66, and 66,33 define the distribution of columns within the Inner Section widget. 

Each option represents a different layout where the total width of the section is divided into two columns, with each column occupying a specified proportion of the total width.

Style tab

The Style tab offers a wide range of options for customizing the appearance of the inner section.

Inner section widget 8

Set the background style for the inner section in both the normal and hover states. You can choose from various background types, such as solid color, gradient, image, or video, and customize the specific properties accordingly. For more details, see Create a Background.

Inner section widget 16

Lets you apply an overlay to the background of the inner section in both the normal and hover states. You can choose from various overlay types, adjust opacity, and blend mode to create the desired effect.

Inner section widget 13 Inner Section widget 16

Choose the border type for the inner section. For more details, see Border type.

Set the border radius to control corner roundness. For more details, check out Border radius tools.

Set to apply a box shadow. Learn more about shadows.

Inner section widget 9

Allows you to add decorative dividers at the top and bottom of the inner section. You can select from various shapes and customize properties like color, width, height, and flexibility to create visually appealing transitions between sections.

Options include various shapes like waves, curves, and zigzags.

Inner section widget 6

Customize the typography (font styles) of text within the inner section. You can adjust properties like heading color, text color, link color, link hover color, and text alignment.

Advanced tab

The Advanced tab provides options to control inner section position, adjust spacing, add custom code, and more.

Inner section widget 3

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!