Total Theme: Column Bleeding to left or right – Content stretch for BG and padding for content

You need to have two images in WBPBakery and still want to align the content in one column with the main stage Not possible at the moment. But this little CSS hack helps. You just add the according class to the row and set the columns, and you are good to go. Available classes are:

• extend-left
• extend-right

Update V2 in August 2024

I have optimized the original example from the discussion section for the total theme a little bit. Now it works with several more 2 column design layouts in the wpbakery editor. Also, it does not interfere with the frontend editor anymore. This works if you have a row BG and a column BG that extends above it. If you want two seperate BGs in the columns you need my „extended“ option below.

Right columns extending to the right, the left column has the original row background-color. The row itself just has a „stretch row“ option and the class „wpex-vc_row-bleed-right“ added to itself.

left columns extending to the left, the right column has the original row background-color. The row itself just has a „stretch row“ option and the class „wpex-vc_row-bleed-left“ added to itself.

Here is the necessary CSS:

/*USE ON "STRETCH ROW" put class to row use with "1/2 1/2" "1/3 2/3" or "2/3 1/3" actually put a row bg and a column bg that overlaps in extended section*/

@media (min-width: 768px) {
	
	
    body:not(.vc_editor) :is(.extend-left,.extend-right) {
        --vp-width-half: calc((100vw - var(--scrollbar-width, 0px)) / 2);
    }

	/* Extend Left Column 1/3*/
    body:not(.vc_editor) .extend-left > :is(.vc_vc_column,.vc_column_container.vc_col-sm-4):first-child {
		width: calc(33% + (var(--vp-width-half) - 50%)) !important;
	}
    /* Extend Left Column 1/2 */
    body:not(.vc_editor) .extend-left > :is(.vc_vc_column,.vc_column_container):first-child {
        /*padding: 0;*/
        margin-left: calc(-1 * (var(--vp-width-half) - 50%)) !important;
        width: calc(50% + (var(--vp-width-half) - 50%));
    }
    /* Extend Left Column 2/3*/
    body:not(.vc_editor) .extend-left > :is(.vc_vc_column,.vc_column_container.vc_col-sm-8):first-child {
        width: calc(66% + (var(--vp-width-half) - 50%)) !important;
    }
	
    /* Fix left Column Inner Padding*/
	body:not(.vc_editor) .extend-left > .vc_vc_column:first-child > .vc_column_container  > .vc_column-inner,
	body:not(.vc_editor) .extend-left > .vc_column_container:first-child  > .vc_column-inner {
		padding-left: calc(100vw / 2 - var(--wpex-container-width) / 2);
	}

	
	
	
	/* Bleed Right 1/3*/
    body:not(.vc_editor) .extend-right > :is(.vc_vc_column,.vc_column_container.vc_col-sm-4):last-child {
		width: calc(33% + (var(--vp-width-half) - 50%)) !important;
	}
    /* Bleed Right 1/2 
    .extend-right > :is(.vc_vc_column,.vc_column_container):last-child {
        padding: 0;
        margin-left: calc(-1 * (var(--vp-width-half) - 50%)) !important;
        width: calc(50% + (var(--vp-width-half) - 50%));
    }*/
	/* Bleed Right 1/2 */
    body:not(.vc_editor) .extend-right.wpex-cols-right > .vc_vc_column:first-child > .vc_column_container,
    body:not(.vc_editor) .extend-right:not(.wpex-cols-right) > .vc_vc_column:nth-child(2) > .vc_column_container,
    body:not(.vc_editor) .extend-right.wpex-cols-right > .vc_column_container:first-child,
    body:not(.vc_editor) .extend-right:not(.wpex-cols-right) > .vc_column_container:nth-child(2) {
        padding: 0 !important;
        margin-right: calc(-1 * (var(--vp-width-half) - 50%)) !important;
        width: calc(50% + (var(--vp-width-half) - 50%));
    }
    /* Bleed Right 2/3*/
    body:not(.vc_editor) .extend-right > :is(.vc_vc_column,.vc_column_container.vc_col-sm-8):last-child {
        width: calc(66% + (var(--vp-width-half) - 50%)) !important;
    }

    body:not(.vc_editor) .extend-right > .vc_vc_column:last-child > .vc_column_container  > .vc_column-inner,
    body:not(.vc_editor) .extend-right > .vc_column_container:last-child  > .vc_column-inner {
        padding-left: 0;
    }
    body:not(.vc_editor) .extend-right > .vc_vc_column:last-child > .vc_column_container  > .vc_column-inner,
    body:not(.vc_editor) .extend-right > .vc_column_container:last-child  > .vc_column-inner {
        padding-left: 0;
    }
	
}


