> For the complete documentation index, see [llms.txt](https://hifunnel.gitbook.io/hifunnel-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hifunnel.gitbook.io/hifunnel-help-center/documentation/website/page/customizing-section-layout-settings.md).

# Customize Section Layout Settings

Learn how to customize section layout settings, padding, margins, container widths, and alignment for desktop and mobile devices in Hifunnel.

Section Layout Settings control content positioning, spacing (padding and margins), container width, and column alignment inside each Section (Block) on your page.

Using Hifunnel's Page Builder, customizing layout settings ensures your pages look stunning and render responsively across desktop, tablet, and mobile screens.

***

## Key Layout Options

### Section Padding & Spacing

Padding controls the inner vertical and horizontal space inside the Section (top, bottom, left, right). Adjusting padding allows you to create generous white space for a premium look or tighten spacing for compact blocks.

### Container Width (Boxed vs. Full Width)

Choose how content fills the screen width:

* **Boxed / Container**: Restricts content width to a maximum pixel width (e.g., 1200px), centering content neatly on large desktop monitors.
* **Full Width**: Expands the section edge-to-edge across the entire browser viewport width.

### Vertical & Horizontal Column Alignment

Align columns and widgets inside a Section:

* **Vertical Alignment**: Top, Center, Bottom, or Equal Height columns.
* **Horizontal Alignment**: Left, Center, Right, or Space Between columns.

### Responsive Layout & Device Visibility (Desktop vs. Mobile)

Customize distinct padding or visibility settings for Mobile and Desktop views:

* **Hide on Desktop**: Makes the section visible only on mobile devices.
* **Hide on Mobile**: Hides heavy desktop elements on mobile screens for faster mobile loading.

***

## How to Customize Section Layout Settings

{% stepper %}
{% step %}

#### Step 1: Select Section Layout Settings

In the Page Builder canvas, hover over the Section you wish to edit and click **Block Settings** (or double-click the Section border).
{% endstep %}

{% step %}

#### Step 2: Open Layout Tab

Select the **Layout** or **Spacing** tab in the editing panel.
{% endstep %}

{% step %}

#### Step 3: Adjust Padding & Margins

Enter custom pixel values for **Top Padding**, **Bottom Padding**, **Left Padding**, and **Right Padding** (or use the visual spacing slider).
{% endstep %}

{% step %}

#### Step 4: Configure Container & Alignment

Toggle between **Full Width** and **Boxed**, and select your desired Vertical/Horizontal column alignment.
{% endstep %}

{% step %}

#### Step 5: Preview Mobile Layout

Switch to **Mobile View** mode in the builder header to verify and fine-tune mobile-specific padding or visibility toggles.
{% endstep %}

{% step %}

#### Step 6: Save Changes

Click **Save** in the top toolbar to apply your layout adjustments.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Pro Tip - Creating Mobile-Optimized Sections:** If a complex multi-column section looks crowded on mobile phones, duplicate the section, select **Hide on Desktop** for the mobile duplicate, and simplify its column structure specifically for mobile users!
{% endhint %}