Two-column layout with split widths (70/30) in Elementor

Introduction

In a previous tutorial, we explored creating a two-column layout, where one column was constrained to the boxed content area, and the other extended to the edge of the screen. While useful, that approach limited us to a 50/50 split.

In this tutorial, we’ll build upon that concept for more flexibility. We’ll create a layout that could be especially well-suited for industries like fashion, where breaking the typical design mold can be effective.

It was also a highly requested feature in the Elementor Global Community. See a demo here

How it works

We’ll start with a basic 50 / 50 layout and then adjust the column widths using Elementor’s Flexbox Container, custom units, and a bit of CSS.

Steps

Before you begin

• Install Updates: Make sure you have the latest versions of Elementor and Elementor Pro installed (minimum version 3.12). Staying updated ensures that you have the newest features and security patches.
• Activate Flexbox Feature: If not already enabled, activate the Flexbox Container feature in your Elementor settings (Elementor > Settings > Features).

Create a 50/50 flexbox layout

In your Elementor edit page, click the large plus icon and select the 50/50 flexbox layout option. This gives you a parent container with two equally sized child containers.

Method 1: Customising without extra CSS (No gap)

This approach doesn’t involve custom CSS, making it simpler for beginners. Remember, this method won’t allow for gaps between the columns.

1. Parent Container Properties
   • Content Width: Full Width
   • Width: 100%
   • Gap: 0;
   • Justify-content: ‘start’ or ‘end’, based on where you want the stretched-column positioned.
2. Boxed Child Container Properties
   • Content Width: Full Width
   • Width: Use this formula, replacing ‘1140px’ with your desired content width and ’40’ with your chosen percentage for the boxed column: calc(40% - max(0px, 100% - 1140px) / 2)
3. Stretched Child Container Properties
   • Width: The remaining percentage (e.g. if you chose 40% above, this would be 60%).

Bonus: Maintainability

To make things more maintainable, you can opt to include a CSS variable in your parent section and simply reference that variable. In the parent container, simply add this custom CSS:

selector{
--dd-content-width: 1140px;
--dd-boxed-pct: 40;
}

Then you can replace the width in the boxed container with calc((var(--dd-boxed-pct) * 1%) - max(0px, 100% - var(--dd-content-width)) / 2). The 60% in stretched container can be replaced with calc(100% - (var(--dd-boxed-pct) * 1%)).

Method 2: Advanced Version (allows gaps)

This method provides more control, including spacing between columns, but requires some additional steps.

1. Parent Container Properties
   • Content width: Full Width
   • Gap: var(--_dd-boxed-gap)
   • CSS Classes: dd-mixed-layout
   • Attribute: use either data-col-higher | 'stretch' (if the image column is wider) or data-col-higher | 'boxed' (if the content column is wider)
   • Justify Content: 'flex-start' (if the stretched image is on the left) or 'flex-end' (if on the right)

Adding Data-Attribute

For example, if you want the image to stretch from the edge of the screen up to 70% of the content area, go to the Advanced Tab for the parent container, add an attribute "data-col-higher|stretch", as shown in our example layout.

Set the appropriate justify-content flex property

Similar to our previous tutorial, adjust the justify-content property based on the placement of the “boxed-content” column. If the “boxed-content” column is on the left, we should set justify-content to “flex-end“. If it’s on the right, set justify-content to “flex-start“. This ensures that the content is properly aligned and displayed in the desired location.

Summary of parent container properties

Child Container Properties

Next, edit the width of the child containers.

Boxed-width Child Container

For the “boxed-content” container, use the custom unit selector (pencil icon) to set the width to “var(--dd-col--boxed)“

For the “stretched” container which has the image stretching to the edge of the screen, set the width to var(--dd-col--stretch) using the pencil icon and the padding to 0.

Custom CSS

The custom CSS is divided into two sections. The first section is the general CSS, which you can add to your site settings custom CSS or favourite code snippets plugin to be reused multiple times.

The second section includes the control portion of the CSS, which should be applied to each parent container and adjusted as required on an individual basis.

Site-wide CSS

.dd-mixed-layout {
    /*-- Default Values --*/
    --_dd-con-width: var(--dd-con-width, 1140px); /* default content width */
    --_dd-boxed-pct: var(--dd-boxed-pct, 40); /* % of content area that is boxed */
    --_dd-boxed-gap: var(--dd-boxed-gap, 20px); /* gap between child containers */
    /*-- Width Calculations --*/
    /* Boxed Column */
    --dd-calc-width--boxed: calc((var(--_dd-con-width) - var(--_dd-boxed-gap)) * (var(--_dd-boxed-pct) / 100));
    --dd-max-width--boxed: calc((100% - var(--_dd-boxed-gap)) * var(--_dd-boxed-pct) / 100);
    /* Stretched Column */
    --dd-calc-width--stretch: calc(((var(--_dd-con-width) - var(--_dd-boxed-gap)) * ((100 - var(--_dd-boxed-pct)) / 100)) + ((100% - var(--_dd-con-width)) / 2));
    --dd-max-width--stretch: calc((100% - var(--_dd-boxed-gap)) * (100 - var(--_dd-boxed-pct)) / 100);
    /* Computed Values */
    --dd-col--boxed: min(var(--dd-calc-width--boxed), var(--dd-max-width--boxed));
    --dd-col--stretch: max(var(--dd-calc-width--stretch), var(--dd-max-width--stretch));
}

.dd-mixed-layout[data-col-higher="boxed"] {
    --dd-col--stretch: max(var(--dd-calc-width--stretch), var(--dd-max-width--stretch));
}

.dd-mixed-layout[data-col-higher="stretch"] {
    --dd-col--stretch: min(var(--dd-calc-width--stretch), var(--dd-max-width--stretch));
}

Section-specific CSS

selector{
    /* --dd-con-width: 1140px;  */
    --dd-boxed-pct: 40; /*-- it should not contain any unit --*/
    --dd-boxed-gap: 20px; /*-- it MUST have a unit e.g. 0px --*/
}