2026年11月14日
This article is a localized edition of the Japanese original. Read the Japanese original
When you want to change a layout in Elementor, there is more than one place to look. Whether the header and footer appear is set per page with Page Layout, the default content width and spacing are set site-wide in Site Settings > Layout, and how each section is arranged is set in the container's Layout tab. This article walks through what each of these three places does and how to fine-tune layouts for phones and tablets.
Setting names are given as they appear in English, as confirmed in Elementor's official help and source code (as of October 2026). If your dashboard uses another language, you will see the translated labels.
The three levels of layout settings
| Where you set it | What it affects | Main settings |
|---|---|---|
| Page Layout in Page Settings | That page only | Whether to show the header, footer and sidebar |
| Site Settings > Layout | Site-wide defaults | Content Width, Gaps, Default Page Layout, Breakpoints |
| A container's Layout tab | That container only | Boxed / Full Width, width, direction, spacing |
If you are unsure where to make a change, think of it this way: set the site-wide defaults in Site Settings, and override only the exceptions at the page or container level.
Per-page layout (Page Layout)
Opening the settings
- Open the page in Elementor (for example, with "Edit with Elementor" in the Pages list).
- Click the page settings icon in the top bar. The "Page Settings" panel opens on the left.
- In the "Settings" tab, choose an option from the Page Layout dropdown.
- Save with "Publish" or "Update".
The four options
| Option | What it shows | Good for |
|---|---|---|
| Default | Follows "Default Page Layout" in Site Settings | Regular pages |
| Theme | Uses the active theme's template | Pages that should match the theme design |
| Elementor Canvas | Shows only the content built in Elementor, with no header or footer | Landing pages, maintenance notices |
| Elementor Full Width | Keeps the theme's header and footer and uses the full screen width between them | Home pages, service pages |
Elementor Canvas and Elementor Full Width are registered as WordPress page templates, so choosing them from the "Template" setting in the Block editor gives the same result.
Hiding the title with “Hide Title”
In the same "Settings" tab, setting Hide Title to "Yes" hides the page title that the theme outputs. It works by hiding the elements that match the selector in "Page Title Selector" in Site Settings (default: h1.entry-title). Some themes output the title with a different tag, so if Hide Title has no effect, use your browser's developer tools to find the title's tag and class, and update Page Title Selector to match.
Site-wide defaults (Site Settings > Layout)
Opening the settings
- In the Elementor editor, click the Elementor logo in the top bar.
- Choose "Site Settings" from the menu.
- Click "Layout" in the panel.
- After making changes, click "Save Changes".
Main settings
| Setting | What it does |
|---|---|
| Content Width | The default width of Boxed (centered) containers and sections. Default: 1140px |
| Container Padding | The default space between a container's edge and its contents |
| Gaps | The default space between elements (shown as "Widgets Space" with the legacy section layout). Default: 20px |
| Page Title Selector | The selector that Hide Title hides. Default: h1.entry-title |
| Stretched Section Fit To | The element whose width a stretched section uses as its reference |
| Default Page Layout | The layout used by pages whose Page Layout is "Default" |
If you build every page as full width with a header and footer, setting Default Page Layout to "Elementor Full Width" saves you from switching it on each page.
Changing Content Width changes the width of every container set to Boxed. On a live site, check how your main pages look before you save.
Per-container layout (Layout tab)
In current versions of Elementor, pages are built by combining containers. When you select a container, you can set the following in the "Layout" tab of the left panel.
| Setting | Options / what it does |
|---|---|
| Container Layout | Flexbox / Grid |
| Content Width | Boxed (centered to the Content Width in Site Settings) / Full Width (fills the parent element) |
| Width | The container's width |
| Min Height | The minimum height |
| Direction | Row - horizontal / Column - vertical, plus a reversed version of each |
| Justify Content | Alignment along the direction (Start, Center, End, Space Between, and more) |
| Align Items | Alignment across the direction (Start, Center, End, Stretch) |
| Gaps | The spacing between elements in this container |
| Wrap | Whether elements wrap to the next line (No Wrap / Wrap) |
Under "Additional Options" you will find Overflow, which controls content that spills outside the container, and HTML Tag, which sets the tag that is output (div, header, footer, main, article, section, aside, nav, and others). Choosing tags that fit the content, such as main for the main part of the page and aside for a related-posts box, makes the document structure clearer.
Common combinations
- Full-width background with centered text: Set the outer container to Full Width and give it a background color or image, then put a Boxed container inside it for the text.
- Three cards side by side: Set Direction to Row - horizontal and Wrap to Wrap, and make each card about 33% wide. On mobile, follow the steps below to make each card fill the screen width.
Adjusting for phones and tablets
Some Elementor settings can take different values per device. Switch the device in the top bar first, then change a value, and it is saved for that device.
Two breakpoints are active by default.
| Breakpoint | Screen widths it applies to |
|---|---|
| Mobile Portrait | 767px and below |
| Tablet Portrait | 1024px and below |
You can change the breakpoint values under "Breakpoints" in the Layout section of Site Settings.
Here is how to adjust a layout:
- Switch the device to "Mobile" in the top bar.
- Select a horizontal container and change Direction to Column - vertical.
- Make each element fill the screen width (set the Width unit to % and use the maximum value), and reduce Gaps.
- Switch to Tablet and check for layout problems in the same way.
Values set for Desktop carry over to Tablet and Mobile unless you change them for those devices. Even if the preview looks fine, check the page on a real phone.
Things to watch out for
- Theme settings can take priority: If space remains around the content even with Elementor Full Width, check whether the theme has its own container width or sidebar settings. A theme's layout options can affect how Elementor content is displayed.
- Canvas removes the theme's header and menu: Pages set to Elementor Canvas do not show your site navigation. Add links or buttons on the page if visitors need to reach other pages.
- Site Settings changes affect every page: Changing Content Width or Gaps also changes how existing pages look. Make a backup first, and check your main pages before saving.
- Decide Site Settings before building pages: If you change the defaults later, containers you overrode individually will differ from those you did not. Settling the site-wide width and spacing before producing many pages saves rework.
Summary
- Elementor layout is controlled in three places: Page Layout in Page Settings, Layout in Site Settings, and a container's Layout tab
- Page Layout has four options: Default, Theme, Elementor Canvas and Elementor Full Width. Canvas has no header or footer; Full Width is full width with the header and footer
- Content Width (default 1140px), Gaps and Default Page Layout are managed site-wide in Site Settings
- Containers are arranged with Boxed / Full Width plus Direction, Justify Content, Align Items and Wrap
- By switching devices and changing values, you can adjust layouts for phones and tablets separately
Related articles
- How to restore an earlier version with Elementor revisions (history)
- How to fix Elementor errors (cannot save, editor will not load, broken design)
Questions about WordPress? The publisher of this site is based in Japan and replies in Japanese. Contact (Japanese)