Advanced Two-Column Layout (70/30 split): Boxed Width Content and Stretched Image Layout

David Denedo

David Denedo

Published on .

Table of Content

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).
Activate the Elementor container feature

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.

    Picking the two column container template
    screenshot of elementor navigation panel showing the parent container with two child containers and widgets in those 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)
      Parent container settings panel where the content width is set to fullwidth
      Parent container with class name of dd-mixed-layout
      Add the CSS Classes

      Adding Data-Attribute

      Depending on which column takes up the higher percentage of the content width, add a data attribute of “data-col-higher” with the value “stretch” or “boxed”.

      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.

      add data attribute to the container
      Add data attribute when the image column has the bigger ratio
      Add data attribute of data-col-higher | boxed
      Add data attribute when the boxed-column has the bigger ratio
      Adjust the value for the gap

      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.

      set justify content to start
      Set justify-content to start if the stretched image is on the left
      set justify content to end
      Set justify-content to end if the stretched image is on the right

      Summary of parent container properties

      Style PropertyValue
      Content WidthFull Width
      DirectionRow
      Justify ContentStart or End
      Column Gapvar(--dd-boxed-gap)
      Padding0
      CSS Classesdd-mixed-layout
      Attributedd-col-higher | stretch
      or
      dd-col-higher | boxed

      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)

      width value for boxed container

      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.

      width value for stretched container

      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 --*/
      }

      5 comments

      • hi,
        the image is on right and text is on left. how to set margin.
        i talking about your latest video 11/13/2023.
        plz reply me soon as possible.
        thank you

        • Hi Dilshi

          if the text is on the left, then you can apply a right negative margin on the text element. Remember to add the same value to the width of the text container.

          • Hello David, thank you very much for your tutorial. It’s just what I needed.

            I have the same problem as the previous comment: My text goes to the left and my image to the right.

            But I don’t understand what you’re saying about “apply a right negative margin on the text element”. Could you write what exactly you mean? (My programming level is limited. Thank you!)

            • Hi Eva

              Could you share a screenshot of the layout that you want to achieve with me via email – helpdesk [at] daveden [dot] co [dot] uk? I am planning on recreating a simpler and improved video that everyone should be able to follow along with easily.

      Leave your comment