Skip to content

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 accordign class to the row and set the columns and you are good to go. Aailable classes are:

  • wpex-vc_row-bleed-left
  • wpex-vc_row-bleed-right

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]

Dieser Beitrag hat 0 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

An den Anfang scrollen