/*On mobile fix full width cause or row coes not stretch fully*/
@media only screen and (max-width: 767px) { 
	.extend-right .vc_column_container:nth-child(2) {
		margin-left: -15px;
		margin-right: -15px;
		width: 105%;
	}
	.extend-left .vc_column_container:nth-child(1) {
		margin-left: -15px;
		margin-right: -15px;
		width: 105%;
	}
}

Import the two examples above with this code:

[vc_row full_width="stretch_row" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1723896901306{background-color: #f3f1f1 !important;background-position: 0 0 !important;background-repeat: repeat !important;}" el_class="mb-default wpex-vc_row-bleed-right" min_height="400px" wpex_bg_size="700px"][vc_column width="1/3" css=".vc_custom_1723898108692{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"][vc_column_text align="none" css=".vc_custom_1723889010799{margin-right: 50px !important;}" el_class="quote" width="200px"]„Astrologie ist ein Spiegel zur Selbsterkenntnis.“[/vc_column_text][vc_column_text css=".vc_custom_1723889025113{margin-right: 50px !important;}" el_class="mt-default-quarter" font_size=".8em"]Ingrid Regehr[/vc_column_text][/vc_column][vc_column width="2/3" css=".vc_custom_1723895899304{background-image: url(https://omega.enymserver.de/wp-content/uploads/2024/08/ingrid-regehr-start-banner-stand-1.jpg?id=93) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="right top" el_class="circle-left"][vc_raw_html css=""]JTNDZGl2JTIwY2xhc3MlM0QlMjJjaXJjbGUtdGhpbi1jZW50ZXIlMjIlM0UlM0MlMkZkaXYlM0U=[/vc_raw_html][/vc_column][/vc_row][vc_row full_width="stretch_row" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1723896901306{background-color: #f3f1f1 !important;background-position: 0 0 !important;background-repeat: repeat !important;}" el_class="mb-default wpex-vc_row-bleed-right" min_height="400px" wpex_bg_size="700px"][vc_column width="1/2" css=".vc_custom_1723898113407{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"][vc_column_text align="none" css=".vc_custom_1723889010799{margin-right: 50px !important;}" el_class="quote" width="200px"]„Astrologie ist ein Spiegel zur Selbsterkenntnis.“[/vc_column_text][vc_column_text css=".vc_custom_1723889025113{margin-right: 50px !important;}" el_class="mt-default-quarter" font_size=".8em"]Ingrid Regehr[/vc_column_text][/vc_column][vc_column width="1/2" css=".vc_custom_1723895899304{background-image: url(https://omega.enymserver.de/wp-content/uploads/2024/08/ingrid-regehr-start-banner-stand-1.jpg?id=93) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="right top" el_class="circle-left"][vc_raw_html css=""]JTNDZGl2JTIwY2xhc3MlM0QlMjJjaXJjbGUtdGhpbi1jZW50ZXIlMjIlM0UlM0MlMkZkaXYlM0U=[/vc_raw_html][/vc_column][/vc_row][vc_row full_width="stretch_row" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1723896901306{background-color: #f3f1f1 !important;background-position: 0 0 !important;background-repeat: repeat !important;}" el_class="mb-default wpex-vc_row-bleed-right" min_height="400px" wpex_bg_size="700px"][vc_column width="2/3" css=".vc_custom_1723898120607{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"][vc_column_text align="none" css=".vc_custom_1723889010799{margin-right: 50px !important;}" el_class="quote" width="200px"]„Astrologie ist ein Spiegel zur Selbsterkenntnis.“[/vc_column_text][vc_column_text css=".vc_custom_1723889025113{margin-right: 50px !important;}" el_class="mt-default-quarter" font_size=".8em"]Ingrid Regehr[/vc_column_text][/vc_column][vc_column width="1/3" css=".vc_custom_1723895899304{background-image: url(https://omega.enymserver.de/wp-content/uploads/2024/08/ingrid-regehr-start-banner-stand-1.jpg?id=93) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="right top" el_class="circle-left"][vc_raw_html css=""]JTNDZGl2JTIwY2xhc3MlM0QlMjJjaXJjbGUtdGhpbi1jZW50ZXIlMjIlM0UlM0MlMkZkaXYlM0U=[/vc_raw_html][/vc_column][/vc_row][vc_row full_width="stretch_row" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1723899056526{background-color: #f3f1f1 !important;background-position: 0 0 !important;background-repeat: repeat !important;}" el_class="mb-default wpex-vc_row-bleed-left" min_height="400px" wpex_bg_size="700px"][vc_column width="2/3" css=".vc_custom_1723899083901{background-image: url(https://omega.enymserver.de/wp-content/uploads/2024/08/ingrid-regehr-start-hg-beistand-seele-scaled.jpg?id=36) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="circle-right"][vc_raw_html css=""]JTNDZGl2JTIwY2xhc3MlM0QlMjJjaXJjbGUtdGhpbi1jZW50ZXIlMjIlM0UlM0MlMkZkaXYlM0U=[/vc_raw_html][/vc_column][vc_column width="1/3" css=".vc_custom_1723899071501{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="right top"][vc_column_text align="none" css=".vc_custom_1723889010799{margin-right: 50px !important;}" el_class="quote" width="200px"]„Astrologie ist ein Spiegel zur Selbsterkenntnis.“[/vc_column_text][vc_column_text css=".vc_custom_1723889025113{margin-right: 50px !important;}" el_class="mt-default-quarter" font_size=".8em"]Ingrid Regehr[/vc_column_text][/vc_column][/vc_row][vc_row full_width="stretch_row" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1723899056526{background-color: #f3f1f1 !important;background-position: 0 0 !important;background-repeat: repeat !important;}" el_class="mb-default wpex-vc_row-bleed-left" min_height="400px" wpex_bg_size="700px"][vc_column width="1/2" css=".vc_custom_1723899083901{background-image: url(https://omega.enymserver.de/wp-content/uploads/2024/08/ingrid-regehr-start-hg-beistand-seele-scaled.jpg?id=36) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="circle-right"][vc_raw_html css=""]JTNDZGl2JTIwY2xhc3MlM0QlMjJjaXJjbGUtdGhpbi1jZW50ZXIlMjIlM0UlM0MlMkZkaXYlM0U=[/vc_raw_html][/vc_column][vc_column width="1/2" css=".vc_custom_1723899071501{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="right top"][vc_column_text align="none" css=".vc_custom_1723889010799{margin-right: 50px !important;}" el_class="quote" width="200px"]„Astrologie ist ein Spiegel zur Selbsterkenntnis.“[/vc_column_text][vc_column_text css=".vc_custom_1723889025113{margin-right: 50px !important;}" el_class="mt-default-quarter" font_size=".8em"]Ingrid Regehr[/vc_column_text][/vc_column][/vc_row][vc_row full_width="stretch_row" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1723899056526{background-color: #f3f1f1 !important;background-position: 0 0 !important;background-repeat: repeat !important;}" el_class="mb-default wpex-vc_row-bleed-left" min_height="400px" wpex_bg_size="700px"][vc_column width="1/3" css=".vc_custom_1723899083901{background-image: url(https://omega.enymserver.de/wp-content/uploads/2024/08/ingrid-regehr-start-hg-beistand-seele-scaled.jpg?id=36) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="circle-right"][/vc_column][vc_column width="2/3" css=".vc_custom_1723899071501{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="right top"][vc_column_text align="none" css=".vc_custom_1723889010799{margin-right: 50px !important;}" el_class="quote" width="200px"]„Astrologie ist ein Spiegel zur Selbsterkenntnis.“[/vc_column_text][vc_column_text css=".vc_custom_1723889025113{margin-right: 50px !important;}" el_class="mt-default-quarter" font_size=".8em"]Ingrid Regehr[/vc_column_text][/vc_column][/vc_row]

V1 in June 2024

You can easily import this example. Make sure to change the image in the rows background and in the bleeding column.

@media (min-width: 768px) {
    :is(.wpex-vc_row-bleed-left,.wpex-vc_row-bleed-right) {
        --vp-width-half: calc((100vw - var(--scrollbar-width, 0px)) / 2);
    }

    /* Bleed Left HALF */
    .wpex-vc_row-bleed-left > :is(.vc_vc_column,.vc_column_container):first-child {
        padding: 0;
        margin-left: calc(-1 * (var(--vp-width-half) - 50%)) !important;
        width: calc(50% + (var(--vp-width-half) - 50%));
    }
    /* Bleed Left THIRD*/
    .wpex-vc_row-bleed-left > :is(.vc_vc_column,.vc_column_container.vc_col-sm-8):first-child {
        width: calc(66% + (var(--vp-width-half) - 50%)) !important;
    }
	
    .wpex-vc_row-bleed-left > .vc_vc_column:first-child > .vc_column_container  > .vc_column-inner,
    .wpex-vc_row-bleed-left > .vc_column_container:first-child  > .vc_column-inner {
        padding-left: 0;
    }

    /* Bleed Right HALF */
    .wpex-vc_row-bleed-right.wpex-cols-right > .vc_vc_column:first-child > .vc_column_container,
    .wpex-vc_row-bleed-right:not(.wpex-cols-right) > .vc_vc_column:nth-child(2) > .vc_column_container,
    .wpex-vc_row-bleed-right.wpex-cols-right > .vc_column_container:first-child,
    .wpex-vc_row-bleed-right:not(.wpex-cols-right) > .vc_column_container:nth-child(2) {
        padding: 0 !important;
        margin-right: calc(-1 * (var(--vp-width-half) - 50%)) !important;
        width: calc(50% + (var(--vp-width-half) - 50%));
    }
    /* Bleed Right THIRD */
	.wpex-vc_row-bleed-right.wpex-cols-right >.vc_vc_column:first-child >.vc_column_container, .wpex-vc_row-bleed-right:not(.wpex-cols-right) >.vc_vc_column:nth-child(2) >.vc_column_container, .wpex-vc_row-bleed-right.wpex-cols-right >.vc_column_container:first-child, .wpex-vc_row-bleed-right:not(.wpex-cols-right) >.vc_column_container.vc_col-sm-8 {
        width: calc(66% + (var(--vp-width-half) - 50%)) !important;
    }

    .wpex-vc_row-bleed-right.wpex-cols-right > .vc_vc_column:first-child > .vc_column_container  > .vc_column-inner,
    .wpex-vc_row-bleed-right:not(.wpex-cols-right) > .vc_vc_column:nth-child(2) > .vc_column_container  > .vc_column-inner,
    .wpex-vc_row-bleed-right.wpex-cols-right > .vc_column_container:first-child > .vc_column-inner,
    .wpex-vc_row-bleed-right:not(.wpex-cols-right) > .vc_column_container:nth-child(2) > .vc_column-inner {
        padding-right: 0;
    }
	
}

Import WPBAKERY Template for 2 Bleeding Columns Row

[vc_row full_width="stretch_row" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1718714918820{background-image: url(https://epsilon.enymserver.de/wp-content/uploads/2024/06/bernard-hermant-SxNGG1MJ_IQ-unsplash-scaled.jpg?id=404) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="wpex-vc_row-bleed-left" min_height="800px"][vc_column width="2/3" css=".vc_custom_1718714883454{background-image: url(https://epsilon.enymserver.de/wp-content/uploads/2024/06/CleanShot-2024-06-18-at-00.21.46@2x.png?id=350) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="top center"][/vc_column][vc_column width="1/3"][vcex_heading source="post_title" tag="h1" el_class="weird-heading"][vcex_heading text="Unser Immobilien­­management.`{`br`}`Ihre Erfolgs­geschichte" tag="h2"][/vc_column][/vc_row][vc_row full_width="stretch_row" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1718711129931{background-image: url(https://epsilon.enymserver.de/wp-content/uploads/2024/06/bernard-hermant-SxNGG1MJ_IQ-unsplash-scaled.jpg?id=404) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="mb-default wpex-vc_row-bleed-right" min_height="800px"][vc_column width="1/3" el_class="double-arrow-h" css=".vc_custom_1718711139145{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"][vcex_heading source="post_title" tag="h1" el_class="weird-heading"][vcex_heading text="Unser Immobilien­­management.`{`br`}`Ihre Erfolgs­geschichte" tag="h2"][/vc_column][vc_column width="2/3" css=".vc_custom_1718714894458{background-image: url(https://epsilon.enymserver.de/wp-content/uploads/2024/06/CleanShot-2024-06-18-at-00.21.46@2x.png?id=350) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="top center"][/vc_column][/vc_row]

This newer is a better version than the one provided n the Total Themes discussion section. You can use half row column or thirds layouts. Original Code from here. There is a not so good but simple version explained in this video here (does not follow main stage width but uses custom widths and alignment).

I still sometimes use my custom „exteded“ column version. It requires you to make the row and content full width without padding and give it this class:

• extended

Afterwards just add this CSS and this example. wHat it does is just it makes the row full width and tries to fix the padding again. Works good on bigger devices, but on smaller it needs some fixing.

	@media (min-width: 768px) {

.extended .wpb_column:first-child .vc_column-inner {
		padding-left: calc(100vw / 2 - var(--wpex-container-width) / 2);	

	}
	.extended .wpb_column:last-child .vc_column-inner {
		padding-right: calc(100vw / 2 - var(--wpex-container-width) / 2);	

}

Import WPBAKERY Template for 1 Extended Columns Row

[vc_row full_width="stretch_row_content_no_spaces" content_placement="middle" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1718711231900{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="mb-default extended" min_height="800px"][vc_column width="1/3" el_class="double-arrow-h" css=".vc_custom_1718702621178{background-image: url(https://epsilon.enymserver.de/wp-content/uploads/2024/06/DBK-start-header-propertymanagement-wand.jpg?id=308) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"][vcex_heading source="post_title" tag="h1" el_class="weird-heading"][vcex_heading text="Unser Immobilien­­management.`{`br`}`Ihre Erfolgs­geschichte" tag="h2"][/vc_column][vc_column width="2/3" css=".vc_custom_1718700784985{background-image: url(https://epsilon.enymserver.de/wp-content/uploads/2024/06/CleanShot-2024-06-18-at-00.21.46@2x.png?id=350) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" wpex_bg_position="top right"][/vc_column][/vc_row]

[vc_row full_width="stretch_row_content_no_spaces" equal_height="yes" remove_bottom_col_margin="true" css=".vc_custom_1718654425033{background-color: #45696f !important;}"][vc_column width="1/3" css=".vc_custom_1718657611050{background-image: url(https://epsilon.enymserver.de/wp-content/uploads/2024/06/interim.png?id=277) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="extend-left double-arrow" wpex_bg_size="top right"][/vc_column][vc_column width="2/3" el_class="padding-left pb-pt-default"][vcex_heading text="Gern persönlich für Sie da" tag="h3" color="on-accent" el_class="mb-default-half"][vc_column_text css="" color="on-accent" el_class="whitelink mb-default-quarter"]<strong>Ihr Experte für Property Management:</strong>

<strong>MIRCO XXX
</strong>Geschäftsführer &amp; Co-Founder XXX

<a href="#">E-Mail</a>
<a href="#">Telefon</a>[/vc_column_text][vcex_social_links social_links="%5B%7B%22site%22%3A%22linkedin%22%2C%22link%22%3A%22%23%22%7D%5D" style="default" css=".vc_custom_1718654574961{margin-left: -15px !important;}" size="30px"][/vc_column][/vc_row]